/* 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; }
.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; }