/* ==========================================================
   Page Mouvements d'une équipe (ProTeam-mouvement.php)
   Cartes d'échange : .echange dans css/phs2026.css
   ========================================================== */

.mouvements-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 2rem 1.75rem;
    align-items: start;
}
.mouvements-page__principal { display: grid; gap: 1.5rem; min-width: 0; }
.mouvements-page__cote { position: sticky; top: 1rem; }

.filtres__groupe { flex-wrap: wrap; border-radius: var(--rayon); }
.filtres__groupe button span { font-weight: 600; opacity: .8; font-variant-numeric: tabular-nums; }

/* ---------- Mois ---------- */
.mois { display: grid; gap: .75rem; }
.mois[hidden] { display: none; }
.mois__titre {
    font-size: 1.35rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--trait);
}
.journal { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.journal__element[hidden] { display: none; }

/* ---------- Un événement (autre qu'un échange) ---------- */
.evenement {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr) auto;
    align-items: baseline;
    gap: .75rem;
    padding: .7rem 1rem;
    background: var(--surface);
    border: 1px solid var(--trait);
    border-left: 3px solid var(--trait);
    border-radius: var(--rayon);
}
.evenement__type {
    color: var(--texte-2);
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.evenement__texte { margin: 0; }
.evenement__texte a, .evenement__texte strong { font-weight: 700; color: var(--texte); }
.evenement__texte a:hover { color: var(--bleu); }
.evenement__date { color: var(--texte-2); font-size: .85rem; white-space: nowrap; }

/* Couleur du trait selon le type */
.journal__element--repechage .evenement { border-left-color: var(--bleu); }
.journal__element--effectif  .evenement { border-left-color: var(--monte); }
.journal__element--direction .evenement { border-left-color: var(--or); }
.journal__element--saison    .evenement { border-left-color: var(--rouge); }
.evenement.est-champion { border-color: var(--or); border-left-width: 3px; }
.evenement.est-champion .evenement__texte { font-weight: 800; }

/* ---------- Infirmerie ---------- */
.infirmerie { list-style: none; margin: 0; padding: 0; display: grid; }
.infirmerie li {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
    padding: .6rem 0;
    border-bottom: 1px solid var(--trait);
}
.infirmerie li:last-child { border-bottom: 0; }
.infirmerie img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.infirmerie__texte { display: grid; gap: .1rem; line-height: 1.3; min-width: 0; }
.infirmerie__texte > a { font-weight: 700; color: var(--texte); }
.infirmerie__texte > a:hover { color: var(--bleu); }
.infirmerie__texte .badge { justify-self: start; margin-left: 0; }
.infirmerie__detail { color: var(--texte-2); font-size: .85rem; }
.infirmerie__duree { color: var(--baisse); font-size: .85rem; font-weight: 700; }
.infirmerie__vide { margin: 0; }

@media (max-width: 960px) {
    .mouvements-page { grid-template-columns: minmax(0, 1fr); }
    .mouvements-page__cote { position: static; order: -1; }
}
@media (max-width: 640px) {
    .evenement { grid-template-columns: minmax(0, 1fr) auto; row-gap: .15rem; }
    .evenement__type { grid-column: 1; }
    .evenement__date { grid-column: 2; grid-row: 1; }
    .evenement__texte { grid-column: 1 / -1; }
}