/* ============================================================
   MATH-UNIVERSE — DESIGN SYSTEM DES PAGES D'AUTHENTIFICATION v2
   Connexion (/dashboard/ deconnecte, [tutor_login]),
   Inscription (/register/), Mot de passe oublie / reinitialisation.

   Palette de marque (3-4 couleurs + blanc, jamais plus) :
     violet        #8943F3   (primaire)
     violet fonce  #501AA2 / fond profond #41246D
     rose          #F24080   (fin de degrade CTA)
     orange        #FF9616   (accent : divider, focus)

   NB : Histudy fixe html{font-size:10px} -> tout en px, jamais de rem.
   Polices Tajawal + Mulish : handle 'mu-auth-fonts' (functions.php).
   JS (toggles mot de passe + bouton Facebook) : js/auth-pages.js.
   ============================================================ */

:root {
    --mu-purple: #8943F3;
    --mu-purple-dark: #501AA2;
    --mu-deep: #41246D;
    --mu-pink: #F24080;
    --mu-orange: #FF9616;
    --mu-ink: #33254E;
    --mu-muted: #8A7FA8;
    --mu-line: #E9E2F8;
}

/* ------------------------------------------------------------
   0. KEYFRAMES
   ------------------------------------------------------------ */
@keyframes muKenBurns {
    0%   { transform: scale(1) translate(0, 0); }
    50%  { transform: scale(1.1) translate(-1.5%, 1.5%); }
    100% { transform: scale(1) translate(0, 0); }
}

@keyframes muKenFade {
    0%, 42%  { opacity: 0; }
    50%, 92% { opacity: 1; }
    100%     { opacity: 0; }
}

@keyframes muCardIn {
    from { opacity: 0; transform: translateY(26px) scale(.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

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

@keyframes muFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

@keyframes muBlob1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(40px, 30px) scale(1.15); }
}

@keyframes muBlob2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-50px, -25px) scale(1.1); }
}

@keyframes muBlob3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(25px, -40px) scale(1.2); }
}

/* ------------------------------------------------------------
   1. PAGE / FOND — diaporama Ken Burns (comme /register/) + overlay violet
   ------------------------------------------------------------ */
.mu-auth-page {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 70px 20px 90px;
    min-height: calc(100vh - 120px);
    background-color: var(--mu-deep);
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.mu-auth-page::before,
.mu-auth-page::after {
    content: "";
    position: absolute;
    inset: -4%;
    z-index: 0;
    background-size: cover;
    background-position: center;
    pointer-events: none;
}

.mu-auth-page::before {
    background-image:
        linear-gradient(160deg, rgba(65, 36, 109, 0.9) 0%, rgba(80, 26, 162, 0.8) 55%, rgba(47, 22, 84, 0.92) 100%),
        url('/wp-content/uploads/2023/02/lilartsy-333oj7zFsdg-unsplash.jpg');
    animation: muKenBurns 30s ease-in-out infinite;
}

.mu-auth-page::after {
    background-image:
        linear-gradient(160deg, rgba(65, 36, 109, 0.9) 0%, rgba(80, 26, 162, 0.8) 55%, rgba(47, 22, 84, 0.92) 100%),
        url('/wp-content/uploads/2023/02/kelly-sikkema-ElF7K4IWcGQ-unsplash.jpg');
    opacity: 0;
    animation: muKenBurns 30s ease-in-out infinite, muKenFade 30s ease-in-out infinite;
}

/* variante rendue entre le header et le footer du theme */
.mu-auth-page.mu-auth-page-embedded {
    min-height: 0;
    padding: 54px 20px 74px;
}

/* blobs de couleur flottants (elements en mouvement) */
.mu-auth-blobs { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.mu-auth-blobs span {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(64px);
    will-change: transform;
}

.mu-auth-blobs span:nth-child(1) {
    width: 340px; height: 340px;
    left: -120px; top: -80px;
    background: var(--mu-purple);
    opacity: .5;
    animation: muBlob1 16s ease-in-out infinite;
}

.mu-auth-blobs span:nth-child(2) {
    width: 280px; height: 280px;
    right: -90px; bottom: 8%;
    background: var(--mu-pink);
    opacity: .38;
    animation: muBlob2 20s ease-in-out infinite;
}

.mu-auth-blobs span:nth-child(3) {
    width: 210px; height: 210px;
    right: 16%; top: 24%;
    background: var(--mu-orange);
    opacity: .3;
    animation: muBlob3 24s ease-in-out infinite;
}

.mu-auth-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 570px;
    margin: 0 auto;
}

/* ------------------------------------------------------------
   2. LOGO + TAGLINE
   ------------------------------------------------------------ */
.mu-auth-brand {
    text-align: center;
    margin-bottom: 26px;
    animation: muRise .6s cubic-bezier(.22, 1, .36, 1) both;
}

.mu-auth-brand .mu-auth-logo {
    width: 76px;
    height: auto;
    margin: 0 auto 12px;
    display: inline-block;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.35));
    animation: muFloat 6s ease-in-out infinite;
}

.mu-auth-tagline {
    font-family: 'Tajawal', sans-serif;
    font-weight: 900;
    font-size: 26px;
    line-height: 1.4;
    color: #ffffff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* ------------------------------------------------------------
   3. CARTE
   ------------------------------------------------------------ */
.mu-auth-card {
    position: relative;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 22px;
    padding: 42px 40px 36px !important;
    box-shadow: 0 30px 70px rgba(32, 12, 66, 0.42);
    backdrop-filter: blur(6px);
    animation: muCardIn .6s cubic-bezier(.22, 1, .36, 1) .08s both;
}

/* neutralise les regles historiques d'histudy sur ces classes Tutor,
   y compris le fond sombre du dark mode 3.2.4 (!important) */
.mu-auth-card.tutor-login-wrap { width: auto !important; }
.mu-auth-card .tutor-login-form-wrapper {
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.mu-auth-divider {
    display: block;
    width: 84px;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--mu-orange), var(--mu-pink));
    margin: 0 auto 24px;
}

.mu-auth-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--mu-deep);
    text-align: center;
    margin-bottom: 8px;
}

.mu-auth-subtitle {
    font-size: 14px;
    color: var(--mu-muted);
    text-align: center;
    margin: 0 0 24px;
}

.mu-auth-text {
    font-size: 14px;
    line-height: 1.65;
    color: var(--mu-ink);
    margin-bottom: 20px;
}

/* illustration (page mot de passe oublie) */
.mu-auth-illustration {
    display: block;
    width: min(230px, 58%);
    height: auto;
    margin: -6px auto 4px;
    animation: muFloat 7s ease-in-out infinite;
}

/* vue de confirmation "e-mail envoye" (sans formulaire) */
.mu-auth-success {
    text-align: center;
    animation: muRise .5s cubic-bezier(.22, 1, .36, 1) both;
}

.mu-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin: 4px auto 18px;
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(135deg, var(--mu-purple), var(--mu-pink));
    box-shadow: 0 14px 30px rgba(137, 67, 243, 0.35);
    animation: muFloat 5s ease-in-out infinite;
}

.mu-auth-text-center { text-align: center; }

.mu-auth-hint {
    background: #F6F1FF;
    border: 1px solid var(--mu-line);
    border-radius: 14px;
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--mu-ink);
    text-align: center;
    margin: 0 0 22px;
}

.mu-auth-hint strong { color: var(--mu-purple-dark); }

/* ------------------------------------------------------------
   4. CHAMPS — label + icone + placeholder, focus anime
   ------------------------------------------------------------ */
.mu-form .mu-field { margin-bottom: 18px; }

/* apparition en cascade */
.mu-form .mu-field { animation: muRise .5s cubic-bezier(.22, 1, .36, 1) both; }
.mu-form .mu-field:nth-of-type(1) { animation-delay: .1s; }
.mu-form .mu-field:nth-of-type(2) { animation-delay: .16s; }
.mu-form .mu-field:nth-of-type(3) { animation-delay: .22s; }
.mu-form .mu-field:nth-of-type(4) { animation-delay: .28s; }
.mu-form .mu-field:nth-of-type(5) { animation-delay: .34s; }
.mu-form .mu-field:nth-of-type(6) { animation-delay: .4s; }

.mu-form .mu-field label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .2px;
    color: var(--mu-deep);
    margin-bottom: 7px;
    position: static;
    width: auto;
    z-index: auto;
    cursor: pointer;
}

.mu-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.mu-input-wrap { position: relative; }

.mu-field-icon {
    position: absolute;
    left: 17px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mu-muted);
    pointer-events: none;
    z-index: 2;
    transition: color .25s ease, transform .25s ease;
}

.mu-input-wrap:focus-within .mu-field-icon {
    color: var(--mu-purple);
    transform: translateY(-50%) scale(1.08);
}

.mu-form input.mu-input {
    display: block;
    width: 100% !important;
    height: 50px !important;
    padding: 0 18px 0 46px !important;
    border: 2px solid var(--mu-line) !important;
    border-radius: 25px !important;
    background-color: #ffffff !important;
    color: var(--mu-ink) !important;
    font-size: 15px !important;
    line-height: 46px !important;
    box-shadow: 0 4px 14px rgba(80, 26, 162, 0.05) !important;
    transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.mu-form input.mu-input::placeholder { color: #B4A9CE; font-weight: 400; }

/* dark mode histudy : ses regles (0,3,1)!important repeindraient le champ
   en transparent/bordure sombre sur notre carte blanche — contre-regle a
   specificite superieure, la carte reste claire dans les deux modes */
.active-dark-mode .tutor-login-form-wrapper .mu-form input.mu-input,
.active-dark-mode .mu-auth-card .mu-form input.mu-input {
    background-color: #ffffff !important;
    border: 2px solid var(--mu-line) !important;
    color: var(--mu-ink) !important;
}

.mu-form input.mu-input:hover { border-color: rgba(137, 67, 243, 0.4) !important; }

.mu-form input.mu-input:focus {
    outline: none !important;
    border-color: var(--mu-purple) !important;
    box-shadow: 0 0 0 4px rgba(137, 67, 243, 0.16) !important;
}

/* Chrome autofill : garder le champ BLANC (sinon fond bleu pale qui
   rend l'oeil et l'icone illisibles) */
.mu-form input.mu-input:-webkit-autofill,
.mu-form input.mu-input:-webkit-autofill:hover,
.mu-form input.mu-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: var(--mu-ink) !important;
    caret-color: var(--mu-ink);
}

/* champ mot de passe + oeil (pastille violette : toujours visible) */
.mu-password-wrap input.mu-input { padding-right: 54px !important; }

.mu-toggle-pass {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: rgba(137, 67, 243, 0.18) !important;
    border: 0 !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 0;
    line-height: 0;
    color: var(--mu-purple-dark) !important;
    opacity: 1 !important;
    cursor: pointer;
    z-index: 2;
    transition: color .2s ease, background-color .2s ease;
}

.mu-toggle-pass svg { opacity: 1; stroke-width: 2.2; }

.mu-toggle-pass:hover {
    color: #ffffff;
    background: var(--mu-purple) !important;
}

/* l'attribut hidden (champ vide) doit gagner sur notre display:flex */
.mu-toggle-pass[hidden] { display: none !important; }

/* zone des hooks (honeypot / reCAPTCHA) : invisible si vide */
.mu-hook-zone:empty { display: none; }
.mu-hook-zone { margin-bottom: 6px; }
.mu-consents { margin-bottom: 14px; }

/* ------------------------------------------------------------
   5. LIGNE "SE SOUVENIR" + CHECKBOX + LIENS
   ------------------------------------------------------------ */
.mu-form-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 4px 0 22px;
}

.mu-check { display: inline-flex; align-items: center; gap: 10px; }

.mu-auth-page input.mu-checkbox,
.mu-form input.mu-checkbox,
.mu-form .mu-terms-row input.tutor-checkbox {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 2px solid var(--mu-purple) !important;
    border-radius: 6px !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    cursor: pointer;
    position: relative;
    flex: 0 0 auto;
    transition: background-color .2s ease, transform .15s ease;
}

.mu-auth-page input.mu-checkbox:active,
.mu-form input.mu-checkbox:active { transform: scale(.9); }

.mu-auth-page input.mu-checkbox:checked,
.mu-form input.mu-checkbox:checked,
.mu-form .mu-terms-row input.tutor-checkbox:checked {
    background-color: var(--mu-purple) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3e%3cpath d='M3.5 8.5 6.5 11.5 12.5 4.5' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") !important;
    background-size: 14px 14px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.mu-auth-page input.mu-checkbox:focus-visible,
.mu-form input.mu-checkbox:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(137, 67, 243, 0.18) !important;
}

/* histudy dessine une 2e case en pseudo-element sur le label : suppression */
.mu-auth-page input[type=checkbox] ~ label::before,
.mu-auth-page input[type=checkbox] ~ label::after,
.mu-form input[type=checkbox] ~ label::before,
.mu-form input[type=checkbox] ~ label::after {
    display: none !important;
    content: none !important;
}

.mu-auth-page .mu-check label,
.mu-form .mu-check label {
    padding-left: 0 !important;
    margin: 0 !important;
    font-size: 14px;
    font-weight: 500;
    color: var(--mu-ink);
    cursor: pointer;
    position: static;
    width: auto;
    z-index: auto;
}

.mu-auth-page .mu-link,
.mu-form .mu-link,
.student-registration-shortcode-math-universe .mu-link {
    position: relative;
    font-size: 14px;
    font-weight: 600;
    color: var(--mu-purple);
    text-decoration: none;
    transition: color .2s ease;
}

/* soulignement anime */
.mu-auth-page .mu-link::after,
.mu-form .mu-link::after,
.student-registration-shortcode-math-universe .mu-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--mu-purple), var(--mu-pink));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

.mu-auth-page .mu-link:hover,
.mu-form .mu-link:hover,
.student-registration-shortcode-math-universe .mu-link:hover { color: var(--mu-purple-dark); }

.mu-auth-page .mu-link:hover::after,
.mu-form .mu-link:hover::after,
.student-registration-shortcode-math-universe .mu-link:hover::after { transform: scaleX(1); }

.mu-link-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

/* checkbox des conditions d'utilisation (fallback ToC, /register/) */
.mu-terms-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 2px 0 20px;
}

.mu-terms-row input.tutor-checkbox { margin-top: 3px !important; }

.mu-terms-row label {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--mu-ink);
    cursor: pointer;
}

.mu-terms-row label a { color: var(--mu-purple); font-weight: 600; }

/* ------------------------------------------------------------
   6. BOUTON SIGNATURE — degrade violet->rose + double fleche
      (motif btn-text / btn-icon du theme, en autonome)
   ------------------------------------------------------------ */
.mu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 230px;
    height: 52px;
    padding: 0 30px !important;
    border: 0 !important;
    border-radius: 26px !important;
    background-color: var(--mu-purple-dark) !important;
    background-image: linear-gradient(to right, var(--mu-purple-dark), var(--mu-purple), var(--mu-pink), var(--mu-purple-dark)) !important;
    background-size: 300% 100% !important;
    background-position: 0% 0;
    color: #ffffff !important;
    font-family: 'Mulish', 'Poppins', sans-serif;
    font-size: 15px !important;
    font-weight: 700;
    letter-spacing: .3px;
    cursor: pointer;
    box-shadow: 0 14px 28px rgba(80, 26, 162, 0.38);
    transition: background-position .5s ease, transform .25s ease, box-shadow .3s ease;
    line-height: 1 !important;
}

.mu-btn-block { width: 100%; }

.mu-btn:hover {
    background-position: 100% 0;
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(80, 26, 162, 0.45);
    color: #ffffff !important;
}

.mu-btn:active { transform: translateY(0) scale(.985); }

.mu-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(137, 67, 243, 0.35), 0 14px 28px rgba(80, 26, 162, 0.38);
}

.mu-btn-inner {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    overflow: hidden;
    padding: 4px 0;
}

.mu-btn .btn-text {
    color: #ffffff;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

.mu-btn .btn-icon {
    display: inline-flex;
    color: #ffffff;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .35s ease;
}

/* seconde fleche : cachee a gauche, prend la place au survol */
.mu-btn .btn-icon + .btn-icon {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-160%, -50%);
    opacity: 0;
}

.mu-btn:hover .btn-text { transform: translateX(27px); }
.mu-btn:hover .btn-text + .btn-icon { transform: translateX(60px); opacity: 0; }
.mu-btn:hover .btn-icon + .btn-icon { transform: translate(0, -50%); opacity: 1; }

.mu-submit-wrap { text-align: center; margin-top: 4px; }

.mu-register-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 20px;
    font-size: 14px;
    color: var(--mu-ink);
}

/* ------------------------------------------------------------
   7. ALERTES
   ------------------------------------------------------------ */
.mu-auth-alert {
    background: #FDECEF;
    border: 1px solid rgba(242, 64, 128, 0.45);
    color: #96204A;
    border-radius: 14px;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 18px;
}

.mu-auth-alert-zone .tutor-alert {
    border-radius: 14px;
    padding: 12px 16px;
    margin-bottom: 18px;
    font-size: 14px;
}

.mu-auth-alert-zone:empty { display: none; }

/* ------------------------------------------------------------
   8. BOUTONS SOCIAUX — Google (GSI) + Facebook stylise maison
   ------------------------------------------------------------ */
.mu-auth-card .tutor-social-authentication,
.student-registration-shortcode-math-universe .tutor-social-authentication {
    margin-top: 24px;
    padding-top: 0 !important;
    border-top: 0 !important;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* separateur "ou" */
.mu-auth-card .tutor-social-authentication::before,
.student-registration-shortcode-math-universe .tutor-social-authentication::before {
    content: "─────────   ou   ─────────";
    display: block;
    text-align: center;
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--mu-muted);
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
}

.mu-auth-card #tutor-pro-google-authentication,
.mu-auth-card #tutor-pro-facebook-authentication,
.mu-auth-card #tutor-pro-twitter-authentication,
.student-registration-shortcode-math-universe #tutor-pro-google-authentication,
.student-registration-shortcode-math-universe #tutor-pro-facebook-authentication,
.student-registration-shortcode-math-universe #tutor-pro-twitter-authentication {
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
}

/* Le rendu Google de l'addon (iframe/div de largeur variable, parfois en
   echec = iframe grise) est masque : js/auth-pages.js re-rend un bouton
   propre 320px en francais dans .mu-google-btn. */
#tutor-pro-google-authentication > :not(.mu-google-btn) {
    display: none !important;
}

.mu-google-btn {
    width: 100%;
    max-width: 320px;
    min-height: 40px;
    display: flex;
    justify-content: center;
}

/* hauteur GSI reelle = 40px, alignee sur le bouton Facebook maison */
#tutor-pro-google-authentication .mu-google-btn iframe {
    width: 100% !important;
    height: 40px !important;
    max-width: 320px !important;
}

/* si le SDK Google n'a pas pu re-rendre (initialize absent), on re-affiche
   le rendu d'origine de l'addon plutot que de n'avoir aucun bouton */
#tutor-pro-google-authentication.mu-g-fallback > :not(.mu-google-btn) {
    display: revert !important;
}

/* Google GSI rend parfois DEUX choses : un bouton div (role=button, celui qui
   marche) + une iframe compagnon "personnalisee" que Google refuse d'afficher
   (page "Ce contenu est bloque") -> bloc gris. Quand le bouton div existe,
   on ecrase l'iframe compagnon. Robuste : ne depend que de role=button (ARIA
   stable de GSI), pas des classes obfusquees de Google. */
.mu-google-btn:has(div[role="button"]) iframe,
#tutor-pro-google-authentication.mu-g-fallback:has(div[role="button"]) iframe {
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border: 0 !important;
}

/* aucune pub AdSense/iframe parasite dans les zones d'authentification */
.mu-auth-card ins.adsbygoogle,
.mu-auth-card .google-auto-placed,
.student-registration-shortcode-math-universe ins.adsbygoogle,
.student-registration-shortcode-math-universe .google-auto-placed,
.tutor-social-authentication ins.adsbygoogle,
.tutor-social-authentication .google-auto-placed,
.tutor-social-authentication > iframe {
    display: none !important;
}

/* bouton Facebook maison (injecte par js/auth-pages.js) —
   aligne visuellement sur le bouton Google GSI "outline" */
.mu-fb-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 320px;
    height: 40px; /* = hauteur exacte du bouton Google GSI "large" */
    margin: 0 auto;
    padding: 0 12px !important;
    background: #ffffff !important;
    border: 1px solid #dadce0 !important;
    border-radius: 4px !important;
    color: #3c4043 !important;
    font-family: 'Roboto', arial, sans-serif; /* = police du bouton Google */
    font-size: 14px !important;
    font-weight: 500;
    letter-spacing: .25px;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
    line-height: 1 !important;
}

.mu-fb-btn:hover {
    background: #f7f8ff !important;
    border-color: #c6d4f5 !important;
    box-shadow: 0 2px 8px rgba(24, 119, 242, 0.15);
}

.mu-fb-btn:active { background: #eef1fb !important; }

.mu-fb-btn[hidden] { display: none !important; }

/* ------------------------------------------------------------
   9. PAGE /register/ — habillage du shortcode dans la carte Elementor
   ------------------------------------------------------------ */
.student-registration-shortcode-math-universe { background: transparent !important; }

.student-registration-shortcode-math-universe .mu-form-shell { width: 100%; }

/* La section Elementor de la page etait en hauteur FIXE 100vh avec contenu
   centre : le formulaire (965px) debordait sous le header et le footer.
   On passe en hauteur auto (min 100vh conserve pour l'effet plein ecran). */
body.page-id-1922 .elementor-element-32296da {
    height: auto !important;
    min-height: 100vh !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    /* la soucoupe decorative depassait de la section et se dupliquait
       visuellement par-dessus le header : on clippe le debordement */
    overflow: hidden !important;
}

/* carte d'inscription : les 4 coins arrondis (le design canvas n'arrondissait
   que le haut car la carte touchait le bas de l'ecran) */
body.page-id-1922 .elementor-element-8b72a9b > .elementor-widget-wrap {
    border-radius: 22px !important;
}

/* soucoupe Lottie dupliquee : la page contient DEUX widgets jouant la meme
   animation (gMiGAV37LU.json). On garde ceb9b85 (au-dessus de la carte) et on
   masque 4a960b1 (position absolue heritee du canvas, flottait sur le header). */
body.page-id-1922 .elementor-element-4a960b1 {
    display: none !important;
}

body.page-id-1922 .elementor-element-32296da > .elementor-container {
    height: auto !important;
    min-height: calc(100vh - 80px) !important; /* 100vh - paddings : pas de scroll parasite */
}

/* message flash "Un mail de verification a ete envoye..." (Tutor Pro) */
.mu-form-shell .tutor-alert.tutor-success {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    background: #EDFBF2;
    border: 1px solid rgba(62, 183, 94, 0.5);
    color: #1D6B37;
    border-radius: 14px;
    padding: 14px 16px;
    margin: 0 0 18px !important;
    font-size: 14px;
    line-height: 1.55;
}

/* ------------------------------------------------------------
   10. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .mu-auth-page { padding: 40px 14px 60px; }
    .mu-auth-page.mu-auth-page-embedded { padding: 36px 14px 56px; }
    .mu-auth-card { padding: 30px 20px 28px !important; }
    .mu-auth-tagline { font-size: 20px; }
    .mu-auth-title { font-size: 21px; }
    .mu-form-row { grid-template-columns: 1fr; gap: 0; }
    .mu-btn { width: 100%; min-width: 0; }
    .mu-auth-blobs span { filter: blur(48px); }
}

/* ------------------------------------------------------------
   11. ACCESSIBILITE — mouvement reduit
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .mu-auth-page::before,
    .mu-auth-page::after,
    .mu-auth-blobs span,
    .mu-auth-brand,
    .mu-auth-brand .mu-auth-logo,
    .mu-auth-card,
    .mu-auth-illustration,
    .mu-form .mu-field {
        animation: none !important;
    }
    .mu-btn, .mu-btn .btn-text, .mu-btn .btn-icon { transition: none !important; }
}

/* ============================================================
   12. CORRECTIFS GLOBAUX TUTOR 4.0 (toutes les pages du site)
   ============================================================ */

/* --- 12a. Double checkbox / radio : histudy dessine une case fantome via
       input[type=checkbox] ~ label::before/::after et idem pour les radios
       (regle globale du theme) alors que Tutor 4.0 stylise l'input lui-meme
       (.tutor-checkbox / .tutor-radio). On supprime la case fantome du theme
       sur le nouveau markup (login, inscription, consentements GDPR, quiz). --- */
input.tutor-checkbox ~ label::before,
input.tutor-checkbox ~ label::after,
input.tutor-radio ~ label::before,
input.tutor-radio ~ label::after,
.tutor-input-wrapper input[type=checkbox] ~ label::before,
.tutor-input-wrapper input[type=checkbox] ~ label::after,
.tutor-input-wrapper input[type=radio] ~ label::before,
.tutor-input-wrapper input[type=radio] ~ label::after {
    display: none !important;
    content: none !important;
}

input.tutor-checkbox ~ label,
input.tutor-radio ~ label,
.tutor-input-wrapper input[type=checkbox] ~ label,
.tutor-input-wrapper input[type=radio] ~ label {
    padding-left: 0 !important;
}

/* NB : le markup legacy de la modal de login (.tutor-form-check) n'est PAS
   touche ici — le theme y cache l'input et affiche sa case sur le label :
   une seule case visible, mecanisme d'origine conserve. */

/* Histudy 3.2.4 a introduit son propre fix partiel : il CACHE l'input Tutor
   (.tutor-login-form-wrapper input[name=rememberme].tutor-checkbox{display:none})
   et garde sa case fantome. Comme 12a supprime la case fantome, on re-affiche
   l'input Tutor pour qu'une case reste visible sur les logins Tutor standards.
   Notre page login utilise .mu-checkbox, non concernee. */
.tutor-login-form-wrapper input[type=checkbox][name=rememberme].tutor-checkbox {
    display: inline-block !important;
}

/* --- 12b. Filet de securite dimensions : les regles globales histudy
       input{width:100%;height:40px} etireraient une checkbox appearance:none
       en pilule la ou tutor-core.min.css n'est pas charge (mode legacy force
       par le theme 3.2.4). Valeurs identiques au composant Tutor 4.0. --- */
input.tutor-checkbox,
.tutor-input-wrapper input.tutor-checkbox {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    padding: 0 !important;
    border-radius: 4px !important;
    line-height: 1 !important;
}

input.tutor-checkbox.tutor-checkbox-md,
.tutor-input-wrapper input.tutor-checkbox.tutor-checkbox-md {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
}

/* --- 12c. Widget Facebook XFBML : iframe facebook.com qui s'affiche en bloc
       gris des que son contenu distant echoue (bloqueur, config app...).
       Remplace partout par le bouton .mu-fb-btn injecte par js/auth-pages.js
       — on masque donc definitivement le widget d'origine. --- */
#tutor-pro-facebook-authentication .fb-login-button,
.tutor-social-authentication .fb-login-button {
    display: none !important;
}

/* Repli (symetrique de .mu-g-fallback cote Google) : si une maj de l'addon
   renomme checkLoginState(), le JS pose .mu-fb-fallback sur le conteneur et
   on re-affiche le widget d'origine plutot que de laisser un bouton mort. */
#tutor-pro-facebook-authentication.mu-fb-fallback .fb-login-button,
.tutor-social-authentication.mu-fb-fallback .fb-login-button {
    display: block !important;
}

/* --- 12d. Alerte "tutor-warning" : plus aucun style dans tutor-core.min.css 4.0.
       Seul le formulaire d'inscription custom (/register/) emet encore cette
       classe. Scope volontairement restreint. --- */
.student-registration-shortcode-math-universe .tutor-alert.tutor-warning {
    display: block;
    background: #FFF4E2;
    border: 1px solid rgba(255, 150, 22, 0.5);
    color: #7A5010;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 18px;
    font-size: 14px;
}

.student-registration-shortcode-math-universe .tutor-alert.tutor-warning ul.tutor-required-fields {
    margin: 0;
    padding-left: 18px;
}

/* --- 12e. Le nouveau CSS Tutor pose body{background-color:var(--tutor-surface-base)}
       (gris) + une transition. On retablit le blanc historique, sans jamais
       ecraser les pages Elementor, le mode sombre d'Histudy, NI le dashboard /
       la learning area modernes (html[data-tutor-theme], pose par Tutor pour
       les utilisateurs connectes sur ces ecrans). --- */
html:not([data-tutor-theme]) body:not(.active-dark-mode):not(.elementor-page) {
    background-color: #ffffff;
}

html:not([data-tutor-theme]) body { transition: none; }

/* --- 12j. LEARNING AREA : sidebar plus large + titres toujours lisibles.
       Tutor fixe la sidebar a 320px et decale le contenu du meme montant
       (.tutor-learning-area-body{padding-left:320px}) : on elargit via une
       variable, appliquee aux DEUX regles pour rester synchronisees, en
       desktop uniquement (en mobile la sidebar est un panneau coulissant). --- */
:root { --mu-learning-sidebar-w: 400px; }

@media (min-width: 1440px) {
    :root { --mu-learning-sidebar-w: 440px; }
}

@media (min-width: 1025px) {
    .tutor-learning-area .tutor-learning-sidebar {
        width: var(--mu-learning-sidebar-w) !important;
    }

    /* :not(.is-fullscreen) : en plein ecran Tutor masque la sidebar et remet
       le padding a 0 — notre !important ne doit pas ecraser ce reset. */
    .tutor-learning-area:not(.is-fullscreen) .tutor-learning-area-body {
        padding-left: var(--mu-learning-sidebar-w) !important;
    }

    /* langues RTL : le decalage passe a droite */
    [dir="rtl"] .tutor-learning-area:not(.is-fullscreen) .tutor-learning-area-body,
    html[lang^="ar"] .tutor-learning-area:not(.is-fullscreen) .tutor-learning-area-body {
        padding-left: 0 !important;
        padding-right: var(--mu-learning-sidebar-w) !important;
    }
}

/* titres complets : plus jamais tronques, retour a la ligne automatique
   (titre du cours en tete de sidebar, titres de sections et de lecons) */
.tutor-learning-sidebar .tutor-learning-header-title,
.tutor-learning-sidebar .tutor-learning-nav-header-title,
.tutor-learning-sidebar .tutor-learning-nav-item .tutor-truncate {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.4;
}

.tutor-learning-sidebar .tutor-learning-nav-item {
    height: auto !important;
}

.tutor-learning-sidebar .tutor-learning-nav-item > svg {
    flex: 0 0 auto;
    margin-top: 2px;
}

/* --- 12k. Bouton flottant "Retour a mes cours" (ancien snippet maison,
       #coursesButton "liquid glass") : supprime definitivement de l'affichage.
       Le snippet lui-meme est a supprimer dans WPCode / CSS et JS personnalises. --- */
#coursesButton,
.liquid-glass-button {
    display: none !important;
}

/* --- 12h. Emojis WordPress : la regle native (wp-emoji-styles) peut etre
       absente sur les ecrans Tutor isoles -> les emojis (images s.w.org)
       s'affichaient en taille native geante. Contrainte permanente ici. --- */
img.wp-smiley,
img.emoji {
    display: inline !important;
    border: none !important;
    box-shadow: none !important;
    height: 1em !important;
    width: 1em !important;
    margin: 0 0.07em !important;
    vertical-align: -0.1em !important;
    background: none !important;
    padding: 0 !important;
}

/* --- 12g. Logo de la sidebar du dashboard : le logo noir du site remplace
       le SVG blanc (mode clair uniquement ; en mode sombre le logo noir
       serait invisible, on garde alors l'original). Centre et agrandi. --- */
html[data-tutor-theme="light"] .tutor-dashboard-sidebar-logo img { display: none; }

html[data-tutor-theme="light"] .tutor-dashboard-sidebar-logo {
    display: block;
    height: 56px;
    background: url('/wp-content/uploads/2024/11/logo-black-2.png') no-repeat center / contain;
}

/* --- 12i. Toasts Tutor ("Authentification traitée...") : le style global des
       boutons du kit Elementor peignait la croix de fermeture en rose plein.
       On neutralise pour retrouver l'apparence par defaut de Tutor. --- */
.tutor-toast-parent button,
button.tutor-toast-close,
button.tutor-toast-clear {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    color: currentColor !important;
    padding: 0 !important;
    height: auto !important;
    line-height: 1 !important;
    border-radius: 50% !important;
}

/* --- 12f. CRITIQUE : Histudy fixe html{font-size:10px} sur tout le site, or
       les bundles Tutor 4 (tutor-core / tutor-dashboard / tutor-learning-area)
       sont entierement dimensionnes en rem pour une base de 16px : sans ce
       correctif, toute la typographie du dashboard et des lecons s'affiche a
       62,5 % de sa taille. html[data-tutor-theme] n'existe QUE sur ces ecrans
       modernes -> aucune fuite sur le reste du site (qui suppose 10px). --- */
html[data-tutor-theme] {
    font-size: 16px !important;
}

html[data-tutor-theme] body {
    font-family: inherit; /* herite d'Inter posee par tutor-core sur html */
    font-size: 1rem;      /* neutralise le body{font-size:18px} du theme */
}

/* ================================================================
   13. REPRISES DES ANCIENS EXTRAITS WPCODE (plugin supprime, 07/2026).
       Le markup correspondant est injecte par functions.php.
   ================================================================ */

/* --- 13a. (supprime 07/2026) Les bulles Messenger/WhatsApp sont remplacees
       par le centre d'aide flottant : markup mu_help_center_markup() dans
       functions.php, styles dans css/mu-help-center.css. --- */

/* --- 13b. Reprise "CSS gap fix" : suppression des gouttieres horizontales
       parasites sur les gabarits du theme et les sections Elementor.
       html : PAS de margin !important ici — la barre d'admin WordPress pose
       html{margin-top:32px!important} et doit pouvoir gagner (l'ancien
       extrait etait imprime AVANT sa feuille, ce fichier charge APRES). --- */
html {
    margin: 0;
    padding: 0;
}

body {
    margin: 0 !important;
    padding: 0 !important;
}

/* --- ATTENTION : ne JAMAIS remettre `overflow-x: hidden` ici. ---------------
   Ces deux selecteurs sont globaux et ce fichier est charge sur TOUTES les
   pages, tableau de bord compris. Or `overflow-x: hidden` sur html/body a un
   effet de bord qui n'a rien d'evident : d'apres la specification CSS, quand
   un axe passe a une valeur autre que `visible`, l'autre axe bascule
   automatiquement de `visible` a `auto`. Le body devient donc un CONTENEUR DE
   DEFILEMENT - qui, lui, ne defile jamais (c'est la fenetre qui defile).
   Conséquence : tout `position: sticky` a l'interieur s'ancre a ce conteneur
   immobile et ne colle plus jamais. C'est ce qui a casse, pendant des mois et
   sans le moindre message d'erreur, le menu lateral ET l'en-tete du tableau de
   bord de Tutor (qui sont pourtant sticky nativement, voir
   plugins/tutor/assets/css/tutor-dashboard.min.css - rien a ajouter de notre
   cote, il suffit de ne pas les casser).

   `overflow-x: clip` produit exactement le meme resultat visuel (aucun
   defilement horizontal parasite) mais ne cree PAS de conteneur de defilement,
   et cohabite legalement avec `overflow-y: visible` - donc `sticky` continue de
   fonctionner. C'est la propriete prevue pour ce cas precis.

   Le repli en `hidden` ne concerne que les navigateurs anterieurs a
   `overflow: clip` (Safari < 16) : ils retrouvent le comportement d'avant,
   c'est-a-dire un menu non fixe - degradation visuelle, jamais une casse. */
html,
body {
    overflow-x: hidden !important;
}

@supports (overflow: clip) {
    html,
    body {
        overflow-x: clip !important;
    }
}

main.main-page-wrapper,
.rbt-page-area.rbt-section-gap {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.elementor-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* --- 13c. Reprise "bandle courses title size font" : titre des packs de
       cours (bundles Tutor Pro). --- */
.tutor-bundle-courses-wrapper .tutor-bundle-course-list-wrapper .tutor-bundle-course-list-desc .tutor-bundle-course-title {
    word-break: break-all;
    font-size: 30px;
}

/* --- 13d. Badge "garantie 30 jours" de la sidebar de cours : filet ultime
       (l'option du theme est deja forcee a 0 et la chaine videe, voir
       functions.php mu_disable_money_back_badge). Chirurgical : seul le
       span.subtitle contenant l'icone feather-rotate-ccw est vise — les
       autres sous-titres du site ne sont plus touches (l'ancien snippet
       cachait TOUS les span.subtitle du site). --- */
.course-sidebar .content-item-content span.subtitle:has(> i.feather-rotate-ccw) {
    display: none !important;
}

/* ================================================================
   14. HEADER DU THEME : menu utilisateur (avatar + dropdown).
       Markup : template-parts/header/elements/user.php (copie child).
   ================================================================ */

/* --- 14a. Avatar : cercle PARFAIT garanti. Le theme casse son propre carre
       52x52 avec des regles tardives (min-width:100%!important + height:auto)
       -> image ovale/deformee. On reimpose un carre strict + object-fit. --- */
.rbt-user-menu-list-wrapper .rbt-admin-profile .admin-thumbnail img {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50% !important;
}

/* --- 14b. Bouton rond du header (icone utilisateur) : au survol le theme
       affiche une pastille claire (--color-gray-light) mais laisse parfois
       l'icone en blanc selon le contexte de header -> blanc sur blanc.
       Encre violette forcee des que la pastille apparait. --- */
.rbt-user-wrapper .rbt-round-btn:hover,
.rbt-user-wrapper .rbt-round-btn.open,
.rbt-user-wrapper .rbt-round-btn:hover i,
.rbt-user-wrapper .rbt-round-btn.open i {
    color: #501AA2 !important;
}

/* --- 14c. Entrees du dropdown : icone Feather par entree (memes reperes que
       la sidebar du dashboard) + COULEURS FORCEES. Le header du site est en
       variante "color-white-variation" : la regle du theme
       `.rbt-header .rbt-header-wrapper.color-white-variation .quick-access li a
        {color:var(--color-white)}` matche AUSSI les liens du dropdown (tous
       descendants du li .quick-access) -> icones/texte blancs sur le fond
       blanc du panneau. On la bat en specificite + !important, hors mode
       sombre (ou le theme gere deja ses propres couleurs claires). --- */
.rbt-user-menu-list-wrapper .user-list-wrapper .tutor-dashboard-menu-item-link {
    display: flex;
    align-items: center;
}

.rbt-user-menu-list-wrapper .tutor-dashboard-menu-item-icon {
    display: inline-block;
    width: 20px;
    flex: 0 0 20px;
    text-align: center;
    font-size: 16px;
    line-height: 1;
}

body:not(.active-dark-mode) .rbt-user-wrapper .rbt-user-menu-list-wrapper .user-list-wrapper li:not(.tutor-dashboard-menu-divider) a,
body:not(.active-dark-mode) .rbt-user-wrapper .rbt-user-menu-list-wrapper .user-list-wrapper li:not(.tutor-dashboard-menu-divider) a i,
body:not(.active-dark-mode) .rbt-user-wrapper .rbt-user-menu-list-wrapper .user-list-wrapper li:not(.tutor-dashboard-menu-divider) a span {
    color: var(--color-heading, #192335) !important;
}

body:not(.active-dark-mode) .rbt-user-wrapper .rbt-user-menu-list-wrapper .user-list-wrapper li:not(.tutor-dashboard-menu-divider):hover a,
body:not(.active-dark-mode) .rbt-user-wrapper .rbt-user-menu-list-wrapper .user-list-wrapper li:not(.tutor-dashboard-menu-divider):hover a i,
body:not(.active-dark-mode) .rbt-user-wrapper .rbt-user-menu-list-wrapper .user-list-wrapper li:not(.tutor-dashboard-menu-divider):hover a span {
    color: #501AA2 !important;
}