/**
 * CSS Public Simple LMS - Design Wakademy
 * Couleurs: Background #EBE2D7, Boutons #C48738
 * Largeur max: 1400px, Sidebar: 33%, Contenu: 67%
 */

/* Variables CSS */
:root {
    --wakademy-bg: #EBE2D7;
    --wakademy-primary: #C48738;
    --wakademy-text: #333333;
    --wakademy-text-light: #666666;
    --wakademy-border: #D4C4A8;
    --wakademy-white: #FBF7F4;
    --wakademy-shadow: rgba(0, 0, 0, 0.1);
    --wakademy-card-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    --wakademy-progress-green: #10b981;
    --waka-hover-active-bg: #EBE2D7;
    --waka-bg-light: #fff;
    --waka-text-dark: #333333;
}

/* Reset et base */
* {
    box-sizing: border-box;
}

body {
    background-color: var(--wakademy-bg);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--wakademy-text);
}

/* Container principal */
.simple-lms-course-interface {
    min-height: 100vh;
    background-color: var(--wakademy-bg);
    padding: 0;
    margin: 0;
}

/* Header du cours avec lien de sortie et fil d'Ariane */
.simple-lms-course-header {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    padding: 12px 20px;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.course-header-left {
    width: 33.333%;
    display: flex;
    align-items: center;
    padding-right: 20px;
}

.course-header-right {
    width: 66.667%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 20px;
}

/* Forcer la couleur de texte par défaut pour tous les liens du header */
.course-header-left .simple-lms-course-exit-link,
.course-header-left .simple-lms-course-exit-link a,
.course-header-left a.simple-lms-course-exit-link {
    margin-bottom: 0;
    text-align: left;
    font-size: 16px;
    color: var(--wakademy-text, #1f2937) !important;
    text-decoration: none !important;
}

.course-header-left .simple-lms-course-exit-link:hover,
.course-header-left .simple-lms-course-exit-link a:hover,
.course-header-left a.simple-lms-course-exit-link:hover {
    color: var(--wakademy-text, #1f2937) !important;
    text-decoration: underline !important;
}

.course-header-right .lesson-titles-section {
    margin: 0;
}

.course-header-right .breadcrumb-container {
    font-size: 14px;
}

.course-container {
    max-width: 1400px;
    margin: 0px auto 60px auto;
    display: flex;
    min-height: 100vh;
    background-color: var(--wakademy-bg);
    gap: 40px;
}

/* Padding-top spécifique pour la page rythmes */
.rhythms-page-container {
    padding-top: 60px;
}

/* Sidebar - 33% de la largeur */
.course-sidebar {
    width: 33.333%;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s;
    padding-top: 12px;
}

/* Pas de padding-top pour la page rythmes */
.rhythms-page-wrapper .course-sidebar {
    padding-top: 0;
}

.sidebar-header {
    padding: 0px 0px 20px 0px;
}

.course-dropdown {
    position: relative;
    background-color: var(--wakademy-white);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    transition: border-radius 0.3s ease;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.course-dropdown:has(.dropdown-menu.show) {
    border-radius: 10px;
    margin-bottom: 10px;
}

.dropdown-toggle {
    width: 100%;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    color: var(--wakademy-text);
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.2s ease;
}

.course-info {
    flex: 1;
    margin-right: 15px;
}

.course-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--wakademy-primary);
    margin-bottom: 8px;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: normal;
}

.course-progress-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

.course-progress-info .lesson-position,
.course-progress-info .progress-percentage {
    font-weight: 500;
}

.course-progress-info .progress-separator {
    color: #999;
}

.course-dropdown .progress-bar-container {
    width: 100%;
    height: 6px;
    background-color: #f0f0f0;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 5px;
}

.course-dropdown .progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--wakademy-primary), #d4a574);
    border-radius: 3px;
    transition: width 0.3s ease;
    position: relative;
}

.course-dropdown .progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: progressShine 2s infinite;
}

.dropdown-toggle:hover {
    color: var(--wakademy-primary);
}

.dropdown-arrow {
    font-size: 12px;
    color: var(--wakademy-text);
    opacity: 0.8;
    transition: transform 0.3s ease;
    align-self: flex-start;
    margin-top: 0px;
    flex-shrink: 0;
}

.dropdown-toggle:hover .dropdown-arrow {
    opacity: 1;
}

.dropdown-arrow.rotated {
    transform: rotate(90deg);
}

/* Menu dropdown */
.dropdown-menu {
    display: none;
    position: relative;
    border-radius: 10px;
    border: none;
}

.dropdown-menu.show {
    display: block;
}

.wordpress-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wordpress-menu li {
    margin: 0;
    padding: 0;
}

.wordpress-menu a {
    display: block;
    padding: 8px 20px;
    color: var(--wakademy-text);
    text-decoration: none;
    font-size: 16px;
    transition: all 0.2s ease;
}

.wordpress-menu a:hover {
    background-color: var(--wakademy-bg);
    color: var(--wakademy-primary);
}

.wordpress-menu .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #f8f9fa;
}

.wordpress-menu .sub-menu a {
    padding: 6px 20px 6px 40px;
    font-size: 12px;
    color: var(--wakademy-text-light);
}

/* Styles pour les cours dans le dropdown */
.simple-lms-dropdown-courses {
    padding: 20px 15px 0 15px;
}

.dropdown-courses-section-title {
    width: 100%;
    margin: 20px 0 12px 0;
    font-size: 1.1em;
    font-weight: 600;
    color: var(--wakademy-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 13px;
}

.dropdown-courses-section-title:first-child {
    margin-top: 10px;
}

.dropdown-menu .simple-lms-course-card {
    background: #fff;
    border: 2px solid #EBE2D7;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(196, 135, 56, 0.1);
    transition: all 0.3s ease;
    margin-bottom: 12px;
}

.dropdown-menu .simple-lms-course-card:hover {
    box-shadow: 0 4px 12px rgba(196, 135, 56, 0.2);
    transform: translateY(-1px);
    border-color: #C48738;
}

.dropdown-menu .simple-lms-course-card .course-content {
    padding: 12px 15px;
    display: block;
    position: relative;
    color: inherit;
    text-decoration: none;
}

.dropdown-menu .simple-lms-course-card .course-content:hover,
.dropdown-menu .simple-lms-course-card .course-content:focus {
    color: inherit;
    text-decoration: none;
}

.dropdown-menu .simple-lms-course-card .course-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.dropdown-menu .simple-lms-course-card .course-title {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    flex: 1;
    font-weight: 600;
}

.dropdown-menu .simple-lms-course-card .course-title span {
    color: var(--wakademy-text);
    font-size: 14px;
}

.dropdown-menu .simple-lms-course-card .course-progress {
    margin-top: 10px;
}

.dropdown-menu .simple-lms-course-card .progress-bar {
    width: 100%;
    height: 6px;
    background: #EBE2D7;
    border-radius: 4px;
    overflow: hidden;
}

.dropdown-menu .simple-lms-course-card .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #C48738, #B0762F);
    transition: width 0.3s ease;
    border-radius: 4px;
}

.dropdown-menu .simple-lms-course-card .course-header .progress-text {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: #C48738;
    white-space: nowrap;
}

.dropdown-menu .simple-lms-course-card .course-action-button {
    margin-left: auto;
    text-align: right;
    flex-shrink: 0;
}

.dropdown-menu .simple-lms-course-button {
    display: inline-block;
    padding: 6px 14px;
    background: #C48738;
    color: #ffffff !important;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(196, 135, 56, 0.25);
}

.dropdown-menu .simple-lms-course-button:hover,
.dropdown-menu .simple-lms-course-button:focus {
    background: #B0762F;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(196, 135, 56, 0.35);
    transform: translateY(-1px);
}

.dropdown-menu .no-courses-message {
    padding: 20px;
    text-align: center;
    color: var(--wakademy-text-light);
    font-size: 14px;
}

/* Conteneur pour le dropdown et la navigation */
.course-dropdown-container {
    position: relative;
}

/* Navigation du cours */
.course-navigation {
    flex: 0 0 auto;
    overflow-y: auto;
    padding: 0;
    background-color: var(--wakademy-white);
    border-radius: 10px;
    margin-top: 0;
    transition: border-radius 0.3s ease, margin-top 0.3s ease;
    box-shadow: var(--wakademy-card-shadow);
}

/* Quand un dropdown de chapitre est ouvert, laisser le menu sortir de la navigation */
.course-navigation.has-dropdown-open {
    overflow: visible;
}

.course-dropdown-container:has(.dropdown-menu.show) .course-navigation {
    border-radius: 0 0 10px 10px;
    margin-top: 0;
}

.course-progress {
    background-color: var(--wakademy-white);
}

.progress-bar {
    width: 100%;
    height: 6px;
    background-color: var(--wakademy-border);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-fill {
    height: 100%;
    background-color: var(--wakademy-primary);
    transition: width 0.3s ease;
    border-radius: 3px;
}

.progress-text {
    font-size: 12px;
    color: var(--wakademy-text-light);
    font-weight: 500;
}

/* Sections de chapitres */
.chapter-section {
    border-bottom: 1px solid var(--wakademy-border);
}

.chapter-title {
    background-color: var(--wakademy-white);
    padding: 15px 20px;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--wakademy-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid var(--wakademy-border);
}

.chapter-title:hover {
    background-color: #f8f8f8;
}

.chapter-title.collapsed {
    border-bottom: none;
}

.chapter-toggle {
    font-size: 12px;
    color: var(--wakademy-text-light);
    transition: transform 0.2s ease;
}

.chapter-title.collapsed .chapter-toggle {
    transform: rotate(-90deg);
}

/* Liste des leçons */
.lessons-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: var(--wakademy-white);
}

.lesson-item {
    margin: 0;
    border-bottom: 1px solid #f5f5f5;
}

.lesson-item:last-child {
    border-bottom: none;
}

.lesson-item a {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    text-decoration: none;
    color: var(--wakademy-text);
    transition: all 0.2s ease;
    position: relative;
    font-size: 14px;
    font-weight: 400;
}

.lesson-item a:hover {
    background-color: #f8f8f8;
    color: var(--wakademy-primary);
}

.lesson-item.current a {
    background-color: transparent;
    color: var(--wakademy-primary);
    font-weight: bold;
}


.lesson-item.completed a {
    color: var(--wakademy-primary);
}

/* Consolidated Lesson Status styles */
.lesson-status {
    margin-right: 12px;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 26px;
    transition: all 0.3s ease;
}

.lesson-item.completed .lesson-status,
.completed-lesson .lesson-status {
    color: var(--wakademy-primary);
    animation: checkmark 0.5s ease-in-out;
}

.lesson-item:not(.completed) .lesson-status,
.nav-lesson:not(.completed-lesson) .lesson-status {
    color: var(--wakademy-text);
}
/* End of consolidated styles */

.lesson-title {
    flex: 1;
    line-height: 1.4;
    font-size: 14px;
    font-weight: 400;
}

/* Contenu principal - 67% de la largeur */
.course-main-content {
    width: 66.667%;
    display: flex;
    flex-direction: column;
    background-color: var(--wakademy-bg);
    padding-top: 12px;
}

.lesson-header {
    padding: 0 0 20px 0;
    background-color: var(--wakademy-bg);
    border-bottom: none;
}

.lesson-title {
    font-size: 48px !important;
    font-weight: 700;
    color: var(--wakademy-text);
    margin: 0;
    line-height: 1.2;
}

/* Barre de progression */
.lesson-progress-bar {
    margin: 20px 0;
    padding: 0 20px;
}

.progress-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--wakademy-text);
    font-weight: 500;
}

.progress-separator {
    color: var(--wakademy-primary);
    font-weight: bold;
}

.progress-bar-container {
    width: 100%;
    height: 8px;
    background-color: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--wakademy-primary) 0%, #B0762F 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
    position: relative;
}

.progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
    animation: progressShine 2s infinite;
}

@keyframes progressShine {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.lesson-header h1.lesson-title {
    font-size: 48px !important;
}

/* Surcharge des styles Elementor pour le titre de leçon */
.simple-lms-course-interface .lesson-header h1.lesson-title {
    font-size: 48px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.lesson-content-area {
    flex: 1;
    padding: 0;
    background-color: var(--wakademy-bg);
    display: flex;
    flex-direction: column;
}

/* Lecteur vidéo */
.video-player {
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.lesson-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Actions de la leçon */
.lesson-actions {
    margin: 0;
    padding: 40px 0 0 0;
    background-color: var(--wakademy-bg);
    border-top: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.lesson-continue-section {
    justify-content: center;
    align-items: center;
    margin: 10px 0;
}

/* Section pour annuler la validation */
.lesson-uncomplete-section {
    display: flex;
    justify-content: center;
    margin: 10px 0;
}

.uncomplete-link {
    background: none !important;
    border: none !important;
    font-size: 14px;
    font-style: italic;
    cursor: pointer;
    padding: 5px 10px;
    transition: color 0.3s ease;
    outline: none !important;
    box-shadow: none !important;
}

.uncomplete-link:hover {
    color: inherit !important;
}

.uncomplete-link:active,
.uncomplete-link:focus {
    color: inherit !important;
    background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Bouton désactivé pour terminer la formation */
.btn-continue-lesson.disabled,
.btn-continue-lesson.disabled:hover,
.btn-continue-lesson.disabled:active,
.btn-continue-lesson.disabled:focus {
    background: #cccccc !important;
    color: #666666 !important;
    cursor: not-allowed !important;
    opacity: 0.6;
    transform: none !important;
    box-shadow: none !important;
}

.btn-continue-lesson.disabled .btn-icon {
    opacity: 0.5;
}

/* Barre de progression sous la vidéo */
.video-section + .lesson-progress-bar {
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Bouton sous la barre de progression */
.lesson-progress-bar + .lesson-continue-section {
    margin-top: 20px;
    margin-bottom: 40px;
}

/* Formulaires de completion */
.simple-lms-complete-lesson-form {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
}

/* Section des titres au-dessus de la vidéo */
.lesson-titles-section {
    margin: 20px 0;
}

/* Fil d'Ariane */
.breadcrumb-container {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.breadcrumb-item {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.breadcrumb-link {
    color: var(--wakademy-text, #1f2937) !important;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    transition: color 0.2s ease;
}

/* Texte simple du fil d'Ariane (sans hover, sans dropdown) */
.breadcrumb-text {
    color: var(--wakademy-text, #1f2937) !important;
    text-decoration: none;
    font-size: 16px;
    cursor: default;
    font-weight: 600;
}

.breadcrumb-item.breadcrumb-course .breadcrumb-link,
.breadcrumb-item.breadcrumb-chapter .breadcrumb-link,
.breadcrumb-item.breadcrumb-course .breadcrumb-text,
.breadcrumb-item.breadcrumb-chapter .breadcrumb-text {
    color: var(--wakademy-text, #1f2937) !important;
    font-weight: 600;
}

.breadcrumb-item.breadcrumb-course .breadcrumb-link:hover,
.breadcrumb-item.breadcrumb-chapter .breadcrumb-link:hover {
    color: var(--wakademy-text, #1f2937) !important;
    text-decoration: underline;
}

/* Pas de hover sur les textes simples */
.breadcrumb-text:hover {
    text-decoration: none !important;
    cursor: default !important;
}

.breadcrumb-separator {
    color: #999;
    font-size: 16px;
    margin: 0 4px;
}

.breadcrumb-lesson .breadcrumb-link {
    color: var(--wakademy-text, #1f2937) !important;
    font-weight: 600;
    cursor: default;
}

/* Dropdown du fil d'Ariane - Utilisation de details/summary natif */
.breadcrumb-details {
    display: inline-block;
    position: relative;
}

.breadcrumb-details summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    position: relative;
    z-index: 1;
}

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

.breadcrumb-details summary:focus {
    outline: none;
}

/* Le dropdown du fil d'Ariane utilise maintenant les mêmes styles que chapter-dropdown-menu */
.breadcrumb-dropdown.chapter-dropdown-menu {
    /* Les styles sont hérités de .chapter-dropdown-menu */
    /* Le menu est caché par défaut et s'affiche quand details est ouvert */
    display: none;
}

/* Quand details est ouvert, afficher le menu */
.breadcrumb-details[open] > .breadcrumb-dropdown.chapter-dropdown-menu {
    display: block !important;
}

/* Breadcrumb mobile - caché par défaut, affiché uniquement sur mobile < 425px */
.breadcrumb-container-mobile {
    display: none;
}

/* Forcer la couleur de texte par défaut pour tous les liens dans les dropdowns du fil d'Ariane */
.breadcrumb-dropdown.chapter-dropdown-menu a,
.breadcrumb-dropdown.chapter-dropdown-menu .chapter-list-link,
.breadcrumb-dropdown.chapter-dropdown-menu .chapter-list-link a {
    color: var(--wakademy-text, #1f2937) !important;
}

.breadcrumb-dropdown.chapter-dropdown-menu a:hover,
.breadcrumb-dropdown.chapter-dropdown-menu .chapter-list-link:hover,
.breadcrumb-dropdown.chapter-dropdown-menu .chapter-list-link a:hover {
    color: var(--wakademy-text, #1f2937) !important;
}

/* Container des titres de leçon */
.lesson-title-container {
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: center;
}

/* Titre du chapitre (au-dessus, plus petit) - FORCER LES STYLES */
.simple-lms-course-interface .lesson-titles-section h2.chapter-title {
    font-size: 26px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    background-color: transparent !important;
    border: none !important;
    cursor: default !important;
    display: block !important;
    align-items: unset !important;
    justify-content: unset !important;
    transition: none !important;
    flex-shrink: 0;
}

/* Séparateur entre les titres */
.title-separator {
    font-size: 26px !important;
    color: #999 !important;
    font-weight: 400;
    margin: 0 !important;
    padding: 0 !important;
}

/* Titre de la leçon (sous le chapitre, plus petit) - FORCER LES STYLES */
.simple-lms-course-interface .lesson-titles-section h1.lesson-title {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: var(--wakademy-text) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    padding: 0 !important;
    background-color: transparent !important;
    border: none !important;
    text-align: left !important;
}

/* Styles encore plus spécifiques pour forcer l'override */
.simple-lms-course-interface .lesson-content-area .lesson-titles-section .lesson-title-container h2.chapter-title {
    font-size: 28px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
    border: none !important;
    cursor: default !important;
    display: block !important;
    align-items: unset !important;
    justify-content: unset !important;
    transition: none !important;
}

.simple-lms-course-interface .lesson-content-area .lesson-titles-section .lesson-title-container h1.lesson-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--wakademy-text) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    padding: 0 !important;
    background-color: transparent !important;
    border: none !important;
    text-align: left !important;
}

/* Système d'onglets simple */
.lesson-tabs {
    margin-top: 0px;
}

.tabs-navigation {
    display: flex;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 20px;
}

.tab-link {
    display: inline-block;
    padding: 12px 24px;
    font-size: 18px;
    font-weight: 500;
    color: var(--wakademy-text);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
    text-decoration: none;
}

.tab-link:hover {
    color: var(--wakademy-text);
    text-decoration: none;
}

.tab-link.active {
    color: var(--wakademy-text);
    border-bottom-color: var(--wakademy-primary);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.lesson-content,
.lesson-comments {
    color: var(--wakademy-text);
    line-height: 1.6;
}

/* S'assurer que les commentaires dans les onglets sont visibles */
.tab-content .lesson-comments {
    display: block !important;
}

/* Masquer la section "logged-in-as" dans les commentaires */
.tab-content .lesson-comments .logged-in-as {
    display: none !important;
}

/* Masquer le label "Commentaire *" */
.tab-content .lesson-comments .comment-form-comment label {
    display: none !important;
}

/* Agrandir la hauteur du textarea principal */
.tab-content .lesson-comments .comment-form-comment textarea {
    height: 120px !important; /* Hauteur plus grande */
    min-height: 120px !important;
    max-height: 200px !important;
    resize: vertical !important;
}

/* Masquer le texte des champs obligatoires */
.tab-content .lesson-comments .required-field-message {
    display: none !important;
}

/* Styles pour la liste des commentaires */
.comments-list {
    margin-bottom: 30px;
}

/* Thread de commentaire (conteneur principal) */
.comment-thread {
    margin-bottom: 30px;
}

/* Commentaire principal */
.comment-item {
    margin-bottom: 15px;
    padding: 15px;
    background: #F0EBE3;
    border-radius: 8px;
}

.comment-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.comment-avatar {
    flex-shrink: 0;
}

.comment-avatar img {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    object-fit: cover;
}

.comment-reply .comment-avatar img {
    width: 32px;
    height: 32px;
}

.comment-meta {
    flex: 1;
}

.comment-author {
    font-weight: bold;
    color: var(--wakademy-primary);
    margin-bottom: 2px;
}

.comment-date {
    font-size: 12px;
    color: #666;
    margin-bottom: 0;
}

.comment-content {
    line-height: 1.6;
    color: #333;
    margin-top: 10px;
}

/* Section des réponses */
.comment-replies {
    margin-top: 15px;
    margin-left: 30px;
}

/* Styles pour les réponses (commentaires enfants) */
.comment-reply-item {
    margin-bottom: 15px;
    border-left: 3px solid var(--wakademy-primary);
    padding: 15px;
    background: #F0EBE3;
    border-radius: 8px;
}

/* Actions des commentaires - positionnées en dehors du rectangle beige */
.comment-actions {
    margin-top: 12px;
    margin-left: 0; /* Aligné avec le bord gauche du commentaire */
}

/* Actions des commentaires pour les réponses - alignées avec le bord gauche des réponses */
.comment-thread .comment-actions {
    margin-left: 30px; /* Aligné avec le bord gauche des réponses */
}

.reply-link {
    color: #65676B;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    font-style: italic;
    cursor: pointer;
    transition: color 0.2s ease;
}

.reply-link:hover {
    color: var(--wakademy-primary);
    text-decoration: underline;
}

/* Formulaire de réponse Facebook-style */
.reply-form-container {
    margin-top: 12px;
    margin-left: 30px;
}

.reply-form-header {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.reply-avatar img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.reply-input-container {
    flex: 1;
}

.reply-textarea {
    width: 100%;
    min-height: 36px;
    max-height: 100px;
    padding: 8px 12px;
    border: 1px solid #DADDE1;
    border-radius: 20px;
    font-size: 14px;
    font-family: inherit;
    resize: none;
    outline: none;
    background-color: #F0F2F5;
    transition: all 0.2s ease;
}

.reply-textarea:focus {
    border-color: #1877F2;
    background-color: #fff;
}

.reply-textarea::placeholder {
    color: #65676B;
}

.reply-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    justify-content: flex-end;
}

.cancel-reply, .submit-reply {
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.cancel-reply {
    background-color: #E4E6EA;
    color: #999; /* Gris clair au lieu du marron */
}

.cancel-reply:hover {
    background-color: #D8DADF;
    color: #666; /* Gris un peu plus foncé au hover */
}

.submit-reply {
    background-color: #1877F2;
    color: white;
}

.submit-reply:hover {
    background-color: #166FE5;
}

/* Style pour le titre des commentaires */
.tab-content .lesson-comments .comment-reply-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--wakademy-text) !important;
    margin-bottom: 15px !important;
}

/* Style pour le textarea des commentaires */
.tab-content .lesson-comments textarea:focus {
    border-color: var(--wakademy-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(199, 179, 155, 0.2) !important;
}

.lesson-content p,
.lesson-comments p {
    margin: 0 0 15px 0;
}

.lesson-content ul {
    margin: 15px 0;
    padding-left: 20px;
}

.lesson-content li {
    margin: 8px 0;
    color: var(--wakademy-text);
}

/* Rendre toutes les vidéos/iframes dans le contenu des leçons responsives */
.lesson-content iframe,
.lesson-text-content iframe,
.lesson-content-main iframe {
    max-width: 100%;
    height: auto;
}

/* Rendre toutes les images dans le contenu des leçons responsives */
.lesson-content img,
.lesson-text-content img,
.lesson-content-main img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Container responsive pour les vidéos YouTube, Vimeo, etc. dans les paragraphes */
.lesson-content p:has(iframe),
.lesson-text-content p:has(iframe),
.lesson-content-main p:has(iframe) {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Ratio 16:9 */
    height: 0;
    overflow: hidden;
    margin-bottom: 20px;
}

.lesson-content p:has(iframe) iframe,
.lesson-text-content p:has(iframe) iframe,
.lesson-content-main p:has(iframe) iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

/* Alternative pour les navigateurs qui ne supportent pas :has() */
@supports not (selector(:has(*))) {
    .lesson-content iframe,
    .lesson-text-content iframe,
    .lesson-content-main iframe {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 16/9;
    }
}

.comments-placeholder {
    background-color: #f8f9fa;
    border: 1px dashed #dee2e6;
    border-radius: 6px;
    padding: 20px;
    text-align: center;
    margin-top: 15px;
}

.comments-placeholder p {
    margin: 0;
    color: #6c757d;
    font-style: italic;
}


/* Masquer l'ancienne section commentaires qui fait doublon avec les onglets */
.course-sidebar .lesson-comments {
    display: none !important;
}

/* Masquer l'ancienne section commentaires en bas de page (pas dans les onglets) */
.course-main-content > .lesson-comments {
    display: none !important;
}

/* Styles pour les chapitres et leçons actifs */
.nav-chapter.current-chapter .chapter-name {
    font-weight: 600 !important;
}

.nav-chapter.current-chapter .chapter-toggle {
    color: inherit !important;
}

.nav-lesson.current-lesson .lesson-link {
    color: inherit !important;
    font-weight: 600 !important;
}


/* Forcer la couleur primary pour la leçon active dans la sidebar */
.simple-lms-course-interface .course-navigation .nav-lesson.current-lesson .lesson-link,
.simple-lms-course-interface .course-navigation .nav-lesson.current-lesson .lesson-link:link,
.simple-lms-course-interface .course-navigation .nav-lesson.current-lesson .lesson-link:visited,
.simple-lms-course-interface .course-navigation .nav-lesson.current-lesson .lesson-link:hover,
.simple-lms-course-interface .course-navigation .nav-lesson.current-lesson .lesson-link:focus {
    color: inherit !important;
    font-weight: 600 !important;
}

.btn-continue-lesson {
    background: var(--wakademy-primary);
    color: white;
    border: none;
    padding: 20px 40px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    box-shadow: none !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}

.btn-continue-lesson:hover {
    background: #B0762F;
    transform: translateY(-2px);
    box-shadow: none !important;
}

/* Désactiver les transforms pendant l'animation (éviter que le bouton bouge) */
.btn-continue-lesson.completing,
.btn-continue-lesson.completing:hover {
    -webkit-transform: none !important;
    transform: none !important;
    -webkit-transition: none !important;
    transition: none !important;
}

.btn-continue-lesson.completed,
.btn-continue-lesson.completed:hover {
    -webkit-transform: none !important;
    transform: none !important;
}

.btn-continue-lesson:active,
.btn-continue-lesson:focus {
    transform: translateY(0);
    background: var(--wakademy-primary) !important;
    color: white !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Surcharge spécifique pour Elementor */
.elementor .btn-continue-lesson:active,
.elementor .btn-continue-lesson:focus,
.elementor-widget .btn-continue-lesson:active,
.elementor-widget .btn-continue-lesson:focus,
.elementor-section .btn-continue-lesson:active,
.elementor-section .btn-continue-lesson:focus {
    background: var(--wakademy-primary) !important;
    color: white !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Surcharge pour les états après clic */
.btn-continue-lesson:visited,
.btn-continue-lesson:visited:active,
.btn-continue-lesson:visited:focus {
    background: var(--wakademy-primary) !important;
    color: white !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Surcharge générale pour tous les états Elementor */
.elementor button.btn-continue-lesson,
.elementor-widget button.btn-continue-lesson,
.elementor-section button.btn-continue-lesson {
    background: var(--wakademy-primary) !important;
    color: white !important;
    border: none !important;
    outline: none !important;
}

.elementor button.btn-continue-lesson:hover,
.elementor-widget button.btn-continue-lesson:hover,
.elementor-section button.btn-continue-lesson:hover {
    background: #B0762F !important;
    color: white !important;
    border: none !important;
    outline: none !important;
}

.btn-continue-lesson.processing {
    pointer-events: none;
    opacity: 0.8;
}

.btn-continue-lesson.victory {
    animation: victoryAnimation 1.5s ease-in-out;
}

.btn-continue-lesson .btn-icon {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.btn-continue-lesson:hover .btn-icon {
    transform: translateX(3px);
}

.btn-continue-lesson.victory .btn-icon {
    animation: bounceIcon 0.6s ease-in-out;
}

/* État completed du bouton - GÉRÉ PAR LA NOUVELLE ANIMATION */
/* Les styles sont définis plus bas dans la section "NOUVELLE ANIMATION DE VICTOIRE" */

/* ============================================
   NOUVELLE ANIMATION DE VICTOIRE - BOUTON CONTINUE
   ============================================ */

/* Bouton avec remplissage de gauche à droite */
.btn-continue-lesson {
    position: relative;
    overflow: hidden;
}

/* Remplissage du bouton de gauche à droite (comme une barre de progression) */
.btn-continue-lesson::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: #10b981;
    z-index: 0;
    -webkit-transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: width;
}

.btn-continue-lesson.completing::before {
    width: 100%;
    will-change: width;
}

/* Conserver le remplissage après l'animation (éviter le recul) */
.btn-continue-lesson.completed::before {
    width: 100% !important;
    -webkit-transition: none !important;
    transition: none !important; /* Pas de transition après - reste à 100% */
}

/* Container pour le cercle + check (remplace .btn-icon) */
.btn-continue-lesson .victory-icon-container {
    position: relative;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* Cercle SVG qui se remplit (comme progress-ring-circle mais blanc) */
.btn-continue-lesson .victory-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(-90deg) translateZ(0);
    transform: translate(-50%, -50%) rotate(-90deg) translateZ(0);
    width: 32px;
    height: 32px;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: opacity;
}

.btn-continue-lesson.completing .victory-circle {
    opacity: 1;
    will-change: opacity, stroke-dashoffset;
}

/* Garder le cercle visible après l'animation */
.btn-continue-lesson.completed .victory-circle {
    opacity: 1 !important;
    will-change: auto;
}

/* Cercle de fond (gris clair) */
.btn-continue-lesson .victory-circle-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 2.5;
}

/* Cercle qui se remplit (BLANC - comme progress-ring-circle) */
.btn-continue-lesson .victory-circle-fill {
    fill: none;
    stroke: white;
    stroke-width: 2.5;
    stroke-dasharray: 100 100;
    stroke-dashoffset: 100;
    -webkit-transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: stroke-dashoffset;
}

.btn-continue-lesson.completing .victory-circle-fill {
    -webkit-animation: fillCircleWhite 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation: fillCircleWhite 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    will-change: stroke-dashoffset;
}

/* Garder le cercle rempli après l'animation */
.btn-continue-lesson.completed .victory-circle-fill {
    stroke-dashoffset: 0 !important;
    -webkit-transition: none !important;
    transition: none !important;
    will-change: auto;
}

/* Animation de remplissage du cercle blanc (même que fillCircle mais pour blanc) - Compatible Safari */
@-webkit-keyframes fillCircleWhite {
    from {
        stroke-dashoffset: 100;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fillCircleWhite {
    from {
        stroke-dashoffset: 100;
    }
    to {
        stroke-dashoffset: 0;
    }
}

/* Check SVG qui apparaît après le cercle (quand le cercle se termine - 0.8s) */
.btn-continue-lesson .victory-check {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) scale(0) translateZ(0);
    transform: translate(-50%, -50%) scale(0) translateZ(0);
    width: 16px;
    height: 16px;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform, opacity;
}

.btn-continue-lesson.completing .victory-check {
    -webkit-animation: checkBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s forwards !important;
    animation: checkBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s forwards !important;
    will-change: transform, opacity;
}

/* Animation de rebond du check - Compatible Safari */
@-webkit-keyframes checkBounce {
    0% {
        opacity: 0;
        -webkit-transform: translate(-50%, -50%) scale(0) translateZ(0);
        transform: translate(-50%, -50%) scale(0) translateZ(0);
    }
    50% {
        opacity: 1;
        -webkit-transform: translate(-50%, -50%) scale(1.4) translateZ(0);
        transform: translate(-50%, -50%) scale(1.4) translateZ(0);
    }
    65% {
        -webkit-transform: translate(-50%, -50%) scale(0.85) translateZ(0);
        transform: translate(-50%, -50%) scale(0.85) translateZ(0);
    }
    80% {
        -webkit-transform: translate(-50%, -50%) scale(1.15) translateZ(0);
        transform: translate(-50%, -50%) scale(1.15) translateZ(0);
    }
    90% {
        -webkit-transform: translate(-50%, -50%) scale(0.95) translateZ(0);
        transform: translate(-50%, -50%) scale(0.95) translateZ(0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(-50%, -50%) scale(1) translateZ(0);
        transform: translate(-50%, -50%) scale(1) translateZ(0);
    }
}

@keyframes checkBounce {
    0% {
        opacity: 0;
        -webkit-transform: translate(-50%, -50%) scale(0) translateZ(0);
        transform: translate(-50%, -50%) scale(0) translateZ(0);
    }
    50% {
        opacity: 1;
        -webkit-transform: translate(-50%, -50%) scale(1.4) translateZ(0);
        transform: translate(-50%, -50%) scale(1.4) translateZ(0);
    }
    65% {
        -webkit-transform: translate(-50%, -50%) scale(0.85) translateZ(0);
        transform: translate(-50%, -50%) scale(0.85) translateZ(0);
    }
    80% {
        -webkit-transform: translate(-50%, -50%) scale(1.15) translateZ(0);
        transform: translate(-50%, -50%) scale(1.15) translateZ(0);
    }
    90% {
        -webkit-transform: translate(-50%, -50%) scale(0.95) translateZ(0);
        transform: translate(-50%, -50%) scale(0.95) translateZ(0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(-50%, -50%) scale(1) translateZ(0);
        transform: translate(-50%, -50%) scale(1) translateZ(0);
    }
}

.btn-continue-lesson.completed .victory-check {
    opacity: 1 !important;
    -webkit-transform: translate(-50%, -50%) scale(1) translateZ(0) !important;
    transform: translate(-50%, -50%) scale(1) translateZ(0) !important;
    will-change: auto;
    -webkit-animation: none !important;
    animation: none !important;
}

.btn-continue-lesson .victory-check path {
    stroke: white !important;
}

/* Texte et contenu au-dessus du remplissage */
.btn-continue-lesson .btn-text,
.btn-continue-lesson .victory-icon-container {
    position: relative;
    z-index: 1;
}

/* S'assurer que le container victory reste visible après l'animation */
.btn-continue-lesson.completed .victory-icon-container {
    display: inline-flex !important;
    visibility: visible !important;
}

/* Changement de couleur du bouton après complétion - CONSERVÉ */
.btn-continue-lesson.completed {
    background: #10b981 !important;
    border-color: #10b981 !important;
    color: white !important;
}

.btn-continue-lesson.completed .btn-text {
    color: white !important;
}

/* Masquer la flèche après complétion (mais garder le victory-icon-container) */
.btn-continue-lesson.completed .btn-icon:not(.victory-icon-container) {
    display: none !important;
}

/* Hover sur le bouton complété - SANS transform pour éviter que le bouton bouge */
.btn-continue-lesson.completed:hover {
    background: #059669 !important;
    border-color: #059669 !important;
    /* Pas de transform - le bouton ne doit pas bouger */
}

@keyframes victoryAnimation {
    0% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(196, 135, 56, 0.3);
    }
    25% {
        transform: scale(1.05);
        box-shadow: 0 8px 25px rgba(196, 135, 56, 0.5);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 12px 35px rgba(196, 135, 56, 0.6);
    }
    75% {
        transform: scale(1.05);
        box-shadow: 0 8px 25px rgba(196, 135, 56, 0.5);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(196, 135, 56, 0.3);
    }

}

@keyframes bounceIcon {
    0%, 100% {
        transform: translateX(0) scale(1);
    }
    25% {
        transform: translateX(5px) scale(1.2);
    }
    50% {
        transform: translateX(0) scale(1.3);
    }
    75% {
        transform: translateX(-3px) scale(1.1);
    }
}

.lesson-status-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.lesson-status-text {
    font-size: 16px;
    color: var(--wakademy-text);
    font-weight: 500;
}

.btn-complete-lesson {
    background-color: var(--wakademy-primary);
    color: var(--wakademy-white);
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-complete-lesson:hover {
    background-color: #B07A32;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(196, 135, 56, 0.3);
}

.btn-complete-lesson:disabled {
    background-color: var(--wakademy-text-light);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-complete-lesson.completed {
    background-color: #28a745;
}

.btn-complete-lesson.completed:hover {
    background-color: #218838;
}

/* Navigation entre leçons */
.lesson-navigation {
    width: 100%;
    display: flex;
    justify-content: center;
}

.nav-buttons {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    width: 100%;
    max-width: 100%;
}

.nav-btn {
    display: flex;
    flex-direction: column;
    padding: 12px 20px;
    background-color: var(--wakademy-white);
    border: 2px solid var(--wakademy-primary);
    border-radius: 8px;
    text-decoration: none;
    color: var(--wakademy-primary);
    transition: all 0.2s ease;
    min-width: 200px;
    text-align: center;
}

.nav-btn-disabled {
    background-color: transparent;
    border: 2px solid transparent;
    min-width: 200px;
}

.nav-btn:hover {
    background-color: var(--wakademy-primary);
    color: var(--wakademy-white);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(196, 135, 56, 0.3);
}

.nav-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    opacity: 0.8;
}

.nav-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.nav-btn:disabled {
    background-color: var(--wakademy-white);
    border-color: var(--wakademy-border);
    color: var(--wakademy-text-light);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Sections de contenu */
.audio-section, .pdf-section, .text-content {
    margin: 0 0 30px 0;
    padding: 0;
    background-color: var(--wakademy-bg);
    border-radius: 12px;
    border: none;
}

.audio-section h3, .pdf-section h3 {
    display: none;
}

/* Grille des rythmes */
.rhythms-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
}

.rhythm-item {
    background-color: var(--wakademy-white);
    border-radius: 12px;
    padding: 25px;
    text-align: left;
    border: 1px solid var(--wakademy-border);
    transition: all 0.2s ease;
}

.rhythm-item:hover {
    transform: none;
    box-shadow: none;
}

.rhythm-image img {
    max-width: 100%;
    height: auto;
    /* border-radius: 8px; */
    /* margin-bottom: 15px; */
    /* box-shadow: 0 4px 12px var(--wakademy-shadow); */
}

.rhythm-title {
    font-size: 18px;
    margin: 15px 0;
    color: var(--wakademy-text);
    font-weight: 400;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 10px;
}

.rhythm-title-text {
    flex: 1;
    font-weight: 600; /* titre en gras uniquement */
}

.rhythm-title-main {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.rhythm-notes {
    font-size: 0.85em;
    font-weight: 300; /* plus fin que le titre */
    margin-top: 2px;
}

/* Si un rythme contient un bloc Wakatoo AVEC son propre titre, masquer le titre issu du champ "Titre"
   pour n'afficher que le titre rendu par le shortcode Wakatoo.
   Si Wakatoo n'a pas de titre (classe no-title), on garde le titre du champ visible. */
.rhythm-item:has(.wakatoo-rhythm-container .rythm-wrapper:not(.no-title)) .rhythm-title-text {
    display: none;
}

.rhythm-bookmark-btn {
    background: transparent;
    border: 2px solid var(--wakademy-primary);
    padding: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    color: var(--wakademy-primary);
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-left: auto; /* pousser le bouton complètement à droite */
    align-self: flex-end; /* l'aligner vers le bas de la ligne */
    /* Réinitialiser les styles de bouton */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

/* Ajuster la position du bookmark UNIQUEMENT quand le titre du rythme est masqué
   (cas où le bloc Wakatoo affiche déjà son propre titre - pas la classe no-title). */
.rhythm-item:has(.wakatoo-rhythm-container .rythm-wrapper:not(.no-title)) .rhythm-bookmark-btn {
    margin-bottom: -50px;
}

@media (max-width: 768px) {
    .rhythm-item:has(.wakatoo-rhythm-container .rythm-wrapper:not(.no-title)) .rhythm-bookmark-btn {
        margin-bottom: -30px;
    }
}

.rhythm-bookmark-btn:hover {
    transform: scale(1.05);
}

.rhythm-bookmark-btn .bookmark-icon {
    fill: none;
}

.rhythm-bookmark-btn .bookmark-icon path {
    fill: none;
    stroke: var(--wakademy-primary);
    stroke-width: 70;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.rhythm-bookmark-btn.active {
    background: var(--wakademy-primary);
    border: 2px solid var(--wakademy-primary);
    padding: 6px;
    color: #fff;
}

.rhythm-bookmark-btn.active .bookmark-icon {
    fill: #fff;
}

.rhythm-bookmark-btn.active .bookmark-icon path {
    fill: #fff;
    stroke: none;
}

.bookmark-icon {
    width: 13px;
    height: 13px;
    transition: fill 0.2s ease, stroke 0.2s ease;
}

.bookmark-icon path {
    transition: fill 0.2s ease, stroke 0.2s ease;
}

/* Notification toast pour les favoris */
.rhythm-favorite-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #46b450;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 10000;
    animation: slideInRight 0.3s ease-out;
    font-size: 14px;
    font-weight: 500;
    max-width: 300px;
}

.rhythm-favorite-toast .toast-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.rhythm-favorite-toast .toast-icon svg {
    width: 100%;
    height: 100%;
    fill: white;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.rhythm-favorite-toast.fade-out {
    animation: slideOutRight 0.3s ease-in forwards;
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Header de variation: titre à gauche, onglets à droite */
.rhythm-with-variations .rhythm-title {
    margin: 0;
}

.rhythm-with-variations .rhythm-variation-tabs {
    justify-self: end;
    margin: 0;
}

.rhythm-with-variations .rhythm-variation-panes {
    grid-column: 1 / -1;
}

.rhythm-title .rhythm-bpm-select {
    margin-left: auto;
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
}

/* Conteneur pour variation select, lecteur audio et menu BPM sur la même ligne */
.bpm-audio-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 0;
}

.bpm-audio-row .variation-select-wrapper {
    order: 1;
    width: auto;
    min-width: fit-content;
}

.bpm-audio-row .variation-select {
    width: auto;
    min-width: fit-content;
    white-space: nowrap;
    padding: 13px;
    margin-top: -13px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    border-radius: 50px;
    text-align: center;
}

.bpm-audio-row .rhythm-bpm-select {
    order: 2;
    width: auto;
    min-width: fit-content;
    white-space: nowrap;
    padding: 13px;
    margin-top: -12px;
    border-radius: 30px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
}

.bpm-audio-row .simple-lms-audio-player {
    flex: 1;
    order: 3;
}

/* Quand un conteneur Wakatoo est présent, aligner la largeur du player audio */
.rhythm-item:has(.wakatoo-rhythm-container) .bpm-audio-row {
    width: 100%;
    max-width: calc((72px * 4) + (4px * 3));
}

.rhythm-item:has(.wakatoo-rhythm-container) .bpm-audio-row .simple-lms-audio-player {
    flex: 1;
    max-width: 100%;
}

/* Pour les grands écrans */
@media (min-width: 600px) {
    .rhythm-item:has(.wakatoo-rhythm-container) .bpm-audio-row {
        max-width: calc((72px * 8) + (4px * 7));
    }
}

@media (min-width: 1440px) {
    .rhythm-item:has(.wakatoo-rhythm-container) .bpm-audio-row {
        max-width: calc((90px * 8) + (4px * 7));
    }
}

/* Variations de rythmes */
.rhythm-with-variations {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-row-gap: 12px;
    align-items: center;
}

.rhythm-variation-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.rhythm-variation-tabs .variation-tab {
    appearance: none;
    border: 1px solid #ddd;
    background: #f7f7f7;
    color: #333;
    font-weight: 600;
    border-radius: 16px;
    padding: 6px 12px;
    cursor: pointer;
    transition: all .2s ease;
}

.rhythm-variation-tabs .variation-tab:hover {
    background: #f0f0f0;
}

.rhythm-variation-tabs .variation-tab.active {
    background: var(--wakademy-primary);
    color: #fff;
    border-color: var(--wakademy-primary);
}

.rhythm-variation-panes .variation-pane { display: none; }
.rhythm-variation-panes .variation-pane.active { display: block; }

/* Lecteur audio */
.simple-lms-audio-player {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 10px 0;
    display: block;
    box-shadow: none;
}

.audio-image img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--wakademy-shadow);
}

.audio-controls {
    flex: 1;
}

.audio-title {
    margin: 0 0 15px 0;
    font-size: 18px;
    color: var(--wakademy-text);
    font-weight: 600;
}

.audio-controls audio {
    width: 100%;
    max-width: 100%;
    border-radius: 8px;
}

/* Boutons PDF */
.btn-pdf {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--wakademy-primary);
    color: var(--wakademy-white);
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-pdf:hover {
    background-color: #B07A32;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(196, 135, 56, 0.3);
    color: var(--wakademy-white);
}

.pdf-icon {
    font-size: 18px;
}

/* Messages d'état */
.simple-lms-message {
    padding: 15px 20px;
    border-radius: 8px;
    margin: 20px 0;
    font-weight: 500;
}

.simple-lms-message.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.simple-lms-message.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.simple-lms-message.info {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

/* Animation de chargement */
.simple-lms-loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--wakademy-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive Design */
@media (max-width: 1200px) {
    .course-container {
        max-width: 100%;
        padding: 0 20px;
    }
}

@media (max-width: 768px) {
    .course-container {
        flex-direction: column;
        padding: 0;
    }
    
    .course-sidebar {
        width: 100%;
        order: 2;
        max-height: 50vh;
    }
    
    .course-main-content {
        width: 100%;
        order: 1;
        padding-top: 12px;
    }
    
    .lesson-header {
    padding: 20px;
    }
    
    .lesson-title {
        font-size: 36px;
    }
    
    .lesson-content-area {
        padding: 20px;
    }

    .video-section,
    .lesson-text-content {
        order: 1;
    }

    .lesson-titles-section {
        order: 2;
        margin-top: 0;
    }

    .lesson-continue-section {
        order: 3;
    }

    .lesson-tabs {
        order: 4;
    }

    .pdf-section {
        order: 5;
    }
    
    .lesson-actions {
        flex-direction: column;
        gap: 20px;
        align-items: stretch;
    }
    
    .lesson-navigation {
        justify-content: space-between;
    }
    
    .nav-buttons {
        flex-direction: column;
        gap: 10px;
    }
    
    .nav-btn {
        min-width: auto;
    }
    
    .rhythms-grid {
        grid-template-columns: 1fr;
    }
    
    .simple-lms-audio-player {
        flex-direction: column;
        text-align: center;
    }

    .lesson-text-content {
        order: 1;
    }

    .video-section {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .lesson-titles-section {
        order: 2;
        margin-top: 0;
    }

    /* Ajuster la taille du bouton sur mobile */
    .btn-continue-lesson {
        padding: 14px 28px !important;
        font-size: 13px !important;
    }

    .btn-continue-lesson .btn-icon {
        font-size: 14px !important;
    }
    
    /* Ajuster les onglets */
    .tabs-navigation {
        overflow-x: auto;
        white-space: nowrap;
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }

    /* Masquer la barre de scroll pour Chrome, Safari et Opera */
    .tabs-navigation::-webkit-scrollbar {
        display: none;
    }

    .tabs-navigation .tab-link {
        font-size: 14px;
        padding: 7px 14px;
    }

    .lesson-tabs {
        flex-direction: column;
        gap: 10px;
        position: relative; /* Pour le Fading Effect */
    }
    
    /* Effet de fondu pour indiquer le scroll horizontal */
    .lesson-tabs::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 40px;
        height: 45px; /* Hauteur approximative de la barre d'onglets */
        background: linear-gradient(to left, var(--wakademy-bg) 20%, transparent 100%);
        pointer-events: none;
        z-index: 2;
    }
    
    .tab-button {
        width: 100%;
        padding: 15px 20px;
        font-size: 14px;
    }
    
    /* Ajuster le contenu des onglets */
    .tab-content {
        padding: 0;
    }
    
    /* Ajuster les commentaires */
    .comment-form textarea {
        width: 100%;
        min-height: 120px;
    }
    
    /* Ajuster la section vidéo */
    .video-section {
        margin-bottom: 0 !important;
    }
    
    /* Ajuster le contenu textuel */
    .lesson-text-content {
        padding: 20px 15px;
        margin: 15px 0;
    }
    
    /* Empêcher le scroll du body quand la modale est ouverte */
    body.modal-open {
        overflow: hidden;
    }
    
    .simple-lms-course-interface .lesson-content-area .lesson-titles-section .lesson-title-container h2.chapter-title {
        font-size: 18px !important;
    }
    
    .simple-lms-course-interface .lesson-content-area .lesson-titles-section .lesson-title-container h1.lesson-title {
        font-size: 16px !important;
    }

    /* Forcer l'affichage de la navigation dans l'onglet Programme */
    #programme-tab .course-navigation {
        display: block;
    }

    .rhythm-title {
        font-size: 14px;
        margin: 0;
    }

    .bpm-audio-row {
        margin-top: 0;
    }
    
    /* S'assurer que le pourcentage de progression fonctionne comme sur desktop */
    .chapter-progress-percentage {
        /* Le JavaScript positionne déjà correctement avec right, on s'assure juste que ça fonctionne */
        position: absolute;
        right: 0; /* Sera mis à jour par JavaScript */
    }
    
    .chapter-progress-percentage.animated {
        /* La transition right fonctionne déjà, on s'assure qu'elle est active */
        -webkit-transition: right 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
        transition: right 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
        will-change: right;
    }

    /* Header responsive pour tablettes - tenir sur une ligne */
    .simple-lms-course-header {
        flex-wrap: nowrap;
        padding: 10px 15px;
        gap: 10px;
    }

    .course-header-left {
        width: 100%;
        min-width: 0;
        padding-right: 10px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    .course-header-left .simple-lms-course-exit-link,
    .course-header-left .simple-lms-course-exit-link a,
    .course-header-left a.simple-lms-course-exit-link {
        font-size: 12px !important;
        white-space: nowrap;
    }
    
    /* Nom de la formation à droite du lien sur mobile */
    .course-header-left .course-title-mobile {
        font-size: 12px !important;
        font-weight: bold !important;
        color: var(--wakademy-text, #1f2937) !important;
        white-space: nowrap;
        margin: 0;
        padding: 0;
        margin-left: auto;
    }

    .course-header-right {
        width: auto;
        min-width: 0;
        flex: 1;
        padding-left: 10px;
        overflow: hidden;
    }

    .course-header-right .breadcrumb-container {
        font-size: 11px;
        gap: 0px;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .breadcrumb-link,
    .breadcrumb-text {
        font-size: 11px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 150px;
    }

    .breadcrumb-separator {
        font-size: 11px;
        margin: 0 2px;
        flex-shrink: 0;
    }

    .breadcrumb-item {
        flex-shrink: 1;
        min-width: 0;
    }

    .breadcrumb-item.breadcrumb-lesson {
        flex-shrink: 1;
        min-width: 0;
    }

    .breadcrumb-item.breadcrumb-lesson .breadcrumb-link {
        max-width: 200px;
    }

    .breadcrumb-details {
        display: inline-flex;
        min-width: 0;
        flex-shrink: 1;
    }

    .breadcrumb-details summary {
        font-size: 11px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 150px;
    }
}

@media (max-width: 480px) {
    .lesson-title {
        font-size: 32px;
    }
    
    .lesson-content-area {
        padding: 0px 10px;
    }
    
    .lesson-header {
        padding: 15px;
    }
    
    .rhythm-item {
        padding: 20px;
    }
    
    /* Supprimer le margin-bottom de la section vidéo sur mobile */
    .video-section {
        margin-bottom: 0 !important;
    }
    
    /* Cacher le fil d'Ariane dans le header sur mobile */
    .course-header-right .lesson-titles-section {
        display: none !important;
    }
    
    .course-header-right .breadcrumb-container {
        display: none !important;
    }

    /* Afficher le titre de la leçon sous la vidéo sur mobile */
    .breadcrumb-container-mobile {
        display: block !important;
        padding: 0 10px 10px 10px !important;
        margin: 0 !important;
        width: 100%;
        box-sizing: border-box;
        position: relative !important;
        order: 2 !important;
    }
    
    /* Style du titre de la leçon sur mobile - même taille que h3#reply-title */
    .breadcrumb-container-mobile .lesson-title-mobile {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: var(--wakademy-text) !important;
        margin: 0 0 15px 0 !important;
        padding: 10px 0px !important;
    }
    
    /* Masquer le breadcrumb complet sur mobile (on affiche juste le titre) */
    .breadcrumb-container-mobile .breadcrumb-container {
        display: none !important;
    }
    
    /* S'assurer que la vidéo est avant le titre */
    .video-section {
        order: 1 !important;
        position: relative !important;
    }
    
    /* S'assurer que le titre mobile vient après la vidéo dans le flux */
    .lesson-content-area > .breadcrumb-container-mobile {
        order: 2 !important;
    }
    
    .lesson-content-area > .video-section {
        order: 1 !important;
    }

    /* Taille de police pour les noms de chapitres */
    .chapter-name {
        font-size: 18px;
    }
    
    /* Empiler le header des variations en mobile étroit */
    .rhythm-with-variations {
        display: block;
    }
    .rhythm-with-variations .rhythm-title {
        margin-bottom: 8px;
    }
    .rhythm-with-variations .rhythm-variation-tabs {
        margin-bottom: 12px;
    }
}


/* Accessibilité */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus styles pour l'accessibilité */
.lesson-item a:focus,
.btn-complete-lesson:focus,
.nav-btn:focus,
.btn-pdf:focus {
    outline: 2px solid var(--wakademy-primary);
    outline-offset: 2px;
}

/* Animation d'entrée */
.course-container {
    animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animations et transitions */
.dropdown-arrow.rotated {
    transform: rotate(90deg);
}

.lesson-transitioning {
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.lesson-transitioning .course-container {
    transform: scale(0.98);
    transition: transform 0.3s ease;
}

/* Amélioration des hover effects */
.lesson-item a {
    position: relative;
    overflow: hidden;
}

.lesson-item a::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.lesson-item a:hover::after {
    left: 100%;
}

/* Animation des boutons */
.btn-complete-lesson, .nav-btn, .btn-pdf {
    position: relative;
    overflow: hidden;
}

.btn-complete-lesson::before, .nav-btn::before, .btn-pdf::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-complete-lesson:active::before, .nav-btn:active::before, .btn-pdf:active::before {
    width: 300px;
    height: 300px;
}

/* Animation de la barre de progression */
.progress-fill {
    position: relative;
    overflow: hidden;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: linear-gradient(
        -45deg,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent
    );
    background-size: 50px 50px;
    animation: move 2s linear infinite;
}

@keyframes move {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 50px 50px;
    }
}

/* Animation des cartes de rythmes */
.rhythm-item {
    position: relative;
    overflow: hidden;
}

.rhythm-item::before {
    content: none !important;
}

.rhythm-item:hover::before {
    transform: none;
}

/* Animation du lecteur vidéo */
.video-player {
    position: relative;
}

/* Animation des messages */
.simple-lms-message {
    animation: slideInFromTop 0.3s ease-out;
}

@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation de chargement améliorée */
.simple-lms-loading {
    position: relative;
}

.simple-lms-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 2px solid transparent;
    border-top: 2px solid var(--wakademy-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Effet de focus amélioré */
.lesson-item a:focus,
.btn-complete-lesson:focus,
.nav-btn:focus,
.btn-pdf:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(196, 135, 56, 0.3);
    transform: scale(1.02);
    transition: all 0.2s ease;
}

/* Animation des chapitres */
.chapter-title {
    position: relative;
}


/* Animation de la sidebar */
.course-sidebar {
    transition: transform 0.3s ease;
}

.course-sidebar.collapsed {
    transform: translateX(-100%);
}

/* Animation du contenu principal */
.course-main-content {
    transition: transform 0.3s ease;
}

.course-sidebar.collapsed + .course-main-content {
    transform: translateX(-33.333%);
}

/* Animation des icônes de statut */
.lesson-status {
    transition: all 0.3s ease;
}

.lesson-item.completed .lesson-status {
    animation: checkmark 0.5s ease-in-out;
}

@keyframes checkmark {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}


/* Navigation de cours */
.simple-lms-course-navigation {
    font-size: 14px;
}

.course-navigation-header h3 {
    margin: 0 0 15px 0;
    font-size: 16px;
    color: #333;
}

.course-progress {
    margin-bottom: 20px;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background-color: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 5px;
}

.progress-fill {
    height: 100%;
    background-color: #4CAF50;
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 12px;
    color: #666;
}

.chapter-section {
    margin-bottom: 20px;
}

.chapter-title {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.lessons-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lesson-item {
    margin: 0;
    border-bottom: 1px solid #f0f0f0;
}

.lesson-item:last-child {
    border-bottom: none;
}

.lesson-item a {
    display: flex;
    align-items: center;
    padding: 8px 0;
    text-decoration: none;
    color: var(--wakademy-text);
    transition: color 0.2s ease;
}

.lesson-item a:hover {
    color: var(--wakademy-primary);
}

.lesson-item.current a {
    color: var(--wakademy-primary);
    font-weight: bold;
}

.lesson-item.completed .lesson-status {
    color: var(--wakademy-primary);
}

.lesson-status {
    margin-right: 12px;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 26px;
    transition: all 0.3s ease;
}

.lesson-item.completed .lesson-status,
.completed-lesson .lesson-status {
    color: var(--wakademy-primary);
    animation: checkmark 0.5s ease-in-out;
}

.lesson-item:not(.completed) .lesson-status,
.nav-lesson:not(.completed-lesson) .lesson-status {
    color: var(--wakademy-text);
}

.lesson-title {
    flex: 1;
    line-height: 1.4;
    font-size: 14px;
    font-weight: 400;
}

/* Lecteur vidéo */
.simple-lms-video-player {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 20px;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Lecteur audio */
.simple-lms-audio-player {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 10px 0;
    display: block;
}

.audio-image img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
}

.audio-controls {
    flex: 1;
}

.audio-title { display: none; }

.audio-controls audio {
    width: 100%;
    max-width: 100%;
}

/* Messages de statut audio */
.audio-loading {
    background: #e3f2fd;
    border: 1px solid #2196F3;
    border-radius: 4px;
    padding: 10px;
    margin-top: 10px;
    color: #1976D2;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.audio-loading::before {
    content: "⏳";
    animation: pulse 1.5s infinite;
}

.audio-error {
    background: #ffebee;
    border: 1px solid var(--wakademy-primary);
    border-radius: 4px;
    padding: 10px;
    margin-top: 10px;
    color: #c62828;
    font-size: 14px;
}

.audio-error::before {
    content: "⚠️ ";
}

.audio-error a {
    color: #1976D2;
    text-decoration: underline;
    margin-left: 5px;
}

.audio-error a:hover {
    text-decoration: none;
}

.simple-lms-error {
    background: #ffebee;
    border: 1px solid var(--wakademy-primary);
    border-radius: 4px;
    padding: 15px;
    color: #c62828;
    font-size: 14px;
    margin: 10px 0;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Boutons d'action */
.lesson-actions {
    margin: 30px 0;
    padding: 20px 0;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lesson-navigation {
    display: flex;
    gap: 10px;
}

.btn-complete-lesson {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.btn-complete-lesson:hover {
    background: #45a049;
}

.btn-complete-lesson:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.btn-complete-lesson.completed {
    background: #666;
}

.btn-lesson-nav {
    background: var(--wakademy-primary);
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.btn-lesson-nav:hover {
    background: #005a87;
    color: white;
}

.btn-lesson-nav:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* Catalogue de formations */
.simple-lms-catalog {
    margin: 20px 0;
}

.catalog-filters {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    display: flex;
    gap: 20px;
    align-items: end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.filter-group label {
    font-weight: bold;
    font-size: 14px;
}

.filter-group select {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.course-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.course-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.course-thumbnail {
    aspect-ratio: 16/9;
    overflow: hidden;
}

.course-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.no-thumbnail {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.course-content {
    padding: 20px;
}

.course-content h3 {
    margin: 0 0 15px 0;
    font-size: 18px;
}

.course-content h3 a {
    text-decoration: none;
    color: #333;
}

.course-content h3 a:hover {
    color: var(--wakademy-primary);
}

.course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 13px;
    color: #666;
}

.course-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.course-excerpt {
    color: #666;
    line-height: 1.5;
    margin-bottom: 20px;
}

.course-actions {
    margin-top: auto;
}

.course-actions .button {
    background: var(--wakademy-primary);
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    display: inline-block;
    transition: background-color 0.2s ease;
}

.course-actions .button:hover {
    background: #005a87;
    color: white;
}

.course-actions .button-primary {
    background: #4CAF50;
}

.course-actions .button-primary:hover {
    background: #45a049;
}

/* Mes formations */
.simple-lms-my-courses .course-progress {
    margin: 10px 0 15px 0;
}

/* Responsive */
@media (max-width: 768px) {
    .simple-lms-lesson-layout {
        flex-direction: column;
    }
    
    .simple-lms-sidebar {
        order: 2;
        max-height: none;
    }
    
    .simple-lms-content {
        order: 1;
    }
    
    .lesson-actions {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }
    
    .lesson-navigation {
        justify-content: space-between;
    }
    
    .catalog-filters {
        flex-direction: column;
        align-items: stretch;
    }
    
    .courses-grid {
        grid-template-columns: 1fr;
    }
    
    .simple-lms-audio-player {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .course-meta {
        flex-direction: column;
        gap: 8px;
    }
    
    .lesson-navigation {
        flex-direction: column;
    }
}

/* Animation de chargement */
.simple-lms-loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--wakademy-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Messages d'état */
.simple-lms-message {
    padding: 12px 16px;
    border-radius: 6px;
    margin: 15px 0;
}

.simple-lms-message.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.simple-lms-message.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.simple-lms-message.info {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

/* Icônes */
.simple-lms-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

/* Accessibilité */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus styles for better accessibility */
.lesson-item a:focus,
.btn-complete-lesson:focus,
.btn-lesson-nav:focus,
.course-actions .button:focus {
    outline: 2px solid var(--wakademy-primary);
    outline-offset: 2px;
}

/* Surcharge des styles Elementor pour les leçons */
.simple-lms-course-interface .lesson-item a,
.simple-lms-course-interface .lesson-item a:visited,
.simple-lms-course-interface .lesson-item a:link {
    color: var(--wakademy-text) !important;
}

.simple-lms-course-interface .lesson-item a:hover {
    color: inherit !important;
}

.simple-lms-course-interface .lesson-item.current a,
.simple-lms-course-interface .lesson-item.current a:visited,
.simple-lms-course-interface .lesson-item.current a:link {
    color: inherit !important;
    font-weight: bold !important;
}

/* Surcharge spécifique pour la navigation des leçons */
.simple-lms-course-interface nav-lesson .lesson-link,
.simple-lms-course-interface nav-lesson .lesson-link:visited,
.simple-lms-course-interface nav-lesson .lesson-link:link {
    color: var(--wakademy-text) !important;
}

.simple-lms-course-interface nav-lesson .lesson-link:hover {
    color: inherit !important;
}

.simple-lms-course-interface nav-lesson.current-lesson .lesson-link,
.simple-lms-course-interface nav-lesson.current-lesson .lesson-link:visited,
.simple-lms-course-interface nav-lesson.current-lesson .lesson-link:link {
    color: inherit !important;
    font-weight: bold !important;
}

/* Surcharge spécifique pour la navigation du cours uniquement */

/* Forcer la couleur primary pour la leçon active - style ultra spécifique */
.simple-lms-course-interface .course-sidebar .course-navigation .nav-lesson.current-lesson .lesson-link {
    color: inherit !important;
    font-weight: 600 !important;
}
.simple-lms-course-interface .course-navigation a,
.simple-lms-course-interface .course-navigation a:visited,
.simple-lms-course-interface .course-navigation a:link {
    color: var(--wakademy-text) !important;
}

.simple-lms-course-interface .course-navigation a:hover {
    color: inherit !important;
}

.simple-lms-course-interface .course-navigation .current a,
.simple-lms-course-interface .course-navigation .current a:visited,
.simple-lms-course-interface .course-navigation .current a:link,
.simple-lms-course-interface .course-navigation .active a,
.simple-lms-course-interface .course-navigation .active a:visited,
.simple-lms-course-interface .course-navigation .active a:link {
    color: inherit !important;
    font-weight: bold !important;
}

/* Styles pour le contenu textuel des leçons */
.lesson-text-content {
    background: #fff;
    border-radius: 8px;
    padding: 30px;
    margin: 20px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.lesson-content-main {
    line-height: 1.6;
    color: #333;
}

.lesson-content-main h1,
.lesson-content-main h2,
.lesson-content-main h3,
.lesson-content-main h4,
.lesson-content-main h5,
.lesson-content-main h6 {
    color: var(--wakademy-primary);
    margin-top: 30px;
    margin-bottom: 15px;
}

.lesson-content-main h1:first-child,
.lesson-content-main h2:first-child,
.lesson-content-main h3:first-child {
    margin-top: 0;
}

.lesson-content-main p {
    /* margin-bottom: 15px; */
}

.lesson-content-main ul,
.lesson-content-main ol {
    margin-bottom: 15px;
    padding-left: 20px;
}

.lesson-content-main li {
    margin-bottom: 5px;
}

.lesson-content-main blockquote {
    border-left: 4px solid var(--wakademy-primary);
    padding-left: 20px;
    margin: 20px 0;
    font-style: italic;
    color: #666;
}

.lesson-content-main img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 15px 0;
}

.lesson-content-main a {
    color: var(--wakademy-primary);
    text-decoration: none;
}

.lesson-content-main a:hover {
    text-decoration: underline;
}

/* ========================================
   RESPONSIVE DESIGN - MODALE MOBILE
   ======================================== */

/* Styles responsive pour mobile */
@media (max-width: 768px) {
    /* Masquer la sidebar normale */
    .course-sidebar {
        display: none;
    }
    
    /* Afficher le bouton mobile */
    .mobile-sidebar-toggle {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    /* Ajuster le contenu principal */
    .lesson-content-area {
        margin-left: 0;
        width: 100%;
        padding: 20px 15px;
    }
    
    /* Ajuster les titres */
    .lesson-titles-section {
        margin-bottom: 20px;
    }
    
    .lesson-title-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .simple-lms-course-interface .lesson-titles-section h2.chapter-title {
        font-size: 18px !important;
    }
    
    .simple-lms-course-interface .lesson-titles-section h1.lesson-title {
        font-size: 16px !important;
    }
    
    .title-separator {
        display: none !important;
    }
    
    /* Ajuster la barre de progression */
    .lesson-progress-section {
        margin-bottom: 20px;
    }
    
    .progress-bar-container {
        height: 8px;
    }
    
    /* Ajuster les boutons - garder la taille normale */
    .btn-continue-lesson {
        padding: 20px 40px;
        font-size: 18px;
    }
    
    /* Ajuster les onglets */
    .lesson-tabs {
        flex-direction: column;
        gap: 10px;
        position: relative; /* Pour le Fading Effect */
    }
    
    /* Effet de fondu pour indiquer le scroll horizontal */
    .lesson-tabs::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 40px;
        height: 45px; /* Hauteur approximative de la barre d'onglets */
        background: linear-gradient(to left, var(--wakademy-bg) 20%, transparent 100%);
        pointer-events: none;
        z-index: 2;
    }
    
    .tab-button {
        width: 100%;
        padding: 15px 20px;
        font-size: 14px;
    }
    
    /* Ajuster le contenu des onglets */
    .tab-content {
        padding: 0;
    }
    
    /* Ajuster les commentaires */
    .comment-form textarea {
        width: 100%;
        min-height: 120px;
    }
    
    /* Ajuster la section vidéo */
    .video-section {
        margin-bottom: 0 !important;
    }
    
    /* Ajuster le contenu textuel */
    .lesson-text-content {
        padding: 20px 15px;
        margin: 15px 0;
    }
    
    /* Empêcher le scroll du body quand la modale est ouverte */
    body.modal-open {
        overflow: hidden;
    }
    
    .simple-lms-course-interface .lesson-content-area .lesson-titles-section .lesson-title-container h2.chapter-title {
        font-size: 18px !important;
    }
    
    .simple-lms-course-interface .lesson-content-area .lesson-titles-section .lesson-title-container h1.lesson-title {
        font-size: 16px !important;
    }
}

/* Animations */
@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animation du bouton mobile */
.mobile-sidebar-toggle {
    animation: bounceIn 0.6s ease-out;
}

/* Responsive pour très petits écrans */
@media (max-width: 480px) {
    .mobile-sidebar-toggle {
        bottom: 15px;
        right: 15px;
        padding: 12px 16px;
    }
    
    .toggle-icon {
        gap: 2px;
    }
    
    .icon-bar {
        width: 18px;
        height: 2px;
    }
    
    .toggle-text {
        font-size: 11px;
    }
    
    .lesson-content-area {
        padding: 15px 10px;
    }
    
    .lesson-text-content {
        padding: 15px 10px;
    }
}

.nav-chapter {
    border-bottom: 1px solid #f0f0f0;
}

.nav-chapter.current-chapter .chapter-toggle {
    color: inherit !important;
}

.nav-lesson.current-lesson .lesson-link {
    color: inherit !important;
    font-weight: 600 !important;
}

.nav-lesson {
    display: flex;
    align-items: center;
    /* border-bottom: 1px solid #f8f8f8; */
    padding: 15px 20px 15px 25px;
    transition: background-color 0.2s;
    gap: 12px;
    position: relative;
}

/* Barre verticale verte entre les leçons terminées */
.nav-lesson.completed-lesson::after {
    content: '';
    position: absolute;
    left: 41px;
    top: 50%;
    width: 2px;
    height: 100%;
    background-color: #10b981;
    z-index: 1;
    transform: translateX(-50%);
}

/* Ne pas afficher la barre en dessous si la leçon suivante n'est pas terminée */
.nav-lesson.completed-lesson:not(:has(+ .nav-lesson.completed-lesson))::after,
.nav-lesson.completed-lesson:last-child::after {
    display: none;
}

/* Alternative pour les navigateurs qui ne supportent pas :has() */
.nav-lesson.completed-lesson:last-child::after {
    display: none !important;
}

/* Cercle avec icône qui se remplit */
.lesson-status-circle {
    position: relative;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.lesson-status-circle .lesson-icon {
    width: 18px;
    height: 18px;
    color: #666;
    z-index: 2;
    position: relative;
    -webkit-transition: color 0.3s ease;
    transition: color 0.3s ease;
}

.lesson-status-circle.completed .lesson-icon {
    color: #10b981;
}

.lesson-status-circle .progress-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    -webkit-transform: rotate(-90deg) translateZ(0);
    transform: rotate(-90deg) translateZ(0);
    z-index: 1;
    background-color: #fff;
    border-radius: 50%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: stroke-dashoffset;
}

.lesson-status-circle .progress-ring-circle-bg {
    stroke: #e0e0e0;
}

.lesson-status-circle .progress-ring-circle {
    stroke: #10b981;
    stroke-dasharray: 100 100;
    stroke-dashoffset: 100;
    -webkit-transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: stroke-dashoffset;
}

.lesson-status-circle.completed .progress-ring-circle {
    stroke-dashoffset: 0;
    will-change: auto;
}

.lesson-status-circle.animating .progress-ring-circle {
    stroke-dashoffset: 100;
    -webkit-animation: fillCircle 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation: fillCircle 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    will-change: stroke-dashoffset;
}

/* Animation de remplissage du cercle - Compatible Safari */
@-webkit-keyframes fillCircle {
    from {
        stroke-dashoffset: 100;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fillCircle {
    from {
        stroke-dashoffset: 100;
    }
    to {
        stroke-dashoffset: 0;
    }
}

/* Animation du cercle qui s'agrandit puis revient après complétion */
/* Ne s'applique que si la classe "just-completed" est présente */
.lesson-status-circle.completed.just-completed {
    -webkit-animation: circlePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s;
    animation: circlePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
}

/* Animation circlePop - Compatible Safari */
@-webkit-keyframes circlePop {
    0% {
        -webkit-transform: scale(1) translateZ(0);
        transform: scale(1) translateZ(0);
    }
    50% {
        -webkit-transform: scale(1.2) translateZ(0);
        transform: scale(1.2) translateZ(0);
    }
    100% {
        -webkit-transform: scale(1) translateZ(0);
        transform: scale(1) translateZ(0);
    }
}

@keyframes circlePop {
    0% {
        -webkit-transform: scale(1) translateZ(0);
        transform: scale(1) translateZ(0);
    }
    50% {
        -webkit-transform: scale(1.2) translateZ(0);
        transform: scale(1.2) translateZ(0);
    }
    100% {
        -webkit-transform: scale(1) translateZ(0);
        transform: scale(1) translateZ(0);
    }
}

/* Masquer l'icône vidéo pour les leçons complétées */
.lesson-status-circle.completed .lesson-icon.lesson-icon-video {
    display: none;
}

/* Afficher l'icône check pour les leçons complétées */
.lesson-status-circle.completed .lesson-icon.lesson-icon-check {
    display: block;
}

/* Masquer l'icône check par défaut */
.lesson-icon.lesson-icon-check {
    display: none;
}

/* Animation pour l'icône check qui apparaît */
/* Ne s'applique que si la classe "just-completed" est présente */
.lesson-status-circle.completed.just-completed .lesson-icon.lesson-icon-check {
    -webkit-animation: checkAppear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s both;
    animation: checkAppear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s both;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform, opacity;
}

/* Animation checkAppear - Compatible Safari */
@-webkit-keyframes checkAppear {
    0% {
        opacity: 0;
        -webkit-transform: scale(0) translateY(-15px) translateZ(0);
        transform: scale(0) translateY(-15px) translateZ(0);
    }
    40% {
        -webkit-transform: scale(1.4) translateY(2px) translateZ(0);
        transform: scale(1.4) translateY(2px) translateZ(0);
    }
    60% {
        -webkit-transform: scale(0.9) translateY(-2px) translateZ(0);
        transform: scale(0.9) translateY(-2px) translateZ(0);
    }
    80% {
        -webkit-transform: scale(1.1) translateY(1px) translateZ(0);
        transform: scale(1.1) translateY(1px) translateZ(0);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1) translateY(0) translateZ(0);
        transform: scale(1) translateY(0) translateZ(0);
    }
}

@keyframes checkAppear {
    0% {
        opacity: 0;
        -webkit-transform: scale(0) translateY(-15px) translateZ(0);
        transform: scale(0) translateY(-15px) translateZ(0);
    }
    40% {
        -webkit-transform: scale(1.4) translateY(2px) translateZ(0);
        transform: scale(1.4) translateY(2px) translateZ(0);
    }
    60% {
        -webkit-transform: scale(0.9) translateY(-2px) translateZ(0);
        transform: scale(0.9) translateY(-2px) translateZ(0);
    }
    80% {
        -webkit-transform: scale(1.1) translateY(1px) translateZ(0);
        transform: scale(1.1) translateY(1px) translateZ(0);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1) translateY(0) translateZ(0);
        transform: scale(1) translateY(0) translateZ(0);
    }
}

/* Onglet "Tous les rythmes" - marge et hauteur augmentées */
.rhythms-nav-section {
    margin-bottom: 20px;
}

.rhythms-nav-section .nav-chapter .chapter-header {
    cursor: pointer;
}

.rhythms-nav-section .nav-chapter .chapter-header:hover .chapter-name {
    color: inherit !important;
}

.rhythms-nav-section .nav-chapter .chapter-name {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease;
}

.rhythms-nav-section .nav-chapter .chapter-toggle {
    font-size: 18px;
    line-height: 1;
}


/* Forcer la couleur primary pour la leçon active dans la sidebar */
.simple-lms-course-interface .course-navigation .nav-lesson.current-lesson .lesson-link,
.simple-lms-course-interface .course-navigation .nav-lesson.current-lesson .lesson-link:link,
.simple-lms-course-interface .course-navigation .nav-lesson.current-lesson .lesson-link:visited,
.simple-lms-course-interface .course-navigation .nav-lesson.current-lesson .lesson-link:hover,
.simple-lms-course-interface .course-navigation .nav-lesson.current-lesson .lesson-link:focus {
    color: inherit !important;
    font-weight: 600 !important;
}

/* Styles for course navigation accordion, moved from functions.php */
.course-nav-structure {
    padding: 0;
}

.nav-chapter {
    border-bottom: 1px solid #f0f0f0;
}

.chapter-header-wrapper {
    position: relative;
    z-index: 1;
}

.chapter-header {
    padding: 40px 20px;
    display: flex;
    align-items: center;
    /* gap: 12px; */
    /* background: #ffffff; */
    /* border: 1px solid #e5e7eb; */
    /* border-radius: 10px; */
    user-select: none;
    /* margin-bottom: 8px; */
    width: 100%;
    /* box-sizing: border-box; */
}

.chapter-header-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}


/* Le toggle a été supprimé, mais on garde les styles au cas où */
.chapter-toggle {
    display: none;
}

.chapter-name-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.chapter-name-toggle {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    transition: opacity 0.2s ease;
    outline: none;
}

.chapter-name-toggle:hover {
    opacity: 0.8;
}

.chapter-name-toggle:focus {
    outline: none;
}

.chapter-name {
    margin: 0;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: #1f2937;
    text-align: center;
}

.chapter-toggle-icon {
    font-size: 14px;
    color: #6b7280;
    transition: transform 0.3s ease;
    display: inline-block;
}

.chapter-name-toggle[aria-expanded="true"] .chapter-toggle-icon {
    transform: rotate(180deg);
}

/* Menu déroulant des chapitres */
.chapter-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: #F0EBE3;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: var(--wakademy-card-shadow);
    min-width: 250px;
    max-width: 400px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
}

/* Triangle en haut du menu pour le rattacher au titre */
.chapter-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #F0EBE3;
    z-index: 1001;
}

.chapter-dropdown-menu::after {
    content: '';
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid #e5e7eb;
    z-index: 1000;
}

/* Sur les grands écrans, afficher tout le menu sans scroll */
@media (min-width: 1024px) {
    .chapter-dropdown-menu {
        max-height: none;
        overflow-y: visible;
    }
}

.chapter-list {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.chapter-list-item {
    margin: 0;
    padding: 0;
}

.chapter-list-link-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    gap: 12px;
    transition: background-color 0.2s ease;
}

.chapter-list-item:hover .chapter-list-link-wrapper {
    background-color: rgba(255, 255, 255, 0.5);
}

.chapter-list-link {
    flex: 1;
    color: var(--wakademy-text, #1f2937) !important;
    text-decoration: none;
    font-size: 15px;
    line-height: 1.5;
    transition: color 0.2s ease;
    white-space: normal;
    word-wrap: break-word;
}

.chapter-list-link:hover {
    color: var(--wakademy-text, #1f2937) !important;
}

.chapter-list-link.disabled {
    color: #9ca3af;
    cursor: not-allowed;
}

.chapter-list-item.current .chapter-list-link-wrapper {
    background-color: rgba(255, 255, 255, 0.7);
}

.chapter-list-item.current .chapter-list-link {
    font-weight: 600;
    color: var(--wakademy-text, #1f2937) !important;
}

/* Ring de progression dans le menu (plus petit) */
.chapter-progress-ring-menu {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.chapter-progress-ring-menu .progress-ring {
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.chapter-progress-ring-menu .progress-ring-track,
.chapter-progress-ring-menu .progress-ring-indicator {
    fill: none;
    stroke-width: 8;
}

.chapter-progress-ring-menu .progress-ring-track {
    stroke: rgba(235, 226, 215, 0.7);
}

.chapter-progress-ring-menu .progress-ring-indicator {
    stroke: var(--wakademy-progress-green);
    stroke-linecap: round;
    stroke-dasharray: 339.292;
    stroke-dashoffset: 339.292;
    -webkit-transition: stroke-dashoffset 0.8s ease-out;
    transition: stroke-dashoffset 0.8s ease-out;
}

.chapter-progress-ring-menu .course-progress-value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.7rem;
    color: #C48738;
    pointer-events: none;
}

/* Cadenas pour les formations sans accès dans le breadcrumb-dropdown */
.breadcrumb-dropdown.chapter-dropdown-menu .lock-icon-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #999;
    flex-shrink: 0;
    transition: color 0.25s ease;
}

.breadcrumb-dropdown.chapter-dropdown-menu .lock-icon-small svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.breadcrumb-dropdown.chapter-dropdown-menu .lock-icon-open {
    display: none;
}

.breadcrumb-dropdown.chapter-dropdown-menu .chapter-list-item:hover .lock-icon-small {
    color: #333;
}

.breadcrumb-dropdown.chapter-dropdown-menu .chapter-list-item:hover .lock-icon-closed {
    display: none;
}

.breadcrumb-dropdown.chapter-dropdown-menu .chapter-list-item:hover .lock-icon-open {
    display: block;
}

/* Navigation entre chapitres */
.chapter-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 10px;
}

.chapter-nav-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
}

.chapter-nav-arrow.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.nav-arrow-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid #F0EBE3;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.chapter-nav-arrow:hover .nav-arrow-circle {
    background: rgba(0, 0, 0, 0.05);
    border-color: #d1d5db;
}

.chapter-nav-arrow.disabled .nav-arrow-circle {
    background: transparent;
    border-color: #e5e7eb;
}

.nav-arrow-icon {
    font-size: 16px;
    line-height: 1;
    color: #6b7280;
}

/* Barre de progression par chapitre */
.chapter-progress-bar {
    width: 100%;
    height: 4px;
    background-color: #e0e0e0;
    border-radius: 2px;
    overflow: visible; /* Permet au pourcentage d'être visible */
    position: relative;
}

.chapter-progress-fill {
    height: 100%;
    background: #10b981;
    border-radius: 2px;
    -webkit-transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: width;
}

.chapter-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
    animation: progressShine 2s infinite;
    pointer-events: none;
}

.chapter-progress-percentage {
    position: absolute;
    top: 50%; /* Centré verticalement sur la barre */
    -webkit-transform: translateY(-50%) translateX(50%) translateZ(0);
    transform: translateY(-50%) translateX(50%) translateZ(0); /* Centre verticalement et horizontalement */
    font-size: 13px; /* Taille augmentée */
    color: white;
    font-weight: 600;
    background: #10b981; /* Même couleur que la barre de progression */
    padding: 3px 8px;
    border-radius: 50px; /* Bords complètement arrondis */
    z-index: 10;
    white-space: nowrap;
    line-height: 1.2;
    min-width: 32px;
    text-align: center;
    right: 0; /* Sera mis à jour dynamiquement par JavaScript */
    -webkit-transition: none !important;
    transition: none !important; /* Aucune transition par défaut - forcé */
    -webkit-animation: none !important;
    animation: none !important; /* Aucune animation par défaut - forcé */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Style pour le pourcentage à 0% : fond gris comme la barre de progression */
.chapter-progress-percentage.zero-percent {
    background: #e0e0e0; /* Même couleur que la barre de progression de fond */
    color: #666; /* Texte gris foncé pour le contraste */
}

/* Activer la transition seulement après le chargement initial */
.chapter-progress-percentage.animated {
    -webkit-transition: right 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition: right 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Même transition que la barre de progression */
    -webkit-animation: none !important;
    animation: none !important;
    will-change: right;
}

.chapter-lessons {
    display: none;
    background: white;
}

.chapter-lessons.expanded {
    display: block;
}


.course-nav-structure {
    position: relative;
}

.nav-lesson:hover {
    background: #F0EBE3;
    border-radius: 8px;
    color: inherit;
}

.nav-lesson.current-lesson {
    background: #F0EBE3;
    border-radius: 8px;
    color: inherit;
}

.nav-lesson.current-lesson .lesson-link {
    font-weight: bold;
}

.lesson-link {
    flex: 1;
    text-decoration: none;
    font-size: 15px;
    line-height: 1.4;
}
/* End of styles from functions.php */

/* Masquer le header standard sur les pages de formation/leçon */
body.single-lms_course header,
body.single-lms_lesson header,
body.single-lms_course .site-header,
body.single-lms_lesson .site-header,
body.single-lms_course .elementor-location-header,
body.single-lms_lesson .elementor-location-header,
body.single-lms_course .elementor-template-canvas .elementor-location-header,
body.single-lms_lesson .elementor-template-canvas .elementor-location-header,
body:has(.simple-lms-course-header) header,
body:has(.simple-lms-course-header) .site-header,
body:has(.simple-lms-course-header) .elementor-location-header,
body.single-lms_course .site-header-wrapper,
body.single-lms_lesson .site-header-wrapper,
/* Sélecteurs spécifiques pour les headers Elementor */
body.single-lms_lesson header[data-elementor-type="header"],
body.single-lms_lesson header.elementor-location-header,
body.single-lms_lesson .elementor-location-header,
body.single-lms_lesson header[class*="elementor-"],
body:has(.simple-lms-lesson-wrapper) header[data-elementor-type="header"],
body:has(.simple-lms-lesson-wrapper) header.elementor-location-header,
body:has(.simple-lms-lesson-wrapper) .elementor-location-header,
body:has(.simple-lms-lesson-wrapper) header[class*="elementor-"] {
    display: none !important;
}

/* Lien de sortie de formation dans la sidebar */
.simple-lms-course-exit-link {
    font-size: 18px;
    cursor: pointer;
    display: block;
    margin-bottom: 25px;
    text-align: center;
    color: var(--wakademy-text, #1f2937) !important;
}

.simple-lms-course-exit-link:hover {
    color: var(--wakademy-text, #1f2937) !important;
}

/* Masquer le footer sur les pages de formation/leçon */
body.single-lms_course footer,
body.single-lms_lesson footer,
body.single-lms_course .site-footer,
body.single-lms_lesson .site-footer,
body.single-lms_course .elementor-location-footer,
body.single-lms_lesson .elementor-location-footer,
body.single-lms_course .elementor-template-canvas .elementor-location-footer,
body.single-lms_lesson .elementor-template-canvas .elementor-location-footer {
    display: none !important;
}

/* Masquer le header et footer Elementor sur la page des rythmes */
body:has(.rhythms-page-wrapper) header,
body:has(.rhythms-page-wrapper) .site-header,
body:has(.rhythms-page-wrapper) .elementor-location-header,
body:has(.rhythms-page-wrapper) .elementor-template-canvas .elementor-location-header,
body:has(.rhythms-page-wrapper) .site-header-wrapper,
body:has(.rhythms-page-wrapper):has(.simple-lms-course-header) header,
body:has(.rhythms-page-wrapper):has(.simple-lms-course-header) .site-header,
body:has(.rhythms-page-wrapper):has(.simple-lms-course-header) .elementor-location-header {
    display: none !important;
}

/* Masquer le footer sur la page des rythmes */
body:has(.rhythms-page-wrapper) footer,
body:has(.rhythms-page-wrapper) .site-footer,
body:has(.rhythms-page-wrapper) .elementor-location-footer,
body:has(.rhythms-page-wrapper) .elementor-template-canvas .elementor-location-footer {
    display: none !important;
}