.tgs {
  --tgs-shadow: rgba(0,0,0,.55); --tgs-outline: rgba(255,255,255,.07);
  --tgs-tick: transparent; --tgs-g1: transparent; --tgs-g2: transparent; --tgs-ray: transparent;
  --tgs-dots: transparent; --tgs-bub: transparent; --tgs-caustic: transparent; --tgs-glint: transparent;
  --tgs-facet-l: transparent; --tgs-facet-d: transparent; --tgs-halo: transparent;
  --tgs-cur-a: transparent; --tgs-cur-b: transparent; --tgs-cur-c: transparent;
  --tgs-plate: rgba(0,0,0,0); --tgs-num-sh: transparent;
  --tgs-sheen-op: 0; --tgs-deep-op: 0; --tgs-cone-op: 0;
  --tgs-c0: transparent; --tgs-c1: transparent; --tgs-c2: transparent; --tgs-c3: transparent; --tgs-c4: transparent; --tgs-c5: transparent;
  --tgs-f-halo: transparent;
}
.tgs text { font-family: var(--police); }
:root[data-theme="jour"] .tgs { --tgs-shadow: rgba(52,44,110,.26); --tgs-outline: rgba(35,37,44,.3); }
.tgs-ardoise { --tgs-bz-hi: #4d535e; --tgs-bz-lo: #2a2e35; --tgs-ring-hi: #41464f; --tgs-ring-lo: #32363e; --tgs-face-hi: #464b56; --tgs-face-lo: #2f333b; --tgs-line: rgba(255,255,255,.13); --tgs-line-2: rgba(0,0,0,.42); --tgs-ink: #a3a9b4; --tgs-num: #f3f2f7; --tgs-num-sh: rgba(0,0,0,.4); --tgs-f0: #5f6570; --tgs-f1: #4a4f59; --tgs-f2: #383c44; --tgs-cone-op: .85; --tgs-c0: #6b7380; --tgs-c1: #4a4f5a; --tgs-c2: #625a6b; --tgs-c3: #3a3f48; --tgs-c4: #56636b; --tgs-c5: #454a55; }
.tgs-acier { --tgs-bz-hi: #f2f4f7; --tgs-bz-lo: #8a919b; --tgs-ring-hi: #e3e7ec; --tgs-ring-lo: #aab1bb; --tgs-face-hi: #e6e9ee; --tgs-face-lo: #b6bdc6; --tgs-line: rgba(255,255,255,.7); --tgs-line-2: rgba(30,36,46,.32); --tgs-g1: rgba(255,255,255,.34); --tgs-g2: rgba(48,56,68,.11); --tgs-ink: #454c57; --tgs-num: #15181d; --tgs-num-sh: rgba(255,255,255,.75); --tgs-plate: rgba(238,241,245,.6); --tgs-sheen-op: .9; --tgs-deep-op: .3; --tgs-cone-op: .92; --tgs-c0: #e7cb84; --tgs-c1: #bb874e; --tgs-c2: #8d5181; --tgs-c3: #5e4ba6; --tgs-c4: #2f61b6; --tgs-c5: #86acd8; --tgs-f0: #e2c27a; --tgs-f1: #7b55a3; --tgs-f2: #3d68b8; }
.tgs-givre { --tgs-bz-hi: #ffffff; --tgs-bz-lo: #b4c7db; --tgs-ring-hi: #f5f9fd; --tgs-ring-lo: #cddbe9; --tgs-face-hi: #f7fafd; --tgs-face-lo: #d3e0ee; --tgs-line: rgba(255,255,255,.95); --tgs-line-2: rgba(64,98,138,.34); --tgs-tick: #6d88a8; --tgs-g1: rgba(255,255,255,.98); --tgs-g2: rgba(70,108,150,.42); --tgs-ink: #4a6584; --tgs-num: #10233c; --tgs-num-sh: rgba(255,255,255,.95); --tgs-plate: rgba(248,251,254,.72); --tgs-glint: #ffffff; --tgs-sheen-op: .85; --tgs-deep-op: .45; --tgs-f0: #ffffff; --tgs-f1: #cfe0f1; --tgs-f2: #93b6d8; --tgs-cone-op: .9; --tgs-c0: #ffffff; --tgs-c1: #cfe6ff; --tgs-c2: #e6dcff; --tgs-c3: #ffffff; --tgs-c4: #c9f1e9; --tgs-c5: #d9e7ff; }
.tgs-glacier { --tgs-bz-hi: #86bce9; --tgs-bz-lo: #123a66; --tgs-ring-hi: #2d6ca6; --tgs-ring-lo: #103663; --tgs-face-hi: #1f5f97; --tgs-face-lo: #071f3d; --tgs-line: rgba(196,232,255,.55); --tgs-line-2: rgba(0,16,40,.5); --tgs-tick: #9cc9ee; --tgs-g1: rgba(170,220,255,.32); --tgs-g2: rgba(0,18,44,.4); --tgs-dots: rgba(235,247,255,.85); --tgs-bub: rgba(205,236,255,.55); --tgs-caustic: rgba(160,220,255,.18); --tgs-facet-l: rgba(255,255,255,.2); --tgs-facet-d: rgba(0,12,32,.24); --tgs-ink: #d3eafc; --tgs-num: #f4fbff; --tgs-num-sh: rgba(0,10,28,.55); --tgs-plate: rgba(6,28,56,.55); --tgs-sheen-op: .75; --tgs-deep-op: .6; --tgs-f0: #93c8f0; --tgs-f1: #2f73b5; --tgs-f2: #0f3a6a; --tgs-cone-op: .85; --tgs-c0: #a6dfff; --tgs-c1: #2e74b8; --tgs-c2: #6fe0e6; --tgs-c3: #174a80; --tgs-c4: #8fb8ff; --tgs-c5: #0f3a6a; }
.tgs-aurore { --tgs-bz-hi: #3b4080; --tgs-bz-lo: #121338; --tgs-ring-hi: #262a62; --tgs-ring-lo: #111337; --tgs-face-hi: #1c2152; --tgs-face-lo: #05061b; --tgs-line: rgba(192,166,255,.42); --tgs-line-2: rgba(0,0,0,.5); --tgs-tick: #b9a6f2; --tgs-ray: rgba(150,255,210,.28); --tgs-dots: rgba(255,255,255,.85); --tgs-cur-a: #3fd9a0; --tgs-cur-b: #a97bff; --tgs-cur-c: #ff7ab8; --tgs-ink: #cdbff7; --tgs-num: #ffffff; --tgs-num-sh: rgba(0,0,0,.6); --tgs-plate: rgba(5,6,26,.72); --tgs-sheen-op: .55; --tgs-deep-op: .7; --tgs-cone-op: .95; --tgs-c0: #3fd9a0; --tgs-c1: #6f6bff; --tgs-c2: #a97bff; --tgs-c3: #ff7ab8; --tgs-c4: #c0a6ff; --tgs-c5: #41c9c2; --tgs-f0: #3fd9a0; --tgs-f1: #a97bff; --tgs-f2: #ff7ab8; }
.tgs-zero { --tgs-bz-hi: #2b2934; --tgs-bz-lo: #050508; --tgs-ring-hi: #191822; --tgs-ring-lo: #07070b; --tgs-face-hi: #15141d; --tgs-face-lo: #030305; --tgs-line: rgba(236,234,250,.24); --tgs-line-2: rgba(0,0,0,.6); --tgs-tick: #8f88b3; --tgs-g1: rgba(214,206,255,.11); --tgs-dots: rgba(255,255,255,.75); --tgs-halo: rgba(192,166,255,.85); --tgs-ink: #cfc8ee; --tgs-num: #f6f4ff; --tgs-num-sh: rgba(0,0,0,.7); --tgs-plate: rgba(3,3,6,.5); --tgs-sheen-op: .8; --tgs-deep-op: .8; --tgs-cone-op: .78; --tgs-c0: #ff7ab8; --tgs-c1: #d9c58a; --tgs-c2: #3fd9a0; --tgs-c3: #6f6bff; --tgs-c4: #a97bff; --tgs-c5: #c0a6ff; --tgs-f0: #2b2934; --tgs-f1: #0a0a0f; --tgs-f2: #2b2934; --tgs-f-halo: #c0a6ff; }
:root[data-theme="jour"] .tgs-givre { --tgs-outline: rgba(60,92,130,.5); }
:root[data-theme="jour"] .tgs-zero { --tgs-halo: rgba(111,107,255,.8); --tgs-f-halo: #6f6bff; }
.tgs .tgs-ring, .tgs .tgs-track, .tgs .tgs-cone, .tgs .tgs-drift, .tgs .tgs-cur-a, .tgs .tgs-cur-b, .tgs .tgs-cur-c {
  transform-box: view-box; transform-origin: 100px 100px;
}
html.anim .tgs-anim.tgs-glacier .tgs-drift { animation: tgs-drift 7s ease-in-out infinite alternate; }
html.anim .tgs-anim.tgs-aurore .tgs-cone { animation: tgs-tourne 14s linear infinite; }
html.anim .tgs-anim.tgs-aurore .tgs-cur-a { animation: tgs-ondule 9s ease-in-out infinite alternate; }
html.anim .tgs-anim.tgs-aurore .tgs-cur-b { animation: tgs-ondule 11s ease-in-out -4s infinite alternate-reverse; }
html.anim .tgs-anim.tgs-aurore .tgs-cur-c { animation: tgs-ondule 13s ease-in-out -7s infinite alternate; }
html.anim .tgs-anim.tgs-zero .tgs-cone { animation: tgs-tourne 26s linear infinite; }
html.anim .tgs-anim.tgs-zero .tgs-tw-b { animation: tgs-scintille 3.6s ease-in-out infinite; }
@keyframes tgs-tourne { to { transform: rotate(360deg); } }
@keyframes tgs-drift { from { transform: rotate(-12deg) translate(-5px, 2px); } to { transform: rotate(14deg) translate(5px, -2px); } }
@keyframes tgs-ondule { from { transform: translateX(-5px) skewX(-3deg); } to { transform: translateX(5px) skewX(3deg); } }
@keyframes tgs-scintille { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.flamme { display: inline-grid; place-items: center; }
.flamme .ico, .serie-alerte .ico {
  background: linear-gradient(170deg, var(--aur-2) 10%, var(--aur-1) 90%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.marque-logo { position: relative; }
.sceau-cadre { position: absolute; left: -6px; top: -6px; width: 50px; height: 50px; pointer-events: none; overflow: visible; }
button.carte-niveau { width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.carte-niveau[aria-current="page"] { box-shadow: var(--verre-bord), var(--om-1), inset 0 0 0 1px var(--acc-trait); }
.rail-niv-ligne { justify-content: space-between; gap: var(--e2) !important; flex-wrap: nowrap !important; min-width: 0; }
.rail-rang { display: inline-flex; min-width: 0; white-space: nowrap;
  font-size: var(--t-donnee); font-weight: 650; }
.rail-rang-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.carte-niveau .jauge > i, .prog-hero .jauge > i, .carte-prog .prog-bord .jauge > i {
  background: linear-gradient(90deg, var(--aur-1), var(--aur-3) 60%, var(--aur-2));
  box-shadow: 0 0 12px color-mix(in srgb, var(--aur-3) 45%, transparent);
}
.carte-niveau .micro:has(.point-attente) { color: var(--ink); font-weight: 600; }
.pilule-serie { gap: 3px; padding: 0 7px; background: var(--acc-voile); border-color: var(--acc-trait); color: var(--ink); font-weight: 700; }
html.anim .en-jeu .flamme { animation: flamme-bat 1.6s ease-in-out infinite; }
@keyframes flamme-bat { 0%, 100% { scale: 1; } 50% { scale: 1.22; } }
.point-attente {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px;
  background: var(--aur-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--aur-2) 25%, transparent);
}
html.anim .point-attente { animation: attente 1.8s ease-in-out infinite; }
@keyframes attente { 0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--aur-2) 30%, transparent); } 50% { box-shadow: 0 0 0 5px transparent; } }
.gain-xp {
  position: fixed; z-index: 96; pointer-events: none;
  padding: 4px 11px; border-radius: var(--pill);
  font-size: var(--t-donnee); font-weight: 750; letter-spacing: -.01em;
  color: var(--sur-acc); background: linear-gradient(135deg, var(--btn1), var(--btn2)); box-shadow: var(--om-btn);
  translate: -50% 0;
  animation: gain-fondu 1.6s linear forwards;
}
.gain-xp-bas { left: 50%; bottom: 96px; }
html.anim .gain-xp { animation: gain-monte 1.6s var(--entree) forwards; }
@keyframes gain-monte {
  0%   { opacity: 0; transform: translateY(10px) scale(.7); }
  14%  { opacity: 1; transform: translateY(0) scale(1.1); }
  28%  { transform: translateY(-4px) scale(1); }
  78%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-46px) scale(.96); }
}
@keyframes gain-fondu { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
.medaillon { --m: 96px; position: relative; flex: none; display: block; width: var(--m); height: var(--m); }
.medaillon > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.prog-hero { gap: var(--e6); overflow: hidden; }
.prog-hero::before {
  content: ""; position: absolute; left: -90px; top: -140px; width: 460px; height: 460px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--aur-3) 24%, transparent), transparent);
}
.prog-hero > * { position: relative; }
.prog-hero-niv { display: flex; align-items: center; gap: var(--e8); }
.medaillon-grand { margin: 10px; }
html.anim .medaillon-grand { animation: fete-pop .9s var(--ressort) both .15s; }
.prog-hero-txt { flex: 1; min-width: 0; gap: var(--e2) !important; }
.prog-xp { font-size: var(--t-hero); font-weight: 750; letter-spacing: -.035em; line-height: 1.02; }
.prog-tuiles .tuile .val { font-size: 1.7rem; }
.tuile-serie.en-jeu { border-color: var(--acc-trait); box-shadow: 0 0 0 3px var(--acc-brume); }
.prog-hero .medaillon-grand { margin: 4px; }
.prog-hero-niv { gap: var(--e6); }
.prog-hero .prog-xp { font-size: var(--t-sect); }
.prog-nav { max-width: 100%; }
.prog-nav .segments { flex-wrap: wrap; border-radius: var(--r-md); }
.prog-nav .segments button { white-space: nowrap; }
.carte-geste { border: 1px solid var(--acc-trait); }
.geste-xp { color: var(--acc-vif); font-weight: 700; white-space: nowrap; }
.carte-geste-fait { border-color: var(--bord); }
.carte-prog-masquee .btn { align-self: flex-start; }
.prog-defis { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.carte-recup { border: 1px solid var(--acc-trait); }
.carte.carte-recup.lueur-curseur:not(.carte-formule):not(.carte-nuit)::after {
  opacity: .9; padding: 1.5px;
  background: conic-gradient(from var(--ang), transparent 0deg, transparent 292deg, var(--aur-4) 322deg, var(--aur-2) 342deg, transparent 360deg);
}
html.anim .carte-recup::after { animation: tourne 7s linear infinite; }
.ligne-recompense { border-left-color: var(--acc); background: var(--acc-brume); }
.ligne-recompense .ligne-ico { color: var(--acc); }
.ligne-recompense .btn { flex: none; }
.recup-pied { justify-content: space-between; gap: var(--e2) var(--e3) !important; margin-top: var(--e1); }
.recup-pied .btn { margin-left: auto; }
.defi {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e4); border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--bord);
}
.defi .ligne-ico { color: var(--acc); }
.defi-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.defi-haut { justify-content: space-between; gap: var(--e2) !important; flex-wrap: nowrap !important; }
.defi-nom { font-size: var(--t-corps); font-weight: 550; }
.defi-val { font-size: var(--t-donnee); font-weight: 650; color: var(--ink-2); white-space: nowrap; }
.defi-pq { font-size: var(--t-donnee); color: var(--ink-3); line-height: 1.5; }
.defi .pilule { flex: none; }
.defi-fait { border-color: var(--gain-trait); background: var(--gain-voile); }
.defi-fait .ligne-ico { color: var(--gain); }
.defi-rate .jauge { opacity: .5; }
.defi-verrou { border-style: dashed; }
.defi-verrou .ligne-ico { color: var(--ink-3); }
.defi-verrou .btn { flex: none; }
.fil-jour { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e3) 0; border-bottom: 1px solid var(--bord); }
.fil-jour:first-child { padding-top: 0; }
.fil-jour:last-child { border-bottom: 0; padding-bottom: 0; }
.fil-date { font-size: var(--t-corps); font-weight: 600; }
.fil-xp { font-size: var(--t-corps); color: var(--acc-vif); }
.fil-puces { display: flex; flex-wrap: wrap; gap: 6px; }
.fil-puce { font-size: var(--t-label); padding: 3px 9px; border-radius: var(--pill); background: var(--surface-2); border: 1px solid var(--bord); color: var(--ink-2); }
.fil-puce b { color: var(--ink); font-weight: 700; }
@media (min-width: 1101px) {
  .prog-chemin {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
    grid-template-rows: auto 1fr;
    grid-template-areas: "paliers carte" "parure carte";
  }
  .prog-chemin > .carte-paliers { grid-area: paliers; }
  .prog-chemin > .carte-profil { grid-area: carte; }
  .prog-chemin > .carte-parure { grid-area: parure; }
}
.paliers { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.palier {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 124px;
  padding: var(--e3); border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--bord);
}
.palier-niv { position: absolute; top: var(--e3); right: var(--e3); font-size: var(--t-label); font-weight: 700; color: var(--ink-3); letter-spacing: .02em; }
.palier-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--ink-3); }
.palier-t { font-size: var(--t-donnee); font-weight: 600; line-height: 1.35; padding-right: var(--e2); }
.palier-etat { margin-top: auto; display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-label); font-weight: 650; color: var(--ink-3); }
.palier .btn { margin-top: auto; align-self: flex-start; }
.palier-pris .palier-ico { background: var(--acc-voile); color: var(--acc); }
.palier-pris .palier-etat { color: var(--gain); }
.palier-dispo { border-color: var(--acc-trait); background: var(--acc-brume); box-shadow: 0 0 0 3px var(--acc-voile); }
.palier-dispo .palier-ico { background: linear-gradient(135deg, var(--btn1), var(--btn2)); color: var(--sur-acc); }
.palier-prochain { border-style: dashed; border-color: var(--acc-trait); }
.palier-avenir .palier-ico { opacity: .55; }
.palier-avenir .palier-t { color: var(--ink-2); }
.plaques { display: flex; flex-wrap: wrap; gap: var(--e3); }
.plaque {
  --plaque-ombre: rgba(0,0,0,.4);
  position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 150px; padding: 9px 26px 8px; border: 0; border-radius: var(--r-sm);
  font: inherit; text-align: center; color: var(--tgs-num);
  background: linear-gradient(180deg, var(--tgs-face-hi), var(--tgs-face-lo));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -2px 0 rgba(0,0,0,.3), 0 5px 14px var(--plaque-ombre);
}
:root[data-theme="jour"] .plaque { --plaque-ombre: rgba(52,44,110,.2); }
.plaque::before, .plaque::after {
  content: ""; position: absolute; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%;
  background: rgba(0,0,0,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
.plaque::before { left: 9px; }
.plaque::after { right: 9px; }
.plaque b { font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; line-height: 1.15; }
.plaque span { display: inline-flex; align-items: center; gap: 3px; font-size: var(--t-label); font-weight: 550; line-height: 1.35; color: var(--plaque-preuve, var(--tgs-ink)); }
.plaque.tgs-ardoise { --plaque-preuve: #b9bfcc; }
.plaque.tgs-givre { --plaque-preuve: #2d4f74; }
.plaque.tgs-acier {
  background:
    linear-gradient(100deg, var(--tgs-c0), var(--tgs-c1), var(--tgs-c2), var(--tgs-c3), var(--tgs-c4), var(--tgs-c5)) top / 100% 3px no-repeat,
    repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, var(--tgs-face-hi), var(--tgs-face-lo));
}
.plaque.tgs-givre {
  background:
    radial-gradient(circle at 12% 30%, #fff 0 1px, transparent 1.8px), radial-gradient(circle at 86% 70%, #fff 0 1px, transparent 1.8px),
    radial-gradient(circle at 60% 22%, #fff 0 .8px, transparent 1.5px),
    linear-gradient(180deg, var(--tgs-bz-hi), var(--tgs-bz-lo));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 0 rgba(40,80,130,.25), 0 5px 14px var(--plaque-ombre), 0 0 22px rgba(170,215,255,.28);
}
.plaque.tgs-glacier {
  background:
    linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 45%, transparent 60%) 0 0 / 260% 100% no-repeat,
    linear-gradient(180deg, var(--tgs-f1), var(--tgs-face-lo));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(0,0,0,.35), 0 5px 16px var(--plaque-ombre), 0 0 24px rgba(60,150,255,.3);
}
.plaque.tgs-aurore, .plaque.tgs-zero { border: 1.5px solid transparent; }
.plaque.tgs-aurore {
  background:
    radial-gradient(ellipse at 50% 150%, color-mix(in srgb, var(--tgs-cur-a) 50%, transparent), transparent 62%) padding-box,
    linear-gradient(180deg, var(--tgs-face-hi), var(--tgs-face-lo)) padding-box,
    linear-gradient(100deg, var(--tgs-c1), var(--tgs-c0), var(--tgs-c2), var(--tgs-c3), var(--tgs-c1)) border-box;
  box-shadow: 0 5px 16px var(--plaque-ombre), 0 0 28px rgba(111,107,255,.32);
}
.plaque.tgs-aurore b { text-shadow: 0 0 14px rgba(169,123,255,.9); }
.plaque.tgs-zero {
  background:
    radial-gradient(circle at 14% 28%, #fff 0 .8px, transparent 1.4px) padding-box, radial-gradient(circle at 78% 70%, #fff 0 .7px, transparent 1.3px) padding-box,
    radial-gradient(circle at 92% 24%, #cfe 0 .7px, transparent 1.3px) padding-box,
    linear-gradient(180deg, var(--tgs-face-hi), var(--tgs-face-lo)) padding-box,
    linear-gradient(100deg, var(--tgs-c0), var(--tgs-c1), var(--tgs-c2), var(--tgs-c3), var(--tgs-c4), var(--tgs-c5), var(--tgs-c0)) 0 0 / 300% 100% border-box;
  box-shadow: 0 8px 22px var(--plaque-ombre), 0 0 34px rgba(160,140,255,.3), 0 0 64px rgba(111,211,201,.14);
}
.plaque.tgs-zero b { font-size: 13.5px; background: linear-gradient(180deg, #fff 20%, #a3acc4 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.anim .plaque.tgs-glacier:not(.plaque-fermee) { animation: plaque-reflet 7s ease-in-out infinite; }
html.anim .plaque.tgs-zero:not(.plaque-fermee) { animation: plaque-irise 8s linear infinite; }
@keyframes plaque-reflet { 0%, 100% { background-position: 100% 0, 0 0; } 50% { background-position: 0% 0, 0 0; } }
@keyframes plaque-irise { to { background-position: 0 0, 0 0, 0 0, 0 0, 300% 0; } }
button.plaque { cursor: pointer; transition: translate var(--tr) var(--doux), outline-color var(--tr) var(--doux); outline: 2px solid transparent; outline-offset: 3px; }
button.plaque:hover { translate: 0 -1px; }
button.plaque[aria-pressed="true"] { outline-color: var(--acc); }
.plaque-aucun { min-width: 0; background: var(--surface); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--bord-fort); }
.plaque-aucun::before, .plaque-aucun::after { display: none; }
.plaque-aucun span { color: var(--ink-3); }
.plaque-fermee { opacity: .5; filter: saturate(.3); }
.choix-sceaux { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
.choix-sceau {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: var(--e4) var(--e2) var(--e3); border-radius: var(--r-md);
  border: 1px solid var(--bord); background: var(--surface); color: inherit; cursor: pointer;
  transition: border-color var(--tr) var(--doux), background var(--tr) var(--doux);
}
.choix-sceau:hover:not(.choix-ferme) { border-color: var(--acc-trait); }
.choix-sceau[aria-pressed="true"] { border-color: var(--acc-trait); background: var(--acc-brume); box-shadow: 0 0 0 3px var(--acc-voile); }
.choix-sceau.choix-ferme { cursor: not-allowed; }
.choix-sceau.choix-ferme .medaillon { filter: saturate(.3); opacity: .5; }
.choix-sceau-niv { text-align: center; }
.profil {
  position: relative; width: min(380px, 100%); margin: var(--e2) auto 0;
  display: flex; flex-direction: column; align-items: center; gap: var(--e4); text-align: center;
  padding: var(--e6) var(--e5) var(--e5); border-radius: var(--r-xl);
  background: var(--surface-pleine); border: 1px solid var(--bord);
}
.profil.tgs-acier, .profil.tgs-givre, .profil.tgs-glacier, .profil.tgs-aurore, .profil.tgs-zero { border: 1.5px solid transparent; }
.profil.tgs-acier, .profil.tgs-givre, .profil.tgs-glacier {
  background: linear-gradient(var(--surface-pleine), var(--surface-pleine)) padding-box,
              linear-gradient(135deg, var(--tgs-f0), var(--tgs-f1), var(--tgs-f2)) border-box;
}
.profil.tgs-aurore {
  background: linear-gradient(var(--surface-pleine), var(--surface-pleine)) padding-box,
              linear-gradient(120deg, var(--tgs-c0), var(--tgs-c1), var(--tgs-c2), var(--tgs-c3), var(--tgs-c4), var(--tgs-c5)) border-box;
  box-shadow: 0 0 44px -6px rgba(111,107,255,.35);
}
.profil.tgs-zero {
  background:
    radial-gradient(circle at 12% 18%, #fff 0 .8px, transparent 1.4px) padding-box, radial-gradient(circle at 88% 30%, #fff 0 .7px, transparent 1.3px) padding-box,
    radial-gradient(circle at 80% 86%, #cfe 0 .7px, transparent 1.3px) padding-box,
    radial-gradient(circle at 50% 0%, rgba(160,140,255,.16), transparent 55%) padding-box,
    linear-gradient(var(--surface-pleine), var(--surface-pleine)) padding-box,
    linear-gradient(120deg, var(--tgs-c0), var(--tgs-c1), var(--tgs-c2), var(--tgs-c3), var(--tgs-c4), var(--tgs-c5), var(--tgs-c0)) 0 0 / 300% 100% border-box;
  box-shadow: 0 20px 50px rgba(0,0,0,.3), 0 0 60px rgba(160,140,255,.22);
}
html.anim .profil.tgs-zero { animation: profil-irise 9s linear infinite; }
@keyframes profil-irise { to { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 300% 0; } }
.profil-nom { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-titre); font-weight: 750; letter-spacing: -.025em; color: var(--ink); }
.profil-verifie { display: inline-grid; color: var(--gain); }
.profil-rang { display: flex; flex-direction: column; gap: 2px; }
.profil-rang b { font-size: var(--t-sous); font-weight: 700; color: var(--ink); }
.profil-rang small, .profil-pied { font-size: var(--t-label); color: var(--ink-3); }
.profil-verif {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-sm); text-align: left;
  font-size: var(--t-label); font-weight: 600; line-height: 1.4;
  background: var(--surface-2); border: 1px solid var(--bord); color: var(--ink-3);
}
.profil-verif .ico { flex: none; }
.profil-verif-oui { background: var(--gain-voile); border-color: var(--gain-trait); color: var(--gain); }
.profil-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2); width: 100%; }
.profil-stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); text-align: left; }
.profil-stat b { font-size: 1.35rem; font-weight: 750; letter-spacing: -.03em; color: var(--ink); }
.profil-stat small { font-size: var(--t-label); color: var(--ink-3); }
.profil-vitrine { display: flex; justify-content: center; gap: var(--e4); width: 100%; }
.vitrine-med { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 78px; }
.vitrine-med i {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--tgs-num);
  background: radial-gradient(circle at 40% 28%, var(--tgs-face-hi), var(--tgs-face-lo) 72%);
  box-shadow: 0 0 0 2px var(--tgs-f1), 0 4px 10px rgba(0,0,0,.25);
}
.vitrine-med.tgs-glacier i { box-shadow: 0 0 0 2px var(--tgs-f1), 0 0 16px rgba(60,150,255,.45); }
.vitrine-med small { font-size: var(--t-micro); line-height: 1.25; color: var(--ink-2); }
.vitrine-libre i { background: none; box-shadow: none; border: 1.5px dashed var(--bord-fort); }
.vitrine-libre small { color: var(--ink-3); }
.profil-note { display: block; margin-top: var(--e3); text-align: center; }
.choix-sceau-nom { font-size: var(--t-donnee); font-weight: 600; }
.choix-sceau-niv { font-size: var(--t-micro); font-weight: 650; letter-spacing: .04em; color: var(--ink-3); }
.dist-familles { display: flex; flex-wrap: wrap; gap: var(--e5) var(--e8); }
.dist-fam {
  display: flex; flex-direction: column; gap: var(--e3);
  flex: var(--n, 1) 1 calc(var(--n, 1) * 210px + (var(--n, 1) - 1) * var(--e3));
  min-width: 0; max-width: min(100%, calc(var(--n, 1) * 300px));
}
.dist-grille { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(min(100%, max(210px, calc(100% / var(--n, 1) - var(--e3)))), 1fr)); }
.dist {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--e4); border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--bord);
}
.dist-med {
  position: relative; width: 54px; height: 54px; border-radius: 50%; margin-bottom: 6px;
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--ink-4); box-shadow: inset 0 0 0 1px var(--bord-fort);
  transition: scale .35s var(--ressort);
}
.dist.deg-1 .dist-med { background: var(--acc-voile); color: var(--acc); box-shadow: inset 0 0 0 2px var(--aur-4); }
.dist.deg-2 .dist-med { background: color-mix(in srgb, var(--aur-3) 18%, transparent); color: var(--acc-vif); box-shadow: inset 0 0 0 2px var(--aur-3), 0 0 18px -4px var(--aur-3); }
.dist.deg-3 .dist-med, .dist-unique.deg-1 .dist-med {
  color: #fff;
  background: conic-gradient(from 210deg, var(--aur-1), var(--aur-2), var(--aur-3), var(--aur-1));
  box-shadow: 0 0 24px -4px var(--aur-2), inset 0 0 0 3px rgba(255,255,255,.22);
}
html.anim .dist:not(.deg-0):hover .dist-med { scale: 1.08; }
.dist-pips {
  position: absolute; bottom: -6px; left: 50%; translate: -50% 0;
  display: flex; gap: 3px; padding: 2px 5px; border-radius: var(--pill);
  background: var(--surface-pleine); box-shadow: inset 0 0 0 1px var(--bord-fort);
}
.dist-pips i { width: 6px; height: 6px; border-radius: 50%; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--bord-fort); }
.dist-pips i.on { background: var(--aur-2); box-shadow: none; }
.dist-nom { font-size: var(--t-corps); font-weight: 650; }
.dist.deg-0 .dist-nom { color: var(--ink-2); }
.dist-cachee .dist-nom { letter-spacing: .2em; }
.dist-desc { font-size: var(--t-donnee); color: var(--ink-2); line-height: 1.5; }
.dist-prog { margin-top: auto; display: flex; flex-direction: column; gap: 5px; font-size: var(--t-label); font-weight: 600; color: var(--ink-2); padding-top: 4px; }
.dist-obtenue { margin-top: auto; display: inline-flex; align-items: center; gap: 4px; padding-top: 4px; font-size: var(--t-label); font-weight: 650; color: var(--gain); }
.dist-premium { margin-top: auto; align-self: flex-start; }
.bareme { display: grid; gap: 0 var(--e6); grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.bareme-ligne { display: flex; align-items: center; gap: var(--e3); padding: var(--e2) 0; border-bottom: 1px solid var(--bord); }
.bareme-ligne .ligne-ico { width: 30px; height: 30px; color: var(--acc); }
.bareme-ligne .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bareme-ligne .nom { font-size: var(--t-corps); font-weight: 600; }
.bareme-ligne .pq { font-size: var(--t-label); color: var(--ink-3); line-height: 1.45; }
.bareme-xp { font-size: var(--t-sous); color: var(--acc-vif); }
.bareme-zero .ligne-ico, .bareme-zero .bareme-xp { color: var(--ink-3); }
.bareme-regles { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.bareme-regle {
  display: flex; align-items: flex-start; gap: var(--e3);
  padding: var(--e3) var(--e4); border-radius: var(--r-md);
  background: var(--acc-brume); border: 1px solid var(--acc-trait);
}
.bareme-regle .ligne-ico { width: 30px; height: 30px; color: var(--acc); }
.bareme-regle .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bareme-regle .nom { font-size: var(--t-corps); font-weight: 650; }
.bareme-regle .pq { font-size: var(--t-donnee); color: var(--ink-2); line-height: 1.5; }
.fil-plafond { display: inline-flex; align-items: center; gap: 4px; background: var(--acc-voile); border-color: var(--acc-trait); color: var(--ink); font-weight: 600; }
.prog-bord { display: flex; align-items: center; gap: var(--e5); }
.prog-bord-xp { justify-content: space-between; gap: var(--e2) !important; }
.prog-bord-xp b { font-size: var(--t-titre); letter-spacing: -.02em; }
.ligne-serie { border-left-color: var(--aur-3); }
.ligne-serie .ligne-ico { background: color-mix(in srgb, var(--aur-2) 12%, transparent); }
.ligne-serie.en-jeu { border-left-color: var(--aur-2); background: color-mix(in srgb, var(--aur-2) 7%, var(--surface)); }
.prog-bord-defi { display: flex; flex-direction: column; gap: 6px; }
.prog-bord-defi .sous .ico { vertical-align: -2px; color: var(--acc); }
.carte-prog > .btn { align-self: flex-start; }
.serie-alerte {
  display: flex; align-items: center; gap: var(--e2); margin: 0;
  font-size: var(--t-label); font-weight: 650; color: var(--ink); line-height: 1.4;
}
.serie-alerte .ico { flex: none; }
.verrou-boite .serie-alerte {
  justify-content: center; font-size: var(--t-donnee);
  padding: var(--e2) var(--e4); border-radius: var(--pill);
  background: color-mix(in srgb, var(--aur-2) 9%, transparent); border: 1px solid color-mix(in srgb, var(--aur-2) 30%, transparent);
}
.boite-fete {
  position: relative; width: min(520px, 100%); overflow-x: hidden;
  align-items: center; text-align: center; gap: var(--e4);
  padding: var(--e10) var(--e8) var(--e6);
}
.boite-fete::before {
  content: ""; position: absolute; left: -20%; right: -20%; top: -45%; height: 110%; pointer-events: none;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--aur-3) 34%, transparent), transparent 72%),
    radial-gradient(closest-side at 30% 62%, color-mix(in srgb, var(--aur-2) 22%, transparent), transparent 72%);
}
.boite-fete > * { position: relative; z-index: 1; }
.fete-centre { display: grid; place-items: center; margin-bottom: var(--e2); }
.fete-med {
  width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: conic-gradient(from 210deg, var(--aur-1), var(--aur-2), var(--aur-3), var(--aur-4), var(--aur-1));
  box-shadow: 0 0 44px -6px var(--aur-2), inset 0 0 0 4px rgba(255,255,255,.24);
}
html.anim .fete-centre > * { animation: fete-pop .9s var(--ressort) both .1s; }
@keyframes fete-pop {
  0%   { scale: .3; opacity: 0; rotate: -18deg; }
  60%  { scale: 1.08; opacity: 1; rotate: 4deg; }
  100% { scale: 1; opacity: 1; rotate: 0deg; }
}
.fete-txt { align-items: center; }
.fete-txt h2 { font-size: var(--t-sect); letter-spacing: var(--suivi-titre); line-height: 1.08; }
html.anim .fete-txt { animation: fondu-monte .7s var(--entree) both .35s; }
.fete-autres { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.fete-autre {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--pill);
  background: var(--acc-voile); border: 1px solid var(--acc-trait); font-size: var(--t-label); font-weight: 600;
}
.fete-autre .ico { color: var(--acc); }
.fete-recompenses { width: 100%; text-align: left; }
.fete-pied { width: 100%; justify-content: center; }
.fete-eclats { position: absolute; left: 50%; top: 100px; width: 0; height: 0; z-index: 0; pointer-events: none; }
.fete-eclats i {
  position: absolute; left: -4px; top: -7px; width: 8px; height: 14px; border-radius: 3px; opacity: 0;
  background: var(--c, var(--aur-2));
}
.fete-eclats i:nth-child(4n+1) { --c: var(--aur-1); --d: -160px; }
.fete-eclats i:nth-child(4n+2) { --c: var(--aur-2); --d: -190px; }
.fete-eclats i:nth-child(4n+3) { --c: var(--aur-3); --d: -140px; }
.fete-eclats i:nth-child(4n)   { --c: var(--aur-4); --d: -175px; }
html.anim .fete-eclats i { animation: eclat 1.4s cubic-bezier(.15, .7, .3, 1) both; animation-delay: calc(.1s + var(--i) * 14ms); }
@keyframes eclat {
  0%   { opacity: 1; transform: rotate(calc(var(--i) * 20deg)) translateY(0) scale(.5); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(calc(var(--i) * 20deg + 50deg)) translateY(var(--d, -170px)) scale(1); }
}
.trempe-centre { display: grid; place-items: center; margin-bottom: var(--e2); }
.trempe { position: relative; width: var(--t); height: var(--t); }
.trempe > div { position: absolute; inset: 0; pointer-events: none; }
.trempe-avant, .trempe-apres { display: grid; place-items: center; }
.trempe-avant svg, .trempe-apres svg { display: block; overflow: visible; }
.trempe-avant, .trempe-chaleur, .trempe-eclair { opacity: 0; }
.trempe-chaleur {
  inset: -2px !important; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle at 50% 45%, #fff6d6 0%, #ffc35a 22%, #ff7a2a 48%, #c42d14 74%, rgba(90,15,8,0) 100%);
}
.trempe-eclair { inset: -40px !important; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.9), rgba(200,230,255,.4) 40%, transparent 70%); }
.trempe-vapeur i {
  position: absolute; bottom: 38%; width: calc(var(--t) * .3); height: calc(var(--t) * .3); border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(230,240,255,.6), transparent 70%); filter: blur(7px);
}
.trempe-eclats { inset: -30px !important; }
.trempe-eclats i {
  position: absolute; width: 16px; height: 16px; opacity: 0; background: var(--trempe-eclat, #fff);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
:root[data-theme="jour"] .trempe-eclats i { --trempe-eclat: var(--aur-3); }
html.anim .trempe-avant { opacity: 1; animation: trempe-rougit 1.2s ease-in forwards, trempe-efface .45s ease 1.25s forwards; }
html.anim .trempe-chaleur { animation: trempe-chauffe 1.2s ease-in forwards, trempe-refroidit .7s ease-out 1.25s forwards; }
html.anim .trempe-apres { clip-path: circle(0% at 50% 50%); animation: trempe-gele 1.3s cubic-bezier(.2, .7, .2, 1) 1.25s forwards; }
html.anim .trempe-eclair { animation: trempe-eclair .6s ease-out 1.25s; }
html.anim .trempe-vapeur i { animation: trempe-monte 1.6s ease-out calc(1.25s + var(--d)) forwards; }
html.anim .trempe-eclats i { animation: trempe-brille 1.9s ease-in-out calc(2.8s + var(--d)) infinite; }
html.anim .boite-trempe .fete-txt { animation-delay: 1.5s; }
@keyframes trempe-rougit { to { filter: sepia(1) saturate(4) hue-rotate(-25deg) brightness(1.15); } }
@keyframes trempe-efface { to { opacity: 0; } }
@keyframes trempe-chauffe {
  0%   { opacity: 0; box-shadow: 0 0 0 0 rgba(255,110,40,0); }
  100% { opacity: .92; box-shadow: 0 0 90px 20px rgba(255,110,40,.55); }
}
@keyframes trempe-refroidit {
  from { opacity: .92; box-shadow: 0 0 90px 20px rgba(255,110,40,.55); }
  to   { opacity: 0; box-shadow: 0 0 0 0 rgba(255,110,40,0); }
}
@keyframes trempe-gele { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(75% at 50% 50%); } }
@keyframes trempe-eclair { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } }
@keyframes trempe-monte {
  0%   { opacity: 0; transform: translateY(0) scale(.6); }
  20%  { opacity: .9; }
  100% { opacity: 0; transform: translateY(calc(var(--t) * -.64)) scale(1.9); }
}
@keyframes trempe-brille { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
@media (max-width: 640px) {
  .prog-hero-niv { gap: var(--e4); }
  .prog-hero .medaillon-grand { --m: 64px !important; margin: 2px; }
  .prog-bord { gap: var(--e4); }
  .ligne-recompense { flex-wrap: wrap; }
  .ligne-recompense .btn { margin-left: auto; }
  .defi { flex-wrap: wrap; }
  .boite-fete { padding: var(--e8) var(--e5) var(--e5); }
  .fete-eclats { top: 92px; }
}