/* RFE — passe de club : bannières, effets de logo, carte de niveau, piste de récompenses.
   Tout est en CSS pur (dégradés, anneaux, mouvements) : pas d'image à stocker, pas de flou.
   Les identifiants (ban-*, eff-*) sont les mêmes que dans le bot (services/recompenses_clubs.py) et rfe-passe-club.js. */

@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --ang2 { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes passe-tourne { to { --ang: 360deg; } }
@keyframes couronne-glisse { to { --ang2: 360deg; } }
@keyframes passe-derive-x { to { background-position-x: 240px; } }
@keyframes passe-derive-x-inv { to { background-position-x: -240px; } }
@keyframes passe-monte { to { background-position-y: -160px; } }
@keyframes passe-vacille { 0%, 100% { opacity: 1; } 50% { opacity: 0.72; } }
@keyframes passe-balaye { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@keyframes passe-aurore { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes passe-scintille { 0%, 100% { opacity: 0.15; } 50% { opacity: 1; } }
@keyframes passe-eclair { 0%, 88%, 94%, 100% { opacity: 0; } 90%, 92% { opacity: 1; } }
@keyframes passe-pulse { from { transform: scale(1); opacity: 0.75; } to { transform: scale(1.38); opacity: 0; } }
@keyframes passe-flotte { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -3px); } }
@keyframes passe-orbite { to { transform: rotate(360deg); } }
@keyframes passe-grille { to { background-position: 34px 34px, 34px 34px; } }

/* ── Bannières ── */
.passe-ban { position: relative; overflow: hidden; isolation: isolate; }
.passe-ban::before, .passe-ban::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.passe-ban > img, .passe-ban > .club-filigrane { z-index: 1; }

.passe-ban.ban-aube { background: linear-gradient(165deg, #fbd9b5 0%, #f2a29a 42%, #8d7bd0 100%); }
.passe-ban.ban-aube::before { background: radial-gradient(ellipse 60% 80% at 18% 110%, rgba(255, 247, 214, 0.85), transparent 70%); }

.passe-ban.ban-grille { background: linear-gradient(180deg, #0a1022, #16254a); }
.passe-ban.ban-grille::before {
  background-image: linear-gradient(rgba(0, 229, 255, 0.24) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 229, 255, 0.24) 1px, transparent 1px);
  background-size: 34px 34px; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 75%); mask-image: linear-gradient(180deg, transparent 0%, #000 75%);
  animation: passe-grille 5s linear infinite;
}
.passe-ban.ban-grille::after { background: linear-gradient(90deg, rgba(255, 0, 170, 0.28), transparent 40%, transparent 60%, rgba(0, 229, 255, 0.28)); }

.passe-ban.ban-vagues { background: linear-gradient(180deg, #0b3d86 0%, #1688b8 100%); }
.passe-ban.ban-vagues::before, .passe-ban.ban-vagues::after {
  inset: auto 0 0 0; background-repeat: repeat-x; background-size: 240px 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20 Q 30 0 60 20 T 120 20 T 180 20 T 240 20 V40 H0Z' fill='%23ffffff' fill-opacity='.17'/%3E%3C/svg%3E");
}
.passe-ban.ban-vagues::before { height: 46%; animation: passe-derive-x 14s linear infinite; }
.passe-ban.ban-vagues::after { height: 30%; animation: passe-derive-x-inv 9s linear infinite; }

.passe-ban.ban-braise { background: linear-gradient(0deg, #5a0f0a 0%, #1d0808 58%, #0b0505 100%); }
.passe-ban.ban-braise::before {
  background-image:
    radial-gradient(circle at 12% 70%, #ffb347 0 2px, transparent 3px), radial-gradient(circle at 38% 30%, #ff8a3d 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 63% 85%, #ffd27a 0 2px, transparent 3px), radial-gradient(circle at 84% 45%, #ff7043 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 50% 10%, #ffc266 0 1px, transparent 2px);
  background-size: 240px 160px; animation: passe-monte 6s linear infinite;
}
.passe-ban.ban-braise::after { background: linear-gradient(0deg, rgba(255, 90, 20, 0.5), transparent 55%); animation: passe-vacille 2.2s ease-in-out infinite; }

.passe-ban.ban-aurore { background: #07122b; }
.passe-ban.ban-aurore::before {
  background: linear-gradient(115deg, transparent 8%, rgba(52, 211, 153, 0.6) 28%, rgba(99, 102, 241, 0.55) 52%, rgba(236, 72, 153, 0.45) 74%, transparent 92%);
  background-size: 230% 100%; animation: passe-aurore 10s ease-in-out infinite alternate;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 95%); mask-image: linear-gradient(180deg, #000 0%, transparent 95%);
}
.passe-ban.ban-aurore::after {
  background-image: radial-gradient(circle at 15% 25%, #fff 0 1px, transparent 2px), radial-gradient(circle at 48% 12%, #fff 0 1px, transparent 2px), radial-gradient(circle at 78% 30%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 92% 14%, #fff 0 1px, transparent 2px);
  animation: passe-scintille 3.4s ease-in-out infinite;
}

.passe-ban.ban-cristal { background: conic-gradient(from 210deg at 30% 60%, #bfe6ff, #7fb5ff, #e3f4ff, #a58bff, #bfe6ff); }
.passe-ban.ban-cristal::before {
  background: repeating-linear-gradient(60deg, rgba(255, 255, 255, 0.28) 0 1px, transparent 1px 42px), repeating-linear-gradient(-60deg, rgba(60, 90, 200, 0.16) 0 1px, transparent 1px 42px);
}
.passe-ban.ban-cristal::after {
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.7) 50%, transparent 62%); background-size: 260% 100%;
  animation: passe-balaye 5.5s ease-in-out infinite;
}

.passe-ban.ban-orage { background: linear-gradient(180deg, #1d2536, #0c1019); }
.passe-ban.ban-orage::before {
  background: radial-gradient(ellipse 45% 60% at 20% 0%, rgba(150, 165, 195, 0.35), transparent 70%), radial-gradient(ellipse 50% 55% at 75% 0%, rgba(130, 145, 180, 0.3), transparent 70%);
}
.passe-ban.ban-orage::after {
  inset: 0 auto 0 56%; width: 16%; opacity: 0; background: linear-gradient(180deg, #ffffff, #9cc7ff);
  clip-path: polygon(52% 0, 20% 46%, 46% 46%, 8% 100%, 80% 38%, 54% 38%, 86% 0); animation: passe-eclair 6s linear infinite;
}

.passe-ban.ban-legende { background: linear-gradient(135deg, #1a1205 0%, #3b2a08 38%, #b8860b 72%, #ffe28a 100%); }
.passe-ban.ban-legende::before {
  background: linear-gradient(110deg, transparent 36%, rgba(255, 246, 200, 0.62) 50%, transparent 64%); background-size: 260% 100%;
  animation: passe-balaye 4.5s ease-in-out infinite;
}
.passe-ban.ban-legende::after {
  background-image: radial-gradient(circle at 20% 30%, #fff8dc 0 1.5px, transparent 2.5px), radial-gradient(circle at 55% 70%, #fff8dc 0 1px, transparent 2px), radial-gradient(circle at 82% 25%, #fff8dc 0 2px, transparent 3px), radial-gradient(circle at 70% 85%, #fff8dc 0 1px, transparent 2px);
  animation: passe-scintille 2.6s ease-in-out infinite;
}

/* ── Bannières de succès (1, 5, 10 tournois OPEN gagnés) : même langage que les couronnes — graphite, blanc os, un seul accent par palier ── */
.passe-ban.ban-open { background: linear-gradient(180deg, #252932 0%, #12141a 100%); }
.passe-ban.ban-open::before {
  background:
    linear-gradient(90deg, transparent 6%, rgba(236, 232, 225, 0.55) 22%, rgba(236, 232, 225, 0.55) 78%, transparent 94%) 0 calc(100% - 12px) / 100% 1px no-repeat,
    linear-gradient(106deg, rgba(236, 232, 225, 0.05) 0 34%, transparent 34%),
    linear-gradient(74deg, transparent 0 66%, rgba(0, 0, 0, 0.3) 66%),
    linear-gradient(106deg, transparent 0 34%, rgba(236, 232, 225, 0.22) 34% 34.3%, transparent 34.3%);
}
.passe-ban.ban-open::after { background: linear-gradient(105deg, transparent 42%, rgba(236, 232, 225, 0.12) 50%, transparent 58%); background-size: 250% 100%; animation: passe-balaye 8s ease-in-out infinite; }

.passe-ban.ban-open_legende { background: linear-gradient(180deg, #1d1e26 0%, #0c0d11 100%); }
.passe-ban.ban-open_legende::before {
  background:
    linear-gradient(90deg, transparent 6%, rgba(236, 232, 225, 0.5) 22%, rgba(236, 232, 225, 0.5) 78%, transparent 94%) 0 calc(100% - 12px) / 100% 1px no-repeat,
    linear-gradient(112deg, transparent 0 66%, rgba(255, 70, 85, 0.1) 66% 71%, transparent 71%),
    linear-gradient(112deg, transparent 0 66%, #ff4655 66% 66.4%, transparent 66.4%),
    linear-gradient(112deg, transparent 0 71%, rgba(255, 70, 85, 0.55) 71% 71.25%, transparent 71.25%),
    linear-gradient(112deg, transparent 0 20%, rgba(236, 232, 225, 0.14) 20% 20.3%, transparent 20.3%),
    linear-gradient(112deg, transparent 0 26%, rgba(236, 232, 225, 0.08) 26% 26.3%, transparent 26.3%);
}
.passe-ban.ban-open_legende::after { background: linear-gradient(105deg, transparent 42%, rgba(255, 150, 158, 0.14) 50%, transparent 58%); background-size: 250% 100%; animation: passe-balaye 7s ease-in-out infinite; }

.passe-ban.ban-open_boss { background: radial-gradient(ellipse 75% 130% at 50% 120%, #2b2517 0%, #121014 55%, #0a0a0d 100%); }
.passe-ban.ban-open_boss::before {
  background:
    radial-gradient(ellipse 50% 98% at 50% 120%, transparent 0 96%, rgba(230, 211, 161, 0.6) 96% 98%, transparent 98%),
    repeating-conic-gradient(from -90deg at 50% 120%, rgba(230, 211, 161, 0.4) 0 0.9deg, transparent 0.9deg 7.5deg);
  -webkit-mask-image: radial-gradient(ellipse 85% 135% at 50% 120%, #000 18%, transparent 72%); mask-image: radial-gradient(ellipse 85% 135% at 50% 120%, #000 18%, transparent 72%);
  animation: valo-respire 6s ease-in-out infinite;
}
.passe-ban.ban-open_boss::after { background: linear-gradient(105deg, transparent 42%, rgba(244, 233, 196, 0.13) 50%, transparent 58%); background-size: 250% 100%; animation: passe-balaye 9s ease-in-out infinite; }
@keyframes valo-respire { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

/* ── Effets de logo : le logo est enveloppé dans .logo-fx, l'effet se dessine autour ── */
.logo-fx { --fx: 10px; --rad: 36px; --gap: var(--bg); position: relative; flex: none; width: clamp(84px, 18vw, 118px); height: clamp(84px, 18vw, 118px); margin-top: calc(-1 * clamp(2.6rem, 8vw, 3.8rem)); }
.logo-fx > .club-logo, .logo-fx > .passe-logo { position: relative; z-index: 1; margin-top: 0; width: 100%; height: 100%; box-shadow: 0 0 0 calc(var(--fx) / 2) var(--gap); }
.passe-logo { display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: hsl(var(--teinte, 210) 38% 26%); color: #fff; font-weight: 700; font-size: 1.1rem; letter-spacing: -0.04em; }
.passe-logo img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
.logo-fx::before, .logo-fx::after { content: ""; position: absolute; pointer-events: none; z-index: 0; inset: calc(var(--fx) * -1); border-radius: var(--rad); }

.logo-fx.eff-anneau::before { background: conic-gradient(from 0deg, hsl(var(--teinte, 210) 85% 62%), hsl(calc(var(--teinte, 210) + 70) 85% 58%), hsl(var(--teinte, 210) 85% 62%)); }

.logo-fx.eff-halo::before { background: hsl(var(--teinte, 210) 80% 60%); }
.logo-fx.eff-halo::after { border: 3px solid hsl(var(--teinte, 210) 80% 60%); animation: passe-pulse 2.4s ease-out infinite; }

.logo-fx.eff-or::before { background: conic-gradient(from var(--ang), #b8860b, #ffe28a, #b8860b, #fff2b8, #b8860b); animation: passe-tourne 9s linear infinite; }

.logo-fx.eff-etincelles::before { background: linear-gradient(135deg, #ffe28a, #f2b632); inset: calc(var(--fx) * -0.9); }
.logo-fx.eff-etincelles::after {
  inset: calc(var(--fx) * -2.2); border-radius: 0;
  background-image: radial-gradient(circle at 6% 16%, #ffd86b 0 2.5px, transparent 3.5px), radial-gradient(circle at 94% 26%, #ffd86b 0 2px, transparent 3px), radial-gradient(circle at 84% 94%, #ffe9a6 0 2.5px, transparent 3.5px), radial-gradient(circle at 12% 88%, #ffe9a6 0 2px, transparent 3px), radial-gradient(circle at 52% 2%, #ffd86b 0 2px, transparent 3px);
  animation: passe-scintille 1.9s ease-in-out infinite;
}

.logo-fx.eff-flamme::before { background: conic-gradient(from var(--ang), #ff3d00, #ff9100, #ffd54f, #ff9100, #ff3d00); animation: passe-tourne 2.6s linear infinite, passe-vacille 0.35s steps(2) infinite; }

.logo-fx.eff-prisme::before { background: conic-gradient(from var(--ang), #ff5f6d, #ffc371, #7bed9f, #4fc3f7, #a78bfa, #ff5f6d); animation: passe-tourne 4s linear infinite; }

/* Cadre « cristal noir » (effet Cristal noir, niveau 26 ; les couronnes l'ont aussi, avec un filet d'accent à leur couleur) : graphite à facettes qui tourne lentement, reflet blanc discret, liseré fin. */
.logo-fx.eff-cristal::before, .logo-fx.eff-couronne::before {
  inset: calc(var(--fx) * -1.7); border-radius: calc(var(--rad) + var(--fx) * 0.8);
  background:
    conic-gradient(from var(--ang2), transparent 0 92%, rgba(236, 232, 225, 0.55) 96%, transparent 100%),
    conic-gradient(from var(--ang), #0d0f14 0 14%, #1d2129 14% 20%, #0d0f14 20% 50%, #8d9099 50% 51%, #0d0f14 51% 74%, #1d2129 74% 80%, #0d0f14 80% 100%);
  box-shadow: inset 0 0 0 1px rgba(236, 232, 225, 0.32), 0 2px calc(var(--fx) * 1.2) rgba(0, 0, 0, 0.35);
  animation: passe-tourne 14s linear infinite, couronne-glisse 5.2s linear infinite;
}
.logo-fx.eff-couronne::after {
  inset: auto; left: 50%; top: calc(var(--fx) * -6.1); width: calc(var(--fx) * 10); height: calc(var(--fx) * 6.33); border-radius: 0; z-index: 2; transform: translate(-50%, 0);
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 76%22%3E%3Cdefs%3E%3ClinearGradient id=%22cr-c1%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%232b2f39%22/%3E%3Cstop offset=%221%22 stop-color=%22%2313151b%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22cr-c2%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23383d49%22/%3E%3Cstop offset=%221%22 stop-color=%22%231b1e26%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22cr-lueur%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%220%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23fff%22 stop-opacity=%22.5%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3C/linearGradient%3E%3CclipPath id=%22cr-clip%22%3E%3Cpath d=%22M10 58 L4 28 L26 40 L35 14 L49 38 L60 2 L71 38 L85 14 L94 40 L116 28 L110 58 L60 70 Z%22/%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform=%22translate(0 4)%22%3E%3Cpath d=%22M10 58 L4 28 L26 40 L35 14 L49 38 L60 2 L71 38 L85 14 L94 40 L116 28 L110 58 L60 70 Z%22 fill=%22url(%23cr-c1)%22/%3E%3Cpath d=%22M17 53 L12 37 L28 45 L36 25 L49 43 L60 12 L71 43 L84 25 L92 45 L108 37 L103 53 L60 62 Z%22 fill=%22url(%23cr-c2)%22/%3E%3Cpath d=%22M4 28 L10 58 L4 50 Z%22 fill=%22%23fff%22 fill-opacity=%22.07%22/%3E%3Cpath d=%22M4 28 L26 40 L4 50 Z%22 fill=%22%23000%22 fill-opacity=%22.32%22/%3E%3Cpath d=%22M35 14 L26 40 L35 50 Z%22 fill=%22%23fff%22 fill-opacity=%22.07%22/%3E%3Cpath d=%22M35 14 L49 38 L35 50 Z%22 fill=%22%23000%22 fill-opacity=%22.32%22/%3E%3Cpath d=%22M60 2 L49 38 L60 50 Z%22 fill=%22%23fff%22 fill-opacity=%22.07%22/%3E%3Cpath d=%22M60 2 L71 38 L60 50 Z%22 fill=%22%23000%22 fill-opacity=%22.32%22/%3E%3Cpath d=%22M85 14 L71 38 L85 50 Z%22 fill=%22%23fff%22 fill-opacity=%22.07%22/%3E%3Cpath d=%22M85 14 L94 40 L85 50 Z%22 fill=%22%23000%22 fill-opacity=%22.32%22/%3E%3Cpath d=%22M116 28 L94 40 L116 50 Z%22 fill=%22%23fff%22 fill-opacity=%22.07%22/%3E%3Cpath d=%22M116 28 L110 58 L116 50 Z%22 fill=%22%23000%22 fill-opacity=%22.32%22/%3E%3Cpath d=%22M10 58 L4 28 L26 40 L35 14 L49 38 L60 2 L71 38 L85 14 L94 40 L116 28 L110 58 L60 70 Z%22 fill=%22none%22 stroke=%22%23ece8e1%22 stroke-width=%221%22 stroke-linejoin=%22miter%22 stroke-miterlimit=%226%22/%3E%3Cpath d=%22M17 53 L12 37 L28 45 L36 25 L49 43 L60 12 L71 43 L84 25 L92 45 L108 37 L103 53 L60 62 Z%22 fill=%22none%22 stroke=%22%23ece8e1%22 stroke-width=%22.5%22 stroke-opacity=%22.5%22 stroke-linejoin=%22miter%22/%3E%3Cg style=%22--i:0%22%3E%3Cpath d=%22M60 33 L69 47 L60 61 L51 47 Z%22 fill=%22%230b0c10%22 stroke=%22%23ece8e1%22 stroke-width=%220.8%22 stroke-linejoin=%22miter%22/%3E%3Cpath d=%22M60 37.2 L65.58 47 L60 56.8 L54.42 47 Z%22 fill=%22%23ece8e1%22/%3E%3Cpath d=%22M60 37.2 L54.42 47 L60 47 Z%22 fill=%22%23fff%22 fill-opacity=%22.38%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  animation: passe-flotte 3.2s ease-in-out infinite;
}
.logo-fx.a-vivant.eff-couronne::after { display: none; }



/* ── Couronne de Légende (5 tournois OPEN gagnés) : cadre cristal noir aux reflets prismatiques + couronne ailée en platine ── */
.logo-fx.eff-couronne_legende::before {
  inset: calc(var(--fx) * -1.7); border-radius: calc(var(--rad) + var(--fx) * 0.8);
  background:
    conic-gradient(from var(--ang2), transparent 0 92%, rgba(236, 232, 225, 0.55) 96%, transparent 100%),
    conic-gradient(from var(--ang), #0d0f14 0 14%, #1d2129 14% 20%, #0d0f14 20% 50%, #ff4655 50% 51%, #0d0f14 51% 74%, #1d2129 74% 80%, #0d0f14 80% 100%);
  box-shadow: inset 0 0 0 1px rgba(236, 232, 225, 0.32), 0 2px calc(var(--fx) * 1.2) rgba(0, 0, 0, 0.35);
  animation: passe-tourne 10s linear infinite, couronne-glisse 4.2s linear infinite;
}
.logo-fx.eff-couronne_legende::after {
  inset: auto; left: 50%; top: calc(var(--fx) * -7.31); width: calc(var(--fx) * 12.4); height: calc(var(--fx) * 7.44); border-radius: 0; z-index: 2; transform: translate(-50%, 0);
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 150 90%22%3E%3Cdefs%3E%3ClinearGradient id=%22lg-c1%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%232b2f39%22/%3E%3Cstop offset=%221%22 stop-color=%22%2313151b%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22lg-c2%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23383d49%22/%3E%3Cstop offset=%221%22 stop-color=%22%231b1e26%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22lg-lueur%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%220%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23fff%22 stop-opacity=%22.5%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3C/linearGradient%3E%3CclipPath id=%22lg-clip%22%3E%3Cpath d=%22M46 76 L42 44 L60 60 L75 12 L90 60 L108 44 L104 76 L75 86 Z M104 38 L122 14 L108 62 Z M46 38 L28 14 L42 62 Z M105 52 L142 33 L108 72 Z M45 52 L8 33 L42 72 Z M105 64 L149 64 L108 81 Z M45 64 L1 64 L42 81 Z%22/%3E%3C/clipPath%3E%3C/defs%3E%3Cg style=%22--i:2%22%3E%3Cpath d=%22M105 64 Q127 62 149 64 L108 81 Z%22 fill=%22url(%23lg-c2)%22/%3E%3Cpath d=%22M149 64 L108 81 L106.5 72.5 Z%22 fill=%22%23000%22 fill-opacity=%22.3%22/%3E%3Cpath d=%22M105 64 Q127 62 149 64 L108 81 Z%22 fill=%22none%22 stroke=%22%23ece8e1%22 stroke-width=%22.8%22 stroke-linejoin=%22miter%22 stroke-miterlimit=%226%22/%3E%3C/g%3E%3Cg style=%22--i:2%22%3E%3Cpath d=%22M42 81 Q22.27 70.65 1 64 L45 64 Z%22 fill=%22url(%23lg-c2)%22/%3E%3Cpath d=%22M1 64 L45 64 L43.5 72.5 Z%22 fill=%22%23000%22 fill-opacity=%22.3%22/%3E%3Cpath d=%22M42 81 Q22.27 70.65 1 64 L45 64 Z%22 fill=%22none%22 stroke=%22%23ece8e1%22 stroke-width=%22.8%22 stroke-linejoin=%22miter%22 stroke-miterlimit=%226%22/%3E%3C/g%3E%3Cg style=%22--i:1%22%3E%3Cpath d=%22M105 52 Q122.59 40.72 142 33 L108 72 Z%22 fill=%22url(%23lg-c2)%22/%3E%3Cpath d=%22M142 33 L108 72 L106.5 62 Z%22 fill=%22%23000%22 fill-opacity=%22.3%22/%3E%3Cpath d=%22M105 52 Q122.59 40.72 142 33 L108 72 Z%22 fill=%22none%22 stroke=%22%23ece8e1%22 stroke-width=%22.8%22 stroke-linejoin=%22miter%22 stroke-miterlimit=%226%22/%3E%3C/g%3E%3Cg style=%22--i:1%22%3E%3Cpath d=%22M42 72 Q26.51 51.19 8 33 L45 52 Z%22 fill=%22url(%23lg-c2)%22/%3E%3Cpath d=%22M8 33 L45 52 L43.5 62 Z%22 fill=%22%23000%22 fill-opacity=%22.3%22/%3E%3Cpath d=%22M42 72 Q26.51 51.19 8 33 L45 52 Z%22 fill=%22none%22 stroke=%22%23ece8e1%22 stroke-width=%22.8%22 stroke-linejoin=%22miter%22 stroke-miterlimit=%226%22/%3E%3C/g%3E%3Cg style=%22--i:0%22%3E%3Cpath d=%22M104 38 Q111.4 24.8 122 14 L108 62 Z%22 fill=%22url(%23lg-c2)%22/%3E%3Cpath d=%22M122 14 L108 62 L106 50 Z%22 fill=%22%23000%22 fill-opacity=%22.3%22/%3E%3Cpath d=%22M104 38 Q111.4 24.8 122 14 L108 62 Z%22 fill=%22none%22 stroke=%22%23ece8e1%22 stroke-width=%22.8%22 stroke-linejoin=%22miter%22 stroke-miterlimit=%226%22/%3E%3C/g%3E%3Cg style=%22--i:0%22%3E%3Cpath d=%22M42 62 Q36.92 37.44 28 14 L46 38 Z%22 fill=%22url(%23lg-c2)%22/%3E%3Cpath d=%22M28 14 L46 38 L44 50 Z%22 fill=%22%23000%22 fill-opacity=%22.3%22/%3E%3Cpath d=%22M42 62 Q36.92 37.44 28 14 L46 38 Z%22 fill=%22none%22 stroke=%22%23ece8e1%22 stroke-width=%22.8%22 stroke-linejoin=%22miter%22 stroke-miterlimit=%226%22/%3E%3C/g%3E%3Cpath d=%22M46 76 L42 44 L60 60 L75 12 L90 60 L108 44 L104 76 L75 86 Z%22 fill=%22url(%23lg-c1)%22/%3E%3Cpath d=%22M53 71 L50 52 L62 64 L75 26 L88 64 L100 52 L97 71 L75 79 Z%22 fill=%22url(%23lg-c2)%22/%3E%3Cpath d=%22M42 44 L46 76 L42 62 Z%22 fill=%22%23fff%22 fill-opacity=%22.07%22/%3E%3Cpath d=%22M42 44 L60 60 L42 62 Z%22 fill=%22%23000%22 fill-opacity=%22.32%22/%3E%3Cpath d=%22M75 12 L60 60 L75 62 Z%22 fill=%22%23fff%22 fill-opacity=%22.07%22/%3E%3Cpath d=%22M75 12 L90 60 L75 62 Z%22 fill=%22%23000%22 fill-opacity=%22.32%22/%3E%3Cpath d=%22M108 44 L90 60 L108 62 Z%22 fill=%22%23fff%22 fill-opacity=%22.07%22/%3E%3Cpath d=%22M108 44 L104 76 L108 62 Z%22 fill=%22%23000%22 fill-opacity=%22.32%22/%3E%3Cpath d=%22M46 76 L42 44 L60 60 L75 12 L90 60 L108 44 L104 76 L75 86 Z%22 fill=%22none%22 stroke=%22%23ece8e1%22 stroke-width=%221%22 stroke-linejoin=%22miter%22 stroke-miterlimit=%226%22/%3E%3Cpath d=%22M53 71 L50 52 L62 64 L75 26 L88 64 L100 52 L97 71 L75 79 Z%22 fill=%22none%22 stroke=%22%23ff4655%22 stroke-width=%22.5%22 stroke-opacity=%22.6%22 stroke-linejoin=%22miter%22/%3E%3Cg style=%22--i:0%22%3E%3Cpath d=%22M75 38 L82.5 52 L75 66 L67.5 52 Z%22 fill=%22%230b0c10%22 stroke=%22%23ece8e1%22 stroke-width=%220.8%22 stroke-linejoin=%22miter%22/%3E%3Cpath d=%22M75 42.2 L79.65 52 L75 61.8 L70.35 52 Z%22 fill=%22%23ff4655%22/%3E%3Cpath d=%22M75 42.2 L70.35 52 L75 52 Z%22 fill=%22%23fff%22 fill-opacity=%22.38%22/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  animation: passe-flotte 3.2s ease-in-out infinite;
}
.logo-fx.a-vivant.eff-couronne_legende::after { display: none; }
.logo-fx.mini.eff-couronne_legende::before { inset: -8px; }

/* ── Couronne du Boss (10 tournois OPEN gagnés) : cadre cristal noir aux arêtes de magma + couronne divine (rayons, nimbe) ── */
.logo-fx.eff-couronne_boss::before {
  inset: calc(var(--fx) * -1.7); border-radius: calc(var(--rad) + var(--fx) * 0.8);
  background:
    conic-gradient(from var(--ang2), transparent 0 92%, rgba(236, 232, 225, 0.55) 96%, transparent 100%),
    conic-gradient(from var(--ang), #0d0f14 0 14%, #1d2129 14% 20%, #0d0f14 20% 50%, #e6d3a1 50% 51%, #0d0f14 51% 74%, #1d2129 74% 80%, #0d0f14 80% 100%);
  box-shadow: inset 0 0 0 1px rgba(236, 232, 225, 0.32), 0 2px calc(var(--fx) * 1.2) rgba(0, 0, 0, 0.35);
  animation: passe-tourne 8s linear infinite, couronne-glisse 3.6s linear infinite;
}
.logo-fx.eff-couronne_boss::after {
  inset: auto; left: 50%; top: calc(var(--fx) * -9.25); width: calc(var(--fx) * 14.2); height: calc(var(--fx) * 9.94); border-radius: 0; z-index: 2; transform: translate(-50%, 0);
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 160 112%22%3E%3Cdefs%3E%3ClinearGradient id=%22bs-c1%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%232b2f39%22/%3E%3Cstop offset=%221%22 stop-color=%22%2313151b%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22bs-c2%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23383d49%22/%3E%3Cstop offset=%221%22 stop-color=%22%231b1e26%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22bs-lueur%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%220%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23fff%22 stop-opacity=%22.5%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3C/linearGradient%3E%3CradialGradient id=%22bs-ray%22 gradientUnits=%22userSpaceOnUse%22 cx=%2280%22 cy=%2276%22 r=%2286%22%3E%3Cstop offset=%22.3%22 stop-color=%22%23f4e9c4%22/%3E%3Cstop offset=%22.7%22 stop-color=%22%23e6d3a1%22 stop-opacity=%22.75%22/%3E%3Cstop offset=%221%22 stop-color=%22%23e6d3a1%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E%3CclipPath id=%22bs-clip%22%3E%3Cpath d=%22M40 90 L34 54 L50 70 L58 36 L69 66 L80 14 L91 66 L102 36 L110 70 L126 54 L120 90 L80 102 Z%22/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath d=%22M34 76 A46 46 0 0 1 126 76%22 fill=%22none%22 stroke=%22%23e6d3a1%22 stroke-width=%22.6%22 stroke-opacity=%22.45%22/%3E%3Cpath style=%22--i:0%22 d=%22M50.01 76.79 L-2 76 L50.01 75.21 Z%22 fill=%22url(%23bs-ray)%22/%3E%3Cpath style=%22--i:1%22 d=%22M50.88 68.79 L23.98 60.99 L51.18 67.68 Z%22 fill=%22url(%23bs-ray)%22/%3E%3Cpath style=%22--i:2%22 d=%22M53.64 61.69 L8.99 35 L54.42 60.33 Z%22 fill=%22url(%23bs-ray)%22/%3E%3Cpath style=%22--i:3%22 d=%22M58.38 55.2 L38.99 34.99 L59.2 54.38 Z%22 fill=%22url(%23bs-ray)%22/%3E%3Cpath style=%22--i:4%22 d=%22M64.33 50.42 L39 4.99 L65.69 49.64 Z%22 fill=%22url(%23bs-ray)%22/%3E%3Cpath style=%22--i:5%22 d=%22M71.68 47.18 L64.99 19.98 L72.79 46.88 Z%22 fill=%22url(%23bs-ray)%22/%3E%3Cpath style=%22--i:6%22 d=%22M79.21 46.01 L80 -6 L80.79 46.01 Z%22 fill=%22url(%23bs-ray)%22/%3E%3Cpath style=%22--i:7%22 d=%22M87.21 46.88 L95.01 19.98 L88.32 47.18 Z%22 fill=%22url(%23bs-ray)%22/%3E%3Cpath style=%22--i:8%22 d=%22M94.31 49.64 L121 4.99 L95.67 50.42 Z%22 fill=%22url(%23bs-ray)%22/%3E%3Cpath style=%22--i:9%22 d=%22M100.8 54.38 L121.01 34.99 L101.62 55.2 Z%22 fill=%22url(%23bs-ray)%22/%3E%3Cpath style=%22--i:10%22 d=%22M105.58 60.33 L151.01 35 L106.36 61.69 Z%22 fill=%22url(%23bs-ray)%22/%3E%3Cpath style=%22--i:11%22 d=%22M108.82 67.68 L136.02 60.99 L109.12 68.79 Z%22 fill=%22url(%23bs-ray)%22/%3E%3Cpath style=%22--i:12%22 d=%22M109.99 75.21 L162 76 L109.99 76.79 Z%22 fill=%22url(%23bs-ray)%22/%3E%3Cpath d=%22M40 90 L34 54 L50 70 L58 36 L69 66 L80 14 L91 66 L102 36 L110 70 L126 54 L120 90 L80 102 Z%22 fill=%22url(%23bs-c1)%22/%3E%3Cpath d=%22M47 85 L42 62 L52 74 L59 49 L70 71 L80 28 L90 71 L101 49 L108 74 L118 62 L113 85 L80 94 Z%22 fill=%22url(%23bs-c2)%22/%3E%3Cpath d=%22M34 54 L40 90 L34 80 Z%22 fill=%22%23fff%22 fill-opacity=%22.07%22/%3E%3Cpath d=%22M34 54 L50 70 L34 80 Z%22 fill=%22%23000%22 fill-opacity=%22.32%22/%3E%3Cpath d=%22M58 36 L50 70 L58 80 Z%22 fill=%22%23fff%22 fill-opacity=%22.07%22/%3E%3Cpath d=%22M58 36 L69 66 L58 80 Z%22 fill=%22%23000%22 fill-opacity=%22.32%22/%3E%3Cpath d=%22M80 14 L69 66 L80 80 Z%22 fill=%22%23fff%22 fill-opacity=%22.07%22/%3E%3Cpath d=%22M80 14 L91 66 L80 80 Z%22 fill=%22%23000%22 fill-opacity=%22.32%22/%3E%3Cpath d=%22M102 36 L91 66 L102 80 Z%22 fill=%22%23fff%22 fill-opacity=%22.07%22/%3E%3Cpath d=%22M102 36 L110 70 L102 80 Z%22 fill=%22%23000%22 fill-opacity=%22.32%22/%3E%3Cpath d=%22M126 54 L110 70 L126 80 Z%22 fill=%22%23fff%22 fill-opacity=%22.07%22/%3E%3Cpath d=%22M126 54 L120 90 L126 80 Z%22 fill=%22%23000%22 fill-opacity=%22.32%22/%3E%3Cpath d=%22M40 90 L34 54 L50 70 L58 36 L69 66 L80 14 L91 66 L102 36 L110 70 L126 54 L120 90 L80 102 Z%22 fill=%22none%22 stroke=%22%23e6d3a1%22 stroke-width=%221.1%22 stroke-linejoin=%22miter%22 stroke-miterlimit=%226%22/%3E%3Cpath d=%22M47 85 L42 62 L52 74 L59 49 L70 71 L80 28 L90 71 L101 49 L108 74 L118 62 L113 85 L80 94 Z%22 fill=%22none%22 stroke=%22%23e6d3a1%22 stroke-width=%22.5%22 stroke-opacity=%22.6%22 stroke-linejoin=%22miter%22/%3E%3Cpath d=%22M80 14 L80 30%22 stroke=%22%23e6d3a1%22 stroke-width=%22.6%22/%3E%3Cg style=%22--i:0%22%3E%3Cpath d=%22M80 41 L89 60 L80 79 L71 60 Z%22 fill=%22%230b0c10%22 stroke=%22%23e6d3a1%22 stroke-width=%220.9%22 stroke-linejoin=%22miter%22/%3E%3Cpath d=%22M80 46.7 L85.58 60 L80 73.3 L74.42 60 Z%22 fill=%22%23f4e9c4%22/%3E%3Cpath d=%22M80 46.7 L74.42 60 L80 60 Z%22 fill=%22%23fff%22 fill-opacity=%22.38%22/%3E%3C/g%3E%3Cg style=%22--i:0%22%3E%3Cpath d=%22M62 71.6 L64.8 76 L62 80.4 L59.2 76 Z%22 fill=%22%230b0c10%22 stroke=%22%23e6d3a1%22 stroke-width=%220.6%22 stroke-linejoin=%22miter%22/%3E%3Cpath d=%22M62 72.92 L63.74 76 L62 79.08 L60.26 76 Z%22 fill=%22%23e6d3a1%22/%3E%3Cpath d=%22M62 72.92 L60.26 76 L62 76 Z%22 fill=%22%23fff%22 fill-opacity=%22.38%22/%3E%3C/g%3E%3Cg style=%22--i:1%22%3E%3Cpath d=%22M98 71.6 L100.8 76 L98 80.4 L95.2 76 Z%22 fill=%22%230b0c10%22 stroke=%22%23e6d3a1%22 stroke-width=%220.6%22 stroke-linejoin=%22miter%22/%3E%3Cpath d=%22M98 72.92 L99.74 76 L98 79.08 L96.26 76 Z%22 fill=%22%23e6d3a1%22/%3E%3Cpath d=%22M98 72.92 L96.26 76 L98 76 Z%22 fill=%22%23fff%22 fill-opacity=%22.38%22/%3E%3C/g%3E%3Cellipse cx=%2280%22 cy=%228%22 rx=%2226%22 ry=%225.2%22 fill=%22none%22 stroke=%22%23e6d3a1%22 stroke-width=%221.3%22/%3E%3C/svg%3E") center / contain no-repeat;
  animation: passe-flotte 3.2s ease-in-out infinite;
}
.logo-fx.a-vivant.eff-couronne_boss::after { display: none; }
.logo-fx.mini.eff-couronne_boss::before { inset: -8px; }

.logo-fx.eff-astre::before { inset: calc(var(--fx) * -1.15); background: conic-gradient(from var(--ang), #ffffff, #8b5cf6, #f2b632, #ffffff, #8b5cf6, #f2b632, #ffffff); animation: passe-tourne 5s linear infinite; }
.logo-fx.eff-astre::after { inset: calc(var(--fx) * -1.15); background: radial-gradient(circle at 50% 0%, #ffffff 0 4px, transparent 5px); border-radius: 50%; animation: passe-orbite 3.6s linear infinite; }

/* aperçu miniature (tuiles de la piste, annuaire) */
.logo-fx.mini { --fx: 5px; --rad: 17px; --gap: var(--card); width: 44px; height: 44px; margin: 0; }
.logo-fx.mini.eff-etincelles::after { inset: -11px; }

/* Couche animée (rfe-effets-vivants.js) : sous le logo, qui la recouvre au centre ; visible autour. */
.logo-fx > .fx-vivant { position: absolute; inset: -30%; z-index: 0; pointer-events: none; }
.logo-fx > .fx-vivant canvas, .logo-fx > .fx-vivant svg { display: block; width: 100% !important; height: 100% !important; }
/* Scènes des couronnes (Open, Légende, Boss) : même boîte que la couronne dessinée en ::after. Style sobre : aplats, une seule animation douce par élément. */
.logo-fx > .fx-scene { inset: auto; left: 50%; top: calc(var(--fx) * -6.1); width: calc(var(--fx) * 10); height: calc(var(--fx) * 6.33); z-index: 3; transform: translate(-50%, 0); animation: couronne-vol 5s ease-in-out infinite; }
.fx-couronne > svg:first-child, .fx-legende > svg:first-child, .fx-boss > svg:first-child { position: absolute; inset: 0; width: 100% !important; height: 100% !important; overflow: visible; }
.fx-couronne .cr-corps, .fx-legende .lg-corps, .fx-boss .bs-corps { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4)); }
.fx-couronne .cr-coeur, .fx-legende .lg-coeur, .fx-boss .bs-coeur { animation: valo-gemme 3.4s ease-in-out infinite; }
.fx-couronne .cr-reflet, .fx-legende .lg-reflet, .fx-boss .bs-reflet { transform: translateX(0) skewX(-22deg); animation: couronne-reflet 6s cubic-bezier(.45, 0, .25, 1) infinite; }
.logo-fx > .fx-legende { inset: auto; left: 50%; top: calc(var(--fx) * -7.31); width: calc(var(--fx) * 12.4); height: calc(var(--fx) * 7.44); z-index: 3; transform: translate(-50%, 0); animation: couronne-vol 5s ease-in-out infinite; }
.fx-legende .lg-plume { animation: valo-plume 4.2s ease-in-out infinite; animation-delay: calc(var(--i) * 0.2s); }
.logo-fx > .fx-boss { inset: auto; left: 50%; top: calc(var(--fx) * -9.25); width: calc(var(--fx) * 14.2); height: calc(var(--fx) * 9.94); z-index: 3; transform: translate(-50%, 0); animation: couronne-vol 5s ease-in-out infinite; }
.fx-boss .bs-ray { animation: valo-rayon 5s ease-in-out infinite; animation-delay: calc(var(--i) * 0.25s); }
.fx-boss .bs-nimbe { animation: valo-nimbe 5s ease-in-out infinite; }
@keyframes couronne-vol { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -2px); } }
@keyframes couronne-reflet { 0%, 22% { transform: translateX(0) skewX(-22deg); } 58%, 100% { transform: translateX(185px) skewX(-22deg); } }
@keyframes valo-gemme { 0%, 100% { opacity: 0.78; } 50% { opacity: 1; } }
@keyframes valo-plume { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } }
@keyframes valo-rayon { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.95; } }
@keyframes valo-nimbe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@media (prefers-reduced-motion: reduce) {
  .fx-vivant { display: none; }
  .passe-ban::before, .passe-ban::after, .logo-fx::before, .logo-fx::after { animation: none !important; }
  .passe-ban.ban-orage::after { opacity: 0; }
}

/* ── Couleurs du passe : vert = validé, gris = à débloquer, or = nouveau ── */
:root { --pc-vert: #1fa34f; --pc-vert-fonce: #14733a; --pc-vert-doux: #e3f6ea; --pc-gris: #8c8c93; }

/* ── Icônes et anneau de progression ── */
.pi { display: inline-grid; place-items: center; width: 1em; height: 1em; flex: none; }
.pi svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pi-anneau { position: relative; display: inline-grid; place-items: center; flex: none; }
.pi-anneau svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.pi-anneau-fond { stroke: var(--card2); }
.pi-anneau-val { stroke: var(--pc-vert); transition: stroke-dashoffset 1.1s cubic-bezier(0.22, 1, 0.36, 1); }
.pi-anneau-texte { position: relative; font-weight: 750; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.pi-anneau-grand .pi-anneau-texte { font-size: 1.9rem; }

.btn-pilule { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 1.1rem; border: 0; border-radius: var(--r-pill); background: var(--card2); color: var(--ink); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: background-color 0.15s, opacity 0.15s; }
.btn-pilule:hover { background: #d3d3da; }
.btn-pilule.is-plein { background: var(--ink); color: #fff; }
.btn-pilule.is-plein:hover { opacity: 0.86; }
.btn-pilule:disabled { opacity: 0.4; cursor: default; }
.btn-pilule:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* ── Carte résumé (page du club) ── */
.passe-carte { display: flex; align-items: center; gap: 1.25rem; background: var(--card); border-radius: var(--r-card); padding: 1.15rem 1.25rem; }
.passe-resume { flex: 1; min-width: 0; }
.passe-haut { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.15rem 0.8rem; }
.passe-niveau { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.03em; }
.passe-saison { color: var(--muted2); font-size: 0.9375rem; font-weight: 500; }
.passe-barre { height: 10px; margin-top: 0.6rem; border-radius: 5px; background: var(--card2); overflow: hidden; }
.passe-barre > span { display: block; height: 100%; width: 0; border-radius: 5px; background: var(--pc-vert); transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.passe-xp { margin-top: 0.35rem; color: var(--muted2); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.passe-prochain { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.3rem; margin-top: 0.7rem; font-size: 0.9375rem; color: var(--muted2); }
.passe-prochain strong { color: var(--ink); font-weight: 650; }
.passe-prochain-ic { align-self: center; color: var(--pc-gris); }
.passe-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.95rem; }
@media (max-width: 560px) { .passe-carte { flex-direction: column; align-items: flex-start; } .passe-resume { width: 100%; } }

/* ── Aperçus de récompenses (galerie, chemin) ── */
.passe-apercu { position: relative; display: grid; place-items: center; height: 84px; border-radius: 14px; overflow: hidden; }
.passe-apercu.is-logo { background: var(--card2); }
.passe-apercu.passe-ban { border-radius: 14px; }
.passe-apercu .club-logo { font-size: 1.1rem; }
.passe-nom { font-size: 0.9375rem; font-weight: 650; letter-spacing: -0.01em; }
.passe-etat { font-size: 0.8125rem; color: var(--muted2); }

/* ── Galerie « Personnaliser » ── */
dialog.galerie { margin: auto; width: min(760px, calc(100vw - 20px)); max-height: calc(100dvh - 20px); padding: 0; border: 0; border-radius: var(--r-tile); background: var(--bg); color: var(--ink); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3); overflow: hidden; }
dialog.galerie[open] { display: flex; flex-direction: column; }
dialog.galerie::backdrop { background: rgba(20, 20, 24, 0.6); }
.galerie > * { flex: none; }
.galerie-tete { display: flex; align-items: center; justify-content: space-between; padding: 1.05rem 1.25rem 0.7rem; }
.galerie-tete h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.03em; }
.galerie-fermer { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--card2); color: var(--ink); font-size: 1.1rem; cursor: pointer; }
.galerie-fermer:hover { background: #d3d3da; }
.galerie-fermer:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.galerie-apercu { position: relative; display: flex; align-items: flex-end; gap: 0.9rem; height: 148px; margin: 0 1.25rem; padding: 0.9rem 1rem; border-radius: 20px; }
.galerie-apercu::before, .galerie-apercu::after { border-radius: inherit; }
.logo-fx.galerie-logo { --fx: 8px; --rad: 26px; --gap: rgba(255, 255, 255, 0.92); width: 76px; height: 76px; margin: 0; }
.galerie-logo > .passe-logo { border-radius: 20px; font-size: 1.6rem; }
.galerie-nom { position: relative; z-index: 2; align-self: flex-end; max-width: 60%; padding: 4px 12px; border-radius: var(--r-pill); background: rgba(10, 10, 14, 0.72); color: #fff; font-size: 0.9375rem; font-weight: 650; overflow-wrap: anywhere; }
.galerie-onglets { display: flex; gap: 0.4rem; padding: 0.95rem 1.25rem 0.1rem; }
.galerie-onglet { padding: 0.5rem 1rem; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted2); font: inherit; font-size: 0.9375rem; font-weight: 600; cursor: pointer; }
.galerie-onglet.is-actif { background: var(--ink); color: #fff; }
.galerie-onglet:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.galerie-compte { margin-left: 0.2rem; opacity: 0.7; font-weight: 500; font-variant-numeric: tabular-nums; }
.galerie-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.7rem; padding: 0.8rem 1.25rem; overflow-y: auto; flex: 1 1 auto; min-height: 120px; }
.galerie-tuile { position: relative; display: flex; flex-direction: column; gap: 0.4rem; padding: 0.55rem; border: 0; border-radius: 18px; background: var(--card); color: inherit; font: inherit; text-align: left; box-shadow: inset 0 0 0 2px transparent; }
button.galerie-tuile { cursor: pointer; }
button.galerie-tuile:hover { box-shadow: inset 0 0 0 2px var(--border2); }
button.galerie-tuile:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.galerie-tuile.is-choisi { box-shadow: inset 0 0 0 2.5px var(--pc-vert); }
.galerie-tuile.is-verrouille { background: var(--bg2); }
.galerie-tuile.is-verrouille .passe-apercu > *:not(.galerie-cadenas) { filter: grayscale(1); opacity: 0.55; }
.galerie-tuile.is-verrouille .passe-nom, .galerie-tuile.is-verrouille .passe-etat { color: var(--muted); }
.galerie-cadenas, .galerie-coche { position: absolute; display: grid; place-items: center; border-radius: 50%; z-index: 3; }
.galerie-cadenas { inset: 0; margin: auto; width: 36px; height: 36px; background: rgba(255, 255, 255, 0.92); color: #6d6d73; font-size: 1.1rem; }
.galerie-coche { top: 6px; right: 6px; width: 24px; height: 24px; background: var(--pc-vert); color: #fff; font-size: 0.9rem; }
.galerie-aide { padding: 0 1.25rem; font-size: 0.8125rem; color: var(--muted2); }
.galerie-erreur { padding: 0 1.25rem; font-size: 0.875rem; color: var(--danger); }
.galerie-erreur:empty { display: none; }
.galerie-pied { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 0.9rem 1.25rem 1.15rem; border-top: 1px solid var(--border); background: var(--bg); }
@media (max-width: 560px) { dialog.galerie { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; } .galerie-grille { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .pi-anneau-val, .passe-barre > span { transition: none; } }

/* ── Annuaire / listes : niveau d'un club ── */
.passe-niv-puce { flex: none; padding: 3px 10px; border-radius: var(--r-pill); background: var(--gold-soft); color: var(--gold); font-size: 0.8125rem; font-weight: 650; font-variant-numeric: tabular-nums; }