/* Palette reprise du site ASF Tennis d'origine (logo + habillage) :
   bleu identitaire, marine (entêtes/pied de page), jaune balle de tennis en accent. */
:root {
    --bs-primary: #0070b7;
    --bs-primary-rgb: 0, 112, 183;
    --bs-primary-text-emphasis: #004a78;
    --bs-primary-bg-subtle: #d6ecf9;
    --bs-primary-border-subtle: #a8d7f0;

    --bs-success: #0070b7;
    --bs-success-rgb: 0, 112, 183;
    --bs-success-text-emphasis: #004a78;
    --bs-success-bg-subtle: #d6ecf9;
    --bs-success-border-subtle: #a8d7f0;

    --bs-dark: #083451;
    --bs-dark-rgb: 8, 52, 81;

    --bs-warning: #ffd400;
    --bs-warning-rgb: 255, 212, 0;

    --bs-link-color: #0070b7;
    --bs-link-color-rgb: 0, 112, 183;
    --bs-link-hover-color: #005f9c;
    --bs-link-hover-color-rgb: 0, 95, 156;
}

.hero-brand {
    background: linear-gradient(135deg, #083451 0%, #0070b7 100%);
}

.text-brand-accent {
    color: #ffd400;
}

/* Mode sombre : Bootstrap 5.3 gère déjà fond/texte via [data-bs-theme="dark"],
   on ajuste juste les teintes "subtiles" (badges, alertes) pensées pour un fond clair. */
[data-bs-theme="dark"] {
    --bs-primary-bg-subtle: #062f47;
    --bs-primary-border-subtle: #0d5687;
    --bs-success-bg-subtle: #062f47;
    --bs-success-border-subtle: #0d5687;
}

/* Photo de compétiteur + pastilles de médailles (palmarès) en grappe sur le coin
   inférieur droit — leur nombre s'adapte au nombre de titres, sans mise en page fixe. */
.competitor-photo-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.competitor-photo-wrap-md .competitor-photo {
    width: 100%;
    max-width: 220px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--bs-body-bg, #fff);
    box-shadow: 0 0 0 1.5px #ced4da, 0 2px 10px rgba(0, 0, 0, 0.15);
}

.competitor-photo-wrap-lg .competitor-photo {
    width: 100%;
    max-width: 260px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--bs-body-bg, #fff);
    box-shadow: 0 0 0 2px #ced4da, 0 2px 12px rgba(0, 0, 0, 0.18);
}

/* Liseret fin autour de la photo (ou de l'avatar par défaut) teinté selon le genre —
   rose pâle / bleu pâle plutôt qu'une couleur neutre, discret plutôt qu'un cadre épais.
   (Les deux classes de taille et de genre sont portées par le même élément .competitor-photo-wrap.) */
.competitor-photo-wrap-md.gender-f .competitor-photo {
    box-shadow: 0 0 0 1.5px #f3c6d9, 0 2px 10px rgba(0, 0, 0, 0.15);
}

.competitor-photo-wrap-md.gender-h .competitor-photo {
    box-shadow: 0 0 0 1.5px #bfdcf5, 0 2px 10px rgba(0, 0, 0, 0.15);
}

.competitor-photo-wrap-lg.gender-f .competitor-photo {
    box-shadow: 0 0 0 2px #f3c6d9, 0 2px 12px rgba(0, 0, 0, 0.18);
}

.competitor-photo-wrap-lg.gender-h .competitor-photo {
    box-shadow: 0 0 0 2px #bfdcf5, 0 2px 12px rgba(0, 0, 0, 0.18);
}

/* Pastille de classement : même teinte que le cadre de la photo (rose/bleu pâle
   selon le genre), plutôt qu'un bleu générique sans rapport avec l'avatar. */
.ranking-badge-gender-f {
    background-color: #f3c6d9;
    color: #8a2452;
}

.ranking-badge-gender-h {
    background-color: #bfdcf5;
    color: #0a4a7a;
}

/* Pastille de tendance (progression / baisse / stable) par rapport au dernier
   classement connu — même pastille utilisée sur la liste et la fiche compétiteur. */
.trend-pastille {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    color: #fff;
    font-size: 0.8rem;
    vertical-align: middle;
}

.trend-pastille-up { background-color: #198754; }
.trend-pastille-down { background-color: #dc3545; }
.trend-pastille-stable { background-color: #6c757d; }

.medal-badge-cluster {
    position: absolute;
    inset: 0;
}

.medal-badge {
    position: absolute;
    width: 2.75rem;
    height: 2.75rem;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

.medal-badge img {
    width: 100%;
    height: 100%;
}

/* Répartition des médailles autour de la photo plutôt qu'empilées dans un coin —
   ordre choisi pour que la 1re et la 2e restent visibles même s'il n'y en a que deux. */
.medal-pos-0 { top: 82%; left: 88%; }
.medal-pos-1 { top: 18%; left: 90%; }
.medal-pos-2 { top: 82%; left: 12%; }
.medal-pos-3 { top: 18%; left: 10%; }
.medal-pos-4 { top: 50%; left: 97%; }
.medal-pos-5 { top: 50%; left: 3%; }
.medal-pos-6 { top: 3%; left: 50%; }
.medal-pos-7 { top: 97%; left: 50%; }

/* Légende (classement/médailles) : petites capsules discrètes plutôt que le bloc de
   formes colorées brutes de l'ancien site. */
.ranking-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}

.ranking-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--bs-secondary-color, #6c757d);
}

.ranking-legend-swatch {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.medal-legend-icon {
    width: 1.9rem;
    height: 1.9rem;
    vertical-align: middle;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}