/* ================================================================
   FAVORIS — NEUTRALISATION DE LA FENETRE MODALE + NOTIFICATION
   ----------------------------------------------------------------
   Voir inc/tutor-favorites.php pour le raisonnement complet.
   ================================================================ */


/* ================================================================
   1. LA FENETRE DE CONNEXION N'EST PLUS UTILISEE
   ----------------------------------------------------------------
   Cinq gabarits l'impriment (footer.php et 404.php du theme parent,
   course-entry-box / single-course / archive-course de Rainbow
   Elements). On ne peut pas les en empecher sans les modifier — ce
   qu'on s'interdit, puisqu'une mise a jour effacerait la retouche.
   On la neutralise donc ici, une bonne fois, pour toutes les pages.

   Ce n'est PAS un simple masquage cosmetique : tout ce qui l'ouvrait
   redirige desormais vers la vraie page de connexion (voir
   js/mu-favorites.js). Aucun clic ne reste sans effet.

   ATTENTION : ne cible que `.tutor-modal.tutor-login-modal`. La page
   /dashboard/ rend son PROPRE formulaire de connexion en pleine page
   (#tutor-login-form, hors de toute modale) : il ne doit surtout pas
   etre touche.
   ================================================================ */
.tutor-modal.tutor-login-modal {
    display: none !important;
}


/* ================================================================
   2. NOTIFICATION (bas / droite)
   ----------------------------------------------------------------
   Reproduit l'apparence des notifications de Tutor 4 — mais avec
   notre propre code, pour deux raisons :
     - le site sert DEUX systemes de notification differents selon la
       page (l'ancien `tutor.js` sur l'accueil, le nouveau `TutorCore`
       sur le tableau de bord) ; la notre est identique partout ;
     - il nous faut un lien cliquable a l'interieur, ce que leur API
       n'accepte pas.
   ================================================================ */
.mu-toast-root {
    position: fixed;
    right: 20px;
    bottom: var(--mu-toast-bottom, 20px);
    z-index: 100050; /* au-dessus des notifications de Tutor (100000) */
    width: min(340px, calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    /* La zone elle-meme ne doit pas intercepter les clics de la page. */
    pointer-events: none;
    /* Volontairement SANS transition sur `bottom` : la position est calculee
       en JavaScript juste avant l'apparition, et une transition la ferait
       partir de la valeur de repli (20px) pour remonter — la notification
       glisserait vers le haut en meme temps qu'elle apparait. Elle se place
       donc d'emblee au bon endroit. */
}

/* ----------------------------------------------------------------
   POURQUOI TOUS LES SELECTEURS CI-DESSOUS SONT PREFIXES

   Le kit global Elementor (`uploads/elementor/css/post-1690.css`)
   repeint **tous** les boutons et **tous** les liens du site :

     .elementor-kit-1690 button,
     .elementor-kit-1690 input[type="button"], ...
        { background-color: var(--e-global-color-accent);   ← #F24080
          color: ...; padding: 16px 28px; border-radius: 25px;
          border-style/width; font-family/size/weight/line-height }

     .elementor-kit-1690 a { color: var(--e-global-color-primary); }  ← #F24080

   La classe `elementor-kit-1690` est posee sur <body> : ces regles
   touchent donc n'importe quel bouton ou lien de la page, meme sans
   la moindre classe. Verifie : un <button> vierge injecte dans la
   page ressort en #F24080, padding 16px 28px, rayon 25px.

   Leur specificite est (0,1,1) — une classe + un element. Nos regles
   d'origine, en (0,1,0), PERDAIENT : le bouton de fermeture de la
   notification s'affichait en gros rectangle rose, et le lien
   « Voir mes favoris » en rose lui aussi (contraste mesure 3,6:1).

   On prefixe donc par `.mu-toast-root .mu-toast`, ce qui porte les
   selecteurs a (0,2,0) / (0,3,0) — au-dessus de (0,1,1) quel que soit
   l'ordre de chargement. Le `!important` n'est ajoute que sur les
   proprietes reellement disputees, listees ci-dessus.

   ⚠️ Ne pas raccourcir ces selecteurs : c'est leur longueur qui les
   fait gagner. Et ne pas se fier a l'apparence sur /dashboard/ : le
   CSS d'Elementor y est retire (voir Piege n°1), le bouton y semblait
   donc correct alors qu'il etait rose partout ailleurs.
   ---------------------------------------------------------------- */

.mu-toast,
.mu-toast * {
    box-sizing: border-box;
}

.mu-toast-root .mu-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 12px 13px 14px;
    background: #fff;
    border: 1px solid #e3e5ea;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(17, 24, 39, .16), 0 2px 6px rgba(17, 24, 39, .06);
    font-family: inherit;
    text-align: left;
    opacity: 0;
    transform: translateY(14px) scale(.98);
    transition: opacity .26s ease, transform .26s cubic-bezier(.22, 1, .36, 1);
}

.mu-toast-root .mu-toast--in  { opacity: 1; transform: none; }
.mu-toast-root .mu-toast--out { opacity: 0; transform: translateY(8px) scale(.99); }

.mu-toast-root .mu-toast .mu-toast-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mu-toast-root .mu-toast .mu-toast-body {
    flex: 1 1 auto;
    min-width: 0;
}

/* Les paragraphes heritent sinon la marge basse globale du theme. */
.mu-toast-root .mu-toast .mu-toast-title,
.mu-toast-root .mu-toast .mu-toast-text {
    margin: 0;
    padding: 0;
}

.mu-toast-root .mu-toast .mu-toast-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

.mu-toast-root .mu-toast .mu-toast-text {
    margin-top: 3px;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.45;
    color: #333741;
}

/* Teintes relevees sur les notifications de Tutor 4 elles-memes. */
.mu-toast-root .mu-toast[data-type="success"] .mu-toast-title { color: #1c7731; }
.mu-toast-root .mu-toast[data-type="success"] .mu-toast-icon {
    color: #1c7731;
    background: #e9f6ec;
    border-color: #bfe2c8;
}

.mu-toast-root .mu-toast[data-type="error"] .mu-toast-title { color: #c62828; }
.mu-toast-root .mu-toast[data-type="error"] .mu-toast-icon {
    color: #c62828;
    background: #fdeceb;
    border-color: #f4c6c3;
}

/* ---- Lien "Voir mes favoris" ---------------------------------- */
/* Couleur : la variable de marque de Tutor (`--tutor-color-primary`,
   #501AA2 sur ce site) et non le rose impose par Elementor. En passant
   par la variable, le lien suivra si la couleur de marque change.
   Le soulignement est dessine par `text-decoration` et non par une
   bordure : on peut ainsi ajouter du rembourrage vertical — necessaire
   pour une cible tactile confortable — sans eloigner le trait du texte. */
.mu-toast-root .mu-toast .mu-toast-link {
    display: inline-block;
    margin-top: 3px;
    padding: 6px 0 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: var(--tutor-color-primary, #501AA2) !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    transition: opacity .18s ease;
}

.mu-toast-root .mu-toast .mu-toast-link:hover,
.mu-toast-root .mu-toast .mu-toast-link:focus {
    color: var(--tutor-color-primary, #501AA2) !important;
    background: none !important;
    opacity: .72;
}

/* Le theme dessine un soulignement fantome en ::after sur ses liens :
   il apparaitrait ici comme un trait flottant. */
.mu-toast-root .mu-toast .mu-toast-link::before,
.mu-toast-root .mu-toast .mu-toast-link::after {
    content: none !important;
    display: none !important;
}

/* ---- Bouton de fermeture -------------------------------------- */
/* Gris neutre sur fond transparent, comme le `.tutor-toast-close` de
   Tutor. Chaque `!important` repond a une declaration precise du kit
   Elementor citee en tete de section — aucun n'est pose par confort. */
.mu-toast-root .mu-toast .mu-toast-close {
    flex: 0 0 auto;
    width: 28px !important;
    height: 28px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    background-image: none !important;
    /* #8b929f : 3,13:1 sur blanc. Le gris plus clair essaye d'abord
       (#9aa1ad) ne donnait que 2,60:1, sous le minimum de 3:1 exige pour
       une icone d'interface (WCAG 1.4.11). */
    color: var(--tutor-icon-idle, #8b929f) !important;
    font-size: 0 !important;      /* aucun texte : evite d'imposer une hauteur de ligne */
    line-height: 1 !important;
    box-shadow: none !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .18s ease, background-color .18s ease;
}

.mu-toast-root .mu-toast .mu-toast-close:hover,
.mu-toast-root .mu-toast .mu-toast-close:focus-visible {
    color: #333741 !important;
    background: rgba(17, 24, 39, .06) !important;
}

.mu-toast-root .mu-toast .mu-toast-close:focus-visible {
    outline: 2px solid var(--tutor-color-primary, #501AA2);
    outline-offset: 1px;
}

/* Le SVG doit garder sa taille : `font-size: 0` ci-dessus ne doit pas
   la reduire (les dimensions sont en attributs, mais on securise). */
.mu-toast-root .mu-toast .mu-toast-close svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* ---- Mobile : pleine largeur, marges egales ------------------- */
@media (max-width: 575.98px) {
    .mu-toast-root {
        left: 12px;
        right: 12px;
        width: auto;
    }
}

/* ---- Sens de lecture arabe ------------------------------------ */
body.rtl .mu-toast-root,
[dir="rtl"] .mu-toast-root {
    right: auto;
    left: 20px;
}

body.rtl .mu-toast,
[dir="rtl"] .mu-toast {
    text-align: right;
}

@media (max-width: 575.98px) {
    body.rtl .mu-toast-root,
    [dir="rtl"] .mu-toast-root {
        left: 12px;
        right: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mu-toast,
    .mu-toast-link,
    .mu-toast-close {
        transition: none !important;
    }
    .mu-toast { transform: none !important; }
}


/* ================================================================
   2 bis. PAGE « LISTE DE SOUHAITS » : RETRAIT + CONFIRMATION
   ----------------------------------------------------------------
   Le gabarit de Tutor n'offre aucun moyen de retirer un cours de la
   liste. On ajoute un bouton coeur en haut a droite de la vignette —
   meme convention que partout ailleurs sur le site — et, parce que
   l'action fait disparaitre la carte, une fenetre de confirmation.

   La fenetre reprend les valeurs EXACTES relevees dans
   `tutor-core.min.css` (`.tutor-modal*`) : fond `rgba(0,0,0,.6)` avec
   `backdrop-filter: blur(20px)`, carte de 500px max, rayon 16px.
   On les recopie plutot que d'utiliser leurs classes, pour la meme
   raison que la notification : ne dependre de rien.
   ================================================================ */

.tutor-course-card.mu-fav-card {
    /* Ancre le bouton, que Tutor ait deja positionne la carte ou non. */
    position: relative;
    transition: opacity .25s ease, transform .25s ease;
}

.tutor-course-card.mu-fav-card--leaving {
    opacity: 0;
    transform: scale(.96);
    pointer-events: none;
}

.mu-fav-card .mu-fav-remove {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    z-index: 2;
    width: 36px !important;
    height: 36px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .92) !important;
    background-image: none !important;
    color: #d33a5b !important;
    font-size: 0 !important;
    line-height: 1 !important;
    box-shadow: 0 2px 8px rgba(17, 24, 39, .18) !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .18s ease, background-color .18s ease, color .18s ease;
}

.mu-fav-card .mu-fav-remove:hover,
.mu-fav-card .mu-fav-remove:focus-visible {
    background: #d33a5b !important;
    color: #fff !important;
    transform: scale(1.08);
}

.mu-fav-card .mu-fav-remove:focus-visible {
    outline: 2px solid var(--tutor-color-primary, #501AA2);
    outline-offset: 2px;
}

.mu-fav-card .mu-fav-remove.is-loading {
    pointer-events: none;
    opacity: .6;
}

/* ---- Fenetre de confirmation ---------------------------------- */
.mu-modal {
    position: fixed;
    inset: 0;
    z-index: 100060;   /* au-dessus de la notification (100050) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    transition: opacity .2s ease;
    /* Pendant les 220 ms de fermeture, la fenetre reste dans le document le
       temps du fondu : sans ceci, elle continuerait d'intercepter les clics
       alors qu'elle est deja invisible. */
    pointer-events: none;
}

.mu-modal.mu-modal--in {
    opacity: 1;
    pointer-events: auto;
}

.mu-modal-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, .6);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.mu-modal-card {
    position: relative;
    width: 100%;
    max-width: 500px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 8px -4px rgba(16, 24, 40, .03), 0 20px 24px -4px rgba(16, 24, 40, .08);
    transform: translateY(10px) scale(.98);
    transition: transform .22s cubic-bezier(.22, 1, .36, 1);
}

.mu-modal--in .mu-modal-card { transform: none; }

.mu-modal-card,
.mu-modal-card * { box-sizing: border-box; }

.mu-modal-head { padding: 22px 22px 4px; }

.mu-modal-card .mu-modal-title {
    margin: 0 34px 0 0;   /* place pour la croix */
    padding: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.45;
    color: #101828;
}

.mu-modal-card .mu-modal-text {
    margin: 8px 0 0;
    padding: 0;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.55;
    color: #475467;
}

.mu-modal-foot {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 18px 22px 20px;
}

/* Boutons : meme neutralisation que pour la notification (le kit
   Elementor repeint tous les <button> du site — voir plus haut). */
.mu-modal-card .mu-modal-btn {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 10px 18px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background-image: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.mu-modal-card .mu-modal-btn--ghost {
    background: #fff !important;
    border-color: #d0d5dd !important;
    color: #344054 !important;
}

.mu-modal-card .mu-modal-btn--ghost:hover,
.mu-modal-card .mu-modal-btn--ghost:focus-visible {
    background: #f4f5f7 !important;
    color: #101828 !important;
}

.mu-modal-card .mu-modal-btn--danger {
    background: #c62828 !important;
    border-color: #c62828 !important;
    color: #fff !important;
}

.mu-modal-card .mu-modal-btn--danger:hover,
.mu-modal-card .mu-modal-btn--danger:focus-visible {
    background: #a71f1f !important;
    border-color: #a71f1f !important;
    color: #fff !important;
}

.mu-modal-card .mu-modal-btn:focus-visible {
    outline: 2px solid var(--tutor-color-primary, #501AA2);
    outline-offset: 2px;
}

.mu-modal-card .mu-modal-x {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    width: 32px !important;
    height: 32px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    background-image: none !important;
    color: #8b929f !important;
    font-size: 0 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .18s ease, background-color .18s ease;
}

.mu-modal-card .mu-modal-x:hover,
.mu-modal-card .mu-modal-x:focus-visible {
    color: #101828 !important;
    background: rgba(17, 24, 39, .06) !important;
}

.mu-modal-card .mu-modal-x svg { width: 16px; height: 16px; display: block; }

@media (max-width: 575.98px) {
    .mu-modal-foot { flex-direction: column-reverse; align-items: stretch; }
    .mu-modal-card .mu-modal-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .mu-modal,
    .mu-modal-card,
    .tutor-course-card.mu-fav-card,
    .mu-fav-card .mu-fav-remove {
        transition: none !important;
    }
    .mu-modal-card { transform: none !important; }
    .mu-fav-card .mu-fav-remove:hover { transform: none; }
}


/* ================================================================
   3. BOUTON FAVORI : MARQUE-PAGE  ->  COEUR
   ----------------------------------------------------------------
   Deplace depuis css/custom-buttons.css le 31/07/2026 : cette
   feuille-ci est autorisee sur les ecrans Tutor (liste blanche de
   mu_pure_tutor_app_styles), l'autre non. Les coeurs restaient donc
   des marque-pages sur /dashboard/wishlist/ — precisement la page ou
   ils comptent le plus.

   ON NE TOUCHE AUCUN GABARIT : le bouton est genere par Tutor et par
   Rainbow Elements, et leur JavaScript bascule entre deux classes
   pour signaler l'etat :
       tutor-icon-bookmark-line  = pas en favori
       tutor-icon-bookmark-bold  = en favori
   On se contente donc de remplacer le GLYPHE dessine par chacune de
   ces deux classes, uniquement a l'interieur du bouton favori.

   POURQUOI DEUX POLICES
   Un coeur vide ET un coeur plein sont necessaires pour distinguer
   les deux etats. Or la police Feather du theme n'a qu'un coeur
   CONTOUR, et celle de Tutor qu'un coeur PLEIN. On prend donc le
   contour chez Feather (police du theme, chargee sur tout le site)
   et le plein chez Tutor (toujours presente la ou ce bouton existe).
   Les tailles sont ajustees pour que les deux etats paraissent
   identiques.

   `.save-bookmark-btn` est indispensable : c'est la classe que porte
   le coeur des listes de cours quand le visiteur n'est PAS connecte
   (Tutor y remplace `tutor-course-wishlist-btn`). Sans elle, un
   visiteur non connecte voyait encore un marque-page.
   ================================================================ */
.tutor-course-wishlist-btn i[class*="tutor-icon-bookmark"],
.save-bookmark-btn i[class*="tutor-icon-bookmark"] {
    line-height: 1;
    /* La bascule vide/plein doit se sentir, sans etre tape-a-l'oeil. */
    transition: transform .18s ease, color .18s ease;
}

/* La marge droite de l'icone n'a de sens que si un libelle la suit.
   Les memes classes servent aux DEUX cas : sur une carte le bouton ne
   contient que l'icone, sur la page d'un cours il affiche en plus le texte
   « Liste de souhaits ». Impossible de les distinguer en CSS seul : c'est
   donc le script qui marque les boutons sans libelle (`mu-fav-icon-only`).
   Si le script ne tourne pas, les marges d'origine sont conservees — aucune
   degradation. */
.tutor-course-wishlist-btn.mu-fav-icon-only i[class*="tutor-icon-bookmark"],
.save-bookmark-btn.mu-fav-icon-only i[class*="tutor-icon-bookmark"] {
    margin: 0 !important;
}

/* Etat "pas en favori" : coeur CONTOUR (police Feather du theme). */
.tutor-course-wishlist-btn i.tutor-icon-bookmark-line::before,
.save-bookmark-btn i.tutor-icon-bookmark-line::before {
    font-family: 'Feather' !important;
    content: "\e977" !important;   /* feather-heart */
    font-size: 1.05em;
}

/* Etat "en favori" : coeur PLEIN (police Tutor). */
.tutor-course-wishlist-btn i.tutor-icon-bookmark-bold::before,
.save-bookmark-btn i.tutor-icon-bookmark-bold::before {
    font-family: 'tutor' !important;
    content: "\e98f" !important;   /* tutor-icon-heart-bold */
    font-size: 1em;
}

/* Petit battement au moment ou le cours est ajoute aux favoris. */
.tutor-course-wishlist-btn i.tutor-icon-bookmark-bold,
.save-bookmark-btn i.tutor-icon-bookmark-bold {
    animation: mu-heart-pop .32s ease;
}

@keyframes mu-heart-pop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.28); }
    100% { transform: scale(1); }
}

.tutor-course-wishlist-btn:hover i[class*="tutor-icon-bookmark"],
.save-bookmark-btn:hover i[class*="tutor-icon-bookmark"] {
    transform: scale(1.12);
}

/* Pendant l'aller-retour avec le serveur : le clic ne doit pas partir
   deux fois, et l'attente doit se voir. */
.tutor-course-wishlist-btn.is-loading,
.save-bookmark-btn.is-loading {
    pointer-events: none;
    opacity: .55;
}

@media (prefers-reduced-motion: reduce) {
    .tutor-course-wishlist-btn i[class*="tutor-icon-bookmark"],
    .save-bookmark-btn i[class*="tutor-icon-bookmark"] {
        transition-property: color;
        animation: none !important;
    }
    .tutor-course-wishlist-btn:hover i[class*="tutor-icon-bookmark"],
    .save-bookmark-btn:hover i[class*="tutor-icon-bookmark"] {
        transform: none;
    }
}
