/* ==========================================================
   ENTRAÎNEMENTS — absences, liste des entraînements, stats
   d'assiduité.
   ========================================================== */

.absence-header,
.absence-row {
    display: grid;
    grid-template-columns: 1fr 38px 38px 38px 38px 38px;
    align-items: center;
    gap: 6px;
}

.absence-header {
    margin-bottom: 6px;
    padding: 8px 10px;
    background: #dbeafe;
    color: #293a5f;
    font-size: 12px;
    font-weight: bold;
    border-radius: 12px;
    text-align: center;
}

.absence-header div:first-child {
    text-align: left;
}

.absence-row {
    margin-bottom: 6px;
    padding: 8px 10px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
}

.absence-player {
    min-width: 0;
}

.absence-dot {
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #e5e7eb;
    color: #293a5f;
    font-weight: bold;
    cursor: pointer;
}

.absence-dot.selected {
    color: white;
}

.absence-p {
    border-color: #2bb3a3;
}

.absence-anj {
    border-color: #ef4444;
}

.absence-aja,
.absence-ajm,
.absence-ajb {
    border-color: #f97316;
}

.absence-nc {
    border-color: #7a7878;
}

.absence-p.selected {
    background: #2bb3a3;
}

.absence-anj.selected {
    background: #ef4444;
}

.absence-nc.selected {
    background: #7a7878;
}

.absence-aja.selected,
.absence-ajm.selected,
.absence-ajb.selected {
    background: #f97316;
}

.absence-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.absence-legend {
    display: flex;
    flex-wrap: wrap;
    /*justify-content: center;*/
    gap: 4px 12px;
    margin: 10px 0;
    font-size: 12px;
    color: #6b7280;
}

.absence-legend-item strong {
    color: #293a5f;
}

.absence-legend-modal {
    flex-direction: column;
    gap: 8px;
    margin: 4px 0 14px;
    font-size: 14px;
    color: #293a5f;
}

/* --- Écran Présences : zone compacte au-dessus de la liste --- */
#absencesEntrainementScreen .screen-info-line {
    margin: 2px 0 4px;
    padding: 0;
    font-size: 15px;
}

#absencesEntrainementScreen .sticky-header .buttons {
    margin-top: 6px;
}

.absence-presences-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
}

.absence-presences-count {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 4px 12px;
    font-weight: bold;
    color: #293a5f;
    text-align: center;
}

.absence-presences-reste {
    font-weight: normal;
    color: #6b7a99;
}

.absence-presences-reste::before {
    content: "|";
    margin-right: 12px;
    color: #b6c0d4;
}

.absence-presences-legend-btn {
    justify-self: start;
}

.absence-presences-nc-btn {
    justify-self: end;
    white-space: nowrap;
}

/* Ligne dont le statut affiché diffère de l'enregistré. */
.absence-row-pending {
    border-color: #f59e0b;
    box-shadow: inset 0 0 0 1px #f59e0b;
}


.absence-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    margin-bottom: 8px;
    align-items: stretch; /* au lieu de center */
}

/* Ligne boutons */
.absence-buttons {
    display: grid;
    grid-template-columns: repeat(6, 40px);
    justify-content: center;
    gap: 8px;
}

.list-name {
    text-align: left;
    width: 100%;
}

.absence-row-missing {
    background: #fef2f2;
    border-color: #dc2626;
}

.entrainement-row {
    display: block;
    margin-bottom: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.entrainement-main {
    width: 100%;
}

.entrainement-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.entrainement-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.entrainement-l1 {
    color: #293a5f;
    font-size: 15px;
    font-weight: 800;
}

.entrainement-month-group {
    margin-bottom: 14px;
}

.entrainement-month-summary {
    display: flex;
    align-items: center;
    gap: 8px;

    cursor: pointer;
    padding: 10px 0;
    color: #293a5f;
    font-size: 15px;
    font-weight: 800;
    text-transform: capitalize;
    list-style: none;
}

/* Récap à droite de l'en-tête de mois : du texte seul (Entraînements, Stats
   catégorie), des pastilles seules (Matchs), ou les deux (Plateaux, depuis
   l'ajout du récap de clôture). inline-flex + gap pour que ces éléments ne se
   collent pas — ils ne comptaient jusqu'ici que sur l'espace inséré par le
   retour à la ligne du HTML. */
.entrainement-month-recap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    color: #6b7280;
}

.entrainement-month-summary::-webkit-details-marker {
    display: none;
}

.entrainement-month-summary::before {
    content: '▸';
    display: inline-block;
    width: 14px;
    transition: transform 0.15s ease;
}

.entrainement-month-group[open] > .entrainement-month-summary::before {
    transform: rotate(90deg);
}

.statut-switch {
    display: inline-flex;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid #d1d5db;
}

.statut-switch-btn {
    border: none;
    background: white;
    color: #293a5f;
    font-weight: bold;
    font-size: 12px;
    padding: 6px 12px;
    cursor: pointer;
}

.statut-switch-btn.statut-annule.active {
    background: #ef4444;
    color: white;
}

.stats-global-row {
    display: flex;
    justify-content: space-around;
    gap: 10px;
    margin-bottom: 10px;
    padding: 14px 10px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
}

.stats-global-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stats-global-value {
    font-size: 20px;
    font-weight: 800;
    color: #293a5f;
}

.stats-global-label {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

.stats-joueur-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 14px;
    padding: 10px 0;
}

.stats-breakdown {
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    justify-content: start;
    align-items: center;
    column-gap: 10px;
    row-gap: 10px;
    margin-top: 4px;
}

/* subgrid (pas display:contents) : la ligne reste alignée sur les 3 colonnes
   de .stats-breakdown comme avant (cf. écran Stats Joueur, joueur-stats.html). */
.stats-bar-row {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: center;
    font-size: 12px;
}

.stats-breakdown-label {
    color: #6b7280;
}

/* Tableau récap (partials/entrainement-stats.html) : nom plus petit que le
   défaut .stats-table-row (14px), la colonne valeur/barre porte déjà
   l'info principale. */
.stats-table-name-cell {
    font-size: 12px;
}

.stats-bar-track {
    width: 100px;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.stats-bar-fill {
    height: 100%;
    border-radius: 4px;
}

.stats-bar-p {
    background: #2bb3a3;
}

.stats-bar-anj {
    background: #ef4444;
}

.stats-bar-ajm,
.stats-bar-ajb,
.stats-bar-aja {
    background: #f97316;
}

.stats-bar-value {
    font-weight: 700;
    color: #293a5f;
    white-space: nowrap;
}

/* ===== Card "Assiduité" (stats joueur, public/partials/joueur-stats.html) :
   anneau de progression + badge de palier + frise des dernières séances +
   détail des 3 lignes d'absence.

   Fond BLEU TRÈS CLAIR cerné d'une bordure bleue épaisse (3px, --blue-main) —
   l'inverse du fond bleu marine plein d'avant. La bordure garde le
   rattachement visuel au bandeau global, et la teinte bleutée détache la card
   du fond de page (#f4f6f8) tout en restant dans la même famille de couleur.
   Toute la palette interne suit : ce qui était blanc ou blanc translucide
   passe aux gris de l'app (#1f2937 pour le texte, #6b7280 pour le secondaire).

   Les 2 teintes sont posées ici en variables parce qu'elles servent aussi aux
   descendants (disque central de l'anneau, pistes de barres) : le fond doit
   être repris à l'identique par le disque pour que l'anneau reste un anneau,
   et les pistes doivent être plus soutenues que le fond, sinon elles s'y
   fondent — d'où un bleu de piste dans la même famille, et non un gris
   neutre qui jurerait avec le fond. ===== */
.assiduite-card,
.matchs-card {
    --stats-card-bg: #f6f9ff;
    --stats-card-track: #ccd9f5;
}

.assiduite-card {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    background: var(--stats-card-bg);
    color: #1f2937;
    border: 3px solid var(--blue-main);
    border-radius: 16px;
    padding: 18px 16px;
    text-align: center;
}

.assiduite-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

/* margin-left: auto (pas justify-content sur le header) : pousse la saison à
   droite quand elle est seule dans le header (Assiduité/Convocations), ET
   quand elle partage le header avec un libellé à gauche (Matchs). */
.assiduite-card-saison {
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
}

.assiduite-ring {
    width: 108px;
    height: 108px;
    margin: 0 auto;
    border-radius: 50%;
    background: conic-gradient(var(--ring-color, #4f8ef7) calc(var(--pct, 0) * 1%), var(--stats-card-track) 0);
    display: flex;
    align-items: center;
    justify-content: center;
}

.assiduite-ring-inner {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: var(--stats-card-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.assiduite-ring-pct {
    font-size: 19px;
    font-weight: 800;
}

.assiduite-ring-fraction {
    font-size: 11px;
    color: #6b7280;
}

.assiduite-tier-badge {
    display: inline-block;
    margin-top: 12px;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.03em;
}

/* Le voile de couleur reste, mais le texte passe en teinte foncée : les
   anciens tons clairs (#4ade80, #fde047...) étaient illisibles sur blanc. */
.assiduite-tier-excellent {
    background: rgba(22, 163, 74, 0.14);
    color: #15803d;
}

.assiduite-tier-bien {
    background: rgba(74, 222, 128, 0.2);
    color: #16a34a;
}

.assiduite-tier-moyen {
    background: rgba(234, 179, 8, 0.2);
    color: #a16207;
}

.assiduite-tier-insuffisant {
    background: rgba(239, 68, 68, 0.14);
    color: #b91c1c;
}

.assiduite-dots {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.assiduite-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.assiduite-dot-p {
    background: #2bb3a3;
}

.assiduite-dot-absence,
.assiduite-dot-anj {
    background: #ef4444;
}

.assiduite-dot-aj {
    background: #f97316;
}

.assiduite-dot-nc {
    background: #7a7878;
}

/* Card Convocations : mêmes couleurs que les boutons de statut de l'écran
   Convocations (css/matches.css .convocation-*) — non convoqué sans motif =
   rouge ; chaque motif précis a ensuite sa propre couleur (absent = rouge,
   blessure = orange, suspension = gris), demandé explicitement par
   l'utilisateur — diverge donc du orange uniforme des boutons de statut de
   l'écran Convocations (css/matches.css .convocation-*), volontairement
   scopé à cette card. */
.assiduite-dot-non_convoque {
    background: #7a7878;
}

.assiduite-dot-absent {
    background: #ef4444;
}

.assiduite-dot-blessure {
    background: #f97316;
}

.assiduite-dot-suspension {
    background: #eab308;
}

.assiduite-breakdown {
    margin-top: 16px;
    text-align: left;
    /* 4e colonne (le point) en plus des 3 de .stats-breakdown (label/barre/
       valeur) — les lignes en subgrid s'adaptent automatiquement. */
    grid-template-columns: max-content max-content 1fr max-content;
}

/* Même taille que les autres lignes de détail des cards (matchs-card-stat,
   tests-card-epreuve-row) — .stats-bar-row impose 12px par défaut ailleurs
   dans l'appli, pas touché hors de ces cards. */
.assiduite-breakdown .stats-bar-row {
    font-size: 13px;
}

.assiduite-breakdown .stats-breakdown-label {
    color: #6b7280;
}

.assiduite-breakdown .stats-bar-track {
    background: var(--stats-card-track);
}

.assiduite-breakdown .stats-bar-value {
    color: #1f2937;
}

.assiduite-breakdown .stats-bar-aj {
    background: #f97316;
}

.assiduite-breakdown .stats-bar-nc,
.assiduite-breakdown .stats-bar-non_convoque {
    background: #7a7878;
}

.assiduite-breakdown .stats-bar-absent {
    background: #ef4444;
}

.assiduite-breakdown .stats-bar-suspension {
    background: #eab308;
}

/* ===== Card "Matchs" (stats joueur, public/partials/joueur-stats.html) :
   fraction "matchs joués" + barre de progression + buts/passes décisives.
   Même habillage que la card Assiduité — fond bleu très clair, bordure bleue
   épaisse.
   Sert aussi de conteneur aux cards de l'écran Tests
   (public/partials/joueur-tests.html), qui reprend cette classe. ===== */
.matchs-card {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    background: var(--stats-card-bg);
    color: #1f2937;
    border: 3px solid var(--blue-main);
    border-radius: 16px;
    padding: 18px 16px;
    text-align: center;
}

.matchs-card-equipe {
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
}

/* Vit dans le header des cards Matchs/Convocations (à gauche, saison à
   droite) — plus jamais sous l'anneau (gagne de la hauteur). */
.matchs-card-label {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
    color: #6b7280;
}

.matchs-card-stat {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 12px;
    font-size: 13px;
}

/* ===== Card "Résultats des tests" (stats joueur) : une card par passation
   (test + mois), liste simple épreuve/valeur — pas de barre/anneau, une
   valeur de test n'a pas de max naturel à comparer. ===== */
.tests-card-epreuves {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.tests-card-epreuve-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    color: #6b7280;
}

.tests-card-epreuve-value {
    font-size: 13px;
    font-weight: 800;
    color: #1f2937;
}