/* =====================================================================
   FICHE D'IDENTITÉ (17/10/2026) — /js/fiche-identite.js. À charger AVEC
   /avatar/avatars.css, /css/cadres-animes.css et /css/titres-animes.css.
   Tout est proportionnel à la largeur de la carte (container queries) :
   la même carte sert à 300 px (perso.html) comme à 420 px (modale).
   ===================================================================== */
.fi-carte {
  --fi-w: 360px;
  --fi-or1: #f4cd78; --fi-or2: #96621f; --fi-or3: #ffe6aa;
  --fi-accent: #ffd27a;                 /* teinte du nom de la cité / des filets */
  --fi-fond: none;
  width: var(--fi-w); max-width: 100%;
  container-type: inline-size;
  position: relative; isolation: isolate;
  /* ⚠️ pas de cqw ICI : sur le conteneur lui-même, cqw se rapporte à la fenêtre.
     Rayon et ombre sont portés par les enfants (.fi-in, .fi-dorure, .fi-reflet). */
  font-family: Calibri, "Segoe UI", system-ui, sans-serif;
  color: #fff5e0;
  user-select: none; -webkit-user-select: none;
}
.fi-in {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 4.2cqw;
  box-shadow: 0 1.2cqw 5cqw rgba(0, 0, 0, .55), 0 0 4cqw rgba(255, 196, 92, .18);
  font-size: 4.2cqw;                    /* 1em ≈ 15 px pour une carte de 360 px */
  padding: 1.25em 1.1em 1.05em;
  display: flex; flex-direction: column; align-items: center; gap: .55em;
  min-height: 136cqw;                   /* proportion carte à collectionner (545 × 768 ≈ 1 : 1,41) */
  box-sizing: border-box;
  background: #120d1a;
}
/* Fond : dos de carte de la cité (Lumithal / Ombrefac), sinon neutre */
.fi-in::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: var(--fi-fond) 50% -27cqw / 112% auto no-repeat;  /* l'emblème de la cité encadre l'avatar */
  filter: saturate(1.1);
}
.fi-in::after {                         /* voile : le centre reste lisible */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 70% 38% at 50% 30%, rgba(8, 6, 14, .15), rgba(8, 6, 14, .55) 70%),
    linear-gradient(180deg, rgba(8, 6, 14, .55) 0, rgba(8, 6, 14, 0) 20%, rgba(8, 6, 14, .15) 38%, rgba(8, 6, 14, .7) 52%, rgba(8, 6, 14, .9) 64%, rgba(8, 6, 14, .95) 100%);
}
.fi-carte[data-cite="lumithal"] { --fi-fond: url("/cartes/dos-lumithal.webp"); --fi-accent: #bcd6ff; }
.fi-carte[data-cite="ombrefac"] { --fi-fond: url("/cartes/dos-ombrefac.webp"); --fi-accent: #ffb27a; }
.fi-carte[data-cite=""] .fi-in::before,
.fi-carte:not([data-cite]) .fi-in::before {
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 210, 122, .16), transparent 45%),
    repeating-conic-gradient(from 0deg at 50% 30%, rgba(255, 220, 160, .05) 0 6deg, transparent 6deg 12deg),
    linear-gradient(180deg, #2a1f3a, #15101f 60%, #0d0a14);
}

/* Cadre doré double (même dessin que admin/_dev_cartes/composer.py) */
.fi-dorure {
  position: absolute; inset: 0; border-radius: 4.2cqw; pointer-events: none; z-index: 6;
  box-shadow:
    inset 0 0 0 1.1cqw var(--fi-or2),
    inset 0 0 0 2cqw var(--fi-or1),
    inset 0 0 0 2.5cqw var(--fi-or2),
    inset 0 0 2.4cqw 2.6cqw rgba(0, 0, 0, .45);
}
.fi-dorure::after {
  content: ""; position: absolute; inset: 4cqw; border-radius: 2.2cqw;
  border: 1px solid rgba(255, 230, 170, .42);
}
/* Reflet holographique lent (comme l'ouverture des boosters) */
.fi-reflet {
  position: absolute; inset: 0; border-radius: 4.2cqw; pointer-events: none; z-index: 7; overflow: hidden;
}
.fi-reflet::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; width: 45%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 240, 200, .16) 45%, rgba(255, 255, 255, .26) 50%, rgba(255, 240, 200, .16) 55%, transparent);
  transform: skewX(-12deg);
  animation: fi-reflet 7s ease-in-out infinite;
}
@keyframes fi-reflet { 0%, 55% { left: -60%; } 85%, 100% { left: 125%; } }

/* ── Haut : blason de niveau · cité · guilde ── */
.fi-haut { width: 100%; display: grid; grid-template-columns: 3.4em 1fr 3.4em; align-items: center; gap: .3em; }
.fi-medaillon {
  width: 3.4em; height: 3.4em; border-radius: 50%;
  display: grid; place-items: center; position: relative;
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .18), rgba(0, 0, 0, .55));
  box-shadow: 0 0 0 .14em var(--fi-or1), 0 0 0 .26em var(--fi-or2), 0 .2em .6em rgba(0, 0, 0, .6);
}
.fi-medaillon img, .fi-medaillon svg { width: 82%; height: 82%; object-fit: contain; display: block; }
.fi-medaillon picture { display: contents; }
.fi-medaillon .fi-leg {
  position: absolute; bottom: -1.05em; left: 50%; transform: translateX(-50%);
  font-size: .62em; font-weight: 800; letter-spacing: .04em; white-space: nowrap;
  padding: .05em .5em; border-radius: 1em;
  background: rgba(10, 6, 16, .85); border: 1px solid rgba(255, 210, 122, .55); color: var(--fi-or3);
}
.fi-medaillon.vide { opacity: .35; }
.fi-cite {
  text-align: center; font-family: Constantia, "Palatino Linotype", Georgia, serif; font-weight: 700;
  font-size: .78em; letter-spacing: .22em; text-transform: uppercase; color: var(--fi-accent);
  text-shadow: 0 0 .6em rgba(0, 0, 0, .9), 0 0 .9em color-mix(in srgb, var(--fi-accent) 55%, transparent);
}
.fi-cite small { display: block; font-size: .78em; letter-spacing: .08em; text-transform: none; font-weight: 400; color: #e9dcc4; opacity: .85; }

/* ── Avatar + cadre animé + familier ── */
.fi-scene { position: relative; width: 100%; display: grid; place-items: center; margin-top: .6em; }
.fi-av {
  --fi-av: 40cqw;
  position: relative; width: var(--fi-av); height: var(--fi-av);
  border-radius: 24%;
  background: radial-gradient(circle at 50% 40%, rgba(255, 230, 170, .22), rgba(10, 6, 16, .6) 70%);
}
.fi-av .ap-ico, .fi-av .ap-ico[class*="avatar-"] {
  --sz: var(--fi-av) !important; width: var(--fi-av); height: var(--fi-av);
  display: block; margin: 0; border-radius: 22%;
}
.fi-av > .frame.none { display: none; }
.fi-av > .aura { position: absolute; inset: 0; pointer-events: none; }
.fi-fam {
  position: absolute; z-index: 8;
  left: calc(50% + var(--fi-av, 40cqw) / 2 - 3.5cqw); bottom: -2cqw;
  width: 17cqw; height: 17cqw;
  filter: drop-shadow(0 .3em .4em rgba(0, 0, 0, .7));
}
.fi-fam [data-fam-sprite] { width: 100%; height: 100%; }
.fi-fam .fv-fam-sprite-fallback { font-size: 11cqw; line-height: 1; }

/* ── Nom (pseudo ou alias) + titre ── */
.fi-nom {
  margin-top: .45em;
  font-family: Constantia, "Palatino Linotype", Georgia, serif; font-weight: 800;
  font-size: 1.75em; line-height: 1.05; text-align: center; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #fff3d6; text-shadow: 0 .08em .25em rgba(0, 0, 0, .9);
}
.fi-nom.pseudo { font-weight: 800; filter: drop-shadow(0 0 .12em rgba(0,0,0,.95)) drop-shadow(0 .06em .2em rgba(0,0,0,.9)); }
.fi-nomzone { margin-top: .35em; padding: .1em 1.4em .15em; max-width: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center;
  background: radial-gradient(ellipse at center, rgba(8, 6, 14, .82) 0, rgba(8, 6, 14, .55) 45%, transparent 72%); }
.fi-nomzone .fi-nom { margin-top: 0; }
.fi-alias-note { font-size: .62em; color: #d8cbb2; margin-top: .1em; letter-spacing: .03em; }
/* Sa propre fiche : pseudo de légende vu par les autres (18/10/2026) */
.fi-legende { font-size: .78em; color: #f3dfb4; margin-top: .25em; }
.fi-legende b { color: #ffd27a; }
/* Bouton « ✒️ Changer » (perso.html, Cérémonie du Nom — /js/nom-legende.js) */
.fi-legende-btn { display: inline-block; margin-left: .3em; padding: .15em .6em; border-radius: 999px; border: 1px solid rgba(255,210,122,.6); background: rgba(255,210,122,.12);
  color: #ffd27a; font-family: inherit; font-size: 1em; font-weight: 700; line-height: 1.3; cursor: pointer; vertical-align: baseline; }
.fi-legende-btn:hover { background: rgba(255,210,122,.25); }
.fi-titre { width: 92%; display: flex; justify-content: center; min-height: 1.6em; }
.fi-titre .tb, .fi-titre .tbb { max-width: 100%; font-size: .82em; }

/* ── Classe · guilde ── */
.fi-ident { display: flex; flex-wrap: wrap; justify-content: center; gap: .35em .45em; font-size: .78em; }
.fi-puce {
  display: inline-flex; align-items: center; gap: .35em;
  padding: .18em .65em .18em .22em; border-radius: 2em;
  background: rgba(12, 8, 20, .72); border: 1px solid rgba(255, 210, 122, .45);
  color: #f8ead0; font-weight: 700; white-space: nowrap; max-width: 100%;
}
.fi-puce .fi-ico { width: 1.75em; height: 1.75em; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: rgba(255, 255, 255, .08); flex-shrink: 0; }
.fi-puce .fi-ico img, .fi-puce .fi-ico svg { width: 100%; height: 100%; object-fit: cover; }
.fi-puce .fi-ico picture { display: contents; }
/* Portrait de classe : tête et épaules dans le cercle (voir portraitClasse dans js/fiche-identite.js).
   L'image (personnage en pied) fait 250 % du cercle ; décalée de -75 % à gauche (centrage)
   et de --fi-cl-top en haut (hauteur du visage). !important : protège des règles img des pages. */
.fi-puce .fi-ico.fi-classe { position: relative; display: block; width: 2.1em; height: 2.1em; overflow: hidden; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 210, 122, .55); background: radial-gradient(circle at 50% 40%, rgba(120, 90, 160, .55), rgba(20, 12, 30, .9)); }
.fi-puce .fi-ico.fi-classe img {
  position: absolute !important; left: -75% !important; top: var(--fi-cl-top, -5%) !important;
  width: 250% !important; height: 250% !important; max-width: none !important; max-height: none !important;
  object-fit: contain !important; margin: 0 !important; padding: 0 !important; border: 0 !important; transform: none !important;
}
.fi-puce .fi-ico.fi-classe [class$="-fallback"] { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.1em; }
.fi-puce span.t { overflow: hidden; text-overflow: ellipsis; }

/* ── Badges épinglés ── */
.fi-sep {
  width: 86%; display: flex; align-items: center; gap: .6em; margin-top: .2em;
  font-family: Constantia, "Palatino Linotype", Georgia, serif; font-size: .7em; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fi-or1);
}
.fi-sep::before, .fi-sep::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(244, 205, 120, .7), transparent); }
.fi-badges { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: .45em; }
.fi-badge { display: flex; flex-direction: column; align-items: center; gap: .15em; min-width: 0; }
.fi-badge .fi-bimg {
  width: 4.3em; height: 4.3em; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, rgba(255, 236, 190, .22), rgba(0, 0, 0, .5));
  box-shadow: 0 0 0 .1em rgba(244, 205, 120, .85), 0 0 .8em rgba(255, 200, 100, .25);
}
.fi-badge .fi-bimg img { width: 84%; height: 84%; object-fit: contain; }
.fi-badge .fi-bimg picture { display: contents; }
.fi-badge .fi-bnom {
  font-size: .64em; font-weight: 700; text-align: center; line-height: 1.15; color: #fff0d0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.3em;
}
.fi-badge .fi-brare { font-size: .56em; color: #ffd27a; opacity: .9; white-space: nowrap; }
.fi-badge.vide .fi-bimg { box-shadow: 0 0 0 .1em rgba(244, 205, 120, .3); opacity: .5; }

/* ── Chiffres ── */
.fi-chiffres {
  width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: .2em;
  border-top: 1px solid rgba(244, 205, 120, .45);
  padding-top: .45em;
}
.fi-chiffre { text-align: center; min-width: 0; }
.fi-chiffre + .fi-chiffre { border-left: 1px solid rgba(244, 205, 120, .25); }
.fi-chiffre b { display: block; font-size: 1.02em; color: #fff; white-space: nowrap; }
.fi-chiffre i { display: block; font-style: normal; font-size: .58em; color: #d9c9a8; letter-spacing: .03em; }

/* ── Modale ── */
.fi-modale {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 14px 16px; box-sizing: border-box; overflow-y: auto;
  background: rgba(6, 4, 12, .76); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  animation: fi-voile .25s ease-out both; cursor: pointer;
}
/* largeur limitée par la hauteur : la carte (≈ 1 : 1,45) + l'indication en dessous tiennent à l'écran */
.fi-modale .fi-carte { --fi-w: min(420px, 88vw, calc((100dvh - 120px) / 1.45)); animation: fi-entree .55s cubic-bezier(.2, .9, .25, 1.15) both; flex-shrink: 0; }
/* Indication de fermeture : SOUS la carte, hors de la carte, sur une pastille lisible */
.fi-modale .fi-fermer {
  flex-shrink: 0; pointer-events: none;
  font: 600 14px/1.2 Calibri, "Segoe UI", system-ui, sans-serif; color: #fff3d6 !important;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(18, 12, 28, .92); border: 1px solid rgba(255, 210, 122, .55); box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}
/* Vrai bouton de fermeture, discret, en haut à droite de la modale */
.fi-modale .fi-x {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer; padding: 0;
  display: grid; place-items: center; font: 700 20px/1 system-ui, sans-serif; color: #fff3d6 !important;
  background: rgba(18, 12, 28, .85); border: 1px solid rgba(255, 210, 122, .55);
}
.fi-modale .fi-x:hover, .fi-modale .fi-x:focus-visible { background: rgba(60, 40, 80, .95); outline: 2px solid #ffd27a; outline-offset: 2px; }
.fi-modale.sortie { animation: fi-voile .2s ease-in reverse both; }
@keyframes fi-voile { from { opacity: 0; } }
@keyframes fi-entree { from { opacity: 0; transform: perspective(900px) rotateY(-80deg) scale(.7); } 60% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .fi-reflet::before { animation: none; display: none; }
  .fi-modale .fi-carte, .fi-modale { animation: none; }
}

/* Puce « ni classe ni guilde » */
.fi-puce.fi-puce-vide { padding-left: .65em; opacity: .75; }

/* ── Accueil : familier « compagnon » accroché à l'avatar du bouton Mon compte ── */
#header-av-wrap { position: relative; cursor: zoom-in; }
.fi-compagnon { position: absolute; right: -12px; bottom: -10px; width: 30px; height: 30px; z-index: 7; cursor: help;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .7)); }
.fi-compagnon [data-fam-sprite] { width: 100%; height: 100%; }
.fi-compagnon .fv-fam-sprite-fallback, .fi-compagnon [class$="-fallback"] { font-size: 22px; line-height: 30px; }

/* Bouton « 🪪 Ma fiche » (à côté du pseudo sur l'accueil, à côté de l'alias dans le Top 10) */
.fi-btn-fiche {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; flex-shrink: 0;
  margin-left: 6px; padding: 3px 8px; border-radius: 999px; cursor: pointer;
  font: 700 12px/1.2 Calibri, "Segoe UI", system-ui, sans-serif; color: #2a1800 !important;
  background: linear-gradient(180deg, #ffe7a6, #e2a83a); border: 1px solid #a8741f; box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.fi-btn-fiche:hover, .fi-btn-fiche:focus-visible { filter: brightness(1.08); outline: 2px solid #fff3d6; outline-offset: 1px; }
.fi-btn-fiche .fi-btn-ico { font-size: 14px; line-height: 1; }
/* Accueil : le pseudo stylé (.pseudo.gold…) déborde sur le bouton ; celui-ci passe devant */
#zone-connexion .fi-btn-fiche { position: relative; z-index: 6; }
@media (max-width: 340px) { #zone-connexion .fi-btn-fiche .fi-btn-txt { display: none; } }
.fi-btn-fiche.icone { padding: 3px 6px; }

/* Petite bulle du familier (accueil) */
.fi-fam-bulle {
  position: absolute; z-index: 30; white-space: nowrap; pointer-events: none;
  font: 700 12px/1.2 Calibri, "Segoe UI", system-ui, sans-serif; color: #fff3d6;
  padding: 5px 9px; border-radius: 9px; background: rgba(18, 12, 28, .94);
  border: 1px solid rgba(255, 210, 122, .7); box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
}
.fi-fam-bulle::after { content: ""; position: absolute; top: -6px; left: 14px; border: 6px solid transparent; border-top: 0; border-bottom-color: rgba(255, 210, 122, .7); }