/* =============================================
   GAS Video Player — Styles
   Utilise les design tokens de gas-design-tokens.css
   Surcharge le thème Plyr par défaut.
   ============================================= */


/* -- Tokens additionnels pour le player -- */
:root {
    --gas-player-radius:            var(--gas-radius-m);
    --gas-player-accent:            var(--gas-accent);
    --gas-player-accent-hover:      var(--gas-accent-dark);
    --gas-player-bg:                var(--gas-neutral-900);
    --gas-player-controls-bg:       linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    --gas-player-text:              var(--gas-white);
    --gas-player-chapter-bg:        var(--gas-bg-surface);
    --gas-player-chapter-active-bg: var(--gas-primary-ultra-light);
    --gas-player-chapter-hover-bg:  var(--gas-neutral-100);
    --gas-player-chapter-border:    var(--gas-border-color);
    --gas-player-subtitle-bg:       rgba(0, 0, 0, 0.78);
    --gas-player-subtitle-size:     var(--gas-text-m);
}


/* =============================================
   1. WRAPPER
   ============================================= */

.gas-video-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gas-space-m);
    width: 100%;
    max-width: 100%;
    font-family: var(--gas-font-family);
}



/* =============================================
   2. PLAYER AREA — Plyr overrides
   ============================================= */

.gas-video-player-area {
    position: relative;
    width: 100%;
    border-radius: var(--gas-player-radius);
    overflow: hidden;
    background: var(--gas-player-bg);
}

/* Aspect ratio 16:9 — forced for HLS streams where Plyr can't detect intrinsic size */
.gas-video-player-area .plyr--video {
    aspect-ratio: 16 / 9;
}

.gas-video-player-area .plyr {
    --plyr-color-main: var(--gas-player-accent);
    --plyr-video-background: var(--gas-player-bg);
    --plyr-badge-background: var(--gas-player-accent);
    --plyr-badge-text-color: var(--gas-player-text);
    --plyr-captions-background: var(--gas-player-subtitle-bg);
    --plyr-captions-text-color: var(--gas-player-text);
    --plyr-font-family: var(--gas-font-family);
    --plyr-control-radius: var(--gas-radius-s);
    --plyr-font-size-base: 15px;
    --plyr-font-size-small: 13px;
    --plyr-font-size-large: 18px;
    --plyr-font-size-xlarge: 21px;
    --plyr-font-size-time: 13px;
    --plyr-font-weight-regular: var(--gas-weight-normal);
    --plyr-font-weight-bold: var(--gas-weight-semi);
    --plyr-tooltip-background: var(--gas-neutral-800);
    --plyr-tooltip-color: var(--gas-player-text);
    --plyr-tooltip-radius: var(--gas-radius-s);
    --plyr-tooltip-shadow: var(--gas-shadow-m);
    border-radius: var(--gas-player-radius);
}

/* Progress bar */
.gas-video-player-area .plyr__progress input[type="range"] {
    color: var(--gas-player-accent);
}

.gas-video-player-area .plyr__progress__buffer {
    color: rgba(255, 255, 255, 0.25);
}

/* Hover accent sur les contrôles */
.gas-video-player-area .plyr__control:hover {
    background: var(--gas-player-accent);
    color: var(--gas-player-text);
}

/* Sous-titres */
.gas-video-player-area .plyr__captions .plyr__caption {
    font-size: var(--gas-player-subtitle-size);
    padding: var(--gas-space-xs) var(--gas-space-s);
    border-radius: var(--gas-radius-s);
}


/* =============================================
   3. CHAPTERS PANEL
   ============================================= */

.gas-video-chapters-panel {
    display: flex;
    flex-direction: column;
    background: var(--gas-player-chapter-bg);
    border: var(--gas-border-width) solid var(--gas-player-chapter-border);
    border-radius: var(--gas-player-radius);
    overflow: hidden;
    width: 100%;
    margin-bottom: var(--gas-space-xl);
}

/* -- Header -- */
.gas-video-chapters-header {
    flex-shrink: 0;
    border-bottom: var(--gas-border-width) solid var(--gas-player-chapter-border);
}

.gas-video-chapters-toggle {
    display: flex;
    align-items: center;
    gap: var(--gas-space-s);
    width: 100%;
    padding: var(--gas-space-s) var(--gas-space-m);
    border: 0;
    background: var(--gas-neutral-50);
    color: var(--gas-text-color);
    font-family: var(--gas-font-family);
    font-size: var(--gas-text-s);
    font-weight: var(--gas-weight-semi);
    cursor: pointer;
    transition: background var(--gas-transition-fast);
}

.gas-video-chapters-toggle:hover {
    background: var(--gas-neutral-100);
}

.gas-video-chapters-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 var(--gas-space-xs);
    background: var(--gas-primary);
    color: var(--gas-white);
    font-size: var(--gas-text-xs);
    font-weight: var(--gas-weight-semi);
    border-radius: var(--gas-radius-full);
}

.gas-video-chapters-arrow {
    margin-left: auto;
    transition: transform var(--gas-transition-normal);
}

.gas-video-chapters-toggle[aria-expanded="false"] .gas-video-chapters-arrow {
    transform: rotate(-90deg);
}

/* -- Liste : 1 colonne mobile, 2 colonnes desktop -- */
.gas-video-chapters-list {
    display: none;
    overscroll-behavior: contain;
}

.gas-video-chapters-panel:has(.gas-video-chapters-toggle[aria-expanded="true"]) .gas-video-chapters-list {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .gas-video-chapters-panel:has(.gas-video-chapters-toggle[aria-expanded="true"]) .gas-video-chapters-list {
        grid-template-columns: 1fr 1fr;
    }
}

/* -- Chapter item -- */
.gas-video-chapter-item {
    display: flex;
    align-items: flex-start;
    gap: var(--gas-space-s);
    width: 100%;
    padding: var(--gas-space-s) var(--gas-space-m);
    border: 0;
    border-bottom: var(--gas-border-width) solid var(--gas-neutral-200);
    background: transparent;
    color: var(--gas-text-color);
    font-family: var(--gas-font-family);
    font-size: var(--gas-text-s);
    text-align: left;
    cursor: pointer;
    transition: background var(--gas-transition-fast);
    box-sizing: border-box;
}

.gas-video-chapter-item:hover {
    background: var(--gas-player-chapter-hover-bg);
}

.gas-video-chapter-item.is-active {
    background: var(--gas-player-chapter-active-bg);
    font-weight: var(--gas-weight-medium);
}

/* En grille 2 colonnes, le border-bottom sur le dernier enfant
   de chaque ligne doit rester — on ne retire rien ici car
   grid gère le flux automatiquement. */

/* -- Timestamp -- */
.gas-video-chapter-time {
    flex-shrink: 0;
    width: 60px;
    font-family: var(--gas-font-mono);
    font-size: var(--gas-text-xs);
    color: var(--gas-text-color-light);
    padding-top: 2px; /* aligner avec la première ligne du titre */
}

.gas-video-chapter-item.is-active .gas-video-chapter-time {
    color: var(--gas-primary);
}

/* -- Info -- */
.gas-video-chapter-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

/* Les titres passent à la ligne au lieu d'être tronqués */
.gas-video-chapter-title {
    white-space: normal;
    word-break: break-word;
    line-height: 1.4;
}

/* -- Type badge -- */
.gas-video-chapter-type {
    display: inline-block;
    padding: 1px var(--gas-space-xs);
    font-size: 1rem;
    font-weight: var(--gas-weight-medium);
    border-radius: var(--gas-radius-s);
    background: var(--gas-neutral-200);
    color: var(--gas-neutral-700);
    width: fit-content;
}

.gas-video-chapter-type--protocole {
    background: var(--gas-info-light);
    color: var(--gas-info-dark);
}

.gas-video-chapter-type--exercice {
    background: var(--gas-success-light);
    color: var(--gas-success-dark);
}

.gas-video-chapter-type--cas_pratique {
    background: var(--gas-warning-light);
    color: var(--gas-warning-text);
}

.gas-video-chapter-type--qa {
    background: var(--gas-accent-ultra-light);
    color: var(--gas-accent-dark);
}

.gas-video-chapter-type--intro {
    background: var(--gas-neutral-200);
    color: var(--gas-neutral-700);
}

/* -- Playing indicator -- */
.gas-video-chapter-playing-indicator {
    flex-shrink: 0;
    width: 16px;
    opacity: 0;
    color: var(--gas-primary);
    transition: opacity var(--gas-transition-fast);
}

.gas-video-chapter-item.is-active .gas-video-chapter-playing-indicator {
    opacity: 1;
}


/* =============================================
   4. AUDIO MODE
   ============================================= */

.gas-video-wrapper.gas-video--audio {
    max-width: 700px;
}

.gas-video-wrapper.gas-video--audio .gas-video-player-area {
    background: var(--gas-neutral-50);
    border: var(--gas-border-width) solid var(--gas-border-color);
    border-radius: var(--gas-player-radius);
    overflow: hidden;
}

/* Cover art */
.gas-audio-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gas-space-l);
    background: var(--gas-neutral-100);
}

.gas-audio-cover img {
    max-width: 280px;
    max-height: 280px;
    width: 100%;
    height: auto;
    border-radius: var(--gas-radius-m);
    box-shadow: var(--gas-shadow-m);
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

/* Plyr audio overrides */
.gas-video-wrapper.gas-video--audio .plyr--audio {
    --plyr-color-main: var(--gas-player-accent);
    --plyr-audio-controls-background: var(--gas-neutral-50);
    --plyr-audio-control-color: var(--gas-text-color);
    --plyr-audio-control-background-hover: var(--gas-player-accent);
    --plyr-audio-control-color-hover: var(--gas-white);
    --plyr-font-family: var(--gas-font-family);
    border-radius: 0 0 var(--gas-player-radius) var(--gas-player-radius);
}

/* Audio sans cover — plus compact */
.gas-video-wrapper.gas-video--audio:not(:has(.gas-audio-cover)) .gas-video-player-area {
    border-radius: var(--gas-player-radius);
}



/* =============================================
   5. RESPONSIVE
   ============================================= */

@media (max-width: 599px) {
    .gas-video-chapters-panel {
        max-height: 250px;
    }

    .gas-video-chapter-item {
        padding: var(--gas-space-xs) var(--gas-space-s);
    }

    .gas-video-chapter-time {
        width: 50px;
    }

    .gas-audio-cover {
        padding: var(--gas-space-m);
    }

    .gas-audio-cover img {
        max-width: 180px;
        max-height: 180px;
    }
}