/**
 * Récompenses profil — bordures métalliques.
 * Exception explicite au interdit global des dégradés (demande produit récompenses XP).
 */

.profile-avatar-frame {
    position: relative;
    border-radius: 0.5rem;
    padding: 3px;
    background: transparent;
}

.profile-border--none {
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
}

.profile-border--bronze {
    border: none;
    background: linear-gradient(135deg, #b87333 0%, #f4c095 35%, #8b5a2b 70%, #d4956a 100%);
}

.profile-border--silver {
    border: none;
    background: linear-gradient(135deg, #9ca3af 0%, #f3f4f6 40%, #6b7280 70%, #d1d5db 100%);
}

.profile-border--gold {
    border: none;
    background: linear-gradient(135deg, #b8860b 0%, #ffd700 35%, #daa520 70%, #f0e68c 100%);
}

/* Bordures de palier (collection) : anneau de couleur unie alignée sur le jeton du palier. */
.profile-border--recrue { border: none; background: #64748b; }
.profile-border--cafe { border: none; background: #78716c; }
.profile-border--tableur { border: none; background: #0d9488; }
.profile-border--cadre { border: none; background: #0284c7; }
.profile-border--boss_openspace { border: none; background: #4f46e5; }
.profile-border--synergies { border: none; background: #7c3aed; }
.profile-border--ninja { border: none; background: #c026d3; }
.profile-border--star_seminaire { border: none; background: #e11d48; }
.profile-border--legende { border: none; background: #ea580c; }
.profile-border--pdg { border: none; background: #d97706; }

.profile-avatar-frame__inner {
    overflow: hidden;
    border-radius: 0.375rem;
    background-color: #f8fafc;
}

.profile-avatar-trigger {
    position: relative;
}

.profile-avatar-hover-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(15, 23, 42, 0.45);
    opacity: 0;
    transition: opacity 150ms ease;
    pointer-events: none;
}

.profile-avatar-hover-label {
    padding: 0 0.75rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
}

@media (min-width: 1024px) {
    .profile-avatar-trigger:hover .profile-avatar-hover-overlay,
    .profile-avatar-trigger:focus-visible .profile-avatar-hover-overlay {
        opacity: 1;
    }
}

.profile-reward-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

@media (min-width: 640px) {
    .profile-reward-picker {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.profile-reward-picker__option {
    cursor: pointer;
    border-radius: 0.5rem;
    border: 2px solid #e2e8f0;
    background-color: #fff;
    padding: 0.5rem 0.75rem;
    text-align: center;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.profile-reward-picker__option--none {
    border-color: #e2e8f0;
    background-color: #f8fafc;
}

.profile-reward-picker__option--bronze {
    border-color: #b87333;
    background-color: #fdf6ef;
}

.profile-reward-picker__option--silver {
    border-color: #9ca3af;
    background-color: #f8fafc;
}

.profile-reward-picker__option--gold {
    border-color: #b8860b;
    background-color: #fffbeb;
}

.profile-reward-picker__option--recrue { border-color: #64748b; background-color: #f8fafc; }
.profile-reward-picker__option--cafe { border-color: #78716c; background-color: #fafaf9; }
.profile-reward-picker__option--tableur { border-color: #0d9488; background-color: #f0fdfa; }
.profile-reward-picker__option--cadre { border-color: #0284c7; background-color: #f0f9ff; }
.profile-reward-picker__option--boss_openspace { border-color: #4f46e5; background-color: #eef2ff; }
.profile-reward-picker__option--synergies { border-color: #7c3aed; background-color: #f5f3ff; }
.profile-reward-picker__option--ninja { border-color: #c026d3; background-color: #fdf4ff; }
.profile-reward-picker__option--star_seminaire { border-color: #e11d48; background-color: #fff1f2; }
.profile-reward-picker__option--legende { border-color: #ea580c; background-color: #fff7ed; }
.profile-reward-picker__option--pdg { border-color: #d97706; background-color: #fffbeb; }

.profile-reward-picker__option:hover:not(:disabled) {
    border-color: #93c5fd;
}

.profile-reward-picker__option--selected {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.profile-reward-picker__option:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.profile-avatar-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

@media (min-width: 640px) {
    .profile-avatar-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .profile-avatar-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.profile-avatar-grid__placeholder {
    aspect-ratio: 1 / 1;
    border-radius: 0.5rem;
    border: 2px dashed #e2e8f0;
    background-color: #f8fafc;
}

.profile-customize-preview-frame {
    aspect-ratio: 1 / 1;
}

.profile-customize-preview {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.profile-customize-preview-placeholder {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    background-color: #f1f5f9;
    color: #94a3b8;
}

/* Décorations d'avatar : couche d'ornements superposée à la photo (façon Discord). */
.profile-avatar-deco {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.profile-deco__slot {
    position: absolute;
    display: block;
    line-height: 0;
}

.profile-avatar-deco svg {
    width: 100%;
    height: 100%;
    stroke-width: 2.25;
    /* Lueur douce qui suit la silhouette de l'icône (drop-shadow trace l'alpha). */
    filter: drop-shadow(0 0 2px currentColor) drop-shadow(0 1px 1px rgba(15, 23, 42, 0.25));
}

/* Icônes pleines (cœurs, éclairs, couronne, médaille…) : rendu plus riche que le trait. */
.profile-deco__slot--filled svg {
    fill: currentColor;
}

.profile-deco__size--xs { width: 20%; height: 20%; }
.profile-deco__size--sm { width: 26%; height: 26%; }
.profile-deco__size--md { width: 34%; height: 34%; }
.profile-deco__size--lg { width: 42%; height: 42%; }

/* Animations propres à chaque décoration (appliquées à l'icône, pas au slot,
   pour ne pas écraser le transform de positionnement). */
@keyframes deco-twinkle {
    0%, 100% { opacity: 0.55; transform: scale(0.82); }
    50% { opacity: 1; transform: scale(1.12); }
}
@keyframes deco-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes deco-float-up {
    0% { opacity: 0; transform: translateY(20%) scale(0.8); }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-50%) scale(1.05); }
}
@keyframes deco-flicker {
    0%, 100% { transform: translateY(0) scaleY(1); opacity: 0.9; }
    50% { transform: translateY(-9%) scaleY(1.14); opacity: 1; }
}
@keyframes deco-flash {
    0%, 100% { opacity: 0.5; transform: scale(0.9); }
    12% { opacity: 1; transform: scale(1.14); }
    24% { opacity: 0.7; transform: scale(1); }
}
@keyframes deco-fall {
    0% { opacity: 0; transform: translateY(-30%) rotate(0deg); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: translateY(55%) rotate(180deg); }
}
@keyframes deco-sway {
    0%, 100% { transform: rotate(-4deg); }
    50% { transform: rotate(4deg); }
}
@keyframes deco-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14%); }
}

.profile-deco--etincelles .profile-deco__slot svg { animation: deco-twinkle 1.8s ease-in-out infinite; }
.profile-deco--etincelles .profile-deco__slot:nth-child(2) svg { animation-delay: 0.45s; }
.profile-deco--etincelles .profile-deco__slot:nth-child(3) svg { animation-delay: 0.9s; }
.profile-deco--etincelles .profile-deco__slot:nth-child(4) svg { animation-delay: 1.3s; }

.profile-deco--givre .profile-deco__slot svg { animation: deco-spin 10s linear infinite; }
.profile-deco--givre .profile-deco__slot:nth-child(even) svg { animation-duration: 14s; animation-direction: reverse; }

.profile-deco--coeurs .profile-deco__slot svg { animation: deco-float-up 2.6s ease-in-out infinite; }
.profile-deco--coeurs .profile-deco__slot:nth-child(2) svg { animation-delay: 0.85s; }
.profile-deco--coeurs .profile-deco__slot:nth-child(3) svg { animation-delay: 1.6s; }

.profile-deco--feu .profile-deco__slot svg { animation: deco-flicker 0.55s ease-in-out infinite; transform-origin: bottom center; }
.profile-deco--feu .profile-deco__slot:nth-child(2) svg { animation-delay: 0.18s; }
.profile-deco--feu .profile-deco__slot:nth-child(3) svg { animation-delay: 0.34s; }

.profile-deco--eclairs .profile-deco__slot svg { animation: deco-flash 2.2s ease-in-out infinite; }
.profile-deco--eclairs .profile-deco__slot:nth-child(2) svg { animation-delay: 0.9s; }
.profile-deco--eclairs .profile-deco__slot:nth-child(3) svg { animation-delay: 1.5s; }

.profile-deco--confettis .profile-deco__slot--top svg { animation: deco-bob 2s ease-in-out infinite; }
.profile-deco--confettis .profile-deco__slot:nth-child(n+2) svg { animation: deco-fall 2.8s ease-in infinite; }
.profile-deco--confettis .profile-deco__slot:nth-child(3) svg { animation-delay: 0.6s; }
.profile-deco--confettis .profile-deco__slot:nth-child(4) svg { animation-delay: 1.2s; }
.profile-deco--confettis .profile-deco__slot:nth-child(5) svg { animation-delay: 1.8s; }

.profile-deco--champion .profile-deco__slot--left svg,
.profile-deco--champion .profile-deco__slot--right svg { animation: deco-sway 3.6s ease-in-out infinite; transform-origin: bottom center; }
.profile-deco--champion .profile-deco__slot--top svg { animation: deco-twinkle 2.2s ease-in-out infinite; }

.profile-deco--couronne .profile-deco__slot--top svg { animation: deco-bob 3s ease-in-out infinite; }
.profile-deco--couronne .profile-deco__slot--tl svg { animation: deco-twinkle 1.6s ease-in-out infinite; }
.profile-deco--couronne .profile-deco__slot--tr svg { animation: deco-twinkle 1.6s ease-in-out infinite; animation-delay: 0.8s; }

@media (prefers-reduced-motion: reduce) {
    .profile-avatar-deco svg { animation: none !important; }
}

.profile-deco__slot--top { top: -16%; left: 50%; transform: translateX(-50%) rotate(-8deg); }
.profile-deco__slot--bottom { bottom: -12%; left: 50%; transform: translateX(-50%); }
.profile-deco__slot--tl { top: -8%; left: -2%; }
.profile-deco__slot--tr { top: -8%; right: -2%; }
.profile-deco__slot--bl { bottom: -2%; left: -2%; }
.profile-deco__slot--br { bottom: -2%; right: -2%; }
.profile-deco__slot--left { top: 50%; left: -14%; transform: translateY(-50%) rotate(-20deg); }
.profile-deco__slot--right { top: 50%; right: -14%; transform: translateY(-50%) rotate(20deg); }
.profile-deco__slot--right.profile-deco__slot--flip { transform: translateY(-50%) scaleX(-1) rotate(-20deg); }

.profile-decoration-option__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    margin-bottom: 4px;
}

.profile-decoration-option__icon svg {
    width: 22px;
    height: 22px;
}

/* Composant avatar décoré réutilisable (components/_avatar.html.twig). */
.app-avatar {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    vertical-align: middle;
}

.app-avatar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.app-avatar__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-avatar__initial {
    font-weight: 600;
    line-height: 1;
    color: #475569;
    text-transform: uppercase;
}

/* Fallback image avatar introuvable (404) : on masque l'image cassée et on révèle l'initiale (cf. onerror dans components/_avatar.html.twig). */
.app-avatar__img--broken { display: none; }
.app-avatar__initial--fallback { display: none; }

.profile-avatar-frame.app-avatar--circle { border-radius: 50%; }
.app-avatar--circle .profile-avatar-frame__inner { border-radius: 50%; }