/* ═══════════════════════════════════════════════════════════════════════════
   carte.css — LE COSTUME DE LA CARTE NADERE.                     [rail 865]
   ═══════════════════════════════════════════════════════════════════════════

   ⚠ CE FICHIER N'EST PAS NOUVEAU : il SORT de `css/style.css`, où il vivait
     depuis toujours, à partir de la ligne « CARTE NADERE — BASE ». Rien n'y a
     été retouché — pas une valeur, pas un sélecteur, pas un ordre. Le banc
     `mesure-865` le prouve en recollant les deux moitiés et en comparant à
     l'ancien fichier, caractère par caractère.

   ── POURQUOI L'AVOIR SORTI ────────────────────────────────────────────────
   Olivier, en voyant l'aperçu du tchat : « la carte sur le tchat est saccadée
   […] malgré le défaut d'affichage c'est plutôt sympa ». Le défaut, c'est que
   l'aperçu dessinait un cadre VIDE : deux images empilées à la main, sans le
   nom, sans les gemmes, sans les stats, sans le texte. Un cadre de carte est
   fait pour être rempli ; montré nu, il a l'air cassé.

   La vraie carte se dessine avec `js/renderer.js`, et ce moteur a besoin de ce
   costume. Il vivait dans `style.css`, mêlé au décor des pages (le fond vert,
   le `h1` géant, la barre d'outils de la Collection) — impossible à prêter au
   salon sans lui prêter aussi le décor, qui écraserait le sien.

   ⚠ ON N'EN A PAS FAIT UNE COPIE. Une deuxième feuille de costume, c'est deux
     feuilles à tenir d'accord — et le jour où Olivier repositionne une gemme,
     elle ne bouge que d'un côté. `style.css` garde le décor, `carte.css`
     porte la carte, et TOUTES les pages qui dessinaient déjà des cartes
     chargent maintenant les deux, dans le même ordre qu'avant.

   ── QUI LE CHARGE ─────────────────────────────────────────────────────────
   ⚠ CINQ PAGES CHARGENT `style.css`, ET ELLES DOIVENT TOUTES CHARGER CELUI-CI
     JUSTE APRÈS : `index.html` (la Collection), `deck-builder.html`,
     `atelier.html`, `marketplace.html`, `title.html`. Plus les deux pages de
     tchat, `multiplayer.html` et `salon-labyrinthe.html`, qui ne prenaient
     pas `style.css` et n'avaient donc pas de carte du tout.

     ⚠ LA PREMIÈRE FOIS, J'EN AVAIS TROUVÉ UNE SEULE — et j'ai cassé la
       Collection, l'Atelier et le Marché d'un coup. J'avais cherché la liste
       dans mon miroir de travail, qui ne contient qu'une PARTIE de son site :
       ni `index.html`, ni `atelier.html`, ni `marketplace.html`. La recherche
       a répondu « une seule page », et c'était vrai — de mon dossier.
       `mesure-865` balaie maintenant TOUTES les pages du dossier et vérifie
       que la suite de feuilles de chacune, mise bout à bout, n'a pas changé
       d'un octet. Une page oubliée ne peut plus passer.

   ⚠ TROIS PAGES PORTENT LEUR PROPRE COPIE du costume, en `<style>` dans le
     HTML (`labyrinthe.html`, `menu.html`, `nadere_multi.html`) — les
     commentaires d'Olivier y disent « garder identique à css/style.css ».
     Elles ne chargent pas cette feuille et ne sont pas touchées. Le jour où
     on voudra fermer cette duplication-là, c'est ce fichier-ci qui les
     remplacera.

   ⚠ LA CARTE EST DESSINÉE À 390 px DE LARGE, et on la met à l'échelle avec
     `transform: scale()`. C'est la recette de `.card-preview` juste en bas :
     les calages internes (gemmes, stats, fenêtre de texte) sont réglés à
     cette largeur-là. Fixer `--card-w` à autre chose déplace tout.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   [rail865] CE QUE LE COSTUME EMPRUNTAIT AU DÉCOR SANS LE DIRE
   ──────────────────────────────────────────────────────────────────────────
   Olivier, en voyant l'aperçu du tchat : « un souci avec les icônes de la
   guilde […] sers-toi de ce qui existe déjà pour te fixer à la taille
   (dimension exactement) ».

   La gemme de guilde sortait de son logement, et pas qu'un peu : sa pastille
   mesurait 67 × 94 px au lieu de 67 × 67, et son dessin 93 × 130 au lieu de
   67 × 94. La pastille demande pourtant `aspect-ratio: 1`.

   ⚠ LA CAUSE N'ÉTAIT PAS DANS LE COSTUME, ELLE ÉTAIT DANS CE QU'IL SUPPOSAIT.
     `css/style.css` pose, tout en haut et pour toute la page,
     `img{ display:block; max-width:100% }`. C'est ce `max-width` qui borne le
     dessin à sa pastille : `.identity-slot img` demande 138 %, la borne le
     ramène à 100 %, et la pastille garde son carré. Les cinq pages du jeu
     chargeaient cette règle sans que personne y pense — les deux pages de
     tchat, non. Le costume marchait donc « par chance », en s'appuyant sur une
     règle de décor qui ne lui appartient pas.

   ⚠ ON LA LUI DONNE, MAIS SEULEMENT CHEZ LUI. Portée par `.nad-card`, elle
     déclare exactement les mêmes valeurs que la règle de page : là où celle-ci
     existe déjà, RIEN ne change (la preuve de cascade du rail 865 le vérifie
     élément par élément, sur les cinq pages). Là où elle manque, la carte est
     enfin la même qu'ailleurs.
   ══════════════════════════════════════════════════════════════════════════ */
.nad-card img {
  display: block;
  max-width: 100%;
}

/* =========================================================
   CARTE NADERE — BASE
   ========================================================= */

.nad-card {
  --card-w: 180px;
  position: relative;
  width: min(100%, var(--card-w));
  aspect-ratio: 3 / 4;
  margin: 0 auto;
  cursor: pointer;
  overflow: hidden;
  border-radius: 22px;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .5));
  transition: transform .18s ease, filter .18s ease;
}

.nad-card:hover {
  transform: translateY(-5px);
  filter: drop-shadow(0 24px 50px rgba(0, 0, 0, .56));
}

.nad-card--large {
  --card-w: min(78vh * .75, 640px);
  cursor: default;
}

.nad-card--large:hover { transform: none; }

.frame-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 4;
}

/* =========================================================
   RARETÉ — pastille style MTG (au niveau de la ligne de type)
   Commune = bronze sobre · Peu commune = argent · Rare = or
   ========================================================= */
.rarity-gem {
  position: absolute;
  top: -1%;
  left: 61.0%;
  width: 9%;
  aspect-ratio: 1;
  z-index: 7;
  pointer-events: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6));
}
.rarity-gem--commune {
  background-image: url("../assets/rarity/rarete-commune.webp");
}
.rarity-gem--peu-commune {
  background-image: url("../assets/rarity/rarete-peu-commune.webp");
}
.rarity-gem--rare {
  background-image: url("../assets/rarity/rarete-rare.webp");
  animation: rarityGemPulse 2.4s ease-in-out infinite;
}
.rarity-gem--unique {
  background-image: url("../assets/rarity/rarete-unique.webp");
  animation: rarityGemPulseUnique 2.4s ease-in-out infinite;
}
@keyframes rarityGemPulse {
  0%, 100% { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)) drop-shadow(0 0 3px rgba(255, 200, 80, .4)); }
  50%      { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)) drop-shadow(0 0 8px rgba(255, 200, 80, .9)); }
}
@keyframes rarityGemPulseUnique {
  0%, 100% { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)) drop-shadow(0 0 3px rgba(255, 70, 70, .45)); }
  50%      { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)) drop-shadow(0 0 9px rgba(255, 70, 70, .95)); }
}


/* =========================================================
   NOM
   ========================================================= */

.name-layer {
  position: absolute;
  z-index: 5;
  left: calc(30.1% + 25px);
  top: calc(2.45% + 3px);
  width: 58.5%;
  height: 6.6%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2%;
  text-align: center;
}

.name-layer h2 {
  margin: 0;
  width: 100%;
  color: #fff6d7;
font-size: clamp(.90rem, calc(var(--card-w, 180px) * 0.056), 1.74rem);
  font-weight: 800;
  line-height: 1.08;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  padding-bottom: 2px;
  text-shadow:
    0 2px 0 #050704,
    2px 0 0 #050704,
    -2px 0 0 #050704,
    0 -2px 0 #050704,
    0 0 12px rgba(255, 241, 184, .24);
}

/* =========================================================
   ICÔNES IDENTITÉ  —  guilde · race · classe
   =========================================================

   ORGANISATION (lecture de haut en bas) :
     A. Socle commun          — taille et rendu des trois médaillons
     B. Ancrages de référence — les 3 positions par défaut
     C. PERSONNAGES           — cadres de guilde : RACE + CLASSE seulement
                                (la guilde EST le cadre : pas de médaillon)
     D. CARTES SKILL          — action / magie / équipement-objet :
                                GUILDE + RACE + CLASSE

   Chaque section a sa sous-partie « réglage » (C.2 pour les personnages,
   D.2 pour les skills) : tous les ajustements se font LÀ, en variables.

   RÈGLE DE RÉGLAGE, valable partout :
     x positif = vers la DROITE  ·  y positif = vers le BAS
     Chaque cadre a ses variables ; les valeurs par défaut reproduisent
     EXACTEMENT le rendu actuel. Toucher une variable ne déplace QUE ce cadre.

   ATTENTION CASCADE : le sélecteur [src$="…"] signifie « se termine par ».
   Donc pyra-frame.png correspond AUSSI à nexus-pyra-frame.png. Les cadres
   bi-guilde doivent donc rester APRÈS les cadres simples (section C.2).
   ========================================================= */

/* ─────────────────────────────────────────────────────────
   A. SOCLE COMMUN
   ───────────────────────────────────────────────────────── */

.identity-slot {
  position: absolute;
  z-index: 5;
  display: grid;
  place-items: center;
}

.identity-slot img {
  width: 138%;
  height: 138%;
  object-fit: contain;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .4));
}

/* ─────────────────────────────────────────────────────────
   B. ANCRAGES DE RÉFÉRENCE
   Les trois positions de base. Tout le reste n'est qu'un décalage
   de quelques pixels par rapport à ces ancrages.
   ───────────────────────────────────────────────────────── */

.identity-slot--guild {              /* haut-gauche  */
  top: calc(3.0% - 8px);
  left: calc(4.05% - 6px);
  width: 17.3%;
  aspect-ratio: 1;
}

.identity-slot--class {              /* sous la guilde */
  top: calc(16.5% - 6px);
  left: calc(4.05% - 6px);
  width: 14.3%;
  aspect-ratio: 1;
}

/* La race n'a pas d'ancrage universel : sa position dépend du cadre
   (personnage ou skill). Voir C.1 et D.1. */

/* ─────────────────────────────────────────────────────────
   C. PERSONNAGES  —  RACE + CLASSE
   Pas de médaillon de guilde : sur un personnage, le cadre lui-même
   (pyra-frame, umbra-frame…) porte l'identité de guilde.
   ───────────────────────────────────────────────────────── */

/* C.1 — Position de repli, commune à tous les cadres de personnage.
   Sert de filet si un nouveau cadre n'a pas encore son réglage en C.2. */
.nad-card--character .identity-slot--race {
  top:  calc(3.0% - 6px + var(--perso-race-y, 0px));
  left: calc(18.2% + 7.0px + var(--perso-race-x, 0px));
  width: 14.3%;
  aspect-ratio: 1;
}

/* C.2 — Réglage par cadre de guilde.
   Chaque cadre ne redéfinit QUE ses variables : la position vient de C.1
   et de C.3, jamais recopiée. Ajuster un cadre = changer un nombre ici.
   Valeurs par défaut = rendu actuel à l'identique. */

/* Nexus */
.nad-card--character:has(.frame-layer[src$="nexus-frame.webp"]) {
  --perso-race-x:  2.8px;   --perso-race-y:  1.0px;
  --perso-class-x: 1.5px;     --perso-class-y: 2.5px;
}
/* Umbra */
.nad-card--character:has(.frame-layer[src$="umbra-frame.webp"]) {
  --perso-race-x:  0.5px;   --perso-race-y:  1.7px;
    --perso-class-y: 1.5px;
}
/* Nym */
.nad-card--character:has(.frame-layer[src$="nym-frame.webp"]) {
  --perso-race-x:  0.8px;   --perso-race-y: -0.0px;
  --perso-class-y: -1px;
}
/* Pyra */
.nad-card--character:has(.frame-layer[src$="pyra-frame.webp"]) {
  --perso-race-x:  2.3px;   --perso-race-y:  0.7px;
    --perso-class-y: 1.5px;
}
/* Virdis (les deux orthographes de fichier existent) */
.nad-card--character:has(.frame-layer[src$="virdis-frame.webp"]),
.nad-card--character:has(.frame-layer[src$="viridis-frame.webp"]) {
  --perso-race-x:  2.3px;   --perso-race-y:  1px;
    --perso-class-x: 1px;  --perso-class-y: -1px;
}

/* Bi-guilde — IMPÉRATIVEMENT après Pyra et Virdis :
   [src$="pyra-frame.webp"] correspond aussi à « nexus-pyra-frame.png ».
   Étant lus en dernier, ces blocs l'emportent. */
.nad-card--character:has(.frame-layer[src$="nexus-pyra-frame.webp"]) {
  --perso-race-x:  1.5px;   --perso-race-y: -2px;
  --perso-class-y: -3px;
}
.nad-card--character:has(.frame-layer[src$="nexus-virdis-frame.webp"]) {
  --perso-race-x:  0.5px;   --perso-race-y:  0px;
}

/* C.3 — Classe des personnages : une seule règle pour tous les cadres. */
.nad-card--character .identity-slot--class {
  top:  calc(16.5% - 6px + var(--perso-class-y, 0px));
  left: calc(4.05% - 6px + var(--perso-class-x, 0px));
}

/* ─────────────────────────────────────────────────────────
   D. CARTES SKILL  —  GUILDE + RACE + CLASSE
   Cadres : action · magie · équipement-objet.
   Ces cartes portent les TROIS médaillons (le cadre ne dit pas la guilde).
   ───────────────────────────────────────────────────────── */

/* D.1 — Positions communes à tous les cadres skill. */
.nad-card--skill .identity-slot--guild {
  top:  calc(3.0% - 8px + var(--skill-guild-y, 0px));
  left: calc(4.05% - 6px + var(--skill-guild-x, 0px));
}
.nad-card--skill .identity-slot--race {
  top:  calc(3.0% - 6px + var(--skill-race-y, 0px));
  left: calc(18.2% + 8.8px + var(--skill-race-x, 0px));
  width: 14.3%;
  aspect-ratio: 1;
}
.nad-card--skill .identity-slot--class {
  top:  calc(16.5% - 8px + var(--skill-class-y, 0px));
  left: calc(4.05% - 8px + var(--skill-class-x, 0px));
}

/* D.2 — Réglage par cadre skill (mêmes variables, valeurs différentes).
   0px partout = la carte suit exactement les positions communes de D.1. */

/* Cadre ACTION — aligné sur les positions communes. */
.nad-card--skill.nad-card--frame-action {
  --skill-guild-x: 1px;   --skill-guild-y: 1px;
  --skill-race-x:  0px;   --skill-race-y:  0px;
  --skill-class-x: 1px;   --skill-class-y: 2.5px;
}

/* Cadre MAGIE */
.nad-card--skill.nad-card--frame-magie {
  --skill-guild-x: 0px;   --skill-guild-y: 0px;
  --skill-race-x:  0px;   --skill-race-y:  0px;
  --skill-class-x: 1.6px;   --skill-class-y: 2.1px;
}

/* Cadre ÉQUIPEMENT / OBJET — le même fichier de cadre sert aux deux types.
   C'est le cadre qui demande le plus de recalage (médaillons légèrement décalés). */
.nad-card--skill.nad-card--frame-objet {
  --skill-guild-x: -1.0px;   --skill-guild-y:  0.5px;
  --skill-race-x:  -1.5px;   --skill-race-y:   0px;
  --skill-class-x:  2.0px;   --skill-class-y:  2.0px;
  /* Taille des trois pastilles (1 = inchangé, 1.05 = +5 %). */
  --objet-icon-scale: 1;
}
.nad-card--skill.nad-card--frame-objet .identity-slot img {
  transform: scale(var(--objet-icon-scale, 1));
}

/* =========================================================
   ILLUSTRATION PERSONNAGE
   ========================================================= */

.art-clip {
  position: absolute;
  z-index: 3;
  left: 5.4%;
  top: 8.7%;
  width: 89.3%;
  height: 74.3%;
  overflow: hidden;
  border-radius: 12% 12% 3.5% 3.5% / 7% 7% 2.5% 2.5%;
}

.nad-card--character .art-clip {
  height: 90%;
}

.character-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  z-index: 0;
}

.character-art {
  position: absolute;
  left: calc(49% + 5px);
  bottom: 0;
  width: calc(79% + 15px);
  max-height: 96%;
  object-fit: contain;
  object-position: center bottom;
  transform: translateX(-50%);
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .55));
  z-index: 1;
}

.nad-card--character .character-art {
  width: calc(96% + 5px);
  max-height: 100%;
  bottom: -2%;
}
/* ══ [rail1006b] UN PERSONNAGE TRAPU PEUT ÊTRE GROSSI SUR LA CARTE ═══════════
   Olivier, sur Rudo : « il paraît tout petit à côté, on dirait un petit nain de
   jardin ». Son illustration remplit pourtant son fichier : c'est le DESSIN qui
   est large et court, et la fenêtre de texte lui cache les jambes — il ne reste
   qu'un buste bas. `imageLayout.artScale` (ex. 1.22) le grossit sur la carte
   (grille, deck-builder, aperçu, main), ancré EN HAUT (`artOrigin`, défaut
   `center top`) : la tête reste sous le bandeau du nom, le surplus part sous la
   fenêtre de texte. Sans artScale : scale(1), rien ne bouge. Les gros dragons
   (bigArt) gardent leur règle (!important) ; la zone de combat a la sienne
   (artZoom). */
.nad-card--character .character-art {
  transform: translateX(-50%) translateY(var(--art-shift-y, 0%)) scale(var(--art-scale, 1));
  transform-origin: var(--art-origin, center top);
}

/* GROS DRAGONS (bigArt) sur la CARTE (collection, deck-builder, board…) — règle UNIVERSELLE.
   Une image de dragon rend le sujet minuscule dans le cadre (décor/marge autour) : on l'AGRANDIT
   via scale pour qu'il ait une belle taille. Le scale est réglable par carte via
   --big-art-card-scale (défaut 1.9). Ne s'applique PAS en combat (.cz-card-wrap y est plus
   spécifique et garde le scale combat). Pour un nouveau gros dragon : bigArt:true suffit. */
.nad-card[data-big-art="true"] .character-art {
  max-height: none !important;
  width: 100% !important;
  height: auto !important;
  transform: translateX(-50%) scale(var(--big-art-card-scale, 1.9)) !important;
  transform-origin: center bottom !important;
}

/* =========================================================
   ILLUSTRATION SKILL
   Les cartes Action / Magie / Équipement ont l'image sous le cadre.
   ========================================================= */

.nad-card--skill .frame-layer {
  z-index: 2;
}

.nad-card--skill .identity-slot,
.nad-card--skill .name-layer,
.nad-card--skill .text-window {
  z-index: 6;
}

.nad-card--skill .art-clip {
  z-index: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 22px;
}

/* ══ [rail966] LE CADRAGE D'UNE ILLUSTRATION DE SKILL EST RÉGLABLE ═════════
   Olivier : « si j'ai une illustration de skill qui est mal ajustée, je dois
   faire comment pour la réparer ? » — et jusqu'ici : rien, sinon rouvrir le
   fichier image et le recadrer à la main.
   Les PERSONNAGES ont `imageLayout` depuis toujours (169 cartes s'en servent :
   artZoom, artX, artBottom, artMaxH). Les SKILLS n'avaient rien : leur cadrage
   était écrit en dur, ici et dans trois autres règles.
   ⚠ POUR UNE IMAGE EN `cover`, LE BON BOUTON N'EST PAS LE ZOOM, C'EST LA
     FENÊTRE. Une illustration de skill remplit son cadre : ce qu'on veut
     déplacer, c'est la PARTIE VISIBLE de l'image — `object-position`. D'où
     `artPos`. Et `artFit:'contain'` pour celle qu'il ne faut pas rogner du tout.
   ⚠ LA VALEUR PAR DÉFAUT DE CHAQUE RÈGLE EST CELLE D'AVANT : sans imageLayout
     sur la carte, rien ne bouge nulle part. Chaque contexte garde son cadrage
     propre (la grille cadre en bas, la zone de combat au centre) — la variable
     ne fait que l'ouvrir au réglage. */
.nad-card--skill .skill-art {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: var(--art-zoom, 99%);
  height: var(--art-zoom, 99%);
  max-height: none;
  object-fit: var(--art-fit, cover);
  object-position: var(--art-pos, center bottom);
  transform: translateX(-50%);
  filter: none;
}

.nad-card--skill .stats-column {
  display: none;
}

/* =========================================================
   FENÊTRE TEXTE
   ========================================================= */

.text-window {
  position: absolute;
  z-index: 6;
  left: max(6px, calc(18.2% - 53px));
  bottom: max(4px, calc(4.2% - 4px));
  width: 72.5%;
  min-height: 21.8%;
  padding: 3.1% 3.4%;
  border: 1px solid rgba(255, 184, 82, .46);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(116, 70, 19, .22), rgba(0, 0, 0, .62)),
    linear-gradient(180deg, rgba(255, 218, 155, .07), rgba(255, 154, 45, .035));
  backdrop-filter: blur(2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 225, 170, .22),
    inset 0 0 18px rgba(255, 161, 45, .08),
    0 9px 20px rgba(0, 0, 0, .32);
}

.text-window p {
  margin: 0;
  color: #fff;
  font-size: clamp(.61rem, 1.68vw, .77rem);
  font-weight: 700;
  line-height: 1.13;
  text-shadow:
    1.1px 0 0 #000,
    -1.1px 0 0 #000,
    0 1.1px 0 #000,
    0 -1.1px 0 #000,
    0 2px 6px rgba(0, 0, 0, .85);
}

.text-window p + p { margin-top: 8px; }

.text-window strong { color: #ffba57; }

/* ══ [rail1874] LES PALIERS D'ÂGE DES ACTIONS TEMPS (style B, validé par Olivier le 03/10) ═══════════════════════
   Un paragraphe par palier (nadereCapaciteEnPaliers) : la pastille porte le sablier du médaillon d'Âge et le palier,
   le texte suit. Tout est en em : la taille suit celle du texte de la carte, de la main au zoom. Fenêtre marron, sans
   contour (Olivier : « sans mettre de contour, ça me semble plus juste »). En combat : --actif s'allume en bleu Nym,
   --eteint s'assombrit légèrement ; .capacite--remplacee assombrit la capacité qu'un palier remplace. */
.text-window p.palier-age{
  display:flex; align-items:flex-start; gap:.5em;
  margin-top:.26em;
  padding:.15em .5em .15em .22em;
  border:1px solid rgba(150,205,255,.30); border-radius:.66em;
  background:linear-gradient(90deg, rgba(22,44,84,.50), rgba(0,0,0,.22));
}
.text-window p.palier-age .palier-age-tag{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:.21em;
  height:1.5em; padding:0 .5em 0 .14em; border-radius:999px;
  border:1px solid rgba(170,215,255,.60); background:linear-gradient(180deg,#2c4b7c,#152643);
  color:#d6ecff; font-family:'Cinzel',serif; font-size:.91em; font-weight:900; letter-spacing:.01em; line-height:1;
}
.text-window p.palier-age .palier-age-sablier{ display:inline-block; flex:0 0 auto; width:1.32em; height:1.32em; background:url("../assets/stats/age.webp") center / contain no-repeat; }
.text-window p.palier-age .palier-age-txt{ padding-top:.08em; }
.text-window p.palier-age--actif{
  border-color:rgba(140,225,255,.98);
  background:linear-gradient(90deg, rgba(36,112,176,.62), rgba(10,42,84,.48));
  box-shadow:0 0 .85em rgba(80,196,255,.62), inset 0 0 .65em rgba(130,224,255,.26);
}
.text-window p.palier-age--actif .palier-age-tag{
  background:radial-gradient(circle at 50% 30%, #c6f2ff, #45b6ef 58%, #1b6099); color:#04192b; text-shadow:none;
  border-color:#d8f6ff; box-shadow:0 0 .71em rgba(130,224,255,.95);
}
.text-window p.palier-age--eteint,
.text-window p.capacite--remplacee{ opacity:.55; filter:grayscale(.55) brightness(.85); }
.text-window .palier-age-x{
  display:inline-block; margin-left:.3em; padding:0 .38em; border-radius:.7em; font-size:.86em; line-height:1.25;
  background:rgba(255,186,87,.20); border:1px solid rgba(255,196,110,.75); color:#ffe0a8; text-shadow:0 1px 2px #000;
}

.type-line {
  color: #ffe4b5 !important;
  font-size: clamp(.71rem, 1.84vw, .85rem) !important;
  letter-spacing: .02em;
}

.enchainement-line {
  color: #fff !important;
  font-style: italic;
  margin-top: 8px;
}

/* Personnages : taille conservée. */
.nad-card--character .text-window {
  left: max(6px, calc(18.2% - 53px));
  bottom: max(4px, calc(4.2% - 4px));
  width: 72.5%;
  min-height: 21.8%;
  padding: 3.1% 3.4%;
}

/* Actions / Magies / Équipements : fenêtre plus large et adaptable. */
.nad-card--skill .text-window {
  z-index: 7;
  left: 5.4%;
  right: 5.6%;
  width: auto;
  bottom: 4.1%;
  min-height: 14%;
  height: auto;
  padding: 3.3% 3.8%;
  border-color: rgba(255, 184, 82, .56);
  background:
    linear-gradient(180deg, rgba(142, 86, 20, .30), rgba(0, 0, 0, .66)),
    linear-gradient(180deg, rgba(255, 222, 160, .10), rgba(255, 154, 45, .045));
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 177, .25),
    inset 0 0 22px rgba(255, 161, 45, .10),
    0 10px 22px rgba(0, 0, 0, .36);
}

.nad-card--skill .text-window p {
  font-size: clamp(.62rem, 1.72vw, .80rem);
  line-height: 1.15;
}

.nad-card--skill .type-line {
  font-size: clamp(.78rem, 1.94vw, .92rem) !important;
}

/* Restrictions visibles dans la collection et le deckbuilding. */
.restriction-line {
  color: #ffe2a6 !important;
  font-style: italic;
  opacity: .96;
}

.nad-card--skill .restriction-line {
  font-size: clamp(.30rem, calc(var(--card-w, 180px) * .043), .68rem) !important;
  line-height: 1.04 !important;
}

/* Références cliquables dans les textes. */
.card-ref {
  appearance: none;
  border: 0;
  padding: 0 .12em;
  color: #e7d28a;
  background: transparent;
  font: inherit;
  font-weight: 900;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  cursor: pointer;
  text-shadow:
    1.1px 0 0 #000,
    -1.1px 0 0 #000,
    0 1.1px 0 #000,
    0 -1.1px 0 #000,
    0 2px 6px rgba(0, 0, 0, .85);
}

.card-ref:hover { color: #fff1b8; }

/* =========================================================
   STATS PERSONNAGES
   ========================================================= */

.stats-column {
  position: absolute;
  z-index: 6;
  right: 2.4%;
  top: calc(24.8% + 85px);
  width: 16.2%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.stat-chip {
  position: relative;
  min-height: 76px;
  height: 76px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.stat-chip + .stat-chip { margin-top: -4px; }

.stat-chip img {
  position: relative;
  left: 8px;
  width: 92px;
  height: 97px;
  object-fit: contain;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .35));
}

.stat-chip span {
  position: absolute;
  top: calc(50% + 5px);
  left: calc(40% - 10px);
  width: 46px;
  text-align: center;
  transform: translateY(-50%);
  color: #fff;
  font-size: 2.05rem;
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.05em;
  text-shadow:
    2px 0 0 #000,
    -2px 0 0 #000,
    0 2px 0 #000,
    0 -2px 0 #000,
    0 4px 10px rgba(0, 0, 0, .85);
}

.stat-chip--attaque span {
  font-size: 1.58rem;
  top: calc(50% + 8px);
  left: calc(53% - 22px);
  width: 58px;
  text-align: center;
}

.stat-chip--vie span {
  top: calc(50% + 8px);
}

/* =========================================================
   MODAL COLLECTION / MARKET
   La structure visuelle de la modal est dans ui.css.
   Ici, on garde uniquement la taille interne de la carte.
   ========================================================= */

.modal .nad-card,
#modal-card-container .nad-card {
  --card-w: min(78vh * .75, 640px) !important;
  width: min(78vh * .75, 640px) !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 auto !important;
  zoom: 1 !important;
  transform: none !important;
}

/* [rail1076] La modale remontait les stats de 64px « pour éviter le cœur coupé » : c'était la
   colonne en pixels qui débordait d'une carte plus petite que 390 px. Proportionnelle (bloc
   rail1076, en fin de fichier), elle tient — à la même place que sur la tuile. */
.modal .nad-card--character .stats-column,
#modal-card-container .nad-card--character .stats-column {
  top: calc(24.8% + var(--card-w) * 0.217949) !important;   /* 85px à 390px */
}

/* =========================================================
   PREVIEW AU SURVOL
   Utilisé notamment par deckbuilding / hover.
   ========================================================= */

.card-preview {
  position: fixed;
  z-index: 80;
  width: calc(390px * .67) !important;
  height: calc((390px * 4 / 3) * .67) !important;
  overflow: visible !important;
  pointer-events: none;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .62));
}

.card-preview[aria-hidden="true"] {
  display: none;
}

.card-preview .nad-card {
  --card-w: 390px !important;
  width: 390px !important;
  min-width: 390px !important;
  max-width: none !important;
  margin: 0 !important;
  zoom: 1 !important;
  transform: scale(.67) !important;
  transform-origin: top left !important;
}

.card-preview .nad-card--skill .name-layer h2 {
  font-size: clamp(.90rem, calc(var(--card-w, 390px) * 0.056), 1.74rem) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: center !important;
  padding-bottom: 2px !important;
}

.card-preview .nad-card--skill .identity-slot--class {
  top: calc(16.5% - 8px) !important;
  left: calc(4.05% - 8px) !important;
  width: 14.3% !important;
}

.card-preview .nad-card--skill .identity-slot img {
  width: 138% !important;
  height: 138% !important;
}

/* =========================================================
   RESPONSIVE CARTE
   Les media queries de layout Collection sont dans ui.css.
   ========================================================= */

@media (max-width: 760px) {
  .app-shell {
    width: min(100% - 18px, 430px);
    padding-top: 18px;
  }

  .page-header {
    display: block;
    padding: 20px;
  }

  .card-count { margin-top: 14px; }

  .toolbar {
    grid-template-columns: 1fr;
  }

  /* ⚠ [rail1076] PLUS DE RETOUCHES DE CARTE ICI. Ce bloc déplaçait sur les petits écrans le nom,
     les médaillons (110 %), la race, la fenêtre de texte (.64rem), la colonne des stats et ses
     pastilles (60 px, chiffres à droite) : c'était le « légèrement décalé sur mobile » que le
     fabricant de tuiles contournait en se donnant une fenêtre de PC. Le calage du PC est celui de
     tout le monde : la grille montre les mêmes cartes que les tuiles, et la grande carte suit sa
     taille (bloc rail1076, en fin de fichier). Ne restent ici que la page et la modale. */

  .modal .nad-card,
  #modal-card-container .nad-card {
    --card-w: min(92vw, 430px) !important;
    width: min(92vw, 430px) !important;
  }

  .card-preview {
    display: none !important;
  }
}

/* Collection — quantités et outil de test */
.collection-dev-footer{display:flex;flex-direction:column;gap:8px;padding:10px 14px 14px;}
.collection-dev-btn{
  width:100%;border:1px solid rgba(216,188,103,.35);border-radius:10px;
  background:linear-gradient(180deg,rgba(216,188,103,.18),rgba(84,62,22,.22));
  color:var(--c-gold,#d8bc67);font-family:'Cinzel',serif;font-size:.62rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;padding:10px 12px;cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.22);transition:filter .15s,transform .15s,border-color .15s;
}
.collection-dev-btn:hover{filter:brightness(1.12);transform:translateY(-1px);border-color:rgba(216,188,103,.65);}
.collection-qty-badge{
  position:absolute;top:8px;right:8px;z-index:20;pointer-events:none;
  min-width:30px;text-align:center;padding:3px 8px;border-radius:999px;
  background:rgba(10,14,22,.82);border:1px solid rgba(216,188,103,.45);
  color:var(--c-gold,#d8bc67);font-family:'Cinzel',serif;font-size:.68rem;font-weight:900;
  box-shadow:0 4px 12px rgba(0,0,0,.35);
}

/* ============================================================================
 * Cartes FOIL (holographiques) — Phase 1
 * Effet 100 % CSS, clippé par .nad-card { overflow:hidden }. Réutilisable
 * partout où une carte est rendue (collection, deck-builder, combat).
 * ==========================================================================*/
.nad-card--foil { position: relative; }

/* Couche arc-en-ciel diffuse en fondu coloré sur toute la carte. */
.nad-card--foil .foil-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    rgba(255, 0, 128, 0.22) 0%,
    rgba(255, 196, 0, 0.20) 20%,
    rgba(0, 255, 170, 0.20) 40%,
    rgba(0, 170, 255, 0.22) 60%,
    rgba(170, 0, 255, 0.22) 80%,
    rgba(255, 0, 128, 0.22) 100%
  );
  background-size: 300% 300%;
  mix-blend-mode: color-dodge;
  opacity: 0.3;
  animation: foilHue 6s ease-in-out infinite;
}

/* Bande lumineuse qui balaie la carte (reflet holo). */
.nad-card--foil .foil-sheen {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.55) 48%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0.55) 52%,
    transparent 65%
  );
  background-size: 250% 250%;
  mix-blend-mode: soft-light;
  animation: foilSheen 6s ease-in-out infinite;
}

/* Léger liseré doré pour signaler la carte premium. */
.nad-card--foil::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px rgba(255, 226, 150, 0.55),
              inset 0 0 16px rgba(255, 214, 120, 0.35);
}

@keyframes foilHue {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes foilSheen {
  0%   { background-position: 120% 0%; }
  55%  { background-position: -20% 0%; }
  100% { background-position: -20% 0%; }
}

@media (prefers-reduced-motion: reduce) {
  .nad-card--foil .foil-overlay,
  .nad-card--foil .foil-sheen { animation: none; }
}

/* ══ [rail1007] LE FOIL EN LETTRES ═════════════════════════════════════════
   Olivier : « le badge Foil sur les cartes est pas très joli … je préférerais
   qu'on applique cette image à la place du texte foil ». La pilule dorée
   s'efface : le ruban ne porte plus que son image (assets/stats/foil.webp,
   les lettres irisées, dessinées par NadereFoil.badgeHtml) et, s'il y a
   plusieurs feuilles dans la pile, le « ×N » du rail 440 en petit à côté.
   Même place qu'avant (en haut à gauche de la tuile), même classe. */
.card-tile .foil-ribbon {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0;
  border-radius: 0;
  font-family: Cinzel, serif;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff3cf;
  text-shadow: 0 0 2px #000, 0 1px 2px rgba(0, 0, 0, .9);
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55));
}
.card-tile .foil-ribbon .foil-lettres {
  display: block;
  height: 16px;
  width: auto;
  max-width: none;
}

/* ══ [rail1053] LES COMPTEURS DE LA TUILE — deux pilules, en haut à droite ═══════════════════
   Olivier : « le texte FOIL n'est pas adapté pour la collection et le deck-builder … plus
   lisible et mieux organisé ». L'éventail (normales) et le médaillon (foil), chacun avec son
   « xN », empilés. Les tuiles font 109 px (390 × .28) : tout est calibré pour ça. */
.card-tile .nad-compteurs,
.db-card-wrap .nad-compteurs {
  position: absolute;
  top: -2px;    /* [rail1054] « vraiment dans le coin » (Olivier) : elles mordent le coin de la carte */
  right: -2px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  pointer-events: none;
}
.nad-compteur {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px 2px 3px;
  border-radius: 999px;
  background: rgba(12, 24, 48, .92);
  border: 1px solid rgba(216, 188, 103, .55);
  font-family: Cinzel, serif;
  font-size: .68rem;
  font-weight: 800;
  line-height: 1;
  color: #fff3cf;
  box-shadow: 0 5px 12px rgba(0, 0, 0, .3);
  white-space: nowrap;
}
.nad-compteur img {
  display: block;
  width: 17px;
  height: 17px;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
}
.nad-compteur b { font-weight: 800; }
.nad-compteur--foil { border-color: rgba(230, 200, 255, .6); }
/* le médaillon seul, à la place des lettres FOIL sur une mini du deck */
.foil-medaillon { display: block; width: 14px; height: 14px; object-fit: contain; }

/* Tuile « carte dorée » (consommable) dans la collection. */
.foil-token-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 200px;
  padding: 18px;
  border-radius: 22px;
  text-align: center;
  color: #fff3cf;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255, 226, 150, 0.18), rgba(12, 24, 48, 0.9)),
    linear-gradient(160deg, rgba(40, 30, 8, 0.6), rgba(8, 16, 34, 0.85));
  border: 1px solid rgba(216, 188, 103, 0.5);
  box-shadow: inset 0 0 24px rgba(255, 214, 120, 0.18);
}
.foil-token-tile .foil-token-emblem {
  width: 78px;
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
}
.foil-token-tile .foil-token-label {
  font-family: Cinzel, serif;
  font-weight: 700;
  font-size: 0.86rem;
  color: #ffe9a8;
}
.foil-token-tile .foil-token-count {
  font-family: Cinzel, serif;
  font-weight: 700;
  font-size: 1.35rem;
  color: #fff;
}
.foil-token-tile .foil-token-hint {
  font-size: 0.68rem;
  color: rgba(255, 243, 207, 0.7);
  line-height: 1.35;
  max-width: 200px;
}

/* ── FOIL : reflets holographiques posés directement sur l'illustration ──
   On ne modifie pas le fichier image : on superpose un dégradé arc-en-ciel et
   une bande lumineuse, clippés à la fenêtre d'illustration (.art-clip), donc
   visibles aussi bien sur les personnages (.character-art) que les skills
   (.skill-art). Le tout reste SOUS le cadre de la carte. */
.nad-card--foil .art-clip { isolation: isolate; }

.nad-card--foil .art-clip::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    rgba(255, 0, 128, 0.45) 0%,
    rgba(255, 196, 0, 0.40) 18%,
    rgba(0, 255, 170, 0.42) 38%,
    rgba(0, 170, 255, 0.45) 58%,
    rgba(170, 0, 255, 0.45) 78%,
    rgba(255, 0, 128, 0.45) 100%
  );
  background-size: 300% 300%;
  mix-blend-mode: color-dodge;
  opacity: 0.5;
  animation: foilHue 6s ease-in-out infinite;
}

.nad-card--foil .art-clip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    transparent 38%,
    rgba(255, 255, 255, 0.55) 49%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(255, 255, 255, 0.55) 51%,
    transparent 62%
  );
  background-size: 250% 250%;
  mix-blend-mode: soft-light;
  animation: foilSheen 6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .nad-card--foil .art-clip::after,
  .nad-card--foil .art-clip::before { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   [rail943] LA TUILE PEINT LÉGER — le défilement de la collection sur téléphone.
   Olivier (3/09) : « le scrolling dans le menu collection n'est pas fluide d'une
   rangée à une autre, la rangée disparaît, apparaît. » C'est le navigateur qui
   n'a pas le temps de PEINDRE une rangée avant qu'elle entre à l'écran.
   Chaque tuile est une carte entière à l'échelle .28 — et une carte porte, pour
   être belle en grand : une ombre portée floutée de 40 px sur TOUTE la carte
   (`filter: drop-shadow`, une surface hors écran + un flou par tuile), un flou
   d'arrière-plan sur le cadre de texte (`backdrop-filter`), des ombres sur
   chaque icône, des ombres de texte multicouches, et la gemme de rareté qui
   PULSE sans fin en animant un `filter` — vingt-quatre gemmes qui repeignent
   leur tuile à chaque image, même à l'arrêt. Sur un téléphone, vingt-quatre
   fois ça ne tient pas dans une image de défilement.
   Ici, dans les grilles (collection, marché, deck-builder), on retire ce qui ne
   se voit pas à 109 px et coûte cher : la carte garde son dessin, son cadre,
   ses chiffres ; elle perd des flous invisibles. Le zoom, la fiche, l'aperçu et
   le combat ne sont pas concernés : ils ne passent pas par `.card-scale` de
   ces grilles.
   ⚠ `html[data-tuiles-lourdes]` rétablit tout — c'est le témoin du banc 943. */
html:not([data-tuiles-lourdes]) .collection-grid .card-scale > .nad-card,
html:not([data-tuiles-lourdes]) .deck-collection-grid .card-scale > .nad-card {
  filter: none !important;            /* l'ombre floutée de 40 px × 24 */
  transition: none !important;
}
html:not([data-tuiles-lourdes]) .collection-grid .card-scale > .nad-card .rarity-gem,
html:not([data-tuiles-lourdes]) .deck-collection-grid .card-scale > .nad-card .rarity-gem {
  animation: none !important;         /* la gemme qui pulse : un repaint par image, × 24 */
  filter: none !important;
}
html:not([data-tuiles-lourdes]) .collection-grid .card-scale > .nad-card .identity-slot img,
html:not([data-tuiles-lourdes]) .deck-collection-grid .card-scale > .nad-card .identity-slot img {
  filter: none !important;
}
html:not([data-tuiles-lourdes]) .collection-grid .card-scale > .nad-card .text-window,
html:not([data-tuiles-lourdes]) .deck-collection-grid .card-scale > .nad-card .text-window {
  backdrop-filter: none !important;   /* le flou d'arrière-plan : le plus cher de tous */
  box-shadow: none !important;
}
html:not([data-tuiles-lourdes]) .collection-grid .card-scale > .nad-card *,
html:not([data-tuiles-lourdes]) .deck-collection-grid .card-scale > .nad-card * {
  text-shadow: none !important;       /* invisible à l'échelle .28 */
}
html:not([data-tuiles-lourdes]) .collection-grid .card-scale > .nad-card--foil .foil-overlay,
html:not([data-tuiles-lourdes]) .collection-grid .card-scale > .nad-card--foil .foil-sheen,
html:not([data-tuiles-lourdes]) .deck-collection-grid .card-scale > .nad-card--foil .foil-overlay,
html:not([data-tuiles-lourdes]) .deck-collection-grid .card-scale > .nad-card--foil .foil-sheen {
  animation: none !important;         /* le reflet holo reste, il ne balaie plus en boucle */
}

/* ══════════════════════════════════════════════════════════════════════════
   [rail945] CE QUE SON TÉLÉPHONE A CHOISI — l'ombre des illustrations et une
   couche par carte.
   Après le rail 943, Olivier (Redmi Note 11) : « il y a encore un décalage, je
   suis encore un peu saccadé […] les images sont coupées, elles disparaissent
   […] c'est plus structurel. » Mon Chromium de test peint une page de tuiles en
   30 ms : il ne sentait rien. On a donc mis le banc SUR son téléphone
   (`index.html?mesure=1`, js/mesure-mobile.js) : six interrupteurs, un par
   hypothèse, qu'il a basculés au pouce en défilant. Verdict : « Ombres art +
   Couches, ça devient fluide. » Les textes, le foil, le défilement dans la
   page n'ont rien changé — on ne les touche pas.
   ① L'OMBRE DES ILLUSTRATIONS. Le rail 943 avait retiré l'ombre de LA CARTE ;
      restait `.character-art { filter: drop-shadow(0 16px 22px …) }` — un flou
      calculé sur la silhouette du personnage, pour CHAQUE tuile, et recalculé
      pour chaque morceau de 256 px que la tuile chevauche. Même chose, en
      plus petit, sur les trois icônes de stats. À 109 px, personne ne voit
      cette ombre ; la puce graphique du téléphone, elle, la paie 21 fois.
   ② UNE COUCHE PAR CARTE (`will-change: transform`). Sans elle, la grille est
      UNE surface : à chaque défilement, le moteur repeint les morceaux qui
      entrent à l'écran — et quand il n'a pas fini, l'image est « coupée ».
      Avec elle, chaque tuile est peinte UNE fois dans sa propre couche, et
      défiler ne fait plus que la déplacer. Sur téléphone seulement : le PC
      est déjà fluide (Olivier : « sur PC, c'est beaucoup plus fluide »), et
      des couches par tuile y changeraient le rendu du texte sans rien gagner.
   Le zoom, la fiche et le combat gardent leurs ombres : la règle vit sous
   `.card-scale` des grilles, derrière le même témoin que le rail 943. */
html:not([data-tuiles-lourdes]) .collection-grid .card-scale > .nad-card .character-art,
html:not([data-tuiles-lourdes]) .collection-grid .card-scale > .nad-card .skill-art,
html:not([data-tuiles-lourdes]) .collection-grid .card-scale > .nad-card .stat-chip img,
html:not([data-tuiles-lourdes]) .deck-collection-grid .card-scale > .nad-card .character-art,
html:not([data-tuiles-lourdes]) .deck-collection-grid .card-scale > .nad-card .skill-art,
html:not([data-tuiles-lourdes]) .deck-collection-grid .card-scale > .nad-card .stat-chip img {
  filter: none !important;            /* l'ombre floutée de la silhouette, × 21 */
}
/* ⚠ [rail947] LA COUCHE PAR CARTE EST RETIRÉE. Le rail 945 posait
   `will-change: transform` sur chaque .card-scale de téléphone : « une couche
   par tuile, peinte une fois, déplacée ensuite ». Avec les cartes complètes,
   Olivier l'avait jugée utile ; avec les TUILES (une image par carte), la
   mesure a dit l'inverse : 78 % d'images ratées avec les couches, 52 % sans
   (« c'est mieux, les cartes ne clignotent plus »). La raison : 21 couches,
   c'est 21 surfaces découpées en morceaux, chacun un passage séparé sur la
   puce graphique — une puce Adreno déteste ça. Sans couches, la grille est UNE
   surface, peinte en larges bandes. La règle reste écrite ici, désactivée,
   pour que personne ne la remette « pour aller plus vite ». */
@media (max-width: 1000px), (pointer: coarse) {
  html:not([data-tuiles-lourdes]) .collection-grid .card-scale,
  html:not([data-tuiles-lourdes]) .deck-collection-grid .card-scale {
    will-change: auto;
  }
  /* et le survol n'existe pas au doigt : la carte ne doit pas sauter de 8 px
     quand on pose le pouce pour défiler (une transformation de plus à peindre) */
  .collection-grid .card-tile:hover .card-scale,
  .deck-collection-grid .card-tile:hover .card-scale {
    transform: scale(var(--mini-scale)) !important;
  }
  /* [rail948] les petites ombres floutées de l'habillage (boutons d'action,
     pastille de quantité, ruban foil, badge solo) : une ombre floue par
     élément, × 21 cartes, repeinte à chaque défilement. Le bouton « Sans
     ombres UI » du panneau de mesure les retirait ; Olivier : « c'est un petit
     peu le mieux ». Gravé ici pour le doigt. `.collection-grid .card-act`
     porte son ombre dans collection.css (chargé après) : même sélecteur ici,
     avec !important, pour la battre. */
  .collection-grid .card-act,
  .collection-grid .card-actions,
  .collection-grid .collection-qty-badge,
  .card-tile .foil-ribbon,
  .card-tile .nad-compteur,
  .card-tile .nad-compteur img,
  .card-tile .solo-badge {
    box-shadow: none !important;
    filter: none !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   [rail947] LA TUILE — une image, un nom, le foil par-dessus.
   `renderNadereTuile` (renderer.js) remplace, dans les grilles, la carte de
   trente éléments par UNE image déjà dessinée (assets-tuile/, au calage du
   PC, ombres et contours compris) + le nom en HTML + les couches foil. Voir
   le commentaire de renderer.js et scripts/faire-les-tuiles.js.
   ⚠ La tuile est dessinée avec le calage PC : le nom HTML doit se poser au
     même endroit sur téléphone — d'où les mêmes valeurs que `.name-layer`
     hors media query, répétées ici pour battre le bloc `@media (max-width:
     760px)` qui les déplace sur petit écran. */
.nad-card--tuile { background: transparent; overflow: visible; }   /* les coins de l'image sont déjà transparents : rien à découper */
.nad-card--tuile .tuile-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; object-fit: fill; z-index: 1;
}
.nad-card--tuile .name-layer {
  left: calc(30.1% + 25px) !important;
  top: calc(2.45% + 3px) !important;
  width: 58.5% !important;
  height: 6.6% !important;
}
.nad-card--tuile .name-layer h2 {
  font-size: clamp(.90rem, calc(var(--card-w, 180px) * 0.056), 1.74rem) !important;
  line-height: 1.08 !important;
  /* le seul texte encore vivant sur la tuile : il garde son contour d'origine
     (une ligne courte par carte, ça se peint vite) — le rail 943 le retirait
     avec tous les autres, quand il y avait deux cents caractères par carte */
  text-shadow:
    0 2px 0 #050704,
    2px 0 0 #050704,
    -2px 0 0 #050704,
    0 -2px 0 #050704,
    0 0 12px rgba(255, 241, 184, .24) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   [rail1076] LE COSTUME DE LA GRANDE CARTE SUIT SA TAILLE
   ──────────────────────────────────────────────────────────────────────────
   Olivier, 10/09 : « sur mobile, les icônes du coin gauche sont un peu
   décalées, les quatre statistiques mal alignées » ; « quand un adversaire
   joue ses cartes, les icônes sont toujours décalées ».

   Le gabarit mélange deux unités : les cadres en pourcentages, les calages
   en PIXELS (médaillons `calc(3% - 8px)`, colonne des stats `+85px`,
   pastilles de 76 px, chiffres en rem, texte en vw). Tout est calé pour une
   carte de 390 px — la tuile, l'aperçu, la modale de vente, toutes rendues à
   390 px puis réduites par transform. Rendue à une AUTRE largeur (vue
   agrandie : 400, 340, 300 ou 262 px selon l'écran ; carte révélée du
   combat : 260 px), la carte garde ses pixels et tout glisse.

   Ici, chaque pixel devient une fraction de la largeur de la carte,
   calibrée pour redonner EXACTEMENT la valeur d'aujourd'hui à 390 px (le
   rail 288 l'avait fait pour les seules stats de l'aperçu du deck-builder).
   À 390 px, rien ne bouge ; ailleurs, la carte est celle de 390 px mise à
   l'échelle. Les réglages par cadre (--perso-race-x…, 1 à 3 px) restent en
   pixels : moins d'un pour cent à ces tailles.
   Portée : toute carte `.nad-card--large` (vue agrandie, aperçu au survol, modale, deck-builder).
   ══════════════════════════════════════════════════════════════════════════ */

.nad-card--large .name-layer {  /* 25px, 3px */
  left: calc(30.1% + var(--card-w) * 0.064103);
  top: calc(2.45% + var(--card-w) * 0.007692);
}
.nad-card--large .name-layer h2 {  /* 21,84px (= 390 × .056), 2px, ombres 2px et 12px */
  font-size: calc(var(--card-w) * 0.056);
  padding-bottom: calc(var(--card-w) * 0.005128);
  text-shadow: 0 calc(var(--card-w) * 0.005128) 0 #050704, calc(var(--card-w) * 0.005128) 0 0 #050704, calc(var(--card-w) * -0.005128) 0 0 #050704, 0 calc(var(--card-w) * -0.005128) 0 #050704, 0 0 calc(var(--card-w) * 0.030769) rgba(255, 241, 184, .24);
}
/* ══ [rail1865] LE NOM QUI RÉTRÉCIT POUR TENIR — voir nadereNomH2 (renderer.js, nadere_multi.html) ══
   Seul un nom long (14 caractères et plus) porte la classe : sa taille est bornée à la largeur de son
   cartouche (100cqi), mesurée en « em » de sa police. En grand, sur une carte à deux faces, il laisse la
   place de la molette de retournement (30 px). Un nom court ne bouge pas d'un pixel. */
.name-layer h2.nad-nom-long { container-type: inline-size; }
.name-layer h2.nad-nom-long .nad-nom-ajuste { font-size: min(1em, calc(100cqi / var(--nom-em, 1))); }
.nad-flip-btn ~ .name-layer h2.nad-nom-long { box-sizing: border-box; padding-right: 30px; }
.nad-card--large .identity-slot img {  /* la taille de PC (le bloc mobile disait 110 %) */
  width: 138%;
  height: 138%;
}
.nad-card--large .identity-slot--guild {  /* -8px, -6px */
  top: calc(3.0% - var(--card-w) * 0.020513);
  left: calc(4.05% - var(--card-w) * 0.015385);
}
.nad-card--large .identity-slot--class {  /* -6px, -6px */
  top: calc(16.5% - var(--card-w) * 0.015385);
  left: calc(4.05% - var(--card-w) * 0.015385);
}
.nad-card--large.nad-card--character .identity-slot--race {  /* -6px, +7px */
  top: calc(3.0% - var(--card-w) * 0.015385 + var(--perso-race-y, 0px));
  left: calc(18.2% + var(--card-w) * 0.017949 + var(--perso-race-x, 0px));
}
.nad-card--large.nad-card--character .identity-slot--class {  /* -6px, -6px */
  top: calc(16.5% - var(--card-w) * 0.015385 + var(--perso-class-y, 0px));
  left: calc(4.05% - var(--card-w) * 0.015385 + var(--perso-class-x, 0px));
}
.nad-card--large.nad-card--skill .identity-slot--guild {  /* -8px, -6px */
  top: calc(3.0% - var(--card-w) * 0.020513 + var(--skill-guild-y, 0px));
  left: calc(4.05% - var(--card-w) * 0.015385 + var(--skill-guild-x, 0px));
}
.nad-card--large.nad-card--skill .identity-slot--race {  /* -6px, +8,8px */
  top: calc(3.0% - var(--card-w) * 0.015385 + var(--skill-race-y, 0px));
  left: calc(18.2% + var(--card-w) * 0.022564 + var(--skill-race-x, 0px));
}
.nad-card--large.nad-card--skill .identity-slot--class {  /* -8px, -8px */
  top: calc(16.5% - var(--card-w) * 0.020513 + var(--skill-class-y, 0px));
  left: calc(4.05% - var(--card-w) * 0.020513 + var(--skill-class-x, 0px));
}
.nad-card--large.nad-card--character:has(.frame-layer[src$="nexus-frame.webp"]) {  /* Nexus : 2,8 / 1 / 1,5 / 2,5 px */
  --perso-race-x: calc(var(--card-w) * 0.007179);
  --perso-race-y: calc(var(--card-w) * 0.002564);
  --perso-class-x: calc(var(--card-w) * 0.003846);
  --perso-class-y: calc(var(--card-w) * 0.00641);
}
.nad-card--large.nad-card--character:has(.frame-layer[src$="umbra-frame.webp"]) {  /* Umbra : 0,5 / 1,7 / 1,5 px */
  --perso-race-x: calc(var(--card-w) * 0.001282);
  --perso-race-y: calc(var(--card-w) * 0.004359);
  --perso-class-y: calc(var(--card-w) * 0.003846);
}
.nad-card--large.nad-card--character:has(.frame-layer[src$="nym-frame.webp"]) {  /* Nym : 0,8 / 0 / -1 px */
  --perso-race-x: calc(var(--card-w) * 0.002051);
  --perso-race-y: 0px;
  --perso-class-y: calc(var(--card-w) * -0.002564);
}
.nad-card--large.nad-card--character:has(.frame-layer[src$="pyra-frame.webp"]) {  /* Pyra : 2,3 / 0,7 / 1,5 px */
  --perso-race-x: calc(var(--card-w) * 0.005897);
  --perso-race-y: calc(var(--card-w) * 0.001795);
  --perso-class-y: calc(var(--card-w) * 0.003846);
}
.nad-card--large.nad-card--character:has(.frame-layer[src$="virdis-frame.webp"]), .nad-card--large.nad-card--character:has(.frame-layer[src$="viridis-frame.webp"]) {  /* Virdis : 2,3 / 1 / 1 / -1 px */
  --perso-race-x: calc(var(--card-w) * 0.005897);
  --perso-race-y: calc(var(--card-w) * 0.002564);
  --perso-class-x: calc(var(--card-w) * 0.002564);
  --perso-class-y: calc(var(--card-w) * -0.002564);
}
.nad-card--large.nad-card--character:has(.frame-layer[src$="nexus-pyra-frame.webp"]) {  /* Nexus-Pyra : 1,5 / -2 / -3 px */
  --perso-race-x: calc(var(--card-w) * 0.003846);
  --perso-race-y: calc(var(--card-w) * -0.005128);
  --perso-class-y: calc(var(--card-w) * -0.007692);
}
.nad-card--large.nad-card--character:has(.frame-layer[src$="nexus-virdis-frame.webp"]) {  /* Nexus-Virdis : 0,5 / 0 px */
  --perso-race-x: calc(var(--card-w) * 0.001282);
  --perso-race-y: 0px;
}
.nad-card--large.nad-card--skill.nad-card--frame-action {  /* cadre Action : 1 / 1 / 0 / 0 / 1 / 2,5 px */
  --skill-guild-x: calc(var(--card-w) * 0.002564);
  --skill-guild-y: calc(var(--card-w) * 0.002564);
  --skill-race-x: 0px;
  --skill-race-y: 0px;
  --skill-class-x: calc(var(--card-w) * 0.002564);
  --skill-class-y: calc(var(--card-w) * 0.00641);
}
.nad-card--large.nad-card--skill.nad-card--frame-magie {  /* cadre Magie : 0 / 0 / 0 / 0 / 1,6 / 2,1 px */
  --skill-guild-x: 0px;
  --skill-guild-y: 0px;
  --skill-race-x: 0px;
  --skill-race-y: 0px;
  --skill-class-x: calc(var(--card-w) * 0.004103);
  --skill-class-y: calc(var(--card-w) * 0.005385);
}
.nad-card--large.nad-card--skill.nad-card--frame-objet {  /* cadre Objet : -1 / 0,5 / -1,5 / 0 / 2 / 2 px */
  --skill-guild-x: calc(var(--card-w) * -0.002564);
  --skill-guild-y: calc(var(--card-w) * 0.001282);
  --skill-race-x: calc(var(--card-w) * -0.003846);
  --skill-race-y: 0px;
  --skill-class-x: calc(var(--card-w) * 0.005128);
  --skill-class-y: calc(var(--card-w) * 0.005128);
}
/* ══ [rail1895] LES MÉDAILLONS DES TROIS CADRES ORDINAIRES, AU CENTRE DE LEURS ANNEAUX (la grande carte) ══
   Olivier (04/10) : « dans le deckbuilding la classe est légèrement trop basse » ; sur la maquette : « Oui c'est très
   bien ». Mesurées sur les images des cadres (1086 × 1448), les icônes tombaient à côté de leurs anneaux : la classe de
   4 à 6 px de cadre trop bas (et de 2 à 3,5 trop à droite), la guilde et la race de 1 à 4 px. Ces molettes remplacent
   celles du dessus : même rôle, même unité (une fraction de --card-w, donc justes à toutes les tailles) ; entre
   parenthèses, les pixels à 390 (guilde x / y, race x / y, classe x / y).
   ⚠ Les cartes foil et uniques portent aussi ces classes de cadre : elles gardent les molettes du dessus, leurs propres
     recalages en partent (rails 1875 et 1888). Les Magies sans classe de cadre (Communion, Incantation, Invocation)
     sont sur le cadre Magie : elles le suivent par son image (règle à part, pour qu'un navigateur sans :has garde
     les trois autres). Le survol du combat (#card-preview) et la carte de collection ont leurs propres calages, ils
     ne lisent pas ces molettes.
   ⚠ La case d'un médaillon est carrée (aspect-ratio: 1), mais sans plancher à 0 elle prenait la hauteur de son icône
     une fois l'image chargée (0,4 px de plus que sa largeur à 390 px, plus ou moins selon l'icône), et le médaillon
     descendait d'autant : la dernière règle la garde carrée. Pas dans les aperçus au survol (.card-preview), qui
     gardent leurs calages. */
.nad-card--large.nad-card--skill.nad-card--frame-action:not(.nad-card--cadre-unique):not(.nad-card--cadre-foil) {  /* cadre Action : -0,1 / -0,49 / 0,45 / -0,44 / 0,29 / 0,89 px */
  --skill-guild-x: calc(var(--card-w) * -0.000244);
  --skill-guild-y: calc(var(--card-w) * -0.001251);
  --skill-race-x: calc(var(--card-w) * 0.001154);
  --skill-race-y: calc(var(--card-w) * -0.001117);
  --skill-class-x: calc(var(--card-w) * 0.000732);
  --skill-class-y: calc(var(--card-w) * 0.002272);
}
.nad-card--large.nad-card--skill.nad-card--frame-magie:not(.nad-card--cadre-unique):not(.nad-card--cadre-foil) {  /* cadre Magie : -0,19 / -0,56 / 0,33 / -0,57 / 0,33 / -0,15 px */
  --skill-guild-x: calc(var(--card-w) * -0.000497);
  --skill-guild-y: calc(var(--card-w) * -0.001430);
  --skill-race-x: calc(var(--card-w) * 0.000841);
  --skill-race-y: calc(var(--card-w) * -0.001449);
  --skill-class-x: calc(var(--card-w) * 0.000859);
  --skill-class-y: calc(var(--card-w) * -0.000395);
}
.nad-card--large.nad-card--skill:not(.nad-card--frame-action):not(.nad-card--frame-magie):not(.nad-card--frame-objet):not(.nad-card--cadre-unique):not(.nad-card--cadre-foil):has(.frame-layer[src$="/magie-frame.webp"]) {  /* les Magies sans classe de cadre, sur le cadre Magie : les mêmes */
  --skill-guild-x: calc(var(--card-w) * -0.000497);
  --skill-guild-y: calc(var(--card-w) * -0.001430);
  --skill-race-x: calc(var(--card-w) * 0.000841);
  --skill-race-y: calc(var(--card-w) * -0.001449);
  --skill-class-x: calc(var(--card-w) * 0.000859);
  --skill-class-y: calc(var(--card-w) * -0.000395);
}
.nad-card--large.nad-card--skill.nad-card--frame-objet:not(.nad-card--cadre-unique):not(.nad-card--cadre-foil) {  /* cadre Équipement : -1,58 / -0,15 / -1,25 / -0,7 / 0,75 / 0,67 px */
  --skill-guild-x: calc(var(--card-w) * -0.004056);
  --skill-guild-y: calc(var(--card-w) * -0.000388);
  --skill-race-x: calc(var(--card-w) * -0.003214);
  --skill-race-y: calc(var(--card-w) * -0.001799);
  --skill-class-x: calc(var(--card-w) * 0.001924);
  --skill-class-y: calc(var(--card-w) * 0.001706);
}
.nad-card--large.nad-card--skill:not(.nad-card--cadre-unique):not(.nad-card--cadre-foil):not(.card-preview *) .identity-slot {  /* la case reste carrée, quelle que soit son icône */
  min-height: 0;
}
.nad-card--large .stats-column {  /* 85px */
  top: calc(24.8% + var(--card-w) * 0.217949);
}
.nad-card--large .stat-chip {  /* 76px */
  min-height: calc(var(--card-w) * 0.194872);
  height: calc(var(--card-w) * 0.194872);
}
.nad-card--large .stat-chip + .stat-chip {  /* -4px */
  margin-top: calc(var(--card-w) * -0.010256);
}
.nad-card--large .stat-chip img {  /* 8px, 92px, 97px */
  left: calc(var(--card-w) * 0.020513);
  width: calc(var(--card-w) * 0.235897);
  height: calc(var(--card-w) * 0.248718);
}
.nad-card--large .stat-chip span {  /* 30,75px (2.05rem), +5px, -10px, 46px */
  font-size: calc(var(--card-w) * 0.078846);
  top: calc(50% + var(--card-w) * 0.012821);
  left: calc(40% - var(--card-w) * 0.025641);
  width: calc(var(--card-w) * 0.117949);
  text-shadow: calc(var(--card-w) * 0.005128) 0 0 #000, calc(var(--card-w) * -0.005128) 0 0 #000, 0 calc(var(--card-w) * 0.005128) 0 #000, 0 calc(var(--card-w) * -0.005128) 0 #000, 0 calc(var(--card-w) * 0.010256) calc(var(--card-w) * 0.025641) rgba(0, 0, 0, .85);
}
.nad-card--large .stat-chip--attaque span {  /* 23,7px (1.58rem), +8px, -22px, 58px */
  font-size: calc(var(--card-w) * 0.060769);
  top: calc(50% + var(--card-w) * 0.020513);
  left: calc(53% - var(--card-w) * 0.05641);
  width: calc(var(--card-w) * 0.148718);
}
.nad-card--large .stat-chip--vie span {  /* +8px */
  top: calc(50% + var(--card-w) * 0.020513);
}
.nad-card--large .text-window {  /* 18px, 1px */
  border-radius: calc(var(--card-w) * 0.046154);
  border-width: max(1px, calc(var(--card-w) * 0.002564));
}
.nad-card--large.nad-card--character .text-window {  /* 18px (= 18,2 % − 53px à 390), -4px */
  left: calc(var(--card-w) * 0.046154);
  bottom: calc(4.2% - var(--card-w) * 0.010256);
}
.nad-card--large .text-window p {  /* 11,55px (.77rem), ombres 1,1px */
  font-size: calc(var(--card-w) * 0.029615);
  text-shadow: calc(var(--card-w) * 0.002821) 0 0 #000, calc(var(--card-w) * -0.002821) 0 0 #000, 0 calc(var(--card-w) * 0.002821) 0 #000, 0 calc(var(--card-w) * -0.002821) 0 #000, 0 calc(var(--card-w) * 0.005128) calc(var(--card-w) * 0.015385) rgba(0, 0, 0, .85);
}
.nad-card--large .text-window p + p {  /* 8px */
  margin-top: calc(var(--card-w) * 0.020513);
}
.nad-card--large .type-line {  /* 12,75px (.85rem) */
  font-size: calc(var(--card-w) * 0.032692) !important;
}
.nad-card--large .enchainement-line {  /* 8px */
  margin-top: calc(var(--card-w) * 0.020513);
}
.nad-card--large.nad-card--skill .text-window p {  /* 12px (.80rem) */
  font-size: calc(var(--card-w) * 0.030769);
}
.nad-card--large.nad-card--skill .type-line {  /* 13,8px (.92rem) */
  font-size: calc(var(--card-w) * 0.035385) !important;
}
.nad-card--large.nad-card--skill .restriction-line {  /* 10,2px (.68rem) */
  font-size: calc(var(--card-w) * 0.026154) !important;
}

/* ══ [rail1875] LES CADRES PREMIUM ═══════════════════════════════════════════════════════════════════════════════
   [rail1881] SECONDE VERSION, sur les maquettes d'Olivier (03/10). L'UNIQUE : le cadre blanc nacré aux couleurs de sa
   guilde (« la C » : la plaque du nom et les gemmes à sa couleur ; brun sans guilde, bleu Nym, rouge Pyra, violet Umbra,
   vert Virdis, or Nexus). Le FOIL : le même cadre en jaune vif, sa plaque en arc-en-ciel, ses gemmes irisées (« la 1 ») ;
   le noir et or du rail 1875 « ressort mal sur certaines cartes ». La fenêtre de texte des deux prend la teinte sombre de
   la guilde de la carte (nad-card--teinte-…) ; le nom reste clair sur la plaque de couleur de l'unique (le style des
   cartes ordinaires) et passe à l'encre sombre sur l'arc-en-ciel du foil. Les deux cadres ont le dessin du cadre
   d'Action : chaque médaillon est recalé depuis son cadre d'origine (centres des anneaux mesurés au pixel sur les images
   des cadres, en pourcentage du médaillon, donc juste à toutes les tailles et dans tous les écrans). */
.nad-card.nad-card--cadre-unique .text-window,
.nad-card.nad-card--cadre-foil .text-window{ box-shadow:inset 0 1px 0 rgba(255,255,255,.30), inset 0 0 22px rgba(255,255,255,.08), 0 10px 22px rgba(0,0,0,.36) !important; }
.nad-card.nad-card--teinte-neutre .text-window{ border-color:rgba(255,236,205,.86) !important; background:linear-gradient(180deg, rgba(104,70,34,.40), rgba(28,16,6,.80)) !important; }
.nad-card.nad-card--teinte-neutre .text-window strong{ color:#ffd39c !important; }
.nad-card.nad-card--teinte-neutre .text-window .type-line{ color:#fff0dc !important; }
.nad-card.nad-card--teinte-neutre .text-window .restriction-line{ color:#f0d8b8 !important; }
.nad-card.nad-card--teinte-nym .text-window{ border-color:rgba(228,240,255,.88) !important; background:linear-gradient(180deg, rgba(42,74,126,.38), rgba(4,12,30,.78)) !important; }
.nad-card.nad-card--teinte-nym .text-window strong{ color:#a6e0ff !important; }
.nad-card.nad-card--teinte-nym .text-window .type-line{ color:#e6f3ff !important; }
.nad-card.nad-card--teinte-nym .text-window .restriction-line{ color:#cfe5ff !important; }
.nad-card.nad-card--teinte-pyra .text-window{ border-color:rgba(255,226,218,.88) !important; background:linear-gradient(180deg, rgba(138,36,26,.40), rgba(36,6,4,.80)) !important; }
.nad-card.nad-card--teinte-pyra .text-window strong{ color:#ffb79c !important; }
.nad-card.nad-card--teinte-pyra .text-window .type-line{ color:#ffe9e2 !important; }
.nad-card.nad-card--teinte-pyra .text-window .restriction-line{ color:#ffd2c4 !important; }
.nad-card.nad-card--teinte-umbra .text-window{ border-color:rgba(242,228,255,.88) !important; background:linear-gradient(180deg, rgba(98,48,134,.40), rgba(20,6,32,.80)) !important; }
.nad-card.nad-card--teinte-umbra .text-window strong{ color:#e4b8ff !important; }
.nad-card.nad-card--teinte-umbra .text-window .type-line{ color:#f6e8ff !important; }
.nad-card.nad-card--teinte-umbra .text-window .restriction-line{ color:#e6d0f6 !important; }
.nad-card.nad-card--teinte-virdis .text-window{ border-color:rgba(230,255,224,.88) !important; background:linear-gradient(180deg, rgba(40,106,48,.40), rgba(6,26,9,.80)) !important; }
.nad-card.nad-card--teinte-virdis .text-window strong{ color:#b4f2a6 !important; }
.nad-card.nad-card--teinte-virdis .text-window .type-line{ color:#eaffe4 !important; }
.nad-card.nad-card--teinte-virdis .text-window .restriction-line{ color:#d2efc8 !important; }
.nad-card.nad-card--teinte-nexus .text-window{ border-color:rgba(255,244,214,.88) !important; background:linear-gradient(180deg, rgba(112,88,30,.40), rgba(30,22,6,.80)) !important; }
.nad-card.nad-card--teinte-nexus .text-window strong{ color:#ffe08a !important; }
.nad-card.nad-card--teinte-nexus .text-window .type-line{ color:#fff4d6 !important; }
.nad-card.nad-card--teinte-nexus .text-window .restriction-line{ color:#f2e2b0 !important; }
.nad-card.nad-card--cadre-foil .name-layer h2{ color:#2a1d3f !important; text-shadow:0 1px 0 rgba(255,255,255,.75), 0 0 .3em rgba(255,255,255,.65) !important; -webkit-text-stroke:0 !important; }
/* les médaillons recalés sur les cadres premium (centres mesurés sur les images, en % du médaillon) */
.nad-card--cadre-unique.nad-card--origine-action .identity-slot--guild{ translate:0.00% 0.00%; }
.nad-card--cadre-unique.nad-card--origine-action .identity-slot--race{ translate:0.00% 0.00%; }
.nad-card--cadre-unique.nad-card--origine-action .identity-slot--class{ translate:0.00% 0.00%; }
.nad-card--cadre-unique.nad-card--origine-magie .identity-slot--guild{ translate:0.13% 0.27%; }
.nad-card--cadre-unique.nad-card--origine-magie .identity-slot--race{ translate:0.16% 0.16%; }
.nad-card--cadre-unique.nad-card--origine-magie .identity-slot--class{ translate:0.16% 0.48%; }
.nad-card--cadre-unique.nad-card--origine-equipement .identity-slot--guild{ translate:2.00% 0.13%; }
.nad-card--cadre-unique.nad-card--origine-equipement .identity-slot--race{ translate:3.22% 0.16%; }
.nad-card--cadre-unique.nad-card--origine-equipement .identity-slot--class{ translate:-0.32% 1.93%; }
/* [rail1888] LE CADRE FOIL D'OLIVIER (04/10) : l'or jusqu'au bord ; ses anneaux ne sont pas ceux du cadre d'Action.
   Chaque médaillon est centré dans l'anneau du nouveau cadre (mesuré sur l'image, en pixels du cadre 1086 × 1448 :
   guilde 118,25 × 114,5 ; race 297,75 × 105 ; classe 99,5 × 303), sur la grande carte, à toutes ses tailles ; la
   carte de collection garde son propre écart, le même que sur les autres cadres. La gemme de rareté se pose sur la
   gemme du haut du cadre (729,5 × 33,5). La fenêtre du cadre est un peu plus large que celle du cadre d'Action :
   l'illustration des personnages s'élargit sous le cadre (plus de liseré sombre sur les côtés), le personnage garde
   sa place et sa taille. */
.nad-card--cadre-foil.nad-card--origine-action .identity-slot--guild{ translate:-3.04% -1.79%; }
.nad-card--cadre-foil.nad-card--origine-action .identity-slot--race{ translate:-1.29% 0.42%; }
.nad-card--cadre-foil.nad-card--origine-action .identity-slot--class{ translate:-1.67% 1.14%; }
.nad-card--cadre-foil.nad-card--origine-magie .identity-slot--guild{ translate:-1.56% -0.31%; }
.nad-card--cadre-foil.nad-card--origine-magie .identity-slot--race{ translate:-1.29% 0.41%; }
.nad-card--cadre-foil.nad-card--origine-magie .identity-slot--class{ translate:-2.77% 1.86%; }
.nad-card--cadre-foil.nad-card--origine-equipement .identity-slot--guild{ translate:-0.08% -1.05%; }
.nad-card--cadre-foil.nad-card--origine-equipement .identity-slot--race{ translate:1.39% 0.41%; }
.nad-card--cadre-foil.nad-card--origine-equipement .identity-slot--class{ translate:-3.47% 2.03%; }
.nad-card--cadre-foil.nad-card--origine-nym .identity-slot--race{ translate:0.50% 0.42%; }
.nad-card--cadre-foil.nad-card--origine-nym .identity-slot--class{ translate:-3.47% 3.82%; }
.nad-card--cadre-foil.nad-card--origine-umbra .identity-slot--race{ translate:1.03% -2.64%; }
.nad-card--cadre-foil.nad-card--origine-umbra .identity-slot--class{ translate:-3.47% -0.66%; }
.nad-card--cadre-foil.nad-card--origine-pyra .identity-slot--race{ translate:-2.19% -0.85%; }
.nad-card--cadre-foil.nad-card--origine-pyra .identity-slot--class{ translate:-3.47% -0.66%; }
.nad-card--cadre-foil.nad-card--origine-viridis .identity-slot--race{ translate:-2.19% -1.38%; }
.nad-card--cadre-foil.nad-card--origine-viridis .identity-slot--class{ translate:-5.26% 3.82%; }
.nad-card--cadre-foil.nad-card--origine-virdis .identity-slot--race{ translate:-2.19% -1.38%; }
.nad-card--cadre-foil.nad-card--origine-virdis .identity-slot--class{ translate:-5.26% 3.82%; }
.nad-card--cadre-foil.nad-card--origine-nexus .identity-slot--race{ translate:-3.09% -1.38%; }
.nad-card--cadre-foil.nad-card--origine-nexus .identity-slot--class{ translate:-6.16% -2.45%; }
.nad-card--cadre-foil .rarity-gem{ translate:18.62% -0.91%; }
.nad-card--character.nad-card--cadre-foil .art-clip{ left:4.4%; width:91.2%; }
.nad-card--character.nad-card--cadre-foil .character-art{ left:calc(49.08% + 5px); width:calc(94% + 5px); }
.nad-card--character.nad-card--cadre-foil .identity-slot--guild-premium{ translate:-1.55% -0.28%; }