/**
 * Video Chapters — Styles
 * Compatible avec le thème Astra et la majorité des thèmes WordPress.
 *
 * Variables CSS personnalisables (via :root ou via attributs du shortcode) :
 *
 *   Couleurs des segments :
 *     --vc-color-1 à --vc-color-12
 *
 *   Barre de progression :
 *     --vc-bar-height : hauteur de la barre (défaut: 6px)
 *     --vc-bar-gap    : espace entre les segments (défaut: 2px)
 *     --vc-bar-bg     : fond des segments non remplis (défaut: #e5e7eb)
 *
 *   Tooltip :
 *     --vc-tooltip-bg    : fond du tooltip (défaut: rgba(0,0,0,0.85))
 *     --vc-tooltip-text  : couleur du texte tooltip (défaut: #fff)
 *
 *   Bouton toggle "Chapitres" :
 *     --vc-toggle-bg       : fond du bouton (défaut: transparent)
 *     --vc-toggle-bg-hover : fond au survol (défaut: #f9fafb)
 *     --vc-toggle-text     : couleur du texte (défaut: #374151)
 *     --vc-toggle-border   : couleur de la bordure (défaut: #e5e7eb)
 *
 *   Liste des chapitres :
 *     --vc-list-bg        : fond de la zone liste (défaut: transparent)
 *     --vc-list-text      : couleur du texte (défaut: #4b5563)
 *     --vc-list-hover-bg  : fond au survol d'un item (défaut: #f3f4f6)
 *     --vc-list-active-bg : fond du chapitre actif (défaut: #eff6ff)
 *     --vc-list-active-text : couleur du texte actif (défaut: #1d4ed8)
 *     --vc-list-border    : bordure de la zone liste (défaut: transparent)
 */

/* ==========================================================================
   Variables par défaut
   ========================================================================== */

:root {
    /* Couleurs des segments */
    --vc-color-1: #3B82F6;
    --vc-color-2: #8B5CF6;
    --vc-color-3: #EC4899;
    --vc-color-4: #F59E0B;
    --vc-color-5: #10B981;
    --vc-color-6: #EF4444;
    --vc-color-7: #06B6D4;
    --vc-color-8: #F97316;
    --vc-color-9: #6366F1;
    --vc-color-10: #14B8A6;
    --vc-color-11: #E879F9;
    --vc-color-12: #84CC16;

    /* Barre de progression */
    --vc-bar-height: 6px;
    --vc-bar-gap: 2px;
    --vc-bar-bg: #e5e7eb;

    /* Tooltip */
    --vc-tooltip-bg: rgba(0, 0, 0, 0.85);
    --vc-tooltip-text: #fff;

    /* Bouton toggle */
    --vc-toggle-bg: transparent;
    --vc-toggle-bg-hover: #f9fafb;
    --vc-toggle-text: #374151;
    --vc-toggle-border: #e5e7eb;

    /* Liste des chapitres */
    --vc-list-bg: transparent;
    --vc-list-text: #4b5563;
    --vc-list-hover-bg: #f3f4f6;
    --vc-list-active-bg: #eff6ff;
    --vc-list-active-text: #1d4ed8;
    --vc-list-border: transparent;
}

/* ==========================================================================
   Conteneur principal
   ========================================================================== */

.vc-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
        Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
}

/* Reset spécifique pour éviter les conflits avec Astra */
.vc-container *,
.vc-container *::before,
.vc-container *::after {
    box-sizing: border-box;
}

/* ==========================================================================
   Lecteur vidéo
   ========================================================================== */

.vc-player-wrap {
    position: relative;
    width: 100%;
    background: transparent; /* CORRIGÉ : transparent au lieu de #000 pour ne pas déborder aux coins arrondis */
    line-height: 0;
    z-index: 1; /* z-index bas pour que les tooltips puissent passer devant */
}

.vc-player-wrap video {
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%;
}

/* Astra: empêcher le thème de forcer des styles sur la vidéo */
.ast-single-post .vc-player-wrap video,
.ast-page .vc-player-wrap video,
.entry-content .vc-player-wrap video,
.ast-article-single .vc-player-wrap video {
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   Barre de progression fusionnée (progression + chapitres)
   ========================================================================== */

.vc-progress-wrapper {
    position: relative;
    padding-top: 22px; /* espace pour le tooltip */
    margin-top: 0;
    width: 100%;
    z-index: 10; /* AU-DESSUS du lecteur vidéo pour que les tooltips soient visibles */
}

.vc-progress-bar {
    display: flex;
    width: 100%;
    height: var(--vc-bar-height);
    gap: var(--vc-bar-gap);
    cursor: pointer;
    position: relative;
}

/* Style arrondi (défaut) */
.vc-rounded .vc-progress-bar {
    border-radius: 3px;
}

.vc-rounded .vc-segment:first-child {
    border-radius: 3px 0 0 3px;
}

.vc-rounded .vc-segment:last-child {
    border-radius: 0 3px 3px 0;
}

.vc-rounded .vc-segment:only-child {
    border-radius: 3px;
}

/* Style plat */
.vc-flat .vc-progress-bar {
    border-radius: 0;
}

/* ==========================================================================
   Segments
   ========================================================================== */

.vc-segment {
    position: relative;
    height: 100%;
    background: var(--vc-bar-bg);
    transition: transform 0.15s ease, filter 0.15s ease;
    transform-origin: bottom center;
    /* PAS de overflow: hidden — sinon le tooltip est coupé */
}

.vc-segment:hover {
    transform: scaleY(1.5);
    filter: brightness(1.1);
}

/* Remplissage de la progression */
.vc-segment-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    transition: width 0.1s linear;
    border-radius: inherit;
}

/* Couleurs des segments (via variables CSS) */
.vc-segment[data-index="0"] .vc-segment-fill { background-color: var(--vc-color-1); }
.vc-segment[data-index="1"] .vc-segment-fill { background-color: var(--vc-color-2); }
.vc-segment[data-index="2"] .vc-segment-fill { background-color: var(--vc-color-3); }
.vc-segment[data-index="3"] .vc-segment-fill { background-color: var(--vc-color-4); }
.vc-segment[data-index="4"] .vc-segment-fill { background-color: var(--vc-color-5); }
.vc-segment[data-index="5"] .vc-segment-fill { background-color: var(--vc-color-6); }
.vc-segment[data-index="6"] .vc-segment-fill { background-color: var(--vc-color-7); }
.vc-segment[data-index="7"] .vc-segment-fill { background-color: var(--vc-color-8); }
.vc-segment[data-index="8"] .vc-segment-fill { background-color: var(--vc-color-9); }
.vc-segment[data-index="9"] .vc-segment-fill { background-color: var(--vc-color-10); }
.vc-segment[data-index="10"] .vc-segment-fill { background-color: var(--vc-color-11); }
.vc-segment[data-index="11"] .vc-segment-fill { background-color: var(--vc-color-12); }

/* Plus de 12 chapitres : cycle sur les couleurs via JS */

/* Segment actif */
.vc-segment.vc-active {
    filter: brightness(1.05);
}

/* ==========================================================================
   Tooltip
   ========================================================================== */

.vc-tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--vc-tooltip-bg);
    color: var(--vc-tooltip-text);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 1000; /* TRÈS élevé pour passer devant le lecteur custom */
}

/* Flèche du tooltip */
.vc-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--vc-tooltip-bg);
}

/* Afficher au survol — avec compensation du scaleY du parent */
.vc-segment:hover .vc-tooltip {
    opacity: 1;
    transform: translateX(-50%) scaleY(0.667); /* compense le scaleY(1.5) du parent */
}

/* ==========================================================================
   Liste des chapitres
   ========================================================================== */

.vc-chapters-list-wrapper {
    margin-top: 8px;
    width: 100%;
}

/* Bouton toggle */
.vc-chapters-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--vc-toggle-bg);
    border: 1px solid var(--vc-toggle-border);
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--vc-toggle-text);
    width: 100%;
    text-align: left;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    font-family: inherit;
    line-height: 1.4;
}

.vc-chapters-toggle:hover {
    background-color: var(--vc-toggle-bg-hover) !important;
    border-color: var(--vc-toggle-border) !important;
    color: var(--vc-toggle-text) !important; /* Empêche Astra de forcer du noir */
}

/* Focus discret : bordure subtile au lieu du gros outline bleu */
.vc-chapters-toggle:focus {
    outline: none !important;
    box-shadow: 0 0 0 1px var(--vc-toggle-border) !important;
    background-color: var(--vc-toggle-bg) !important;
    color: var(--vc-toggle-text) !important;
}

.vc-chapters-toggle:focus:not(:focus-visible) {
    /* Clic souris : aucun effet de focus visible */
    box-shadow: none !important;
    background-color: var(--vc-toggle-bg) !important;
    color: var(--vc-toggle-text) !important;
}

.vc-chapters-toggle:focus-visible {
    /* Navigation clavier uniquement : bordure discrète pour l'accessibilité */
    box-shadow: 0 0 0 1px var(--vc-toggle-border) !important;
    background-color: var(--vc-toggle-bg) !important;
    color: var(--vc-toggle-text) !important;
}

.vc-chapters-toggle:active {
    background-color: var(--vc-toggle-bg-hover) !important;
    color: var(--vc-toggle-text) !important;
}

.vc-chapters-toggle-icon {
    display: inline-flex;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.vc-chapters-toggle-icon.vc-open {
    transform: rotate(180deg);
}

.vc-chapters-toggle-count {
    margin-left: auto;
    font-size: 11px;
    color: #9ca3af;
    font-weight: 400;
}

/* Liste */
.vc-chapters-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    background: var(--vc-list-bg);
    border-radius: 6px;
}

.vc-chapters-list.vc-list-open {
    max-height: 2000px;
    opacity: 1;
    margin-top: 4px;
    border: 1px solid var(--vc-list-border);
}

/* Quand la bordure est transparente, ne pas afficher de bordure du tout */
.vc-chapters-list.vc-list-open[style*="--vc-list-border: transparent"] {
    border-color: transparent;
}

/* Astra: forcer le reset des styles de liste */
.ast-single-post .vc-chapters-list,
.ast-page .vc-chapters-list,
.entry-content .vc-chapters-list,
.ast-article-single .vc-chapters-list {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
    margin-bottom: 0;
}

.vc-chapter-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.15s ease;
    font-size: 13px;
    color: var(--vc-list-text);
    line-height: 1.4;
}

/* Astra: forcer le reset */
.entry-content .vc-chapter-item,
.ast-single-post .vc-chapter-item {
    list-style: none;
    margin-bottom: 0;
    padding-left: 12px;
}

.vc-chapter-item:hover {
    background-color: var(--vc-list-hover-bg);
}

.vc-chapter-item.vc-chapter-active {
    background-color: var(--vc-list-active-bg);
    color: var(--vc-list-active-text);
    font-weight: 500;
}

/* Pastille de couleur */
.vc-chapter-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Index du chapitre */
.vc-chapter-index {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 600;
    min-width: 18px;
    flex-shrink: 0;
}

.vc-chapter-item.vc-chapter-active .vc-chapter-index {
    color: var(--vc-list-active-text);
    opacity: 0.7;
}

/* Titre */
.vc-chapter-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Timestamp */
.vc-chapter-time {
    font-size: 11px;
    color: #9ca3af;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

.vc-chapter-item.vc-chapter-active .vc-chapter-time {
    color: var(--vc-list-active-text);
    opacity: 0.7;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
    .vc-progress-wrapper {
        padding-top: 20px;
    }

    .vc-tooltip {
        font-size: 10px;
        padding: 2px 6px;
    }

    .vc-chapters-toggle {
        font-size: 12px;
        padding: 5px 10px;
    }

    .vc-chapter-item {
        font-size: 12px;
        padding: 6px 10px;
        gap: 8px;
    }

    .vc-chapter-title {
        white-space: normal;
    }
}

@media (max-width: 480px) {
    .vc-segment:hover .vc-tooltip {
        font-size: 9px;
        padding: 2px 5px;
    }

    .vc-chapter-index {
        display: none;
    }
}

/* ==========================================================================
   Astra — Overrides spécifiques
   ========================================================================== */

/* Astra peut ajouter des marges sur les éléments dans .entry-content */
.entry-content .vc-container {
    margin-left: 0;
    margin-right: 0;
}

.entry-content .vc-container p {
    margin-bottom: 0;
}

/* Astra full-width layout support */
.ast-plain-container .vc-container,
.ast-page-builder-template .vc-container {
    max-width: 100%;
}

/* Astra narrow content width — s'assurer que la vidéo ne déborde pas */
.ast-narrow-container .vc-container {
    max-width: 100%;
}

/* Astra bouton reset — ne pas hériter des styles de bouton Astra */
.vc-chapters-toggle,
.ast-single-post .vc-chapters-toggle,
.entry-content .vc-chapters-toggle,
body .vc-chapters-toggle {
    background-image: none !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: var(--vc-toggle-text) !important;
}

/* Astra force souvent des couleurs sur button:hover — on surcharge tout */
.ast-single-post .vc-chapters-toggle:hover,
.entry-content .vc-chapters-toggle:hover,
body .vc-chapters-toggle:hover,
body button.vc-chapters-toggle:hover {
    color: var(--vc-toggle-text) !important;
    background-color: var(--vc-toggle-bg-hover) !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Astra focus override */
.ast-single-post .vc-chapters-toggle:focus,
.entry-content .vc-chapters-toggle:focus,
body .vc-chapters-toggle:focus,
body button.vc-chapters-toggle:focus {
    color: var(--vc-toggle-text) !important;
    background-color: var(--vc-toggle-bg) !important;
    background-image: none !important;
    outline: none !important;
}

/* Astra active override */
.ast-single-post .vc-chapters-toggle:active,
.entry-content .vc-chapters-toggle:active,
body .vc-chapters-toggle:active,
body button.vc-chapters-toggle:active {
    color: var(--vc-toggle-text) !important;
    background-color: var(--vc-toggle-bg-hover) !important;
    box-shadow: none !important;
}

/* Astra — forcer aussi la couleur de la flèche SVG */
.vc-chapters-toggle svg,
.vc-chapters-toggle:hover svg,
.vc-chapters-toggle:focus svg,
.vc-chapters-toggle:active svg,
body .vc-chapters-toggle svg,
body .vc-chapters-toggle:hover svg,
body button.vc-chapters-toggle svg {
    fill: none !important;
    stroke: var(--vc-toggle-text) !important;
    color: var(--vc-toggle-text) !important;
}

/* Astra — empêcher toute transition de couleur sur le bouton */
body .vc-chapters-toggle,
body .vc-chapters-toggle * {
    transition-property: background-color, border-color, transform !important;
    /* On autorise les transitions sauf sur color/fill/stroke */
}

/* Astra: empêcher les liens dans la liste d'avoir les styles Astra */
.vc-chapter-item a,
.entry-content .vc-chapter-item a {
    text-decoration: none;
    color: inherit;
    box-shadow: none;
}

/* ==========================================================================
   Dark mode support (si le thème Astra utilise le dark mode)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    :root {
        --vc-bar-bg: #374151;
        --vc-toggle-bg: transparent;
        --vc-toggle-bg-hover: #1f2937;
        --vc-toggle-text: #d1d5db;
        --vc-toggle-border: #4b5563;
        --vc-list-bg: transparent;
        --vc-list-text: #d1d5db;
        --vc-list-hover-bg: #1f2937;
        --vc-list-active-bg: #1e3a5f;
        --vc-list-active-text: #93c5fd;
        --vc-list-border: transparent;
    }
}

/* ==========================================================================
   Print — masquer la barre et la liste pour l'impression
   ========================================================================== */

@media print {
    .vc-progress-wrapper,
    .vc-chapters-list-wrapper {
        display: none;
    }
}