/* ================================================================
   PAGE DETAILS DE COURS MATH-UNIVERSE — titre + boutons d'achat.
   (Les PRIX, eux, sont dans css/mu-prices.css : ils s'affichent
   partout — cartes, boutique, panier, dashboard —, alors que ce
   fichier ne concerne que la page d'un cours.)

   REGLES DU FICHIER :
   - Unites en px UNIQUEMENT (Histudy force html{font-size:10px}).
   - Charge a priorite 1001 : APRES le style.css du theme.
   - Animations sur transform/opacity/background-position uniquement.
   ================================================================ */

/* ----------------------------------------------------------------
   1. TITRE DU COURS (banniere breadcrumb) : le theme le met a 50px,
      demesure — taille raisonnable et fluide. Scope aux pages de
      cours et de packs uniquement (les autres pages gardent 50px).
   ---------------------------------------------------------------- */
.single-courses .rbt-breadcrumb-default .title,
.single-course-bundle .rbt-breadcrumb-default .title {
    font-size: clamp(26px, 4vw, 34px);
    line-height: 1.3;
}

/* ----------------------------------------------------------------
   2. BOUTON "AJOUTER AU PANIER" (Tutor) — bug du bouton blanc/vide.

   CAUSE (constatee dans le style.css du theme) : la regle
     .rbt-course-details-area .rbt-card-body a.tutor-btn.tutor-btn-outline-primary
       .tutor-btn-md.tutor-btn-block.product_type_simple.add_to_cart_button.ajax_add_to_cart
       { background: transparent !important; color: inherit !important }
   est en !important a une specificite (0,9,1). Le violet du bouton est
   peint via background-image ; cette regle le remet a transparent ->
   fond blanc, texte fonce invisible sur la carte blanche (cartes
   "cours connexes" en bas de la page cours ; s'aggrave au survol).
   C'est la SEULE regle transparente du theme en !important sans
   remplissage -> le bug n'existe que dans .rbt-course-details-area.

   CORRECTIF : on reimpose le degrade violet + texte blanc a une
   specificite SUPERIEURE (0,10,1, via .tutor-btn repete trois fois) —
   on bat donc la regle du theme par la specificite seule, sans
   dependre de l'ordre de chargement (robuste meme si un plugin de
   minification combine/reordonne les feuilles). var(--color-primary/
   secondary) suit la palette reelle du site (#501AA2 / #b966e7).
   ---------------------------------------------------------------- */
.rbt-course-details-area a.tutor-btn.tutor-btn.tutor-btn.tutor-btn-outline-primary.tutor-btn-md.tutor-btn-block.product_type_simple.add_to_cart_button.ajax_add_to_cart,
.rbt-course-details-area a.tutor-btn.tutor-btn.tutor-btn.tutor-btn-outline-primary.tutor-btn-md.tutor-btn-block.product_type_simple.add_to_cart_button.ajax_add_to_cart:hover,
.rbt-course-details-area a.tutor-btn.tutor-btn.tutor-btn.tutor-btn-outline-primary.tutor-btn-md.tutor-btn-block.product_type_simple.add_to_cart_button.ajax_add_to_cart:focus,
.rbt-course-details-area a.tutor-btn.tutor-btn.tutor-btn.tutor-btn-outline-primary.tutor-btn-md.tutor-btn-block.product_type_simple.add_to_cart_button.ajax_add_to_cart:active {
    background-image: linear-gradient(to right, var(--color-primary, #501aa2), var(--color-secondary, #b966e7), var(--color-secondary, #b966e7), var(--color-primary, #501aa2)) !important;
    background-size: 300% 100% !important;
    background-color: transparent !important;
    border-color: transparent !important;
    color: #fff !important;
}
/* Texte + icone blancs (le theme met color:inherit!important). */
.rbt-course-details-area a.tutor-btn.tutor-btn.tutor-btn.add_to_cart_button .cart-text,
.rbt-course-details-area a.tutor-btn.tutor-btn.tutor-btn.add_to_cart_button [class*="tutor-icon-"] {
    color: #fff !important;
}

/* CENTRAGE + TAILLE + ESPACE ICONE/TEXTE : selon le layout, le theme
   applique un padding vertical ASYMETRIQUE (ex. "12px 28px 0px") qui
   decentre le contenu. Flex parfaitement centre + gap de 8px entre
   l'icone et le texte. SELECTEUR COURT VOLONTAIREMENT : certains boutons
   n'ont pas les classes product_type_simple/ajax_add_to_cart (ex. bouton
   des visiteurs non connectes) — cette regle doit TOUS les couvrir,
   sinon l'icone se colle au texte (le gap manquait la ou la marge de
   l'icone etait annulee). */
.rbt-course-details-area a.tutor-btn.tutor-btn.tutor-btn.add_to_cart_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    min-height: 54px;
    line-height: 1.2 !important;
}
/* tutor-mr-8 pose margin-right:8px sur l'icone : on l'annule (l'espace
   icone/texte est desormais gere par le gap ci-dessus). */
.rbt-course-details-area a.tutor-btn.tutor-btn.tutor-btn.add_to_cart_button [class*="tutor-icon-"] {
    margin: 0 !important;
    line-height: 1 !important;
}

/* Brillance : overlay ::after independant (ne touche jamais au fond du
   bouton, donc n'interfere pas avec le remplissage ci-dessus).
   position:relative ancre l'overlay ; le theme pose deja
   overflow:hidden, la brillance reste clippee dans le bouton. */
a.add_to_cart_button.tutor-btn {
    position: relative;
    text-decoration: none;
}
a.add_to_cart_button.tutor-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.38) 50%, transparent 58%);
    transform: translateX(-140%);
    animation: mu-btn-shine 4.5s ease-in-out 2s infinite;
    pointer-events: none;
    z-index: 1;
}
@keyframes mu-btn-shine {
    0%        { transform: translateX(-140%); }
    20%, 100% { transform: translateX(140%); }
}

/* ----------------------------------------------------------------
   3. BOUTON "ACHETER MAINTENANT" : la fleche passait SOUS le texte.
      Cause : Bootstrap impose .d-block{display:block!important} sur le
      bouton, qui battait notre flex. On force donc inline-flex en
      !important. Selecteur sans .buy-now-btn : couvre aussi la barre
      sticky (course-details-card.php) ou le bouton n'a pas ce parent.
   ---------------------------------------------------------------- */
.rbt-btn.ajax-buy-now-product {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    line-height: 1.2;
}
.rbt-btn.ajax-buy-now-product .btn-text,
.rbt-btn.ajax-buy-now-product .btn-icon {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

/* ----------------------------------------------------------------
   3b. BARRE STICKY DU BAS : bouton "Acheter maintenant" mal centre.

   Le theme imprime le bouton dans <div class="buy-now-btn mt--15">, et
   sa classe utilitaire .mt--15 vaut `margin-top:15px!important`. Cette
   marge existe pour la CARTE LATERALE, ou le bouton doit degager celui
   d'"Ajouter au panier" place au-dessus. Dans la barre sticky, il n'y a
   rien au-dessus : les 15px deviennent du vide en HAUT uniquement.

   Resultat mesure : 25px au-dessus du bouton contre 10px en dessous.
   (La marge ne "remonte" pas hors du bloc parce que .rbt-single-list est
   un element flex, donc un contexte de formatage isole.)

   On neutralise donc cette marge UNIQUEMENT a l'interieur de la barre :
   la carte laterale, elle, en a legitimement besoin et n'est pas touchee.

   Effet secondaire bienvenu : la barre passe de 81px a 66px de haut. Le
   theme la range hors ecran a `bottom:-75px` - 81px depassaient donc de
   6px meme "cachee". Sous 75px, elle disparait vraiment.
   ---------------------------------------------------------------- */
.rbt-course-action-bottom .buy-now-btn.mt--15 {
    margin-top: 0 !important;
}

/* ----------------------------------------------------------------
   5. NAVIGATION ONEPAGE (Course Info / Lessons / Reviews) : jamais
      affichee — les sections s'empilent simplement sous la video.
   ---------------------------------------------------------------- */
.rbt-inner-onepage-navigation {
    display: none !important;
}

/* ----------------------------------------------------------------
   6. CONTENU DU COURS : accordeon TOUJOURS entierement ouvert.
      - display:block !important : bat l'inline style="display:none"
        que le JS du theme pose sur les sessions non actives ;
      - pointer-events:none sur l'en-tete : personne ne peut replier ;
      - le chevron +/- devient sans objet : masque.
   ---------------------------------------------------------------- */
.course-content .rbt-accordion-style .accordion-body {
    display: block !important;
    height: auto !important;
}
.course-content .rbt-accordion-style .accordion-button {
    pointer-events: none;
    cursor: default;
}
.course-content .rbt-accordion-style .accordion-button::after,
.course-content .rbt-accordion-style .accordion-button::before {
    display: none !important;
}

/* ----------------------------------------------------------------
   7. CONTENU DU COURS — habillage.
      Sessions en cartes arrondies a liseret degrade, seances
      aerees avec survol doux, duree en pastille, icones violettes.
   ---------------------------------------------------------------- */
.course-content .rbt-accordion-style .accordion-item.card {
    border: 1px solid #EDE9FE;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 18px;
    box-shadow: 0 6px 18px rgba(91, 11, 160, 0.06);
}
/* En-tete de session : bandeau clair + liseret degrade a gauche. */
.course-content .rbt-accordion-style .accordion-header {
    margin: 0;
}
.course-content .rbt-accordion-style .accordion-header .accordion-button {
    position: relative;
    width: 100%;
    text-align: inherit;
    padding: 16px 20px 16px 24px;
    font-size: 17px;
    font-weight: 700;
    color: #3b2b63;
    background: linear-gradient(90deg, #F6F2FF 0%, #FDFCFF 70%, #fff 100%);
    border: 0;
}
.course-content .rbt-accordion-style .accordion-header .accordion-button::-moz-focus-inner {
    border: 0;
}
.course-content .rbt-accordion-style .accordion-header {
    position: relative;
}
.course-content .rbt-accordion-style .accordion-header::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #8B5CF6, #5B0BA0);
    z-index: 1;
}
/* Corps : PLEINE LARGEUR du bloc.
   CAUSE RACINE (mesuree en production) : le theme pose display:flex sur
   .course-content, et son enfant unique .rbt-course-feature-inner, en
   flex-item par defaut (flex:0 1 auto), restait a sa largeur INTRINSEQUE
   (~336px) — la moitie du bloc restait vide, quel que soit le cours.
   On repasse la boite en flux normal ET on etire l'enfant (double
   verrou), puis on resserre paddings et retraits de liste. */
.course-content.rbt-shadow-box.coursecontent-wrapper {
    display: block !important;
    padding: 24px 20px !important;
}
.course-content .rbt-course-feature-inner {
    display: block;
    width: 100%;
    flex: 1 1 100%;
    min-width: 0;
}
.course-content .rbt-accordion-style .accordion-body.card-body {
    padding: 4px 10px 8px !important;
}
.course-content .tutor-accordion,
.course-content .rbt-accordion-style,
.course-content .rbt-accordion-style .accordion,
.course-content .rbt-accordion-style .accordion-item.card {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100%;
}
.course-content .rbt-course-main-content {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none;
}
.course-content .rbt-course-main-content li.tutor-course-content-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 8px;
    border-bottom: 1px dashed #EDE9FE;
    transition: background-color 160ms ease;
}
.course-content .rbt-course-main-content li.tutor-course-content-list-item:last-child {
    border-bottom: 0;
}
@media (hover: hover) and (pointer: fine) {
    .course-content .rbt-course-main-content li.tutor-course-content-list-item:hover {
        background-color: #FAF7FF;
    }
}
.course-content .tutor-course-content-list-item-title {
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
    min-width: 0;
}
/* Icones du theme (tutor-icon-* / feather-*) gardees telles quelles,
   mais A NOS COULEURS — !important : le theme les peint en encre foncee
   avec une regle plus specifique. */
.course-content .tutor-course-content-list-item [class*="tutor-icon-"],
.course-content .tutor-course-content-list-item [class*="feather-"],
.course-content .rbt-course-main-content li i {
    color: #6D28D9 !important;
    font-size: 17px;
    flex: none;
}
/* Colonne droite : duree en pastille + cadenas discret. */
.course-content .course-content-right {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: none;
    margin-left: auto;
}
.course-content .course-content-right .min-lables:not(:empty) {
    background: #F1EBFD;
    color: #5B0BA0;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.course-content .course-content-right .course-lock i {
    color: #A6A0B4;
    font-size: 15px;
}

/* Petits ecrans : la ligne s'empile proprement, pastille sous le titre. */
@media (max-width: 575px) {
    .course-content .rbt-accordion-style .accordion-header .accordion-button {
        font-size: 15.5px;
        padding: 14px 14px 14px 18px;
    }
    .course-content .rbt-course-main-content li.tutor-course-content-list-item {
        padding: 10px 4px;
    }
    .course-content .course-content-right {
        margin-left: 28px; /* aligne sous le titre, apres l'icone */
    }
}

/* ----------------------------------------------------------------
   8. ECRAN "VEUILLEZ VOUS INSCRIRE" (lecon sans acces, template Tutor
      permission-denied) : cette page garde desormais tout le CSS du
      site — mais le lien global du theme peignait le texte du bouton
      "Voir le cours" en rose sur fond violet. Bouton propre garanti,
      carte adoucie.
   ---------------------------------------------------------------- */
.tutor-page-permission-denied .tutor-card {
    border: 1px solid #EDE9FE;
    border-radius: 16px;
    box-shadow: 0 14px 40px rgba(91, 11, 160, 0.08);
}
.tutor-page-permission-denied .tutor-btn.tutor-btn-primary {
    display: inline-block;
    background: linear-gradient(90deg, #501AA2 0%, #8B5CF6 100%);
    border: 0;
    border-radius: 10px;
    padding: 13px 30px;
    font-size: 15px;
    font-weight: 600;
    color: #fff !important;
    text-decoration: none !important;
    transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
    .tutor-page-permission-denied .tutor-btn.tutor-btn-primary:hover {
        color: #fff !important;
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(80, 26, 162, 0.35);
    }
}
.tutor-page-permission-denied .tutor-btn.tutor-btn-primary:active {
    transform: scale(0.97);
}

/* ----------------------------------------------------------------
   4. ACCESSIBILITE — mouvement reduit : coupe le balayage du bouton.
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    a.add_to_cart_button.tutor-btn::after {
        animation: none !important;
        display: none;
    }
    .tutor-page-permission-denied .tutor-btn.tutor-btn-primary {
        transition-property: box-shadow;
        transform: none !important;
    }
}