/* ============================================
   PingPerf - Styles des écrans : evaluations
   Phase 4 de SPEC_Refonte_Graphique_Mobile.md. Uniquement des jetons de tokens.css.
   Pages : evaluation/global, evaluation/match, player_auto_evaluation/match.
   Les cartes neutres (.ttpc-panel), l'encart repliable (.ttpc-disclosure) et la barre
   d'enregistrement collante (.ttpc-form-actions--sticky) sont définis dans app.css ;
   le résumé de match dans pages/matches.css.
   ============================================ */

/* ---------- Identité du joueur évalué ---------- */
.ttpc-eval-who {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 1rem;
}

.ttpc-eval-who__name {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
}

.ttpc-eval-who__meta {
    margin: 0.125rem 0 0;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

/* ---------- Formulaire : compteur des réponses ---------- */
.ttpc-eval-form {
    counter-reset: ttpc-answered;
}

.ttpc-eval-form .ttpc-scale .btn-check:checked {
    counter-increment: ttpc-answered;
}

.ttpc-eval-progress {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ttpc-ink-2);
    font-variant-numeric: tabular-nums;
}

.ttpc-eval-progress__count::before {
    content: counter(ttpc-answered);
}

/* Barre d'enregistrement placée directement dans le formulaire (hors carte) :
   elle reste collante pendant toute la saisie. Progression sur sa propre ligne sous 768 px. */
.ttpc-eval-form > .ttpc-form-actions {
    margin: 1rem 0 0;
}

.ttpc-eval-form .ttpc-eval-progress {
    grid-column: 1 / -1;
}

@media (max-width: 991.98px) {
    .ttpc-eval-form > .ttpc-form-actions {
        padding: 0.625rem 0.75rem 0.75rem;
        border: 1px solid var(--ttpc-line);
        border-radius: var(--ttpc-r-md);
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .ttpc-eval-form > .ttpc-form-actions {
        margin-right: 0;
        margin-left: 0;
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

@media (min-width: 768px) {
    .ttpc-eval-form .ttpc-eval-progress {
        margin-right: auto;
    }
}

@media (min-width: 992px) {
    .ttpc-eval-form > .ttpc-form-actions {
        padding-top: 1rem;
    }
}

/* Rappel de l'échelle */
.ttpc-eval-legend {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

/* ---------- Dimension (groupe de questions) ---------- */
.ttpc-eval-dim {
    --ttpc-dim: var(--ttpc-table);
    margin-bottom: 1rem;
    border: 1px solid var(--ttpc-line);
    border-radius: var(--ttpc-r-md);
    background: var(--ttpc-surface);
}

.ttpc-eval-dim--technique { --ttpc-dim: var(--ttpc-cat-technique); }
.ttpc-eval-dim--tactical { --ttpc-dim: var(--ttpc-cat-tactical); }
.ttpc-eval-dim--physical { --ttpc-dim: var(--ttpc-cat-physical); }
.ttpc-eval-dim--mental { --ttpc-dim: var(--ttpc-cat-mental); }

.ttpc-eval-dim__head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--ttpc-line);
}

.ttpc-eval-dim__icon {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--ttpc-r-sm);
    background: color-mix(in srgb, var(--ttpc-dim) 14%, transparent);
    color: var(--ttpc-dim);
    font-size: 1.125rem;
}

.ttpc-eval-dim__title {
    margin: 0;
    font-family: var(--ttpc-font-body);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.ttpc-eval-dim__desc {
    margin: 0.125rem 0 0;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
}

.ttpc-eval-dim__body {
    padding: 0 1rem;
}

@media (min-width: 768px) {
    .ttpc-eval-dim__head {
        padding: 1rem 1.5rem;
    }

    .ttpc-eval-dim__body {
        padding: 0 1.5rem;
    }
}

/* ---------- Question ---------- */
.ttpc-eval-q {
    min-width: 0;
    margin: 0;
    padding: 1rem 0;
    border: 0;
}

.ttpc-eval-q + .ttpc-eval-q {
    border-top: 1px solid var(--ttpc-line);
}

.ttpc-eval-q__title {
    float: none;
    width: auto;
    margin: 0 0 0.625rem;
    padding: 0;
    font-family: var(--ttpc-font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ttpc-ink);
}

.ttpc-eval-q__help {
    margin: -0.375rem 0 0.625rem;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
}

/* Question mise en avant (note de synthèse) */
.ttpc-eval-q--highlight {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--ttpc-line);
    border-radius: var(--ttpc-r-md);
    background: var(--ttpc-surface-2);
}

.ttpc-eval-q--highlight .ttpc-scale__option {
    background: var(--ttpc-surface);
}

.ttpc-eval-q.is-invalid .ttpc-eval-q__title {
    color: var(--ttpc-loss);
}

/* ---------- Échelle 1 à 5 : cinq colonnes égales, numéros lisibles au pouce ---------- */
.ttpc-scale.ttpc-choice {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 0.375rem;
}

.ttpc-scale .ttpc-scale__option {
    position: relative;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    min-height: 3rem;
    padding: 0.375rem 0.25rem;
    border-radius: var(--ttpc-r-sm);
}

.ttpc-scale__num {
    font-family: var(--ttpc-font-display);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Sous 768 px : le texte reste lu par les lecteurs d'écran mais n'est pas affiché */
.ttpc-scale__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.ttpc-scale__ends {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.ttpc-scale__ends span:last-child {
    text-align: right;
}

.ttpc-scale .btn-check:checked + .ttpc-scale__option .ttpc-scale__text {
    color: inherit;
}

.ttpc-scale .ttpc-scale__option:active {
    background: var(--ttpc-surface-2);
}

.ttpc-scale .btn-check:checked + .ttpc-scale__option:active {
    background: var(--ttpc-btn-primary-active);
}

@media (min-width: 768px) {
    .ttpc-scale .ttpc-scale__option {
        min-height: 4.25rem;
        padding: 0.5rem;
    }

    .ttpc-scale__text {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        white-space: normal;
        font-size: 0.75rem;
        font-weight: 500;
        line-height: 1.25;
    }

    .ttpc-scale__ends {
        display: none;
    }
}

/* ---------- Note sur l'évaluation du coach (auto-évaluation) ---------- */
.ttpc-eval-coach {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.ttpc-eval-coach p {
    margin: 0;
}

.ttpc-eval-hidden-note {
    display: flex;
    gap: 0.5rem;
    margin: 0.875rem 0 0;
    padding: 0.625rem 0.875rem;
    border-radius: var(--ttpc-r-sm);
    background: var(--ttpc-surface-2);
    font-size: 0.875rem;
    color: var(--ttpc-ink-2);
}