/* ════════════════════════════════════════════════════════
   PLAYER-CARD.CSS — Carte joueur premium (composant partagé)
   MateXP · Le standard visuel des cartes joueur, utilisé par :
   le dashboard (Découvrir / Mes mates / Demandes), l'aperçu de
   profil (« comment les autres te voient ») et la fiche
   player.html. Source unique → un seul endroit pour la densité.
   ════════════════════════════════════════════════════════ */

.pcard {
  display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0;
  background: var(--bg-2); border: 0.5px solid var(--border-1);
  border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.pcard:hover { border-color: var(--border-2); transform: translateY(-2px); }
/* Variante statique (aperçu, fiche) : pas de lift au survol */
.pc-static:hover { transform: none; border-color: var(--border-1); }

/* Skeleton de chargement (cartes fantômes pendant le fetch) */
.pcard-skel { pointer-events: none; }
.pcard-skel:hover { transform: none; border-color: var(--border-1); }
.pcard-skel .sk { background: var(--bg-3); border-radius: var(--r-md); animation: pulse 1.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .pcard-skel .sk { animation: none; } }

/* Menu « ⋯ » d'une carte mate (retirer / bloquer) — ouvre au-dessus du bouton */
.pc-more { flex: 0 0 44px; min-width: 44px; padding-inline: 0; font-size: 18px; letter-spacing: 1px; }
.pc-menu {
  position: absolute; right: 0; bottom: calc(100% + 6px); min-width: 220px;
  display: flex; flex-direction: column; gap: 2px; padding: 4px;
  background: var(--bg-2); border: 0.5px solid var(--border-2);
  border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); z-index: 5;
}
.pc-menu[hidden] { display: none; }
.pc-menu-item {
  display: block; width: 100%; text-align: left; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm); font-family: var(--font-body); font-size: var(--text-sm);
  color: var(--text-2); background: none; cursor: pointer; min-height: 36px;
}
.pc-menu-item:hover { background: var(--bg-3); color: var(--text-1); }
/* Même alpha danger que .btn-danger (settings) / .input.error (components) */
.pc-menu-item.is-danger { color: var(--danger); }
.pc-menu-item.is-danger:hover { background: rgba(248, 113, 113, 0.12); }

/* ════════════════════════════════════════════════════════
   CARTE JOUEUR « XP » (design system figé) — chantier sous la
   variante .pcard.pc-xp UNIQUEMENT. L'app live (markup .pc-*
   actuel, sans .pc-xp) reste INTACTE jusqu'à la bascule étape (b).
   Carte TOUJOURS SOMBRE : tokens locaux indépendants de
   [data-theme] → rendu identique en page claire ou sombre.
   Réf. pixel : pcard-compacte-reference.html.
   ──── a1 tokens · a2 coque + trait foil + holo + échafaudage .fnd/.off ────
   ════════════════════════════════════════════════════════ */
.pcard.pc-xp {
  /* palette locale (jamais pilotée par le thème de la page) — a1 */
  --pc-bd: #4f4a63;        /* bordure carte */
  --pc-bd2: #433d54;       /* bordure bouton secondaire */
  --pc-tx: #F4F2FA;        /* texte principal */
  --pc-tx2: #C7C2D6;       /* texte boutons */
  --pc-mut: #8B8794;       /* texte atténué */
  --pc-ind: #7C5CFC;       /* indigo (rôle, en ligne) */
  --pc-rose: #FF6B9D;      /* rose */
  --pc-orange: #FF8A5B;    /* orange */
  --pc-grn: #34D399;       /* vert — RÉSERVÉ Fiabilité */
  --pc-gold: #F5C451;      /* or — rang / fondateur */
  --pc-fav: #FBBF24;       /* or ambre — RÉSERVÉ Favori (★) [SQL 45] */
  /* foil unifié (trait du haut ET n° de série) — a2 / tokens figés */
  --pc-foil: linear-gradient(95deg,#b6a0ff,#8ecbff 30%,#76e6c2 50%,#ffe6a0 72%,#ffa6c6 92%);
  --pc-foil-gold: linear-gradient(95deg,#ffe9b0,#fff2ce 30%,#f5c451 55%,#ffdca0 78%,#ffe9b0);

  /* COQUE — toujours sombre, multi-couches, bordure #4f4a63, radius 16 — a2 */
  position: relative;
  width: 100%;
  display: flex; flex-direction: column;   /* feed-fix : colonne → footer poussé en bas (hauteurs égales via grid stretch, footers alignés quelles que soient les données) */
  container-type: inline-size;   /* b5a-fix : la carte se mesure elle-même (feed étroit ≠ viewport) → container queries plus bas */
  padding: 0;            /* annule le 16/20 hérité de .pcard de base → foil/bande/chips/footer
                            PILE aux bords (réf) ; les blocs internes gardent leur padding propre */
  border: 1px solid var(--pc-bd);
  border-radius: 16px;
  overflow: hidden;
  box-sizing: border-box;
  color: var(--pc-tx);
  font-family: var(--font-body);
  text-align: left;   /* armure : la carte n'hérite JAMAIS l'alignement ambiant
                         (hero text-align:center centrait pseudo + valeurs chips) */
  /* scanlines 90° retirées DÉFINITIVEMENT (08/07, device : lisibilité) */
  background:
    linear-gradient(118deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.05) 47%, rgba(255,255,255,0) 63%),
    radial-gradient(140% 90% at 82% -15%, rgba(255,255,255,.06), rgba(255,255,255,0) 52%),
    linear-gradient(180deg, #201d2d, #100f16);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.08),
    inset 0 -2px 0 rgba(0,0,0,.5),
    0 0 0 1px rgba(0,0,0,.5),
    0 16px 40px -18px rgba(0,0,0,.8),
    0 0 80px -42px rgba(124,92,252,.45);
  transition: transform .28s, box-shadow .28s, border-color .28s;
}
.pcard.pc-xp:hover {
  transform: translateY(-3px);
  border-color: #6b6486;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.1),
    inset 0 -2px 0 rgba(0,0,0,.5),
    0 0 0 1px rgba(0,0,0,.5),
    0 24px 50px -18px rgba(0,0,0,.88),
    0 0 110px -34px rgba(124,92,252,.8);
}

/* voile holographique — glisse au survol */
.pcard.pc-xp .pcx-holo {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .5; transform: translateX(-15%);
  transition: transform .6s ease, opacity .4s ease;
  background: linear-gradient(118deg, transparent 38%, rgba(255,255,255,.07) 47%, rgba(124,92,252,.07) 52%, rgba(255,107,157,.05) 57%, transparent 63%);
}
.pcard.pc-xp:hover .pcx-holo { transform: translateX(15%); opacity: 1; }

/* contenu au-dessus du holo */
.pcard.pc-xp .pcx-stack { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* trait foil 3px (signature) — MÊME dégradé que le n° de série (--pc-foil) */
.pcard.pc-xp .pcx-foil {
  height: 3px;
  background: var(--pc-foil);
  box-shadow: 0 0 16px -2px rgba(170,200,235,.55), 0 1px 7px rgba(150,160,255,.45);
  transition: box-shadow .3s ease;
}
.pcard.pc-xp:hover .pcx-foil {
  box-shadow: 0 0 26px 0 rgba(180,210,240,.82), 0 2px 13px rgba(160,170,255,.66);
}

/* ── échafaudage FONDATEUR (.fnd) : holo + trait en OR ── */
.pcard.pc-xp.fnd .pcx-holo {
  background: linear-gradient(118deg, transparent 38%, rgba(255,245,220,.07) 47%, rgba(245,196,81,.08) 52%, rgba(255,158,107,.05) 57%, transparent 63%);
}
.pcard.pc-xp.fnd .pcx-foil {
  background: var(--pc-foil-gold);
  box-shadow: 0 0 16px -1px rgba(245,196,81,.6), 0 1px 7px rgba(255,210,140,.5);
}
.pcard.pc-xp.fnd:hover .pcx-foil {
  box-shadow: 0 0 26px 1px rgba(245,196,81,.85), 0 2px 13px rgba(255,210,140,.7);
}

/* ── HORS-LIGNE (.off) : RIEN sur la coque (conforme réf — l'atténuation .off
   est LÉGÈRE et vit dans avatar/présence (a3), .cdiv (a4), foil footer (a6)). ── */

/* ──── a3 · en-tête : avatar conique + cadenas · pseudo + présence + ambiance · anneau Fiabilité ──── */
.pcard.pc-xp .pcx-head { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 14px; }

/* avatar : anneau conique + initiales (verre) + badge cadenas */
.pcard.pc-xp .pcx-av { position: relative; width: 44px; height: 44px; border-radius: 50%; padding: 2px; box-sizing: border-box; flex: none;
  background: conic-gradient(from 200deg, #7C5CFC, #FF6B9D 48%, #FF8A5B 66%, #7C5CFC);
  box-shadow: 0 2px 7px rgba(0,0,0,.5), 0 0 12px -3px rgba(124,92,252,.7); }
.pcard.pc-xp.fnd .pcx-av { background: conic-gradient(from 200deg, #f5c451, #ffe9a8 30%, #ffcaa0 56%, #f5c451);
  box-shadow: 0 2px 7px rgba(0,0,0,.5), 0 0 13px -3px rgba(245,196,81,.8); }
.pcard.pc-xp.off .pcx-av { background: #3a3648; box-shadow: none; }
/* Matière verre (bg/relief/color/text-shadow) → components.css, SOURCE UNIQUE
   (groupe .av-ring/.glass-core, indigo + doré .fnd) ; ici typo + géométrie. */
.pcard.pc-xp .pcx-av-in { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.pcard.pc-xp .pcx-lock { position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; border-radius: 50%;
  background: #16131e; border: 1.5px solid #322d3d; display: flex; align-items: center; justify-content: center; z-index: 2; box-shadow: 0 1px 3px rgba(0,0,0,.55); }
.pcard.pc-xp .pcx-lock i { font-size: 9px; color: var(--pc-ind); }
.pcard.pc-xp.fnd .pcx-lock { background: #1a140a; border-color: #4a3c1f; }
.pcard.pc-xp.fnd .pcx-lock i { color: #f0cf86; }

/* identité : pseudo + sous-ligne (présence + ambiance) */
.pcard.pc-xp .pcx-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
/* ⚠️ BUG rectangle (08/07) : le glow 16px du text-shadow était CLIPPÉ par
   l'overflow:hidden de l'ellipsis → plaque lumineuse rectangulaire derrière le
   pseudo. Glow RETIRÉ (compacte + full, base + .fnd), l'ombre de lisibilité reste. */
.pcard.pc-xp .pcx-name { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: #fff; letter-spacing: .3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.pcard.pc-xp.fnd .pcx-name { text-shadow: 0 1px 3px rgba(0,0,0,.5); }
/* [SQL 45] ligne pseudo + étoile Favori (mate-only). Le nom garde son ellipsis
   (min-width:0 en contexte flex), l'étoile reste collée (flex:none). */
.pcard.pc-xp .pcx-nameline { display: flex; align-items: center; gap: 7px; min-width: 0; }
.pcard.pc-xp .pcx-nameline .pcx-name { min-width: 0; }
.pcard.pc-xp .pcx-fav { flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer; line-height: 1; font-size: 17px;
  color: var(--pc-mut); transition: color var(--dur-base) var(--ease-out), transform .12s var(--ease-out); }
.pcard.pc-xp .pcx-fav:hover { color: var(--pc-fav); }
.pcard.pc-xp .pcx-fav.is-on { color: var(--pc-fav); filter: drop-shadow(0 0 3px rgba(251,191,36,.5)); }
.pcard.pc-xp .pcx-fav:active { transform: scale(.82); }
.pcard.pc-xp .pcx-fav:focus-visible { outline: 2px solid var(--pc-fav); outline-offset: 2px; border-radius: 4px; }
.pcard.pc-xp .pcx-sub { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pcard.pc-xp .pcx-stat { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; letter-spacing: .5px; color: #b9aef0; white-space: nowrap; flex: none; }
.pcard.pc-xp .pcx-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pc-ind); box-shadow: 0 0 7px rgba(124,92,252,.85); flex: none; }
/* présence grise en hors-ligne (EN LIGNE reste indigo, y compris en .fnd) */
.pcard.pc-xp.off .pcx-stat { color: #8B8794; }
.pcard.pc-xp.off .pcx-dot { background: #6a6578; box-shadow: none; }

/* pastille d'ambiance — classes pilotées par MateXPVibe.bucket() */
.pcard.pc-xp .pcx-vibe { font-family: var(--font-display); font-weight: 600; font-size: 10px; letter-spacing: .2px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; line-height: 1; flex: none; }
.pcard.pc-xp .pcx-vibe.v-chill { color: #bcb1f2; background: rgba(124,92,252,.14); border: 1px solid rgba(124,92,252,.28); }
.pcard.pc-xp .pcx-vibe.v-comp  { color: #ff9bbf; background: rgba(255,107,157,.12); border: 1px solid rgba(255,107,157,.3); }
.pcard.pc-xp .pcx-vibe.v-try   { color: #ffb38f; background: rgba(255,138,91,.13); border: 1px solid rgba(255,138,91,.32); }

/* anneau de Fiabilité (vert #34D399 — RÉSERVÉ) */
.pcard.pc-xp .pcx-score { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.pcard.pc-xp .pcx-score-ring { position: relative; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.pcard.pc-xp .pcx-score-ring svg { position: absolute; inset: 0; }
.pcard.pc-xp .pcx-score-num { position: relative; font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--pc-grn); text-shadow: 0 0 9px rgba(52,211,153,.7); }
.pcard.pc-xp .pcx-score-lb { font-size: 8px; letter-spacing: .9px; color: var(--pc-grn); font-weight: 700; }

/* ──── a4 · bande compat : 5 cellules ÉGALES + 4 traits verticaux, bord à bord ──── */
.pcard.pc-xp .pcx-strip {
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr;
  align-items: stretch;
  border-top: 1px solid #262330;
  border-bottom: 1px solid #262330;
  background: linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0));
}
.pcard.pc-xp .pcx-cell {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 9px 3px; font-size: 10px; color: #a8a3b4;
  white-space: nowrap; overflow: hidden; min-width: 0;
}
.pcard.pc-xp .pcx-cell i { font-size: 12px; color: var(--pc-ind); flex: none; }
.pcard.pc-xp.fnd .pcx-cell i { color: #e0b85a; }
.pcard.pc-xp .pcx-div { background: #4a4458; }
.pcard.pc-xp.fnd .pcx-div { background: #473d27; }
.pcard.pc-xp.off .pcx-div { background: #332f3d; }
.pcard.pc-xp .pcx-num { font-family: var(--font-mono); font-weight: 700; font-size: 11px; color: #fff; }
.pcard.pc-xp .pcx-unit { color: #a8a3b4; }
.pcard.pc-xp .pcx-dash { font-family: var(--font-mono); font-weight: 700; color: var(--pc-mut); }   /* [Option B] valeur absente : « – » muet */
/* wrapper inline : groupe « icône ↔ valeur » en UN seul item flex → pas de gap
   parasite entre les morceaux (Clavier + /souris, valeur + unité). */
.pcard.pc-xp .pcx-val { min-width: 0; }
/* [a4 · mobile] sous ~460px : on abrège pour éviter le clip (rendu 480px réf
   INTACT). « Clavier/souris »→« Clavier » (on masque /souris) + mots-unités
   masqués (les icônes ti-repeat/ti-history portent le sens) → cellule mobile =
   icône + valeur mono. Le texte reste UNE seule donnée (peripherals[]/valeurs),
   on n'en masque qu'une partie en CSS — pas de libellé dupliqué. */
@container (max-width: 460px) {
  .pcard.pc-xp .pcx-unit { display: none; }
  /* densité réduite pour récupérer la place de « EU Ouest » sur carte étroite */
  .pcard.pc-xp .pcx-cell { gap: 3px; padding: 8px 2px; }
}

/* ──── a5 · chips RANG (or) / RÔLE (indigo) — 2 .pcx-tag flex:1 ──── */
.pcard.pc-xp .pcx-chips { display: flex; align-items: center; gap: 9px; padding: 11px 14px; }
.pcard.pc-xp .pcx-tag {
  flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, #231f31, #191622); border: 1px solid #322d3d; border-radius: 10px; padding: 7px 11px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.3);
}
.pcard.pc-xp.fnd .pcx-tag {
  background: linear-gradient(180deg, #2a2316, #191307); border: 1px solid #3a3120;
  box-shadow: inset 0 1px 0 rgba(255,240,200,.07), 0 1px 2px rgba(0,0,0,.3);
}
.pcard.pc-xp .pcx-ib { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex: none; }
.pcard.pc-xp .pcx-ib i { font-size: 14px; }
/* RANG = OR (sur les 2 éditions) */
.pcard.pc-xp .pcx-ib.rk { background: rgba(245,196,81,.13); border: 1px solid rgba(245,196,81,.32); box-shadow: 0 0 8px -3px rgba(245,196,81,.5); }
.pcard.pc-xp .pcx-ib.rk i { color: var(--pc-gold); }
.pcard.pc-xp.fnd .pcx-ib.rk { background: rgba(245,196,81,.15); border: 1px solid rgba(245,196,81,.38); box-shadow: 0 0 8px -3px rgba(245,196,81,.6); }
/* RÔLE = INDIGO (sur les 2 éditions — pas d'override .fnd sur l'icône) */
.pcard.pc-xp .pcx-ib.rl { background: rgba(124,92,252,.14); border: 1px solid rgba(124,92,252,.32); box-shadow: 0 0 8px -3px rgba(124,92,252,.5); }
.pcard.pc-xp .pcx-ib.rl i { color: var(--pc-ind); }
.pcard.pc-xp .pcx-tt { min-width: 0; display: flex; flex-direction: column; line-height: 1.16; }
.pcard.pc-xp .pcx-tl { font-size: 10.5px; letter-spacing: .7px; color: var(--pc-mut); }
.pcard.pc-xp.fnd .pcx-tl { color: #a99a78; }
.pcard.pc-xp .pcx-tv { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--pc-tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ──── a6 · footer foil : pastille édition + n° de série foil + 4 boutons ──── */
.pcard.pc-xp .pcx-foot {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: auto;   /* feed-fix : footer collé au BAS de la carte (cartes courtes : l'espace va au-dessus) */
  padding: 7px 14px; overflow: visible; border-top: 1px solid #262330;   /* b5a : visible → le dropdown ⋯ s'ouvre au-dessus du footer (le ::before inset:0 ne déborde pas) */
  background: repeating-linear-gradient(52deg, rgba(255,255,255,.04) 0 1px, transparent 1px 6px), linear-gradient(180deg, #110f18, #16131f);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.pcard.pc-xp .pcx-foot::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .8;
  background: linear-gradient(100deg, rgba(160,140,255,.12), rgba(130,200,255,.11) 30%, rgba(120,235,195,.09) 50%, rgba(255,225,150,.11) 70%, rgba(255,160,195,.12) 92%);
}
.pcard.pc-xp.fnd .pcx-foot {
  border-top: 1px solid #2c2616;
  background: repeating-linear-gradient(52deg, rgba(255,240,200,.045) 0 1px, transparent 1px 6px), linear-gradient(180deg, #120f0a, #1a1510);
}
.pcard.pc-xp.fnd .pcx-foot::before {
  background: linear-gradient(100deg, rgba(255,225,150,.13), rgba(255,242,200,.11) 35%, rgba(245,196,81,.11) 60%, rgba(255,210,150,.11) 85%);
}
.pcard.pc-xp.off .pcx-foot::before { opacity: .32; }

/* gauche : pastille édition AU-DESSUS du n° de série */
.pcard.pc-xp .pcx-cf-left { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pcard.pc-xp .pcx-edpill {
  position: relative; display: inline-flex; align-items: center; flex: none; overflow: hidden;
  font-family: var(--font-display); font-weight: 800; font-size: 8.5px; letter-spacing: .8px; line-height: 1; padding: 3px 9px; border-radius: 999px;
  background: repeating-linear-gradient(52deg, rgba(255,255,255,.16) 0 1px, transparent 1px 5px), linear-gradient(95deg, #7C5CFC, #FF6B9D);
  color: rgba(9,6,20,.62); text-shadow: 0 1px 0 rgba(255,255,255,.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.35);
}
.pcard.pc-xp .pcx-edpill.f {
  background: repeating-linear-gradient(52deg, rgba(255,255,255,.18) 0 1px, transparent 1px 5px), linear-gradient(95deg, #F5C451, #FFCAA0);
  color: rgba(52,33,4,.68); text-shadow: 0 1px 0 rgba(255,250,235,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(0,0,0,.35);
}
.pcard.pc-xp .pcx-serial { font-size: 9.5px; color: #6f6b7c; letter-spacing: .3px; white-space: nowrap; }
.pcard.pc-xp .pcx-serial b {
  font-family: var(--font-mono); font-weight: 700; letter-spacing: .5px;
  background: var(--pc-foil); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pcard.pc-xp .pcx-serial .pcx-cap { color: #7a7488; margin-left: 1px; }
.pcard.pc-xp.fnd .pcx-serial { color: #8a7a52; }
.pcard.pc-xp.fnd .pcx-serial b { background: var(--pc-foil-gold); -webkit-background-clip: text; background-clip: text; }
.pcard.pc-xp.fnd .pcx-serial .pcx-cap { color: #9a875c; }

/* droite : 4 boutons verrouillés (38px, radius 10, icône 16, Outfit) */
.pcard.pc-xp .pcx-actions { position: relative; z-index: 1; display: flex; align-items: center; gap: 7px; flex: none; }
.pcard.pc-xp .pcx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-display); font-weight: 500; font-size: 13px; height: 32px;
  color: var(--pc-tx2); background: rgba(22,19,30,.85); border: 1px solid var(--pc-bd2); border-radius: 10px; padding: 0 13px;
  white-space: nowrap; cursor: pointer; box-sizing: border-box; transition: border-color .18s, background .18s;
}
.pcard.pc-xp .pcx-btn:hover { border-color: #5b5470; background: rgba(34,30,44,.95); }
.pcard.pc-xp .pcx-btn:disabled { opacity: .5; cursor: default; }
.pcard.pc-xp .pcx-btn:disabled:hover { border-color: var(--pc-bd2); background: rgba(22,19,30,.85); }
.pcard.pc-xp .pcx-btn i { font-size: 15px; }
.pcard.pc-xp .pcx-btn.icon { width: 38px; padding: 0; gap: 0; }
/* primaire « + Demander » : dégradé PLEIN EN DUR (pas de var()) + glow */
.pcard.pc-xp .pcx-btn.pri {
  font-weight: 600; border: 0; color: #fff; padding: 0 16px;
  background: linear-gradient(95deg, #7C5CFC, #FF6B9D);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 18px -4px rgba(255,107,157,.6), 0 6px 16px -8px rgba(255,107,157,.5);
}
.pcard.pc-xp .pcx-btn.pri:hover { filter: brightness(1.06); }
.pcard.pc-xp.fnd .pcx-btn.pri {
  color: #3A2A08; background: linear-gradient(95deg, #F5C451, #FFCAA0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 18px -4px rgba(245,196,81,.6), 0 6px 16px -8px rgba(245,196,81,.5);
}

/* ════════════════════════════════════════════════════════
   PASSE MOBILE · FOOTER (Option 1) — sous ~460px.
   ⚠️ PLACÉ APRÈS a6 À DESSEIN : mêmes sélecteurs/spécificité que les
   règles footer de base → c'est l'ordre source qui tranche, donc ces
   règles doivent venir EN DERNIER pour gagner la cascade.
   Secondaires (Partager/QR/Profil) → carrés icône ; Profil masque son
   label (.pcx-btn-label, zéro dup markup) ; « + Demander » GARDE son
   label (CTA). Resserrage pour tenir à 360 ; n° série + édition visibles.
   ════════════════════════════════════════════════════════ */
@container (max-width: 460px) {
  .pcard.pc-xp .pcx-btn-label { display: none; }
  .pcard.pc-xp .pcx-foot { padding: 7px 8px; gap: 6px; }
  .pcard.pc-xp .pcx-actions { gap: 3px; }
  .pcard.pc-xp .pcx-btn:not(.pri):not(.pcx-st) { width: 34px; padding: 0; gap: 0; }
  .pcard.pc-xp .pcx-btn.pri { padding: 0 8px; }
  /* états désactivés (.pcx-st : Envoyée / ~Xh) gardent leur libellé court même sur carte étroite */
  .pcard.pc-xp .pcx-btn.pcx-st { padding: 0 9px; gap: 5px; }
}

/* b5a-fix · aperçu profil/onboarding (colonne ~280–300px) : compaction des chips pour
   que « Ascendant III » (pire rang) et « Contrôleur » (pire rôle) tiennent sans ellipsis.
   Le feed (≥330px) garde ses chips pleins (look validé intact). */
@container (max-width: 320px) {
  .pcard.pc-xp .pcx-chips { gap: 6px; padding: 11px 10px; }
  .pcard.pc-xp .pcx-tag   { gap: 5px; padding: 7px 8px; }
  .pcard.pc-xp .pcx-ib    { width: 22px; height: 22px; }
  .pcard.pc-xp .pcx-ib i  { font-size: 12px; }
  .pcard.pc-xp .pcx-ib svg{ width: 12px; height: 12px; }
  .pcard.pc-xp .pcx-tv    { font-size: 13px; }
}

/* ════════════════════════════════════════════════════════
   b3 · FALLBACK SVG (preview-card / onboarding sans Tabler).
   Les <svg> héritent la MÊME taille/couleur que les <i> Tabler
   (currentColor). Scopé aux conteneurs d'icône → l'anneau de
   score (.pcx-score-ring svg) n'est PAS touché. Les <i> Tabler
   gardent leurs règles → feed/fiche/landing inchangés.
   ════════════════════════════════════════════════════════ */
.pcard.pc-xp .pcx-lock svg { width: 9px; height: 9px; color: var(--pc-ind); }
.pcard.pc-xp.fnd .pcx-lock svg { color: #f0cf86; }
.pcard.pc-xp .pcx-cell svg { width: 12px; height: 12px; color: var(--pc-ind); flex: none; }
.pcard.pc-xp.fnd .pcx-cell svg { color: #e0b85a; }
.pcard.pc-xp .pcx-ib svg { width: 14px; height: 14px; }
.pcard.pc-xp .pcx-ib.rk svg { color: var(--pc-gold); }
.pcard.pc-xp .pcx-ib.rl svg { color: var(--pc-ind); }
.pcard.pc-xp .pcx-btn svg { width: 15px; height: 15px; }

/* ──── b4 · slot mot d'intro (demande reçue) — sous le header. Sobre : filet
   indigo + fond .06 + italique. Troncature ~95 car. côté JS (renderCardXP) →
   bloc NORMAL qui grandit naturellement (pas de -webkit-line-clamp). ──── */
.pcard.pc-xp .pcx-intro {
  margin: 6px 14px 11px;
  padding: 8px 11px;
  background: rgba(124, 92, 252, .06);
  border-left: 2px solid var(--pc-ind);
  border-radius: 0 8px 8px 0;
  font-family: var(--font-body);
  font-size: 12px; line-height: 1.45; color: var(--pc-tx2); font-style: italic;
}

/* ──── b5a · ⋯ overflow réutilisé dans le footer pc-xp (mate + demandes) :
   même menu TESTÉ (.pc-more/.pc-menu, app.js — Retirer/Bloquer/Signaler), look
   icône pcx + palette ALWAYS-DARK (jamais le thème de la page). Danger en ROSE
   (le vert est réservé à la Fiabilité). ──── */
.pcard.pc-xp .pcx-actions { position: relative; }                /* ancre du dropdown .pc-menu */
.pcard.pc-xp .pcx-foot .pc-more { flex: none; }                  /* garde le gabarit .pcx-btn.icon */
.pcard.pc-xp .pcx-foot .pc-menu {
  right: 0; bottom: calc(100% + 8px);
  background: #17141f; border: 1px solid var(--pc-bd);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
}
.pcard.pc-xp .pcx-foot .pc-menu-item { color: var(--pc-tx2); }
.pcard.pc-xp .pcx-foot .pc-menu-item:hover { background: rgba(124, 92, 252, .12); color: var(--pc-tx); }
.pcard.pc-xp .pcx-foot .pc-menu-item.is-danger { color: var(--pc-rose); }
.pcard.pc-xp .pcx-foot .pc-menu-item.is-danger:hover { background: rgba(255, 107, 157, .12); }

/* ──── [sous-lot 3] Socle mate — variante STRICTEMENT scopée .pcx-foot--mate
   (le .pcx-foot nu reste le footer partagé : discover/demandes/pc-full).
   Rangée identité (pill/série + ⋯) puis « On rejoue ? » pleine largeur. ──── */
.pcard.pc-xp .pcx-foot--mate { flex-direction: column; align-items: stretch; gap: 8px; }
.pcard.pc-xp .pcx-foot--mate .pcx-cfm-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pcard.pc-xp .pcx-foot--mate .pcx-socle .pcx-btn { flex: 1; }
/* [fix menu×3D] Le dropdown mate vivait dans la face avant du châssis 3D
   (preserve-3d) : z-index non fiable → WebKit peignait le socle PAR-DESSUS
   (texte sur texte, tap intercepté — constaté device). Re-parenté par
   renderPlayerCard en enfant direct de l'article, HORS du 3D : ancre = la
   carte, fond PLEIN, au-dessus de tout le recto (y compris socle rose). */
.pcard.pc-xp > .pc-menu {
  right: 8px; bottom: 8px; z-index: 6;
  background: #17141f; border: 1px solid var(--pc-bd);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
}
/* palette always-dark répliquée (le menu n'est plus sous .pcx-foot) */
.pcard.pc-xp > .pc-menu .pc-menu-item { color: var(--pc-tx2); min-height: 32px; padding: 6px 10px; }
.pcard.pc-xp > .pc-menu .pc-menu-item:hover { background: rgba(124, 92, 252, .12); color: var(--pc-tx); }
.pcard.pc-xp > .pc-menu .pc-menu-item.is-danger { color: var(--pc-rose); }
.pcard.pc-xp > .pc-menu .pc-menu-item.is-danger:hover { background: rgba(255, 107, 157, .12); }
.pcard.pc-xp > .pc-menu .pc-menu-sep { background: var(--pc-bd); }
/* socle neutralisé tant que le menu est ouvert : AUCUN tap intercepté — le
   tap hors menu ne fait que le fermer (fermeture globale app.js). */
.pcard.pc-xp:has(> .pc-menu:not([hidden])) .pcx-socle { pointer-events: none; }

/* [sous-lot 4 rév. device] : cadenas avatar RETIRÉ du markup (avatar nu, toutes
   surfaces .pc-xp + .pc-full) et holo-au-tap RETIRÉ (à-coup en fin de rotation —
   l'holo :hover souris plus haut reste seul). Les règles .pcx-lock de BASE
   (l.161-165, 375-376) restent : consommées par les snapshots statiques de la
   landing (index.html hero/démo/feed), cadenas narratif du gate. Le sceau du
   verso est rendu directement OUVERT (ti-lock-open fixe, cf. .pcx-back-ph). */
.pcard.pc-xp .pcx-foot .pc-menu-item { min-height: 32px; padding: 6px 10px; }   /* compaction douce, contexte carte */
/* séparateur du menu (générique + override always-dark carte) */
.pc-menu-sep { height: 1px; margin: 4px 8px; background: var(--border-2); }
.pcard.pc-xp .pcx-foot .pc-menu-sep { background: var(--pc-bd); }

/* b5a · placeholder « Ton pseudo » de l'aperçu self vide (onboarding début) — atténué/italique */
.pcard.pc-xp .pcx-name.pcx-name-ph { color: var(--pc-mut); font-style: italic; font-weight: 600; }

/* ════════════════════════════════════════════════════════
   CARTE COMPLÈTE (portrait) — .pc-full · étape 2 du chantier carte.
   Cible design : maquette matexp_two_cards_color_header.html (356px).
   Racine `pcard pc-xp pc-full` : HÉRITE de .pc-xp (palette --pc-*, coque,
   holo, foil, avatar, cellules, tuiles rang/rôle, footer foil, série).
   Cette section n'ajoute que le NEUF (préfixe .pcf-*) + les overrides.
   PLACÉE EN FIN DE FICHIER à dessein : même spécificité que .pc-xp →
   l'ordre source fait gagner .pc-full (y c. sur les container queries).
   Rendu par js/card-full.js (window.MateXPCardFull). Toujours-sombre.
   ════════════════════════════════════════════════════════ */
.pcard.pc-full {
  /* coque : ombre plus profonde que la compacte (objet « vitrine », maquette) */
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.09), inset 1px 0 0 rgba(255,255,255,.045),
    inset -1px 0 0 rgba(0,0,0,.42), inset 0 -2px 0 rgba(0,0,0,.5),
    0 0 0 1px rgba(0,0,0,.55), 0 32px 64px -18px rgba(0,0,0,.85),
    0 0 120px -40px rgba(124,92,252,.5);
}
.pcard.pc-full:hover {
  transform: translateY(-5px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.11), inset 1px 0 0 rgba(255,255,255,.05),
    inset -1px 0 0 rgba(0,0,0,.42), inset 0 -2px 0 rgba(0,0,0,.5),
    0 0 0 1px rgba(0,0,0,.55), 0 42px 74px -18px rgba(0,0,0,.9),
    0 0 150px -32px rgba(124,92,252,.9);
}
/* fondateur : coque CHAUDE (maquette — ≠ compacte qui garde la coque violette) */
.pcard.pc-full.fnd {
  border-color: #93702f;
  /* scanlines or retirées DÉFINITIVEMENT (08/07, cf. coque .pcx) */
  background:
    linear-gradient(118deg, rgba(255,255,255,0) 30%, rgba(255,240,200,.06) 47%, rgba(255,255,255,0) 63%),
    radial-gradient(140% 90% at 82% -15%, rgba(255,235,180,.08), rgba(255,255,255,0) 52%),
    linear-gradient(180deg, #231d12, #13100a);
  box-shadow:
    inset 0 2px 0 rgba(255,240,200,.12), inset 1px 0 0 rgba(255,235,180,.06),
    inset -1px 0 0 rgba(0,0,0,.42), inset 0 -2px 0 rgba(0,0,0,.5),
    0 0 0 1px rgba(0,0,0,.55), 0 32px 64px -18px rgba(0,0,0,.85),
    0 0 130px -38px rgba(245,196,81,.5);
}
.pcard.pc-full.fnd:hover {
  border-color: #b89042;
  box-shadow:
    inset 0 2px 0 rgba(255,240,200,.14), inset 1px 0 0 rgba(255,235,180,.06),
    inset -1px 0 0 rgba(0,0,0,.42), inset 0 -2px 0 rgba(0,0,0,.5),
    0 0 0 1px rgba(0,0,0,.55), 0 42px 74px -18px rgba(0,0,0,.9),
    0 0 160px -32px rgba(245,196,81,.9);
}

/* texture « constellation » (dna) — masquée vers le bas */
.pcard.pc-full .pcf-dna {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background:
    radial-gradient(circle at 16% 13%, rgba(255,255,255,.5) 0 1px, transparent 1.7px),
    radial-gradient(circle at 29% 7%, rgba(124,92,252,.55) 0 1px, transparent 1.7px),
    radial-gradient(circle at 47% 14%, rgba(255,255,255,.38) 0 1px, transparent 1.7px),
    radial-gradient(circle at 63% 6%, rgba(124,92,252,.45) 0 1px, transparent 1.7px),
    radial-gradient(circle at 78% 15%, rgba(255,255,255,.42) 0 1px, transparent 1.7px),
    radial-gradient(circle at 88% 8%, rgba(255,107,157,.42) 0 1px, transparent 1.7px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.014) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 27px 27px, 27px 27px;
  -webkit-mask-image: radial-gradient(125% 60% at 50% -4%, black, transparent 58%);
  mask-image: radial-gradient(125% 60% at 50% -4%, black, transparent 58%);
}
.pcard.pc-full.fnd .pcf-dna {
  background:
    radial-gradient(circle at 16% 13%, rgba(255,255,255,.5) 0 1px, transparent 1.7px),
    radial-gradient(circle at 29% 7%, rgba(245,196,81,.6) 0 1px, transparent 1.7px),
    radial-gradient(circle at 47% 14%, rgba(255,245,220,.4) 0 1px, transparent 1.7px),
    radial-gradient(circle at 63% 6%, rgba(245,196,81,.55) 0 1px, transparent 1.7px),
    radial-gradient(circle at 78% 15%, rgba(255,255,255,.42) 0 1px, transparent 1.7px),
    radial-gradient(circle at 88% 8%, rgba(255,202,168,.45) 0 1px, transparent 1.7px),
    linear-gradient(90deg, rgba(255,240,200,.02) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,240,200,.016) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 27px 27px, 27px 27px;
}

/* PLAQUE édition — bandeau coloré strié, lettrage évidé embossé (bloc signature) */
.pcard.pc-full .pcf-band {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 7px 12px; overflow: hidden;
  background: repeating-linear-gradient(52deg, rgba(255,255,255,.13) 0 1px, transparent 1px 6px), linear-gradient(95deg, #7C5CFC, #FF6B9D);
  border-bottom: 1px solid rgba(0,0,0,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 5px rgba(0,0,0,.18);
}
.pcard.pc-full .pcf-band-t {
  position: relative; z-index: 1; font-family: var(--font-display); font-weight: 800;
  font-size: 11px; letter-spacing: 2.8px; color: rgba(9,6,20,.58);
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.38));
}
.pcard.pc-full.fnd .pcf-band {
  background: repeating-linear-gradient(52deg, rgba(255,255,255,.14) 0 1px, transparent 1px 6px), linear-gradient(95deg, #F5C451, #FFCAA0);
  border-bottom: 1px solid rgba(80,52,8,.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 5px rgba(120,80,10,.2);
}
.pcard.pc-full.fnd .pcf-band-t { letter-spacing: 2.6px; color: rgba(52,33,4,.6); filter: drop-shadow(0 1px 0 rgba(255,250,235,.45)); }

/* en-tête identité : grid avatar | pseudo centré | présence */
.pcard.pc-full .pcf-head {
  position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 6px; padding: 11px 14px 10px;
  background: radial-gradient(75% 140% at 50% -12%, rgba(124,92,252,.14), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0));
  border-bottom: 1px solid #2a2734;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.pcard.pc-full.fnd .pcf-head {
  background: radial-gradient(75% 140% at 50% -12%, rgba(245,196,81,.14), transparent 70%), linear-gradient(180deg, rgba(255,240,200,.045), rgba(255,255,255,0));
  border-bottom: 1px solid #2c2616;
  box-shadow: inset 0 1px 0 rgba(255,240,200,.06);
}
.pcard.pc-full .pcf-head .pcx-av { justify-self: start; width: 38px; height: 38px; }
.pcard.pc-full .pcf-head .pcx-av-in { font-size: 12px; }
.pcard.pc-full .pcf-name {
  justify-self: center; min-width: 0; max-width: 100%;
  font-family: var(--font-display); font-weight: 600; font-size: 20px; color: #fff; letter-spacing: .6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* glow 16px retiré (bug rectangle : clippé par l'overflow — cf. .pcx-name) */
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.pcard.pc-full.fnd .pcf-name { text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.pcard.pc-full .pcf-live {
  justify-self: end; display: inline-flex; align-items: center; gap: 5px;
  background: rgba(124,92,252,.1); border: 1px solid rgba(124,92,252,.25); border-radius: 999px;
  padding: 4px 9px; color: #b9aef0; font-size: 10px; letter-spacing: .4px; white-space: nowrap;
}
.pcard.pc-full.off .pcf-live { background: rgba(139,135,148,.08); border-color: rgba(139,135,148,.22); color: #8B8794; }

/* bande 3 cellules : réutilise .pcx-cell/.pcx-div, densité portrait.
   Fond OPAQUE uniforme (teinte sur sombre plein) : le halo haut-droit de la
   coque (radial at 82% -15%) éclaircissait le fond TRANSLUCIDE sous le 2e
   séparateur → trait délavé à droite. Opaque = les 2 séparateurs égaux. */
.pcard.pc-full .pcx-strip {
  background: linear-gradient(rgba(124,92,252,.05), rgba(124,92,252,.05)), #17141f;
  border-top: 0; box-shadow: inset 0 1px 3px rgba(0,0,0,.25);
}
.pcard.pc-full.fnd .pcx-strip { background: linear-gradient(rgba(245,196,81,.05), rgba(245,196,81,.05)), #171208; }
.pcard.pc-full .pcx-cell { font-size: 11px; padding: 8px 4px; gap: 5px; color: var(--pc-tx2); }
.pcard.pc-full .pcx-cell i { font-size: 14px; }

/* corps : colonne de panneaux */
.pcard.pc-full .pcf-body { display: flex; flex-direction: column; gap: 7px; padding: 10px 15px 12px; }
.pcard.pc-full .pcf-idrow { display: flex; align-items: center; gap: 8px; }

/* panneau incrusté (grammaire commune fiabilité/ambiance/agents/infos) */
.pcard.pc-full .pcf-panel {
  position: relative; background: rgba(17,15,30,.85); border: 1px solid #2c2838; border-radius: 12px;
  box-shadow: inset 0 2px 11px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.025);
  padding: 9px 12px;
}
.pcard.pc-full.fnd .pcf-panel {
  background: rgba(26,21,11,.82); border: 1px solid #2f2818;
  box-shadow: inset 0 2px 11px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,240,200,.03);
}
.pcard.pc-full .pcf-slab { font-size: 11px; letter-spacing: 1px; color: var(--pc-mut); }
.pcard.pc-full.fnd .pcf-slab { color: #a99a78; }
.pcard.pc-full .pcf-qm { font-size: 13px; color: #5f5b6c; cursor: help; vertical-align: middle; margin-left: 4px; }
.pcard.pc-full.fnd .pcf-qm { color: #6a6152; }

/* panneau FIABILITÉ : anneau + palier | %rejouent · sessions */
.pcard.pc-full .pcf-score { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pcard.pc-full .pcf-sleft { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pcard.pc-full .pcf-ring { position: relative; flex: none; width: 43px; height: 43px; }
.pcard.pc-full .pcf-ring svg { position: absolute; inset: 0; }
.pcard.pc-full .pcf-ring-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 15px; color: var(--pc-grn);
  text-shadow: 0 0 10px rgba(52,211,153,.7);
}
.pcard.pc-full .pcf-tier { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--pc-grn); margin-top: 1px; }
/* états non « noté » : anneau/valeurs neutres (gris) — l'honnêteté du cas Nouveau/Provisoire */
.pcard.pc-full .pcf-ring-num.mut, .pcard.pc-full .pcf-tier.mut { color: #8b8794; text-shadow: none; }
.pcard.pc-full .pcf-newcap { font-size: 10.5px; color: var(--pc-mut); margin-top: 2px; line-height: 1.3; }
.pcard.pc-full .pcf-sright { display: flex; align-items: center; gap: 12px; flex: none; }
.pcard.pc-full .pcf-sdiv { width: 1px; height: 31px; background: var(--pc-bd); }
.pcard.pc-full.fnd .pcf-sdiv { background: #3a3120; }
.pcard.pc-full .pcf-bignum { font-family: var(--font-mono); font-weight: 700; font-size: 16px; color: var(--pc-tx); text-align: center; text-shadow: 0 0 8px rgba(255,255,255,.12); }
.pcard.pc-full .pcf-bignum.mut { color: var(--pc-mut); text-shadow: none; }
.pcard.pc-full .pcf-statlab { font-size: 11px; letter-spacing: .5px; color: var(--pc-mut); text-align: center; margin-top: 1px; }

/* panneau AMBIANCE : slider Chill↔Tryhard */
.pcard.pc-full .pcf-prow { display: flex; justify-content: space-between; align-items: center; }
.pcard.pc-full .pcf-vlabel { font-family: var(--font-display); font-weight: 500; font-size: 13px; }
.pcard.pc-full .pcf-vlabel.v-chill { color: #bcb1f2; }
.pcard.pc-full .pcf-vlabel.v-comp  { color: #ff9bbf; }
.pcard.pc-full .pcf-vlabel.v-try   { color: #ffb38f; }
/* v-mid : vibe 5 « Équilibré » — NEUTRE (ni chill ni tryhard), surcharge LOCALE au
   portrait (card-full.js) ; les seuils bucket() de vibe.js restent la source des
   autres couleurs ET de la pastille condensée (intouchée). */
.pcard.pc-full .pcf-vlabel.v-mid   { color: var(--pc-tx2); }
.pcard.pc-full .pcf-vtrack {
  position: relative; height: 8px; border-radius: 999px; margin-top: 4px;
  background: linear-gradient(90deg, var(--pc-ind), var(--pc-rose));
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4), 0 0 14px -2px rgba(255,107,157,.55);
}
.pcard.pc-full .pcf-vt { position: absolute; top: 1px; width: 1px; height: 6px; background: rgba(7,7,9,.4); }
.pcard.pc-full .pcf-vknob {
  position: absolute; top: 50%; transform: translate(-50%,-50%); width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #ffffff, #ece8f6 55%, #d2cbe2);
  border: 1.5px solid rgba(7,7,9,.45);
  box-shadow: 0 0 0 1px rgba(255,107,157,.45), 0 0 12px rgba(255,107,157,.65), 0 2px 5px rgba(0,0,0,.55);
}
.pcard.pc-full .pcf-vends { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; }
.pcard.pc-full .pcf-vends .c { color: #9b8cf0; }
.pcard.pc-full .pcf-vends .t { color: #ff9bbf; }

/* panneau AGENTS : tuiles ÉGALES (pas de couronne — pas de notion « main » en base) */
.pcard.pc-full .pcf-agents { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pcard.pc-full .pcf-agrow { display: flex; gap: 6px; }
.pcard.pc-full .pcf-agt {
  width: 32px; height: 32px; border-radius: 8px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #282438, #1b1826); border: 1px solid var(--pc-bd);
  font-family: var(--font-display); font-weight: 600; font-size: 11px; color: var(--pc-tx2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.3);
}
.pcard.pc-full.fnd .pcf-agt {
  background: linear-gradient(180deg, #2a2316, #19130a); border: 1px solid #3a3120;
  box-shadow: inset 0 1px 0 rgba(255,240,200,.06), 0 1px 2px rgba(0,0,0,.3);
}

/* panneau INFOS (hybride) : LANGUES · MICRO · DISPO réels + promesse discrète */
.pcard.pc-full .pcf-mgrid { display: flex; align-items: stretch; gap: 10px; }
.pcard.pc-full .pcf-mcell { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* MICRO (valeur ultra-courte) : colonne au contenu → LANGUES/DISPO tiennent en entier à 356 */
.pcard.pc-full .pcf-mcell.slim { flex: 0 0 auto; }
.pcard.pc-full .pcf-mval {
  font-family: var(--font-display); font-weight: 600; font-size: 12.5px; color: var(--pc-tx);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pcard.pc-full .pcf-mdiv { width: 1px; background: var(--pc-bd); flex: none; }
.pcard.pc-full.fnd .pcf-mdiv { background: #3a3120; }
.pcard.pc-full .pcf-soon {
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
  margin-top: 7px; padding-top: 6px; border-top: 1px dashed #2c2838;
  font-size: 10px; letter-spacing: .3px; color: var(--pc-mut); opacity: .8;
}
.pcard.pc-full.fnd .pcf-soon { border-top-color: #2f2818; }
.pcard.pc-full .pcf-soon i { font-size: 11px; }

/* footer : réutilise .pcx-foot/.pcx-serial ; + signature wordmark foil */
.pcard.pc-full .pcx-foot { padding: 9px 15px; margin-top: 9px; }
.pcard.pc-full .pcx-serial { font-size: 11px; }
.pcard.pc-full .pcf-brand {
  position: relative; z-index: 1; font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: .4px;
  background: var(--pc-foil); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
}
.pcard.pc-full.fnd .pcf-brand { background: var(--pc-foil-gold); -webkit-background-clip: text; background-clip: text; }

/* barre d'actions au survol (OPTIONNELLE — rendue seulement si data.actions ;
   ⚠️ hover = pattern souris : la mécanique mobile se tranche à l'intégration) */
.pcard.pc-full .pcf-hbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 7;
  display: flex; gap: 7px; padding: 12px 13px;
  background: linear-gradient(0deg, rgba(7,7,11,.98), rgba(7,7,11,.82) 62%, transparent);
  opacity: 0; transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease; pointer-events: none;
}
.pcard.pc-full:hover .pcf-hbar { opacity: 1; transform: translateY(0); pointer-events: auto; }
.pcard.pc-full.fnd .pcf-hbar { background: linear-gradient(0deg, rgba(10,8,4,.98), rgba(10,8,4,.82) 62%, transparent); }
.pcard.pc-full .pcf-ha {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-display); font-weight: 500; font-size: 13px; padding: 9px 0;
  border-radius: 10px; border: 1px solid var(--pc-bd2); color: var(--pc-tx2);
  background: rgba(22,19,30,.85); cursor: pointer;
}
.pcard.pc-full .pcf-ha i { font-size: 16px; }
.pcard.pc-full .pcf-ha.pri {
  border: 0; color: #fff; background: linear-gradient(95deg, #7C5CFC, #FF6B9D); font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 18px -3px rgba(255,107,157,.7), 0 6px 16px -8px rgba(255,107,157,.55);
}
.pcard.pc-full.fnd .pcf-ha { border: 1px solid #4a4031; color: #cdbf94; background: rgba(26,20,10,.85); }
.pcard.pc-full.fnd .pcf-ha.pri {
  border: 0; color: #3a2a08; background: linear-gradient(95deg, #F5C451, #FFCAA0); font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 18px -3px rgba(245,196,81,.7), 0 6px 16px -8px rgba(245,196,81,.6);
}

/* compaction portrait étroit (~≤330 : colonne mobile serrée) */
@container (max-width: 330px) {
  .pcard.pc-full .pcf-body { gap: 6px; padding: 9px 11px 11px; }
  .pcard.pc-full .pcf-panel { padding: 8px 10px; }
  .pcard.pc-full .pcf-name { font-size: 18px; }
  .pcard.pc-full .pcf-agt { width: 28px; height: 28px; font-size: 10px; border-radius: 7px; }
  .pcard.pc-full .pcf-mval { font-size: 11.5px; }
  .pcard.pc-full .pcf-mgrid { gap: 7px; }
  .pcard.pc-full .pcf-bignum { font-size: 14px; }
  .pcard.pc-full .pcf-sleft, .pcard.pc-full .pcf-sright { gap: 8px; }
}

/* ════ [Palier 2] Gyro — le reflet suit l'inclinaison ════
   Vars --tiltx/--tilty (±1) écrites par js/motion-fx.js (1 écriture/frame sur
   <html>) — compositor-only, transform seul, teintes sourdes (--pc-foil jamais).
   html.mfx n'existe QUE moteur actif (jamais desktop : available() l'exclut).
   transition:none sous gyro (lissage 100 % JS, évite le double-amorti). Sans
   activation : aucune règle ne matche → carte strictement identique (zéro
   régression, prouvée au banc). Couvre .pc-xp ET .pc-full (recto+verso :
   l'holo vit au niveau article, hors du sous-arbre 3D du flip). */
html.mfx .pcard .pcx-holo {
  transition: none;
  transform: translate(calc(var(--tiltx, 0) * 15%), calc(var(--tilty, 0) * 6%));
}

/* ════ [flip · sous-lot 1] Châssis 3D de la carte mate ════
   MATE-ONLY (markup .pcx-flip émis par fromMate seul). La perspective vit
   DANS la transform du wrapper — rien sur l'article, qui garde son
   overflow:hidden + radius (piège iOS connu : preserve-3d sous un clip —
   à prouver device ; filet faux-flip documenté au bilan de session).
   Grid-stack : les 2 faces en cellule 1/1 → hauteur = la plus haute,
   égalisée SANS JS (recto = .pcx-stack inchangée). */
.pcard.pc-xp .pcx-flip {
  flex: 1; min-height: 0;              /* reprend le rôle flex de .pcx-stack dans la colonne article */
  display: grid;
  transform-style: preserve-3d;
  transform: perspective(1100px) rotateY(0deg);
  transition: transform var(--dur-enter) var(--ease-inout);
}
.pcard.pc-xp .pcx-flip.is-flipped { transform: perspective(1100px) rotateY(180deg); }
.pcard.pc-xp .pcx-flip > .pcx-stack,
.pcard.pc-xp .pcx-flip > .pcx-back {
  grid-area: 1 / 1;
  -webkit-backface-visibility: hidden;   /* Safari */
  backface-visibility: hidden;
}
.pcard.pc-xp .pcx-back {
  position: relative; z-index: 1;
  transform: rotateY(180deg);            /* pré-retournée → lisible carte flippée */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 16px 18px;
}
/* sceau OUVERT fixe en ancre haute — symbole « identité révélée » (rév. device :
   pas d'animation d'ouverture ; le cadenas avatar a été retiré partout) */
.pcard.pc-xp .pcx-back-ph {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid #322d3d; background: #16131e;
}
.pcard.pc-xp .pcx-back-ph i { font-size: 18px; color: var(--pc-mut); }

/* [sous-lot 2] hiérarchie verso : sceau → RIOT ID vedette → Discord secondaire.
   Slots peuplés LAZY par app.js (populateCardBack) au 1er flip — le squelette
   naît vide + hidden. Les [hidden]{display:none} explicites sont NÉCESSAIRES
   (le display:flex des règles battrait le [hidden] UA). Palette locale carte
   (--pc-*, always-dark) — jamais le rainbow --pc-foil (doctrine joyau). */
.pcard.pc-xp .pcx-bk-riot { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.pcard.pc-xp .pcx-bk-riot[hidden] { display: none; }
.pcard.pc-xp .pcx-bk-label { font-size: 10.5px; letter-spacing: .7px; color: var(--pc-mut); }   /* écho .pcx-tl */
.pcard.pc-xp .pcx-bk-idrow { display: flex; align-items: center; gap: 9px; min-width: 0; max-width: 100%; }
.pcard.pc-xp .pcx-bk-idrow > i { font-size: 15px; color: var(--pc-ind); flex: none; }
.pcard.pc-xp .pcx-bk-id { font-family: var(--font-mono); font-weight: 700; font-size: 17px; color: var(--pc-tx);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pcard.pc-xp .pcx-bk-discord { display: flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; }
.pcard.pc-xp .pcx-bk-discord[hidden] { display: none; }
.pcard.pc-xp .pcx-bk-discord > i { font-size: 14px; color: var(--pc-mut); flex: none; }
.pcard.pc-xp .pcx-bk-tag { font-family: var(--font-mono); font-size: 12.5px; color: var(--pc-tx2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ── 🐛 CORRECTIF DE BUG ANTÉRIEUR (flip, sous-lot 2) — sans rapport avec la
   provenance ci-dessous, embarqué ici parce que même fichier, même face, même
   déploiement. `.pcx-back` est un item de GRILLE : sa taille minimale
   automatique vaut min-content. Avec un Riot ID long (nowrap + ellipsis), ce
   min-content valait 317 px → la face arrière REFUSAIT de rétrécir, débordait
   .pcx-flip (mesuré : flip 278 / back 317 sur une carte de 280 px) et se
   faisait clipper par l'overflow:hidden de l'article : Riot ID coupé des DEUX
   côtés, SANS ellipsis, icône poussée hors cadre.
   La chaîne min-width:0 interne était déjà complète (.pcx-bk-riot / -idrow /
   -id) — seul ce maillon-ci manquait.
   ⚠️ Appliqué à .pcx-back SEUL : mesuré sur .pcx-stack aux 5 largeurs (280→420)
   et 4 cas, l'étendre au recto ne change RIEN → on n'y touche pas.
   ⚠️ COUPLAGE À CONNAÎTRE : tant que ce bug existait, .pcx-back faisait toujours
   ≥ 317 px, donc .pcx-prov disposait toujours de ≥ 281 px et ne POUVAIT PAS
   revenir à la ligne. Cette protection était ACCIDENTELLE ; elle disparaît ici.
   Marge réelle après correction : 244 px disponibles au plancher (carte 280 px
   = viewport 320 px moins le padding 2×20 de .app-main) pour 226 px de texte au
   pire (« septembre »). Seuil de retour à la ligne : carte 262 px — hors
   d'atteinte de tout téléphone. */
.pcard.pc-xp .pcx-flip > .pcx-back { min-width: 0; }

/* Corollaire du min-width ci-dessus : .pcx-btn ne déclare pas de flex-shrink
   (donc 1) et se comprimait AVANT que l'ellipsis n'absorbe la contrainte —
   mesuré 29 px au lieu de 34 sur une carte de 280 px, sous la cible tactile.
   Le motif existe déjà sur les icônes voisines (.pcx-bk-idrow > i,
   .pcx-bk-discord > i) : on l'étend au bouton, on n'en invente pas un. */
.pcard.pc-xp .pcx-bk-idrow .pcx-btn,
.pcard.pc-xp .pcx-bk-discord .pcx-btn { flex: none; }

/* ── [1B] PROVENANCE au verso : date d'ACQUISITION du lien, jamais une durée.
   🔑 HORS FLUX (position:absolute) À DESSEIN. Les deux faces sont en grid-stack
   → hauteur du châssis = max(recto, verso) ; hors flux, la mention coûte ZÉRO
   pixel de hauteur de flux ⇒ le RECTO ne peut pas grandir PAR CONSTRUCTION,
   pas parce que la mesure du jour le permet. (Variante en flux avec
   margin-top:auto : mesurée à 224 px, elle tenait aussi sous le recto — mais
   elle absorbe l'espace libre et pousse le bloc sceau + identité vers le HAUT,
   déplaçant un rendu validé. Écartée.)
   ANCRE : .pcx-back porte `position: relative` EXPLICITEMENT (une ligne avant
   son transform, plus haut) → on ne dépend PAS de l'effet de bord du rotateY,
   qui créerait aussi un bloc conteneur mais disparaîtrait avec un changement de
   technique de flip.
   ÉCART mesuré sous le bloc identité : 15 px au pire cas (recto le plus court =
   mate sans score), 21-22 px avec score, 37 px sans Discord — identique de 280
   à 420 px, et INCHANGÉ par le correctif min-width ci-dessus (rien ne wrappe au
   verso : tout y est nowrap + ellipsis, donc ça tronque au lieu de passer à la
   ligne). L'écart est monotone dans le bon sens : un recto plus haut étire
   .pcx-back et l'augmente.
   SCOPE : descendante de .pcx-back, qui n'existe QUE sur les cartes de Ma
   collection (data.flip posé par fromMate seul, card-xp.js). Les 14 snapshots
   statiques de la landing et preview-card.js n'ont NI .pcx-flip NI .pcx-back
   → aucune fuite possible, sans garde supplémentaire.
   Filet #322d3d = la valeur de bordure déjà utilisée par .pcx-back-ph.
   Couleur --pc-mut. JAMAIS le rainbow --pc-foil (doctrine, plus bas). */
.pcard.pc-xp .pcx-prov {
  position: absolute; left: 18px; right: 18px; bottom: 12px;
  padding-top: 9px; border-top: 1px solid #322d3d;
  text-align: center; line-height: 1.3;
  font-size: 10.5px; letter-spacing: .3px; color: var(--pc-mut);
}