/* L'École de Do — badges à côté du pseudo */
.ld-pseudo { --ld-fond: #f3ede5; display: inline-flex; align-items: center; gap: 5px; background: var(--ld-fond); color: #2b2118; border-radius: 999px; padding: 3px 10px 3px 5px; font-size: 0.86rem; line-height: 1.3; margin: 2px; vertical-align: middle; }
.ld-pseudo--sombre { color: #fff; }
.ld-pseudo--arc-en-ciel { background: linear-gradient(90deg, #ffb3ba, #ffdfba, #ffffba, #baffc9, #bae1ff, #e0c3fc, #ffb3ba); background-size: 300% 100%; animation: ld-cadre-arc 6s linear infinite; }
@keyframes ld-cadre-arc { to { background-position: 300% 0; } }
.ld-pseudo__nb { font-size: 0.72rem; font-weight: 700; opacity: .65; }

.ld-badge { display: inline-flex; align-items: center; justify-content: center; width: 1.45em; height: 1.45em; border-radius: 50%; background: rgba(255,255,255,.75); font-size: 0.95em; line-height: 1; flex: 0 0 auto; }
.ld-badge--grand { font-size: 1.7rem; }
.ld-badge .ld-icone { width: 1.05em; height: 1.05em; display: block; }
.ld-badge--large { width: auto; border-radius: 999px; padding: 0 0.25em; letter-spacing: -0.12em; }

/* Flammes colorées (teinte de l'emoji 🔥) */
.ld-badge--bleue  { filter: hue-rotate(185deg) saturate(1.4); }
.ld-badge--rouge  { filter: hue-rotate(-18deg) saturate(2) brightness(.95); }
.ld-badge--verte  { filter: hue-rotate(85deg) saturate(1.3); }
.ld-badge--multi  { animation: ld-arc-en-ciel 4s linear infinite; }
@keyframes ld-arc-en-ciel { to { filter: hue-rotate(360deg); } }
.ld-badge--turbo { animation-duration: .04s; } /* guitare exclusive de Do : les couleurs défilent à toute vitesse */

/* Couronnes du podium */
.ld-badge--couronne-0 { background: linear-gradient(135deg, #f7e7a1, #d4af37); box-shadow: 0 0 0 1.5px #d4af37; }
.ld-badge--couronne-1 { background: linear-gradient(135deg, #f1f1f1, #b8b8b8); box-shadow: 0 0 0 1.5px #a8a8a8; }
.ld-badge--couronne-2 { background: linear-gradient(135deg, #f0c9a0, #cd7f32); box-shadow: 0 0 0 1.5px #cd7f32; }
@media (prefers-reduced-motion: reduce) { .ld-badge--multi { animation: none; filter: hue-rotate(120deg); } .ld-pseudo--arc-en-ciel { animation: none; } }

/* ---------- « Mon compte » : Mes badges ---------- */
.ld-mes-badges { background: #fff; border: 1px solid #eadfce; border-radius: 14px; padding: 18px; margin-bottom: 20px; }
.ld-mes-badges h3 { margin: 0 0 10px; color: #553118; }
.ld-mes-badges__apercu { margin: 0 0 10px; }
.ld-mes-badges__ok { color: #2c7a2c; font-weight: 700; margin: 0 0 8px; }
.ld-mes-badges__info { font-size: 0.88rem; color: #7a6a5a; margin: 8px 0 0; }
.ld-mes-badges__label { font-weight: 700; margin: 14px 0 8px; color: #553118; }
.ld-badges-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.ld-badge-carte { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; border: 2px solid #eadfce; border-radius: 12px; padding: 10px 6px; cursor: pointer; background: #fff; }
.ld-badge-carte input { position: absolute; opacity: 0; pointer-events: none; }
.ld-badge-carte:has(input:checked), .ld-badge-carte.is-choisi { border-color: #7b5330; background: #f9f2ea; }
.ld-badge-carte:has(input:focus-visible) { outline: 3px solid #e0a15a; outline-offset: 2px; }
.ld-badge-carte.is-verrouille { cursor: default; background: #faf8f5; }
.ld-badge-carte.is-verrouille .ld-badge { filter: grayscale(1); opacity: .45; }
.ld-badge-carte__nom { font-weight: 700; font-size: 0.85rem; }
.ld-badge-carte__cond { font-size: 0.72rem; color: #7a6a5a; }
.ld-badge-carte__barre { width: 80%; height: 5px; background: #eee4d6; border-radius: 3px; overflow: hidden; }
.ld-badge-carte__barre i { display: block; height: 100%; background: #7b5330; }
.ld-couleurs { display: flex; flex-wrap: wrap; gap: 8px; }
.ld-couleur { position: relative; cursor: pointer; }
.ld-couleur input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.ld-couleur span { display: block; width: 34px; height: 34px; border-radius: 50%; background: var(--c); border: 2px solid #d9cbb8; }
.ld-couleur input:checked + span { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #7b5330; }
.ld-couleur input:focus-visible + span { outline: 3px solid #e0a15a; outline-offset: 3px; }
.ld-couleur--libre input[type="color"] { width: 34px; height: 34px; border: 2px solid #d9cbb8; border-radius: 50%; padding: 0; cursor: pointer; background: none; }
.ld-couleur--libre:has(input[type="radio"]:checked) input[type="color"] { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #7b5330; }
.ld-mes-badges__btn { background: #8c2411; color: #fff; border: 0; border-radius: 999px; padding: 10px 22px; font-weight: 700; cursor: pointer; margin-top: 12px; }
a.ld-mes-badges__btn, a.ld-mes-badges__btn:hover, a.ld-mes-badges__btn:visited { display: inline-block; color: #fff !important; text-decoration: none !important; }
.ld-couleur--arc span { background: conic-gradient(#ffb3ba, #ffdfba, #ffffba, #baffc9, #bae1ff, #e0c3fc, #ffb3ba); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; }
.ld-couleur--arc.is-verrouille { cursor: default; }
.ld-couleur--arc.is-verrouille span { filter: grayscale(.8); opacity: .6; }

/* Badges exclusifs de saison (🎃 / 🎄 + année), seulement sur la page profil */
.ld-badge-carte--saison { cursor: default; background: linear-gradient(160deg, #fff8ec, #fff); }
.ld-badge-saison { position: relative; display: inline-flex; flex-direction: column; align-items: center; }
.ld-badge-saison__icone { font-size: 2.4rem; line-height: 1; }
.ld-badge-saison b { margin-top: -6px; background: #2b2118; color: #ffd27a; font-size: 0.72rem; letter-spacing: .06em; border-radius: 999px; padding: 1px 7px; }
.ld-badge-carte--saison.is-verrouille .ld-badge-saison { filter: grayscale(1); opacity: .55; }

/* Pop-up « Nouveau badge ! » */
.ld-pop-badge { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(30, 20, 12, .6); animation: ld-pop-fond .25s ease; }
.ld-pop-badge__boite { position: relative; width: 100%; max-width: 360px; background: #fff; border-radius: 20px; padding: 26px 22px 20px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.3); animation: ld-pop-entree .45s cubic-bezier(.2,1.4,.4,1); }
.ld-pop-badge__confettis { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); margin: 0; font-size: 2.6rem; }
.ld-pop-badge__sur { margin: 4px 0 10px; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8C2411; }
.ld-pop-badge__icone { font-size: 3.4rem !important; }
.ld-pop-badge__icone.ld-badge--grand { width: 84px; height: 84px; font-size: 2.6rem !important; }
.ld-pop-badge h3 { margin: 10px 0 6px; color: #3b2414; font-size: 1.35rem; }
.ld-pop-badge p { margin: 0 0 14px; color: #6b5a4a; font-size: .92rem; }
.ld-pop-badge__actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ld-pop-badge .ld-pop-badge__btn { appearance: none; border: 0 !important; border-radius: 999px !important; padding: 10px 18px !important; background: #8C2411 !important; color: #fff !important; font-family: inherit; font-size: .95rem; font-weight: 700; line-height: 1.2; text-transform: none !important; letter-spacing: normal !important; text-decoration: none !important; box-shadow: none !important; cursor: pointer; }
.ld-pop-badge .ld-pop-badge__btn--2 { background: #f3ede5 !important; color: #553118 !important; }
.ld-pop-badge__boite, .ld-pop-badge__boite * { box-sizing: border-box; }
@keyframes ld-pop-fond { from { opacity: 0; } }
@keyframes ld-pop-entree { from { opacity: 0; transform: scale(.6); } }
@media (prefers-reduced-motion: reduce) { .ld-pop-badge, .ld-pop-badge__boite { animation: none; } }

/* Cadre guirlande lumineuse (roulette de Noël, gardé à vie, une couleur par année).
   --ld-delai est propre à chaque élève : les cadres clignotent en décalé, comme un sapin. */
.ld-pseudo--noel { --ld-lumiere: #fff; position: relative; background: #14532d; color: #fff; box-shadow: 0 0 0 1.5px #0d3b1f; margin: 7px 4px; }
.ld-pseudo--noel::before, .ld-pseudo--noel::after { content: ""; position: absolute; inset: -5px 7px; pointer-events: none;
    background: radial-gradient(circle, var(--ld-lumiere) 0 2.2px, transparent 3px) 0 0 / 12px 8px repeat-x,
                radial-gradient(circle, var(--ld-lumiere) 0 2.2px, transparent 3px) 6px 100% / 12px 8px repeat-x;
    filter: drop-shadow(0 0 2px var(--ld-lumiere)) drop-shadow(0 0 3px var(--ld-lumiere));
    animation: ld-guirlande 1.6s ease-in-out infinite; animation-delay: var(--ld-delai, 0s); }
.ld-pseudo--noel::after { background-position: 6px 0, 0 100%; animation-delay: calc(var(--ld-delai, 0s) - .8s); }
@keyframes ld-guirlande { 0%, 100% { opacity: 1; } 50% { opacity: .12; } }
.ld-couleur--noel span { background: radial-gradient(circle, var(--ld-lumiere) 0 2px, transparent 2.8px) 0 0 / 9px 9px, #14532d; box-shadow: inset 0 0 6px rgba(255,255,255,.4); }

/* Badge spécial Noël (roulette) : halo doré qui pulse */
.ld-badge--noel-special { background: radial-gradient(circle, #fff7d1, #f2c94c); box-shadow: 0 0 0 1.5px #d4a52c, 0 0 8px 2px rgba(255, 210, 80, .9); animation: ld-noel-halo 1.4s ease-in-out infinite; }
@keyframes ld-noel-halo { 50% { box-shadow: 0 0 0 1.5px #d4a52c, 0 0 16px 6px rgba(255, 210, 80, 1); transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .ld-pseudo--noel::before, .ld-pseudo--noel::after, .ld-badge--noel-special { animation: none; } }

/* Roulette de Noël (« Mon compte ») */
.ld-roulette { background: linear-gradient(160deg, #14532d, #0d3b1f); color: #fff; border-radius: 16px; padding: 18px; margin-bottom: 20px; }
.ld-roulette h3 { margin: 0 0 6px; color: #f2c94c; font-size: 1.5rem; }
.ld-roulette__intro, .ld-roulette__tours { margin: 0 0 8px; color: #e7f1ea; }
.ld-roulette__tours { font-weight: 700; color: #f2c94c; }
.ld-roulette__test { background: #fff3bf; color: #553118; border-radius: 10px; padding: 8px 12px; margin: 0 0 10px; font-size: .9rem; }
.ld-roulette__zone { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.ld-roulette__roue { position: relative; width: min(340px, 100%); flex: 0 0 auto; }
.ld-roulette__svg { display: block; width: 100%; height: auto; }
.ld-roulette__svg { transition: transform 5s cubic-bezier(.12, .7, .1, 1); }
.ld-roulette__fleche { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); z-index: 2; width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 26px solid #f2c94c; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.ld-roulette__cote { flex: 1 1 220px; min-width: 0; }
.ld-roulette .ld-roulette__btn { appearance: none; border: 0; border-radius: 999px; padding: 12px 26px; background: #f2c94c; color: #3b2414; font-weight: 800; font-size: 1.05rem; cursor: pointer; text-transform: none; letter-spacing: normal; }
.ld-roulette .ld-roulette__btn:disabled { opacity: .55; cursor: default; }
.ld-roulette .ld-roulette__btn--2 { background: #fff; padding: 9px 20px; font-size: .95rem; margin-top: 4px; }
.ld-roulette__resultat { background: rgba(255,255,255,.1); border-radius: 12px; padding: 12px 14px; margin: 12px 0; }
.ld-roulette__resultat.is-gagne { background: #fff; color: #3b2414; animation: ld-pop-entree .45s cubic-bezier(.2,1.4,.4,1); }
.ld-roulette__titre { font-weight: 800; font-size: 1.15rem; margin: 0 0 4px; }
.ld-roulette__texte { margin: 0 0 8px; }
.ld-roulette__cadeaux { margin-top: 12px; }
.ld-roulette__sous-titre { font-weight: 700; color: #f2c94c; margin: 0 0 4px; }
.ld-roulette__cadeaux ul { margin: 0; padding-left: 18px; }
.ld-roulette-flottant { position: fixed; left: 16px; bottom: 16px; z-index: 9990; background: #14532d; color: #fff !important; border-radius: 999px; padding: 11px 18px; font-weight: 700; text-decoration: none !important; box-shadow: 0 0 0 2px #f2c94c, 0 6px 18px rgba(0,0,0,.3); animation: ld-noel-halo-btn 1.6s ease-in-out infinite; }
@keyframes ld-noel-halo-btn { 50% { box-shadow: 0 0 0 2px #f2c94c, 0 0 16px 4px rgba(242, 201, 76, .8); } }
@media (prefers-reduced-motion: reduce) { .ld-roulette__svg { transition-duration: .01s; } .ld-roulette-flottant { animation: none; } }

/* ---------- Niveaux d'XP (includes/xp.php) ---------- */
.ld-pseudo[data-ld-profil] { cursor: pointer; }
.ld-pseudo__nb { white-space: nowrap; }
/* Cadres débloqués avec les niveaux */
.ld-pseudo--xp-bleu-nuit, .ld-couleur span.ld-pseudo--xp-bleu-nuit { background: #1d2b53; color: #fff; }
.ld-pseudo--xp-dore, .ld-couleur span.ld-pseudo--xp-dore { background: linear-gradient(135deg, #f7e7a1, #d4af37 55%, #f7e7a1); color: #3b2a05; box-shadow: 0 0 0 1.5px #b8932a; }
.ld-pseudo--xp-legende, .ld-couleur span.ld-pseudo--xp-legende { color: #3b2a05; background: linear-gradient(100deg, #d4af37 20%, #fff6c9 40%, #d4af37 60%) 0 0 / 250% 100%; box-shadow: 0 0 0 1.5px #8a6a12, 0 0 12px rgba(212,175,55,.8); animation: ld-legende 3s linear infinite; font-weight: 700; }
@keyframes ld-legende { to { background-position: -250% 0; } }
.ld-couleur--skin span { display: flex; align-items: center; justify-content: center; font-size: .8rem; padding: 0; margin: 0; }
.ld-couleur--skin.is-verrouille { cursor: default; }
.ld-couleur--skin.is-verrouille span { filter: grayscale(.8); opacity: .55; }
/* Badges débloqués avec les niveaux */
.ld-badge--xp-flamme-doree { background: linear-gradient(135deg, #fff3c4, #e6c25a); box-shadow: 0 0 0 1.5px #c9a23a; }
.ld-badge--xp-note-cristal { background: linear-gradient(135deg, #e8f7ff, #b9e3ff 50%, #f3e8ff); box-shadow: 0 0 0 1.5px #8fc9ef, 0 0 8px rgba(143,201,239,.8); }

/* Barre d'XP */
.ld-xp-barre { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.ld-xp-barre__niv { background: #8c2411; color: #fff; font-weight: 800; border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
.ld-xp-barre__jauge { flex: 1; height: 14px; background: #f1e7da; border-radius: 999px; overflow: hidden; min-width: 80px; }
.ld-xp-barre__jauge i { display: block; height: 100%; background: linear-gradient(90deg, #e0a15a, #8c2411); border-radius: 999px; }
.ld-xp-barre__txt { font-size: .85rem; font-weight: 700; color: #553118; white-space: nowrap; }
.ld-xp-niveaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.ld-xp-niveau { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; border: 1px solid #eadfce; border-radius: 12px; padding: 10px 6px; opacity: .55; }
.ld-xp-niveau.is-gagne { opacity: 1; border-color: #e0a15a; }
.ld-xp-niveau small { font-size: .75rem; color: #6b5440; }
.ld-xp-quetes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ld-xp-quete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; border: 1px solid #eadfce; border-radius: 12px; padding: 10px 12px; }
.ld-xp-quete.is-faite { background: #f3faf3; border-color: #b9dcb9; }
.ld-xp-quete__nom { flex: 1 1 220px; font-weight: 600; }
.ld-xp-quete__xp { font-weight: 800; color: #8c2411; }
.ld-xp-quete__etat { font-size: .8rem; color: #6b5440; }
.ld-xp-quete .ld-badge-carte__barre { flex: 0 0 100px; }
.ld-xp-quete form, .ld-xp-quete .ld-mes-badges__btn { margin: 0; }
.ld-xp-quete .ld-mes-badges__btn, .ld-xp-demande .ld-mes-badges__btn { padding: 6px 14px; margin: 0; }
.ld-xp-prive { margin-top: 14px; font-size: .9rem; }
.ld-xp-demande { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #f1e7da; }
.ld-mes-badges__btn--2 { background: #fff; color: #8c2411; box-shadow: inset 0 0 0 1.5px #8c2411; }
/* Pop-ups niveau et fiche profil */
.ld-pop-xp__niv { margin: 0 0 6px; font-size: 2.4rem; font-weight: 900; color: #8c2411; }
.ld-profil { text-align: left; }
.ld-profil__nom { text-align: center; font-size: 1.1rem; }
.ld-profil__info { margin: 8px 0; }
.ld-profil__disc { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; }
.ld-profil__disc li { display: flex; align-items: center; gap: 8px; }
.ld-profil__disc b { margin-left: auto; }
.ld-pop-profil .ld-pop-badge__btn { margin-top: 8px; }
.ld-couleur span.ld-pseudo--arc-en-ciel { background: conic-gradient(#ffb3ba, #ffdfba, #ffffba, #baffc9, #bae1ff, #e0c3fc, #ffb3ba); animation: none; }

/* ---------- 100 niveaux : nouveaux skins ---------- */
.ld-pseudo--apercu { padding: 3px 12px; }
.ld-pop-xp__skin { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0; }
.ld-pseudo--xp-bordeaux, .ld-couleur span.ld-pseudo--xp-bordeaux { background: #6d1a2a; color: #fff; }
@keyframes ld-defile { to { background-position: 300% 0; } }
/* Badges */
.ld-badge--xp-micro-or { background: linear-gradient(135deg, #fff1b8, #d4af37); box-shadow: 0 0 0 1.5px #b8932a, 0 0 8px rgba(212,175,55,.7); }
@keyframes ld-tourne { to { transform: rotate(360deg); } }
.ld-badge--xp-trophee { background: linear-gradient(135deg, #fff6c9, #d4af37 50%, #fff6c9) 0 0 / 200% 100%; box-shadow: 0 0 0 2px #8a6a12, 0 0 14px rgba(212,175,55,1); animation: ld-legende 2.5s linear infinite; }

/* La page « Mon compte » (Elementor) ajoute des <br> et des <p> vides entre les éléments : ils décalaient la grille des badges */
.ld-mes-badges br, .ld-pop-badge br, .ld-profil br { display: none; }
.ld-mes-badges p:empty, .ld-badges-grille > p, .ld-couleurs > p, .ld-xp-niveaux > p { display: none; }
.ld-badge-carte > *, .ld-xp-niveau > * { margin: 0; }
.ld-pseudo > *, .ld-pseudo__nb { margin: 0; line-height: 1; }
.ld-pseudo { line-height: 1.2; }

/* ---------- Skins en lien avec la musique et la danse (Do, 05/11) ---------- */
.ld-pseudo[class*="ld-pseudo--xp-"] { position: relative; }
/* Clavier de piano : touches blanches et noires sur le bord */
/* Partition : portée de 5 lignes, les notes défilent */
.ld-pseudo--xp-partition, .ld-couleur span.ld-pseudo--xp-partition { color: #1b1b1b; background: repeating-linear-gradient(#fffdf6 0 3px, #9a8a70 3px 4px) 0 1px / 100% 20px, #fffdf6; }
.ld-pseudo--xp-partition::after { content: "♪ ♫ ♩ ♬"; position: absolute; top: -12px; left: 0; font-size: 11px; color: #553118; white-space: nowrap; animation: ld-defile-notes 5s linear infinite; pointer-events: none; }
@keyframes ld-defile-notes { from { transform: translateX(-30%); opacity: 0; } 20%, 80% { opacity: 1; } to { transform: translateX(110%); opacity: 0; } }
/* Égaliseur : barres de son qui montent et descendent */
/* Cordes de guitare qui vibrent */
.ld-pseudo--xp-cordes, .ld-couleur span.ld-pseudo--xp-cordes { color: #fff; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(230,210,160,.8) 3px 4px), linear-gradient(90deg, #5b3a1e, #8b5a2b, #5b3a1e); animation: ld-vibre .12s linear infinite alternate; }
@keyframes ld-vibre { to { background-position: 0 1px, 0 0; } }
/* Projecteurs de scène : faisceaux qui balaient */
.ld-pseudo--xp-projecteurs, .ld-couleur span.ld-pseudo--xp-projecteurs { color: #fff; background: linear-gradient(110deg, transparent 30%, rgba(255,240,180,.55) 45%, transparent 60%) 0 0 / 250% 100%, #1a1a2e; animation: ld-projecteur 2.8s ease-in-out infinite alternate; }
@keyframes ld-projecteur { to { background-position: 100% 0, 0 0; } }
/* Piste de danse : dalles qui s'allument, une danseuse traverse */
.ld-pseudo--xp-dancefloor, .ld-couleur span.ld-pseudo--xp-dancefloor { color: #fff; background: conic-gradient(#ff3cac 25%, #2bd2ff 0 50%, #ffe600 0 75%, #7cff4f 0) 0 0 / 14px 14px; animation: ld-dalles 1s steps(2) infinite; text-shadow: 0 1px 2px #000; }
@keyframes ld-dalles { to { background-position: 7px 7px; } }
.ld-pseudo--xp-dancefloor::after { content: "💃"; position: absolute; top: -14px; left: 0; font-size: 13px; animation: ld-danseuse 4s ease-in-out infinite alternate; pointer-events: none; }
@keyframes ld-danseuse { 0% { left: 0; transform: rotate(-10deg); } 25% { transform: rotate(10deg) translateY(-2px); } 50% { transform: rotate(-10deg); } 75% { transform: rotate(10deg) translateY(-2px); } 100% { left: calc(100% - 14px); transform: rotate(-10deg); } }
/* Notes qui s'envolent */
.ld-pseudo--xp-notes-volantes, .ld-couleur span.ld-pseudo--xp-notes-volantes { color: #fff; background: linear-gradient(135deg, #8c2411, #e0a15a); }
.ld-pseudo--xp-notes-volantes::before, .ld-pseudo--xp-notes-volantes::after { content: "♪"; position: absolute; bottom: 60%; left: 20%; font-size: 12px; color: #8c2411; animation: ld-envol 2.4s ease-out infinite; pointer-events: none; }
.ld-pseudo--xp-notes-volantes::after { content: "♫"; left: 70%; animation-delay: 1.2s; }
@keyframes ld-envol { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-18px) rotate(15deg); opacity: 0; } }
/* Rideau de scène en velours rouge */
.ld-pseudo--xp-rideau, .ld-couleur span.ld-pseudo--xp-rideau { color: #fff6d8; background: radial-gradient(ellipse at 50% 0, rgba(255,230,150,.5), transparent 60%), repeating-linear-gradient(90deg, #7a0c14 0 5px, #b3141f 5px 9px, #7a0c14 9px 12px); box-shadow: 0 0 0 1.5px #d4af37; }
/* Lumières de concert : couleurs qui changent sur le rythme */
.ld-pseudo--xp-concert, .ld-couleur span.ld-pseudo--xp-concert { color: #fff; background: #111; animation: ld-concert 1.6s steps(1) infinite; }
@keyframes ld-concert { 0% { box-shadow: 0 0 0 2px #ff3cac, 0 0 14px #ff3cac; } 25% { box-shadow: 0 0 0 2px #2bd2ff, 0 0 14px #2bd2ff; } 50% { box-shadow: 0 0 0 2px #ffe600, 0 0 14px #ffe600; } 75% { box-shadow: 0 0 0 2px #7cff4f, 0 0 14px #7cff4f; } }
/* Légende : or animé avec des notes dorées */
.ld-pseudo--xp-legende::after { content: "♪"; position: absolute; top: -12px; right: 6px; font-size: 12px; color: #d4af37; animation: ld-envol 2s ease-out infinite; pointer-events: none; }
/* Badges qui bougent */
.ld-badge--xp-casque { background: linear-gradient(135deg, #e3edf9, #7aa7e0); animation: ld-battement .6s ease-in-out infinite; }
@keyframes ld-battement { 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .ld-pseudo[class*="ld-pseudo--xp-"], .ld-pseudo[class*="ld-pseudo--xp-"]::before, .ld-pseudo[class*="ld-pseudo--xp-"]::after, .ld-badge[class*="ld-badge--xp-"] { animation: none !important; } }
.ld-couleur--skin span { position: relative; }
/* Skins générés : dégradés, dégradés brillants, anneaux bronze / argent / or */
.ld-pseudo--xp-degrade, .ld-couleur span.ld-pseudo--xp-degrade { background: linear-gradient(135deg, var(--d1), var(--d2)); }
.ld-pseudo--xp-precieux, .ld-couleur span.ld-pseudo--xp-precieux { background: linear-gradient(110deg, var(--d1) 25%, var(--d2) 40%, #fff 50%, var(--d2) 60%, var(--d1) 75%) 0 0 / 300% 100%; animation: ld-defile 4s linear infinite; box-shadow: 0 0 8px var(--d2); }
.ld-badge--anneau-bronze { background: linear-gradient(135deg, #f6dcc0, #cd7f32); box-shadow: 0 0 0 1.5px #a0612a; }
.ld-badge--anneau-argent { background: linear-gradient(135deg, #ffffff, #b8bfc7); box-shadow: 0 0 0 1.5px #8e98a3; }
.ld-badge--anneau-or { background: linear-gradient(135deg, #fff3c4, #d4af37); box-shadow: 0 0 0 1.5px #b8932a, 0 0 8px rgba(212,175,55,.8); }
.ld-xp-tous { margin-top: 10px; }
.ld-xp-tous summary { cursor: pointer; font-weight: 700; color: #8c2411; margin-bottom: 8px; }
/* Quêtes du moment */
.ld-xp-quete__type { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: 999px; background: #f1e7da; color: #553118; }
.ld-xp-quete--visibilite { border-color: #e0a15a; background: #fff8ef; }
.ld-xp-quete--visibilite .ld-xp-quete__type { background: #8c2411; color: #fff; }
.ld-xp-quete__minuteur { flex-basis: 100%; font-size: .78rem; color: #8c2411; font-variant-numeric: tabular-nums; }
.ld-mes-badges__label small { font-weight: 400; color: #6b5440; }
.ld-xp-quete .ld-xp-quete__minuteur { flex: 0 0 100%; width: 100%; order: 10; }

/* ---------- Skins dessinés (Do, 05/11) ---------- */
.ld-pseudo__deco { position: absolute; pointer-events: none; z-index: -1; }
.ld-pseudo[class*="ld-pseudo--xp-"] { isolation: isolate; }
.ld-badge svg.ld-icone--anim { width: 1.25em; height: 1.25em; display: block; }
/* Piano : un vrai clavier, le pseudo sur une plaque noire */
.ld-pseudo--xp-piano, .ld-couleur span.ld-pseudo--xp-piano { color: #fff; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='40'%3E%3Crect width='28' height='40' fill='%23fff'/%3E%3Cg stroke='%23aaa' stroke-width='.7'%3E%3Cpath d='M4 0v40M8 0v40M12 0v40M16 0v40M20 0v40M24 0v40M28 0v40'/%3E%3C/g%3E%3Cg fill='%23111'%3E%3Crect x='2.6' width='2.8' height='24' rx='.5'/%3E%3Crect x='6.6' width='2.8' height='24' rx='.5'/%3E%3Crect x='14.6' width='2.8' height='24' rx='.5'/%3E%3Crect x='18.6' width='2.8' height='24' rx='.5'/%3E%3Crect x='22.6' width='2.8' height='24' rx='.5'/%3E%3C/g%3E%3C/svg%3E") 0 0 / auto 100% repeat-x; box-shadow: 0 0 0 2px #111; }
.ld-pseudo--xp-piano .ld-pseudo__nom { background: #111; color: #fff; padding: 1px 7px; border-radius: 5px; }
.ld-pseudo--xp-piano .ld-pseudo__nb { background: #111; color: #fff; padding: 2px 5px; border-radius: 5px; opacity: 1; }
/* Égaliseur : barres de son derrière le pseudo */
.ld-pseudo--xp-egaliseur, .ld-couleur span.ld-pseudo--xp-egaliseur { color: #fff; background: #0e0e12; text-shadow: 0 1px 2px #000; overflow: hidden; }
.ld-couleur span.ld-pseudo--xp-egaliseur { background: linear-gradient(0deg, #2ecc71 0 40%, #f1c40f 40% 70%, #e74c3c 70%) 50% 100% / 4px 70% no-repeat, #0e0e12; }
.ld-pseudo--xp-egaliseur .ld-pseudo__deco { inset: 0; width: 100%; height: 100%; opacity: .75; }
/* Accordeur : cadran avec une aiguille qui cherche la note */
.ld-pseudo--xp-accordeur, .ld-couleur span.ld-pseudo--xp-accordeur { color: #fff; background: linear-gradient(180deg, #2a2d34, #15171b); box-shadow: 0 0 0 1.5px #3ddc84; padding-right: 34px; }
.ld-couleur span.ld-pseudo--xp-accordeur { padding: 0; background: conic-gradient(from -60deg at 50% 85%, #e74c3c 0 40deg, #3ddc84 40deg 80deg, #e74c3c 80deg 120deg, transparent 120deg), #15171b; }
.ld-pseudo--xp-accordeur .ld-pseudo__deco { right: 6px; top: 50%; transform: translateY(-50%); width: 26px; height: 20px; z-index: 1; }
/* Micro de star : des notes qui s'envolent */
.ld-badge--xp-micro-or { position: relative; overflow: visible; }
.ld-badge--xp-micro-or::before, .ld-badge--xp-micro-or::after { content: "♪"; position: absolute; top: -2px; right: -4px; font-size: .55em; color: #b8932a; animation: ld-envol 1.8s ease-out infinite; pointer-events: none; }
.ld-badge--xp-micro-or::after { content: "♫"; right: auto; left: -4px; animation-delay: .9s; }
/* Badges dessinés */
.ld-badge--xp-batteur { background: linear-gradient(135deg, #fff1e0, #f4c48a); }
.ld-badge--xp-danseur { background: linear-gradient(135deg, #ffe3ef, #ffb3cf); }
.ld-badge--xp-vinyle-or { background: #2b2118; box-shadow: 0 0 0 1.5px #d4af37, 0 0 8px rgba(212,175,55,.7); }
.ld-badge--xp-platine { background: #1f2329; box-shadow: 0 0 0 1.5px #c9ced6, 0 0 10px rgba(220,225,235,.9); }
.ld-badge--xp-dj { background: linear-gradient(135deg, #2a1b4a, #12101f); box-shadow: 0 0 0 1.5px #7d5bff, 0 0 8px rgba(125,91,255,.7); }

/* Roulette de Noël en pop-up obligatoire (pas de croix : il faut tourner) */
.ld-roulette-pop { position: fixed; inset: 0; z-index: 100002; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(20, 12, 6, .72); }
.ld-roulette-pop__boite { width: 100%; max-width: 720px; max-height: 94vh; overflow-y: auto; border-radius: 20px; animation: ld-pop-entree .45s cubic-bezier(.2,1.4,.4,1); }
.ld-roulette-pop .ld-roulette { margin: 0; }
html.ld-roulette-ouverte:has(.ld-roulette-pop) { overflow: hidden; }
.ld-badge-carte__niv { font-size: .7rem; font-weight: 800; color: #fff; background: #8c2411; border-radius: 999px; padding: 1px 8px; }
.ld-pop-profil { z-index: 2147483647; } /* au-dessus des cartes de cours (agenda, carnet, inscription) */
.ld-profil__niveau { text-align: center; margin: 4px 0 0; font-size: 1.6rem; font-weight: 900; color: #8c2411; }