/* ════════════════════════════════════════════════════════
   COMPONENTS.CSS — Composants d'interface
   MateXP · Nav, thème, boutons, champs, cartes, pills,
   carte joueur, toasts, wizard. Bordures 0.5px, zéro
   ombre (hors focus), tout via variables.
   ════════════════════════════════════════════════════════ */

/* ─── NAV (barre supérieure du site uniquement) ─── */
/* On exclut les nav sémantiques du dashboard (sidebar, bottom-nav)
   qui ont leur propre positionnement.
   BARRE FLOTTANTE « Raycast » (repensé DA) : détachée du bord (top 10px,
   largeur contenue, coins --r-lg), fond DENSE neutre (--bg-0 88 %, deux
   thèmes) + bordure neutre — AUCUN accent coloré sur le châssis, la barre
   ressort par le CONTRASTE. .scrolled = densification 96 % + 60→52px +
   ombre (classe posée par theme.js, scrollY > 8).
   Le sticky garde son slot de flux : zéro saut de layout.
   ⚠️ hauteur = --topbar-h (NE PAS toucher : l'app-topbar s'aligne dessus).
   Miroir inline d'index à garder en phase (premier paint). */
nav:not(.bottom-nav):not(.side-nav) {
  position: sticky;
  top: 10px;
  z-index: var(--z-nav);
  height: var(--topbar-h);
  width: min(1160px, calc(100% - 24px));
  margin-inline: auto;
  margin-top: 10px;   /* détachée dès le REPOS (sticky top:10 seul ne joue qu'au scroll) */
  display: flex;
  align-items: center;
  /* Vraie transparence Raycast : fond TRÈS translucide + blur FORT (les deux
     ensemble — c'est le flou qui garde liens/logo lisibles). Littéral ici :
     le token --nav-blur (24px) reste intact pour le reste du site. */
  background: color-mix(in srgb, var(--bg-0) 22%, transparent);
  backdrop-filter: saturate(180%) blur(68px);
  -webkit-backdrop-filter: saturate(180%) blur(68px);
  border: 0.5px solid rgba(10, 10, 20, 0.08);   /* neutre (valeur claire ; le sombre override plus bas) */
  border-radius: var(--r-lg);
  box-shadow: 0 4px 24px -12px rgba(0, 0, 0, 0.35);
  transition:
    height       var(--dur-base) var(--ease-out),
    background   var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow   var(--dur-base) var(--ease-out);
}
/* SOMBRE : bordure blanche translucide + ombre plus marquée (le clair garde
   les valeurs de base ; exception auto-clair, pattern tokens.css). Tout NEUTRE. */
[data-theme="dark"] nav:not(.bottom-nav):not(.side-nav),
[data-theme="auto"] nav:not(.bottom-nav):not(.side-nav) {
  border-color: rgba(255, 255, 255, 0.16);   /* contour neutre qui DESSINE la barre (Raycast) */
  box-shadow: 0 4px 24px -12px rgba(0, 0, 0, 0.55);
}
[data-theme="dark"] nav:not(.bottom-nav):not(.side-nav).scrolled,
[data-theme="auto"] nav:not(.bottom-nav):not(.side-nav).scrolled {
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 8px 32px -12px rgba(0, 0, 0, 0.6);
}
@media (prefers-color-scheme: light) {
  [data-theme="auto"] nav:not(.bottom-nav):not(.side-nav) {
    border-color: rgba(10, 10, 20, 0.08);
    box-shadow: 0 4px 24px -12px rgba(0, 0, 0, 0.35);
  }
  [data-theme="auto"] nav:not(.bottom-nav):not(.side-nav).scrolled {
    box-shadow: 0 8px 32px -12px rgba(0, 0, 0, 0.5);
  }
}
/* Esthétique « Raycast » : AUCUN accent coloré sur le châssis — la barre
   ressort par la DENSITÉ du fond (--bg-0, le plus profond du système, deux
   thèmes) ; scrolled = densification sobre 88→96 % + ombre, rien d'autre. */
nav:not(.bottom-nav):not(.side-nav).scrolled {
  height: 52px;
  /* Le glass VIT au scroll (c'est là que le contenu passe dessous) — le blur
     68px porte la lisibilité, façon Raycast. Repli device : .44 → .56. */
  background: color-mix(in srgb, var(--bg-0) 44%, transparent);
  box-shadow: 0 8px 32px -12px rgba(0, 0, 0, 0.5);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--sp-6); }
/* Logo/CTA ancrés aux extrémités de la barre flottante : bat le padding
   responsive de .container (layout.css ≥640px : 32px) — 20px à tous les écrans. */
nav .nav-inner { padding-inline: var(--sp-5); }
.nav-logo { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); color: var(--text-1); letter-spacing: -0.03em; }
.nav-links { display: none; gap: var(--sp-6); }
/* Liens façon Raycast : gris clair lisible au repos → blanc franc au survol
   (public dark-only → valeurs fixes sans risque de thème). */
.nav-links a { font-weight: 400; font-size: var(--text-sm); color: rgba(242, 241, 247, 0.65); transition: color var(--dur-fast) var(--ease-out); }
.nav-links a:hover { color: #F2F1F7; }
.nav-actions { display: flex; align-items: center; gap: var(--sp-3); }
@media (min-width: 768px) {
  .nav-links { display: flex; }
  /* Soulignement NEUTRE (hover + section active du scrollspy) — currentColor :
     il prend la couleur du lien (blanc cassé sombre / encre clair), zéro accent
     de marque (esthétique Raycast). DESKTOP seulement (bruit dans le burger). */
  .nav-links a { position: relative; }
  .nav-links a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
    border-radius: var(--r-full); background: currentColor;
    opacity: 0; transform: scaleX(0.6);
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  }
  /* Soulignement RÉSERVÉ au lien ACTIF PAR PAGE (ex. FAQ sur faq.html) —
     le hover, lui, ne change que la couleur (gris → blanc, façon Raycast). */
  .nav-links a.is-active::after { opacity: 1; transform: scaleX(1); }
  .nav-links a.is-active { color: var(--text-1); }
}

/* ─── THEME TOGGLE ─── */
.theme-toggle { display: flex; gap: 2px; background: var(--bg-2); border: 0.5px solid var(--border-1); border-radius: var(--r-full); padding: 3px; }
.theme-btn {
  display: flex; align-items: center; justify-content: center;
  min-width: 32px; padding: 5px 12px; border-radius: var(--r-full);
  font-size: var(--text-xs); font-weight: 500; color: var(--text-4);
  transition: all var(--dur-fast) var(--ease-out);
}
.theme-btn.active { background: var(--accent); color: var(--accent-fg); }
.theme-btn:hover:not(.active) { color: var(--text-2); background: var(--bg-3); }

/* ─── BOUTONS ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2); font-weight: 500; font-size: var(--text-sm);
  border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-6);
  letter-spacing: -0.01em; white-space: nowrap; min-height: 44px; /* cible tactile */
  transition:
    transform  var(--dur-fast) var(--ease-spring),
    opacity    var(--dur-fast) var(--ease-out),
    background  var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn:disabled { opacity: 0.5; transform: none; }
.btn-primary { background: var(--accent); color: var(--accent-fg); }
.btn-primary:hover { background: var(--accent-hover); }
/* Bouton MARQUE (socle DA, étape 1) : consomme --grad-brand (95°).
   Réservé aux moments d'action forts — UN par écran. Première brique :
   CTA nav de la landing. .btn-primary (accent app) reste le primaire
   par défaut partout ailleurs. Recette = écho du .pcx-btn.pri de la
   carte (lèvre inset + glow rose), calibrée pour un bouton de nav. */
.btn-brand {
  background: var(--grad-brand); color: #fff; border: none; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 18px -4px rgba(255,107,157,.5);
}
.btn-brand:hover { filter: brightness(1.06); }
/* Thème CLAIR (brique 2, auth) : le glow rose — pensé fond sombre — devient
   une assise portée teintée indigo : même profondeur, zéro bavure rose sur
   page claire. Pattern thème établi : light + duplication auto sous media. */
[data-theme="light"] .btn-brand {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 4px 14px -6px rgba(124,92,252,.45);
}
@media (prefers-color-scheme: light) {
  [data-theme="auto"] .btn-brand {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 4px 14px -6px rgba(124,92,252,.45);
  }
}
.btn-ghost { background: transparent; color: var(--text-2); border: 0.5px solid var(--border-2); }
.btn-ghost:hover { border-color: var(--border-3); background: var(--accent-dim); }
.btn-sm { padding: var(--sp-2) var(--sp-4); font-size: var(--text-xs); min-height: 36px; }
.btn-lg { padding: var(--sp-4) var(--sp-8); font-size: var(--text-md); min-height: 52px; }
.btn-block { width: 100%; }
/* Bouton icône seul — garde 44×44 */
.btn-icon { padding: 0; width: 44px; height: 44px; min-height: 44px; border-radius: var(--r-md); color: var(--text-3); border: 0.5px solid var(--border-2); }
.btn-icon:hover { background: var(--bg-3); color: var(--text-1); }

/* ─── CHAMPS ─── */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-2); }
.input-wrap { position: relative; }
.input {
  width: 100%; appearance: none; background: var(--bg-2);
  border: 0.5px solid var(--border-2); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); font-weight: 300; font-size: var(--text-md);
  color: var(--text-1); line-height: 1.5; min-height: 44px;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background   var(--dur-fast) var(--ease-out),
    box-shadow   var(--dur-fast) var(--ease-out);
}
.input::placeholder { color: var(--text-5); }
.input:hover { border-color: var(--border-3); }
.input:focus { border-color: var(--accent); background: var(--bg-3); box-shadow: 0 0 0 3px var(--accent-dim); }
.input.error { border-color: var(--danger); }
.input.error:focus { box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.12); }
.input.success { border-color: var(--success); }
/* Message d'erreur sous le champ (aria-live) */
.field-error { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-xs); color: var(--danger); min-height: 1em; }
/* Vérif de dispo du pseudo (auth) : neutre pendant la requête, vert si libre */
.field-error.is-checking { color: var(--text-4); }
.field-error.is-ok { color: var(--success); }
.field-hint { font-size: var(--text-xs); color: var(--text-5); }
/* Bouton afficher/masquer mot de passe à droite du champ */
.input-action { position: absolute; right: var(--sp-2); top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--text-4); border-radius: var(--r-sm); }
.input-action:hover { color: var(--text-2); background: var(--bg-3); }

/* ─── CARTE ─── */
.card {
  background: var(--bg-2); border: 0.5px solid var(--border-1);
  border-radius: var(--r-lg); padding: var(--sp-5);
  transition:
    transform    var(--dur-base) var(--ease-spring),
    border-color var(--dur-base) var(--ease-out),
    background   var(--dur-base) var(--ease-out);
}
.card:hover { transform: translateY(-2px); border-color: var(--border-3); background: var(--bg-3); }
.card-static:hover { transform: none; border-color: var(--border-1); background: var(--bg-2); } /* carte non interactive : AUCUNE réaction au survol */

/* ─── PILL / BADGE ─── */
.pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--accent-dim); border: 0.5px solid var(--border-2);
  border-radius: var(--r-full); padding: var(--sp-1) var(--sp-3);
  font-weight: 500; font-size: var(--text-xs); color: var(--accent);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.pill-dot { width: 5px; height: 5px; border-radius: var(--r-full); background: var(--accent); animation: pulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.pill-success { color: var(--success); border-color: rgba(74, 222, 128, 0.3); background: rgba(74, 222, 128, 0.1); }
.pill-success .pill-dot { background: var(--success); }
/* Badge compteur (demandes entrantes) */
.badge-count { display: inline-flex; align-items: center; justify-content: center; line-height: 1; text-align: center; min-width: 18px; height: 18px; padding: 0 5px; background: var(--accent); color: var(--accent-fg); font-size: var(--text-2xs); font-weight: 700; border-radius: var(--r-full); }

/* ─── CARTE JOUEUR ─── */
.player-card {
  background: var(--bg-2); border: 0.5px solid var(--border-1);
  border-radius: var(--r-lg); padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3); cursor: pointer;
  transition: transform var(--dur-base) var(--ease-spring), border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.player-card:hover { border-color: var(--border-3); background: var(--bg-3); transform: translateY(-2px); }
.player-head { display: flex; align-items: center; gap: var(--sp-3); }
.player-avatar {
  width: 44px; height: 44px; border-radius: var(--r-full); flex-shrink: 0;
  background: var(--accent-dim); border: 0.5px solid var(--border-2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); color: var(--accent);
}
.player-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.player-name { font-weight: 500; color: var(--text-1); font-size: var(--text-md); }
.riot-id { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-3); filter: blur(5px); user-select: none; transition: filter var(--dur-slow) var(--ease-out); }
.riot-id.revealed { filter: blur(0); user-select: text; }
.player-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ─── TOAST ─── */
.toast {
  position: fixed; bottom: var(--sp-6); right: var(--sp-6); z-index: var(--z-toast);
  max-width: calc(100vw - var(--sp-12));
  background: var(--bg-3); border: 0.5px solid var(--border-2);
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-5);
  font-size: var(--text-sm); color: var(--text-2);
  display: flex; align-items: center; gap: var(--sp-3);
  transform: translateY(16px); opacity: 0; pointer-events: none;
  transition: transform var(--dur-base) var(--ease-spring), opacity var(--dur-base) var(--ease-out);
}
.toast.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
.toast-dot { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--accent); flex-shrink: 0; }
.toast-error .toast-dot { background: var(--danger); }
.toast-success .toast-dot { background: var(--success); }

/* ─── WIZARD : barre de progression ─── */
.progress-steps { display: flex; align-items: center; gap: 0; margin-bottom: var(--sp-12); }
.step-item { display: flex; align-items: center; gap: var(--sp-2); flex: 1; }
.step-item:last-child { flex: 0; }
.step-dot {
  width: 28px; height: 28px; border-radius: var(--r-full); flex-shrink: 0;
  border: 0.5px solid var(--border-2); background: var(--bg-3);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xs); font-weight: 600; color: var(--text-4);
  transition: all var(--dur-base) var(--ease-spring);
}
.step-item.active .step-dot { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-dim); }
.step-item.done .step-dot { background: var(--success); color: var(--bg-1); border-color: var(--success); }
.step-line { flex: 1; height: 0.5px; background: var(--border-2); margin: 0 var(--sp-2); transform-origin: left; transition: background var(--dur-slow) var(--ease-out); }
.step-item.done + .step-item .step-line { background: var(--success); }
.step-label { display: none; font-size: var(--text-sm); color: var(--text-4); }
.step-item.active .step-label { color: var(--text-1); }
@media (min-width: 640px) { .step-label { display: inline; } }

/* ─── SECTION PROBLÈME (index) : faux chat soloQ ───
   Illustration 100 % fictive (pseudos archétypaux anonymes — jamais de
   vrais joueurs). Tokens purs uniquement → valide dans les deux thèmes. */
.soloq-chat {
  width: 100%; max-width: 460px; margin-inline: auto;
  background: var(--bg-2); border: 0.5px solid var(--border-1);
  border-radius: var(--r-lg); padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-4); text-align: left;
}
.soloq-chat-head {
  padding-bottom: var(--sp-3); border-bottom: 0.5px solid var(--border-1);
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-4);
}
.chat-msg { display: flex; flex-direction: column; gap: var(--sp-1); max-width: 90%; }
.chat-msg.is-me { align-self: flex-end; align-items: flex-end; }
.chat-author { font-size: var(--text-xs); font-weight: 500; color: var(--text-4); padding-inline: var(--sp-1); }
.chat-bubble {
  margin: 0; padding: var(--sp-2) var(--sp-4);
  background: var(--bg-3); border: 0.5px solid var(--border-1);
  border-radius: var(--r-md); border-top-left-radius: var(--r-sm);
  font-size: var(--text-sm); color: var(--text-2); line-height: 1.55;
}
.is-me .chat-bubble {
  background: var(--accent-dim); border-color: var(--border-2);
  border-top-left-radius: var(--r-md); border-top-right-radius: var(--r-sm);
}
.chat-sys { align-self: center; text-align: center; font-size: var(--text-xs); font-style: italic; color: var(--text-5); }
.chat-meta { font-size: var(--text-xs); color: var(--text-5); padding-inline: var(--sp-1); }
/* Stat sourcée sous le chat + phrase de transition vers la vitrine */
.soloq-source { margin-top: var(--sp-6); text-align: center; }
.soloq-source a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.soloq-source a:hover { color: var(--text-2); }
.soloq-transition {
  margin-top: var(--sp-10); text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl);
  letter-spacing: -0.02em; color: var(--text-1);
}

/* ─── SECTION COMPARATIF (index) : LFG classique vs MateXP ───
   Deux cartes .card du design system (pas de tableau brut) ; le mot
   d'appariement en <b> garde la correspondance ligne à ligne quand
   les colonnes s'empilent en mobile. Tokens purs → deux thèmes. */
.vs-col-head {
  margin-bottom: var(--sp-4);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-lg); color: var(--text-1); letter-spacing: -0.02em;
}
.vs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.vs-list li { display: flex; gap: var(--sp-3); font-size: var(--text-sm); color: var(--text-3); line-height: 1.55; }
.vs-list b { color: var(--text-2); font-weight: 600; }
.vs-ico {
  flex: none; width: 18px; height: 18px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-full); font-size: 10px; font-weight: 700;
}
.is-lfg .vs-ico { background: var(--bg-3); color: var(--text-4); }
.is-mx .vs-ico { background: var(--accent-dim); color: var(--accent); }
.vs-card-mate { border-color: var(--border-3); }

/* ─── SECTION FAQ (index) : accordéon natif <details>/<summary> ───
   Zéro JS, accessible nativement (clavier/lecteur d'écran). Refonte DA 08/07 :
   FERMÉ sobre (fond translucide + bordure NEUTRE — fini --border-1 teinté
   indigo) / OUVERT = surface relief + liseré --grad-brand + bordure indigo. */
.qa-list { width: 100%; max-width: 720px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--sp-3); text-align: left; }
.qa-item {
  position: relative; overflow: hidden;                    /* clippe le liseré au radius */
  background: color-mix(in srgb, var(--bg-2) 72%, transparent);
  border: 0.5px solid rgba(255,255,255,.09);
  border-radius: var(--r-md);
  transition: border-color .22s cubic-bezier(.22,1,.36,1), background .22s cubic-bezier(.22,1,.36,1);
}
.qa-item::before {                                          /* liseré signature, révélé à l'ouverture */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad-brand); opacity: 0; transition: opacity .22s cubic-bezier(.22,1,.36,1);
}
.qa-item[open] { background: linear-gradient(180deg, #1a1526, #15111f); border-color: rgba(124,92,252,.30); }
.qa-item[open]::before { opacity: 1; }
.qa-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); cursor: pointer; list-style: none;
  font-family: var(--font-title); font-weight: 600;
  font-size: var(--text-md); color: var(--text-1);
}
.qa-item summary::-webkit-details-marker { display: none; }
.qa-item summary::after {
  content: '+'; flex: none; font-size: var(--text-lg); font-weight: 400;
  color: var(--text-4); line-height: 1;                     /* gris qui invite */
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.qa-item[open] summary::after { transform: rotate(45deg); color: var(--accent); }
.qa-a { margin: 0; padding: 0 var(--sp-5) var(--sp-5); font-size: var(--text-sm); color: var(--text-2); line-height: 1.65; }
.qa-more { padding-top: 0; margin-top: calc(-1 * var(--sp-2)); }
.qa-more a { color: var(--accent); font-weight: 500; text-decoration: none; }
.qa-more a:hover { text-decoration: underline; }
.qa-foot { margin-top: var(--sp-8); text-align: center; font-size: var(--text-sm); color: var(--text-3); }
.qa-foot a { color: var(--accent); font-weight: 500; text-decoration: none; }
.qa-foot a:hover { text-decoration: underline; }

/* ─── VERRE (socle DA) : matière « cœur verre carte » — SOURCE UNIQUE.
   Groupe indigo : .av-ring (avatars UI : .mx-avatar navbar/topbar, #me-avatar
   sidebar, .admin-avatar, mini-avatars popups notif, badges #beta, médaillon
   logo) + .glass-core (utilitaire, formes RONDES seules — doctrine 08/07)
   + .pcx-av-in (avatar carte compacte/complète). Toujours-sombre assumé
   (doctrine « objet »). Le fond n'est plus JAMAIS posé en inline par le JS
   (avatar_color = donnée morte à l'affichage, backlog nettoyage).
   ⚠️ PLACÉ EN FIN DE FICHIER à dessein : même spécificité que .player-avatar
   → l'ordre source donne le cœur verre à un .player-avatar ringé. */
.av-ring,
.glass-core,
.pcard.pc-xp .pcx-av-in {
  color: #e7ddff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  background:
    radial-gradient(75% 65% at 32% 26%, rgba(255, 255, 255, 0.28), transparent 52%),
    radial-gradient(130% 110% at 50% 130%, rgba(124, 92, 252, 0.55), transparent 62%),
    linear-gradient(160deg, #2a2440, #14101c);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), inset 0 -3px 6px rgba(0, 0, 0, 0.55);
}
/* position:relative = plomberie de l'ANNEAU (::after), pas de la matière —
   hors du groupe pour ne rien changer aux styles calculés des .pcx-av-in. */
.av-ring { position: relative; }
.av-ring::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  padding: 1.5px; background: var(--grad-brand);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
/* Un .player-avatar ringé neutralise sa fine bordure (sinon double liseré) */
.player-avatar.av-ring { border-color: transparent; }

/* VERRE DORÉ — bloc AUTONOME (bg + relief + color + text-shadow, même relief
   que l'indigo) : .fmed (#beta landing) ne matche QUE ce groupe et doit y
   trouver son relief. Consommateurs : avatar carte fondateur .fnd,
   médaillon étoile de l'encadré 500, utilitaire .glass-core.glass-gold. */
.glass-core.glass-gold,
.pcard.pc-xp.fnd .pcx-av-in,
.lp-betaw-founders .fmed {
  color: #ffeec2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  background:
    radial-gradient(75% 65% at 32% 26%, rgba(255, 250, 235, 0.32), transparent 52%),
    radial-gradient(130% 110% at 50% 130%, rgba(245, 196, 81, 0.5), transparent 62%),
    linear-gradient(160deg, #3a2f1a, #16110a);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), inset 0 -3px 6px rgba(0, 0, 0, 0.55);
}