/* ============================================
   PingPerf - Styles des écrans : video
   Phase 4 de SPEC_Refonte_Graphique_Mobile.md. Uniquement des jetons de tokens.css.
   Pages : player/video_analyses/*, coach/video_analyses/*
   ============================================ */

/* ---------- Ligne d'analyse (liste joueur et coach mobile) ---------- */
.ttpc-va-row {
    flex-wrap: wrap;
    padding: 0;
    gap: 0;
}

.ttpc-va-row__link {
    flex: 1 1 12rem;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.75rem;
    padding: 0.625rem 0.875rem;
    color: var(--ttpc-ink);
    text-decoration: none;
}

.ttpc-va-row__link:hover {
    background: var(--ttpc-bg);
    color: var(--ttpc-ink);
}

.ttpc-va-row__link:active {
    background: var(--ttpc-surface-2);
}

.ttpc-va-row__link:focus-visible {
    outline: 2px solid var(--ttpc-table);
    outline-offset: -2px;
}

.ttpc-va-row__link > .avatar {
    flex: none;
}

.ttpc-va-row__actions {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0 0.875rem 0 0;
}

/* Actions en pied de ligne (boutons avec libellé) */
.ttpc-va-row__actions--block {
    flex: 1 1 100%;
    padding: 0 0.875rem 0.75rem;
}

.ttpc-va-row__actions--block .btn {
    flex: 1 1 0;
}

.ttpc-va-row__actions form {
    display: contents;
}

.ttpc-va-row .btn,
.ttpc-va-actions .btn,
.ttpc-va-controls .btn {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}

/* ---------- Tableau desktop (coach) ---------- */
.ttpc-va-table {
    margin-bottom: 0;
}

.ttpc-va-table > :not(caption) > * > * {
    padding: 0.75rem 1rem;
}

.ttpc-va-table thead th {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    background: transparent;
}

.ttpc-va-table td {
    font-variant-numeric: tabular-nums;
}

.ttpc-va-subtitle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.625rem;
    font-family: var(--ttpc-font-body);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.ttpc-va-subtitle i {
    color: var(--ttpc-ink-3);
}

/* ---------- Lecteur vidéo ---------- */
.ttpc-va-player .video-container {
    margin-bottom: 0.75rem;
}

/* Contrôles du lecteur (réponse du coach) */
.ttpc-va-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.ttpc-va-clock {
    margin-left: auto;
    padding: 0.25rem 0.625rem;
    border-radius: var(--ttpc-r-sm);
    background: var(--ttpc-table-soft);
    color: var(--ttpc-table);
    font-family: var(--ttpc-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}

/* ---------- Annotations (lecture) ---------- */
.ttpc-va-annotations .ttpc-list-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.5rem;
}

.ttpc-va-time {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 2.75rem;
    padding: 0 0.75rem;
    border: 1px solid var(--ttpc-line);
    border-radius: var(--ttpc-r-sm);
    background: var(--ttpc-surface-2);
    color: var(--ttpc-table);
    font-family: var(--ttpc-font-display);
    font-size: 1.125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

button.ttpc-va-time:hover {
    border-color: var(--ttpc-table);
}

button.ttpc-va-time:active {
    background: var(--ttpc-table-soft);
}

button.ttpc-va-time:focus-visible {
    outline: 2px solid var(--ttpc-table);
    outline-offset: 2px;
}

/* Réponse du coach : défilement interne en desktop uniquement */
@media (min-width: 992px) {
    .ttpc-va-response {
        max-height: 650px;
        overflow-y: auto;
    }
}

/* ---------- Annotations (saisie du coach) ---------- */
.ttpc-va-annotation {
    border-color: var(--ttpc-line);
    background: var(--ttpc-surface);
}

.ttpc-va-annotation__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.ttpc-va-annotation__head h3,
.ttpc-va-annotation__head h6 {
    margin: 0;
    font-family: var(--ttpc-font-body);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    font-variant-numeric: tabular-nums;
}

.ttpc-va-empty-annotations {
    border: 1px dashed var(--ttpc-line);
    border-radius: var(--ttpc-r-md);
}

/* ---------- Barre d'actions de pied de page ---------- */
.ttpc-va-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ttpc-va-actions form {
    display: contents;
}

/* ---------- Choix du coach en cartes (formulaires de demande) ---------- */
.ttpc-coach-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .ttpc-coach-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.ttpc-coach-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    height: 100%;
    padding: 0.875rem 2.5rem 0.875rem 0.875rem;
    border: 1px solid var(--ttpc-line);
    border-radius: var(--ttpc-r-md);
    background: var(--ttpc-surface);
    color: var(--ttpc-ink);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ttpc-coach-card:hover {
    border-color: var(--ttpc-ink-3);
}

.ttpc-coach-card__avatar {
    flex: none;
}

.ttpc-coach-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.ttpc-coach-card__name {
    font-weight: 700;
}

.ttpc-coach-card__meta {
    font-size: 0.875rem;
    color: var(--ttpc-ink-2);
    overflow-wrap: anywhere;
}

.ttpc-coach-card__chips {
    margin-top: 0.25rem;
}

.ttpc-coach-card__check {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    font-size: 1.25rem;
    color: var(--ttpc-table);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.btn-check:checked + .ttpc-coach-card {
    border-color: var(--ttpc-table);
    box-shadow: 0 0 0 1px var(--ttpc-table);
    background: var(--ttpc-table-soft);
}

.btn-check:checked + .ttpc-coach-card .ttpc-coach-card__check {
    opacity: 1;
}

.btn-check:focus-visible + .ttpc-coach-card {
    outline: 2px solid var(--ttpc-table);
    outline-offset: 2px;
}

.btn-check:disabled + .ttpc-coach-card {
    opacity: 0.5;
    cursor: not-allowed;
}

.ttpc-coach-cards.is-invalid .ttpc-coach-card {
    border-color: var(--ttpc-loss);
}

/* ---------- Mise en avant de l'analyse certifiée ---------- */
.ttpc-va-promo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--ttpc-line);
    border-left: 4px solid var(--ttpc-table);
    border-radius: var(--ttpc-r-md);
    background: var(--ttpc-surface);
}

.ttpc-va-promo__body {
    flex: 1 1 16rem;
    min-width: 0;
}

.ttpc-va-promo__title {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 700;
}

.ttpc-va-promo__points {
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
    color: var(--ttpc-ink-2);
}

.ttpc-va-promo__points li {
    display: flex;
    gap: 0.5rem;
}

.ttpc-va-promo__points i {
    color: var(--ttpc-table);
}

.ttpc-va-promo__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.ttpc-va-promo__dismiss {
    margin-left: auto;
}

/* Choix gratuit / certifié en tête du formulaire de demande */
.ttpc-va-options {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .ttpc-va-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.ttpc-va-option {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem;
    border: 1px solid var(--ttpc-line);
    border-radius: var(--ttpc-r-md);
    background: var(--ttpc-surface);
    color: var(--ttpc-ink);
    text-decoration: none;
}

a.ttpc-va-option:hover {
    border-color: var(--ttpc-ink-3);
    color: var(--ttpc-ink);
}

.ttpc-va-option--current {
    border-color: var(--ttpc-table);
    box-shadow: 0 0 0 1px var(--ttpc-table);
}

.ttpc-va-option__title {
    font-weight: 700;
}

.ttpc-va-option__price {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ttpc-table);
}

.ttpc-va-option__text {
    font-size: 0.875rem;
    color: var(--ttpc-ink-2);
}