/**
 * FORMA'RAIL Tutor Core — v1.0.4
 * Habillage du lecteur Tutor LMS Modern.
 * Sidebar personnalisée + barre supérieure FORMA'RAIL.
 */

:root {
    --formarail-orange: #ff8e22;
    --formarail-bg: #f3f4f5;
    --formarail-panel: #ffffff;
    --formarail-text: #252a31;
    --formarail-sidebar-bg: #26323d;

    --formarail-sidebar-image: url('https://elearning.forma-rail.com/wp-content/uploads/2026/09/image-sidebar.png');
    --formarail-header-image: url('https://elearning.forma-rail.com/wp-content/uploads/2026/09/image-barre-superieure.png');
    --formarail-logo: url('https://elearning.forma-rail.com/wp-content/uploads/2026/09/cropped-fond-transparent.png');
}


/* ==========================================================
   FOND GÉNÉRAL
   ========================================================== */

.tutor-learning-area-body {
    background: var(--formarail-bg) !important;
}


/* ==========================================================
   ZONE DE COURS
   ========================================================== */

.tutor-learning-area-content,
.tutor-learning-area-container {
    background: var(--formarail-bg) !important;
}

.tutor-learning-area-container > .tutor-lesson-content {
    background: #ffffff !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05) !important;
}

.tutor-learning-area-container .tutor-tabs-nav {
    background: #ffffff !important;
    border-radius: 10px 10px 0 0 !important;
}

.tutor-learning-area-container .tutor-tabs-content,
.tutor-learning-area-container .tutor-tab-panel {
    background: transparent !important;
}


/* ==========================================================
   SIDEBAR
   ========================================================== */

.tutor-learning-sidebar {
    background-color: var(--formarail-sidebar-bg) !important;

    background-image:
        linear-gradient(
            to bottom,
            rgba(38, 50, 61, 1) 0%,
            rgba(38, 50, 61, 0.98) 45%,
            rgba(38, 50, 61, 0.82) 68%,
            rgba(38, 50, 61, 0.45) 100%
        ),
        var(--formarail-sidebar-image) !important;

    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    background-size: cover !important;
}

.tutor-learning-sidebar-curriculum,
.tutor-learning-sidebar-pages {
    background: transparent !important;
}


/* ==========================================================
   TEXTE SIDEBAR
   ========================================================== */

.tutor-learning-sidebar,
.tutor-learning-sidebar a,
.tutor-learning-sidebar button,
.tutor-learning-sidebar .tutor-learning-header-title,
.tutor-learning-sidebar .tutor-learning-nav-header-title,
.tutor-learning-sidebar .tutor-learning-nav-item {
    color: #ffffff !important;
}

.tutor-learning-sidebar .tutor-learning-progress-text,
.tutor-learning-sidebar .tutor-learning-progress-text span {
    color: #ffffff !important;
}

.tutor-learning-sidebar .tutor-text-subdued,
.tutor-learning-sidebar .tutor-tiny-2 {
    color: rgba(255, 255, 255, 0.72) !important;
}


/* ==========================================================
   MODULES / LEÇONS
   ========================================================== */

.tutor-learning-sidebar .tutor-learning-nav-header:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #ffffff !important;
}

.tutor-learning-sidebar .tutor-learning-nav-header:hover * {
    color: #ffffff !important;
}

.tutor-learning-sidebar .tutor-learning-nav-item:not(.active):hover {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #ffffff !important;
}

.tutor-learning-sidebar .tutor-learning-nav-item:not(.active):hover * {
    color: #ffffff !important;
}

.tutor-learning-sidebar .tutor-learning-nav-item.active {
    background: rgba(255, 255, 255, 0.96) !important;
    color: var(--formarail-text) !important;
    border-radius: 6px !important;
}

.tutor-learning-sidebar .tutor-learning-nav-item.active,
.tutor-learning-sidebar .tutor-learning-nav-item.active * {
    color: var(--formarail-text) !important;
}


/* ==========================================================
   BARRE DE PROGRESSION
   ========================================================== */

.tutor-learning-sidebar .tutor-progress-bar {
    background: rgba(255, 255, 255, 0.28) !important;
}

.tutor-learning-sidebar .tutor-progress-bar-fill {
    background: var(--formarail-orange) !important;
}


/* ==========================================================
   ACCENTS FORMA'RAIL
   ========================================================== */

.tutor-learning-area-body .tutor-color-primary,
.tutor-learning-area-body .tutor-nav-link.is-active,
.tutor-learning-area-body .tutor-nav-link.active {
    color: var(--formarail-orange) !important;
}


/* ==========================================================
   BARRE SUPÉRIEURE FORMA'RAIL
   ========================================================== */

.tutor-learning-header {
    background: #ffffff !important;
    border-bottom: 2px solid var(--formarail-orange) !important;
}

.tutor-learning-header-content {
    position: relative !important;
    background: #ffffff !important;
    overflow: hidden !important;
    min-height: 76px !important;
}

/* ==========================================================
   IMAGE DÉCORATIVE À DROITE
   ========================================================== */

.tutor-learning-header-content::after {
    content: "";
    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;

    width: 34%;

    background-image: var(--formarail-header-image);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;

    z-index: 1;
    pointer-events: none;
}


/* ==========================================================
   BOUTON RETOUR
   ========================================================== */

.tutor-learning-header-back {
    position: relative !important;
    z-index: 4 !important;

    align-self: stretch !important;

    display: flex !important;
    align-items: center !important;

    padding-left: 12px !important;
    padding-right: 12px !important;

    background: #ffffff !important;
    border-right: 1px solid #e2e4e7 !important;
}

.tutor-learning-header-back .tutor-btn {
    background: #ffffff !important;
    border: 1px solid rgba(255, 142, 34, 0.80) !important;
    color: var(--formarail-orange) !important;
    border-radius: 8px !important;
}

.tutor-learning-header-back .tutor-btn svg path {
    stroke: var(--formarail-orange) !important;
}

.tutor-learning-header-back .tutor-btn:hover {
    background: var(--formarail-orange) !important;
    border-color: var(--formarail-orange) !important;
}

.tutor-learning-header-back .tutor-btn:hover svg path {
    stroke: #ffffff !important;
}


/* ==========================================================
   TITRE DU COURS / LEÇON
   ========================================================== */

.tutor-learning-header-title {
    position: relative !important;
    z-index: 3 !important;
    color: var(--formarail-text) !important;
    margin-left: 18px !important;
    padding-left: 0 !important;
    padding-right: 20px !important;
    font-weight: 700 !important;
    max-width: 58% !important;
}

.tutor-learning-header-title span {
    color: var(--formarail-text) !important;
}


/* ==========================================================
   CROIX MOBILE / FERMETURE SIDEBAR
   ========================================================== */

/*
 * Bouton natif Tutor :
 * @click.stop="$dispatch('toggle-sidebar')"
 */

.tutor-learning-sidebar button[aria-label="Close course sidebar"] {
    color: var(--formarail-orange) !important;
    background: transparent !important;
    border: 1px solid rgba(255, 142, 34, 0.55) !important;
    border-radius: 8px !important;
}

.tutor-learning-sidebar button[aria-label="Close course sidebar"] svg,
.tutor-learning-sidebar button[aria-label="Close course sidebar"] svg path {
    color: var(--formarail-orange) !important;
    fill: var(--formarail-orange) !important;
    stroke: var(--formarail-orange) !important;
}

.tutor-learning-sidebar button[aria-label="Close course sidebar"]:hover {
    background: var(--formarail-orange) !important;
    border-color: var(--formarail-orange) !important;
}

.tutor-learning-sidebar button[aria-label="Close course sidebar"]:hover svg,
.tutor-learning-sidebar button[aria-label="Close course sidebar"]:hover svg path {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}


/* ==========================================================
   TABLETTE
   ========================================================== */

@media (max-width: 1024px) {

    .tutor-learning-sidebar {
        background-size: cover !important;
        background-position: center bottom !important;
    }

    .tutor-learning-header-content::before {
        left: 70px;
        width: 115px;
        height: 48px;
    }

    .tutor-learning-header-content::after {
        width: 30%;
    }

    .tutor-learning-header-title {
        margin-left: 130px !important;
        max-width: 45% !important;
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

    .tutor-learning-sidebar {
        background-position: center bottom !important;
        background-size: cover !important;
    }

    .tutor-learning-header-content {
        min-height: 58px !important;
    }

    /*
     * On retire le grand décor orange à droite sur mobile.
     */
    .tutor-learning-header-content::after {
        display: none !important;
    }

    /*
     * Logo plus petit.
     */
    .tutor-learning-header-content::before {
        left: 61px;
        width: 78px;
        height: 38px;
    }

    .tutor-learning-header-back {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .tutor-learning-header-title {
        margin-left: 82px !important;

        padding-left: 8px !important;
        padding-right: 8px !important;

        max-width: calc(100% - 150px) !important;

        font-size: 14px !important;
    }

    .tutor-learning-header-title span {
        color: var(--formarail-text) !important;
    }

    .tutor-learning-area-container > .tutor-lesson-content {
        background: #ffffff !important;
        border-radius: 8px !important;
        box-shadow: none !important;
    }

    /*
     * Croix mobile légèrement plus compacte.
     */
    .tutor-learning-sidebar button[aria-label="Close course sidebar"] {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        padding: 0 !important;
    }
}
/* ==========================================================
   ESPACE SOUS LA BARRE SUPÉRIEURE
   ========================================================== */

.tutor-learning-area-container .tutor-tabs-nav {
    margin-top: 18px !important;
}
@media (max-width: 767px) {

    .tutor-learning-area-container .tutor-tabs-nav {
        margin-top: 10px !important;
    }

    .tutor-learning-header-title {
        margin-left: 8px !important;
        max-width: calc(100% - 80px) !important;
    }
}
/* ==========================================================
   ESPACEMENT HAUT SIDEBAR — DESKTOP
   ========================================================== */

@media (min-width: 768px) {
    .tutor-learning-sidebar-curriculum {
        padding-top: 18px !important;
    }
}
/* ==========================================================
   MENU "PLUS" — COULEURS + SURVOL
   ========================================================== */

/* Liens du menu Plus */
.tutor-learning-sidebar .tutor-learning-pages-item {
    color: #252a31 !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* Icônes */
.tutor-learning-sidebar .tutor-learning-pages-item svg {
    color: #252a31 !important;
}

/* SURVOL : fond orange très léger + texte orange */
.tutor-learning-sidebar .tutor-learning-pages-item:hover {
    background: rgba(255, 142, 34, 0.12) !important;
    color: #ff8e22 !important;
}

/* Icônes orange au survol */
.tutor-learning-sidebar .tutor-learning-pages-item:hover svg,
.tutor-learning-sidebar .tutor-learning-pages-item:hover * {
    color: #ff8e22 !important;
}

/* Page actuellement sélectionnée */
.tutor-learning-sidebar .tutor-learning-pages-item.active,
.tutor-learning-sidebar .tutor-learning-pages-item.is-active {
    background: rgba(255, 142, 34, 0.12) !important;
    color: #ff8e22 !important;
}

.tutor-learning-sidebar .tutor-learning-pages-item.active *,
.tutor-learning-sidebar .tutor-learning-pages-item.is-active * {
    color: #ff8e22 !important;
}
/* ==========================================================
   BOUTON "PLUS" — SIDEBAR
   ========================================================== */

/* Bouton Plus visible sur fond sombre */
.tutor-learning-sidebar-pages > .tutor-learning-pages
.tutor-btn.tutor-learning-pages-item {
    color: #ffffff !important;
    background: transparent !important;
}

/* Icône des trois points */
.tutor-learning-sidebar-pages > .tutor-learning-pages
.tutor-btn.tutor-learning-pages-item svg,
.tutor-learning-sidebar-pages > .tutor-learning-pages
.tutor-btn.tutor-learning-pages-item svg path {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Survol du bouton Plus */
.tutor-learning-sidebar-pages > .tutor-learning-pages
.tutor-btn.tutor-learning-pages-item:hover {
    color: var(--formarail-orange) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.tutor-learning-sidebar-pages > .tutor-learning-pages
.tutor-btn.tutor-learning-pages-item:hover svg,
.tutor-learning-sidebar-pages > .tutor-learning-pages
.tutor-btn.tutor-learning-pages-item:hover svg path {
    color: var(--formarail-orange) !important;
    fill: var(--formarail-orange) !important;
}


/* ==========================================================
   LIENS À L'INTÉRIEUR DU MENU "PLUS"
   ========================================================== */

.tutor-popover-body .tutor-learning-pages-item {
    color: var(--formarail-text) !important;
}

.tutor-popover-body .tutor-learning-pages-item svg {
    color: var(--formarail-text) !important;
}

.tutor-popover-body .tutor-learning-pages-item:hover {
    background: rgba(255, 142, 34, 0.12) !important;
    color: var(--formarail-orange) !important;
}

.tutor-popover-body .tutor-learning-pages-item:hover *,
.tutor-popover-body .tutor-learning-pages-item:hover svg {
    color: var(--formarail-orange) !important;
}
/* ==========================================================
   BOUTON SUIVANT — FORMA'RAIL
   ========================================================== */

.tutor-learning-area-footer .tutor-btn:last-child {
    background: var(--formarail-orange) !important;
    color: #ffffff !important;
    border-radius: 7px !important;
    padding: 10px 18px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

/* Flèche blanche */
.tutor-learning-area-footer .tutor-btn:last-child svg,
.tutor-learning-area-footer .tutor-btn:last-child svg path {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* Survol */
.tutor-learning-area-footer .tutor-btn:last-child:hover {
    background: #e9780d !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* Garde la flèche blanche au survol */
.tutor-learning-area-footer .tutor-btn:last-child:hover svg path {
    stroke: #ffffff !important;
}
/* ==========================================================
   BOUTON PRÉCÉDENT — FORMA'RAIL
   ========================================================== */

.tutor-learning-area-footer .tutor-btn:first-child:not(.disabled) {
    background: var(--formarail-orange) !important;
    color: #ffffff !important;
    border-radius: 7px !important;
    padding: 10px 18px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.tutor-learning-area-footer .tutor-btn:first-child:not(.disabled) svg path {
    stroke: #ffffff !important;
}

.tutor-learning-area-footer .tutor-btn:first-child:not(.disabled):hover {
    background: #e9780d !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.tutor-learning-area-footer .tutor-btn:first-child:not(.disabled):hover svg path {
    stroke: #ffffff !important;
}

/* Précédent désactivé */
.tutor-learning-area-footer .tutor-btn:first-child.disabled {
    background: #e5e7e9 !important;
    color: #8a9097 !important;
    border-radius: 7px !important;
    padding: 10px 18px !important;
    opacity: 1 !important;
}

.tutor-learning-area-footer .tutor-btn:first-child.disabled svg path {
    stroke: #8a9097 !important;
}