/* ════════════════════════════════════════════════════════════════════
 * PLB — Carte joueur (voir player-card.js)
 *
 * La base est celle du composant FlutterFlow `contact_card_full` : pastille
 * turquoise avec la photo, sections Activités / Groupes, pied villes + n°.
 * Par-dessus, le traitement « vignette Panini » : un objet qu'on a envie de
 * tenir — papier crème vieilli (grain + bords brunis), cadre doré et
 * turquoise, reflet brillant qui suit la lumière, légère inclinaison 3D.
 * ════════════════════════════════════════════════════════════════════ */

.plb-card {
  --pc-teal: var(--teal, #3DD6C4);
  --pc-gold: #d8b25a;
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 30%;
  position: relative;
  border-radius: 14px;
  padding: 5px;                         /* épaisseur du cadre */
  color: #10212a;
  font-family: 'Readex Pro', -apple-system, sans-serif;
  /* Cadre : or → turquoise → or, comme le liseré métallisé d'une vignette. */
  background: linear-gradient(135deg, var(--pc-gold) 0%, #f3dd9a 18%, var(--pc-teal) 45%,
                                      #2DB8A8 60%, #f3dd9a 82%, var(--pc-gold) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 14px 34px rgba(0,0,0,.45),
    0 2px 6px rgba(0,0,0,.3);
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .35s ease, box-shadow .35s ease;
  transform-style: preserve-3d;
}
.plb-card.pc-on { transition: transform .08s linear, box-shadow .2s ease;
                  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 22px 44px rgba(0,0,0,.5), 0 3px 8px rgba(0,0,0,.3); }

/* Le papier : crème, un peu jauni, avec du grain (bruit SVG) et des bords
   brunis — le vieillissement d'une vignette gardée dans un album. */
.plb-card-inner {
  position: relative; border-radius: 10px; padding: 12px 12px 12px;
  border: 1px solid rgba(45,184,168,.55);
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(120,84,30,.22) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .35  0 0 0 0 .2  0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"),
    linear-gradient(225deg, #fffdf6 4%, #f7e6b8 22%, #efe7d3 40%, #ece6d8 100%);
  overflow: hidden;
}

/* Reflet : une bande de lumière qui suit la souris (--mx/--my), et un léger
   irisé holographique. Invisible au repos sur écran tactile. */
.pc-shine {
  position: absolute; inset: 5px; border-radius: 10px; pointer-events: none; z-index: 3;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.55), rgba(255,255,255,0) 42%),
    linear-gradient(115deg, transparent 30%, rgba(255,220,150,.18) 45%, rgba(120,255,230,.16) 52%, transparent 66%);
  mix-blend-mode: soft-light;
  opacity: .35; transition: opacity .3s;
}
.plb-card.pc-on .pc-shine { opacity: 1; }

.pc-head { position: relative; padding-top: 4px; }
.pc-star { position: absolute; top: 2px; right: 2px; width: 44px; height: 30px; object-fit: contain; z-index: 2; }
.pc-star[hidden] { display: none; }
.pc-pill {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(180deg, #4fe0cf 0%, var(--pc-teal) 55%, #2fbfae 100%);
  border-radius: 50px; padding: 8px 18px 8px 8px; min-height: 96px;
  box-shadow: 0 2px 0 rgba(255,255,255,.45) inset, 0 -2px 0 rgba(0,0,0,.1) inset, 0 3px 8px rgba(20,80,70,.25);
}
.pc-avatar {
  width: 96px; height: 96px; border-radius: 50%; flex-shrink: 0;
  background: #0d1117; display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 2rem;
  border: 3px solid #fffaf0; overflow: hidden;
  box-shadow: 0 0 0 2px var(--pc-gold), 0 4px 10px rgba(0,0,0,.3);
}
.pc-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.pc-id { min-width: 0; flex: 1; }
.pc-name { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.35rem; color: #08252b; line-height: 1.1;
           text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.pc-age { font-family: 'Outfit', sans-serif; font-weight: 500; font-size: .95rem; color: #0a2e35; margin-top: 1px; }
.pc-coord { font-size: .88rem; color: #0a2e35; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-age[hidden], .pc-coord[hidden], [data-r="foot"][hidden], .pc-stats[hidden] { display: none; }

/* Bande de stats : le « dos » de la vignette, avec une équipe donnée. */
.pc-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 12px 0 2px;
}
.pc-stats-t { grid-column: 1 / -1; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .72rem;
              text-transform: uppercase; letter-spacing: .08em; color: #6b4e17; }
.pc-stats > div:not(.pc-stats-t) {
  text-align: center; padding: 6px 4px; border-radius: 10px;
  background: rgba(255,255,255,.55); border: 1px solid rgba(160,120,50,.35);
}
.pc-stats b { display: block; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.3rem; color: #0b3a40; }
.pc-stats span { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: #5a4a2c; }

.pc-section-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .88rem; margin: 10px 2px 5px; color: #10212a; }
.pc-cubes { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; min-height: 68px; }
.pc-cubes::-webkit-scrollbar { height: 5px; }
.pc-cubes::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 3px; }
.pc-cube { flex-shrink: 0; width: 62px; text-align: center; }
.pc-cube-img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto;
               background: #dfe3e6; box-shadow: 0 2px 5px rgba(0,0,0,.2); border: 2px solid #fffaf0; }
.pc-cube-fb { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 1.15rem; font-family: 'Outfit', sans-serif; }
.pc-cube-lbl { font-size: .66rem; font-weight: 600; color: #10212a; margin-top: 4px; line-height: 1.12; max-height: 2.3em; overflow: hidden; }
.pc-empty { font-size: .78rem; color: rgba(0,0,0,.5); font-style: italic; padding: 6px 2px; }
.pc-divider { border: none; border-top: 2px solid rgba(20,80,96,.2); margin: 12px 0 8px; }
.pc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pc-cities { display: flex; gap: 12px; overflow: hidden; font-size: .9rem; font-weight: 600; }
.pc-city { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.pc-num { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: .95rem; flex-shrink: 0;
          padding: 1px 8px; border-radius: 6px; background: #10212a; color: #f3dd9a; }

@media (max-width: 600px) {
  .pc-pill { min-height: 80px; gap: 10px; padding: 6px 12px 6px 6px; }
  .pc-avatar { width: 72px; height: 72px; font-size: 1.6rem; }
  .pc-name { font-size: 1.15rem; }
}

/* ── Badges, DANS la carte (PLBCard.badges) ───────────────────────────────
   Une vitrine d'ÉCUSSONS sous la pastille du nom — volontairement PAS le
   style des cubes ronds Activités / Groupes, et pas de titre : la forme de
   blason dit ce que c'est. Liseré or → fond du badge, reflet verni, le nom
   sur un ruban sombre qui chevauche la pointe (même encre que le n° de carte).
   La forme vient de border-radius (pas de clip-path) : l'ombre suit l'écu. */
.pc-bdgs[hidden] { display: none; }
.pc-bdgs {
  margin: 10px 0 0; padding: 8px 6px 7px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(16,33,42,.07), rgba(16,33,42,.03));
  border: 1px solid rgba(160,120,50,.28); box-shadow: inset 0 1px 3px rgba(0,0,0,.08);
}
/* Sur deux lignes s'il le faut, jamais de défilement : un badge coupé au
   bord ne se voyait plus (le jalon, toujours dernier, disparaissait). */
.pc-bdgs-in { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 4px; padding: 1px 2px 2px; }
.pc-bdg { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; min-width: 54px; cursor: pointer;
          /* Un bouton (toucher = explication), sans l'habit d'un bouton. */
          appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; margin: 0;
          font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.pc-bdg:focus-visible { outline: 2px solid #10212a; outline-offset: 2px; border-radius: 8px; }
.pc-bdg[aria-expanded="true"] .pc-bdg-j { transform: translateY(-2px); box-shadow: 0 0 0 2px #10212a, 0 3px 7px rgba(0,0,0,.3); }
/* L'écu : bord supérieur presque droit, flancs qui se rejoignent en pointe. */
.pc-bdg-j, .pc-bdg-in { border-radius: 8px 8px 50% 50% / 8px 8px 100% 100%; }
.pc-bdg-j {
  position: relative;                /* au-dessus de l'aura (badges.js, .plb-aura) */
  width: 42px; height: 50px; padding: 3px;
  background: linear-gradient(160deg, #fff3c4 0%, var(--pc-gold) 40%, #a8822f 100%);
  box-shadow: 0 3px 7px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.5) inset;
  transition: transform .15s ease;
}
.pc-bdg:hover .pc-bdg-j { transform: translateY(-2px) rotate(-3deg); }
.pc-bdg-in {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 6px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18), inset 0 -4px 8px rgba(0,0,0,.18);
}
/* Le reflet : une lumière en haut à gauche, comme sur un émail verni. */
.pc-bdg-in::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 30% 18%, rgba(255,255,255,.8), rgba(255,255,255,.15) 40%, rgba(255,255,255,0) 60%),
              linear-gradient(160deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 45%); }
.pc-bdg-e { position: relative; z-index: 1; font-size: 19px; line-height: 1; }
/* Le palier d'un jalon (10, 25, 100…), gravé dans l'écu sous le symbole. */
.pc-bdg-c { position: relative; z-index: 1; font: 800 9.5px/1 'Outfit', sans-serif; margin-top: 2px; }
/* Le ruban : bouts entaillés en queue d'aronde, posé sur la pointe de l'écu. */
.pc-bdg-lbl {
  position: relative; z-index: 2; margin-top: -9px; max-width: 86px;
  padding: 2px 9px 2px; background: #10212a; color: #f3dd9a;
  font: 700 .54rem/1.25 'Outfit', sans-serif; text-transform: uppercase; letter-spacing: .03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 50%, 100% 100%, 0 100%, 5px 50%);
}

/* L'explication d'un écusson touché, sous la vitrine : même encre et même
   papier que la carte (elle est identique en mode clair et sombre). */
.pc-bdg-info[hidden] { display: none; }
.pc-bdg-info {
  margin: 8px 2px 1px; padding: 8px 10px; border-radius: 8px;
  background: rgba(255,255,255,.6); border: 1px solid rgba(160,120,50,.35);
  font-size: .8rem; line-height: 1.35; color: #10212a; text-align: left;
}
.pc-bdg-info-t { display: flex; align-items: center; gap: 6px; font: 800 .9rem/1.2 'Outfit', sans-serif; }
.pc-bdg-info-d { font-weight: 600; margin-top: 3px; }
.pc-bdg-info-r { color: #4a3d24; margin-top: 3px; font-size: .74rem; }
.pc-bdg-jauge { margin-top: 7px; }
.pc-bdg-jauge-t { display: flex; justify-content: space-between; gap: 8px; font-size: .7rem; color: #4a3d24; }
.pc-bdg-jauge-t b { color: #10212a; font-family: 'Outfit', sans-serif; }
.pc-bdg-jauge-b { height: 7px; margin-top: 3px; border-radius: 4px; background: rgba(16,33,42,.12); overflow: hidden; }
.pc-bdg-jauge-b i { display: block; height: 100%; border-radius: 4px; }

/* ── Fenêtre (PLBCard.ouvrir) ─────────────────────────────────────────── */
/* Centrée par `margin:auto` dans un conteneur qui DÉFILE, pas par une grille
   `place-items:center` : sur téléphone, une carte avec stats et badges est
   plus haute que l'écran, et la grille la centrait quand même — le haut
   (nom, bouton ✕) sortait de l'écran sans qu'on puisse y remonter. La carte
   paraissait « décalée » (Daniel, 28/09). */
.pc-modal {
  position: fixed; inset: 0; z-index: 210; display: flex; padding: 22px 16px;
  overflow-y: auto; overscroll-behavior: contain;
  background: rgba(6,9,18,.74); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.pc-modal-box { position: relative; margin: auto; width: min(380px, 100%); flex-shrink: 0;
                animation: pc-in .35s cubic-bezier(.2,.9,.3,1.2); }
@media (max-width: 420px) { .pc-close { top: -12px; right: -6px; } }
.pc-close {
  position: absolute; top: -14px; right: -14px; z-index: 5; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25); background: #141926; color: #E6EDF3; cursor: pointer; font-size: .9rem;
}
.pc-close:hover { background: #1f2638; }
@keyframes pc-in { from { opacity: 0; transform: translateY(18px) scale(.94) rotate(-2deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pc-modal-box { animation: none; } .plb-card { transform: none; } }

/* ── Mode clair (html[data-theme="light"], theme-mode.js) ─────────────────
   La carte elle-même est un objet : papier crème, cadre doré, identique
   dans les deux modes. Seul ce qui l'entoure suit le thème : le voile de la
   fenêtre et le bouton de fermeture posé à cheval sur le bord. */
:root[data-theme="light"] .pc-modal { background: rgba(15,20,32,.42); }
:root[data-theme="light"] .pc-close { background: var(--surface); color: var(--text); border-color: var(--border);
                                      box-shadow: 0 2px 8px rgba(15,20,32,.18); }
:root[data-theme="light"] .pc-close:hover { background: var(--surface2); }