/* ================================================================
   CORRECTIFS D'INTERFACE — Math Universe
   ----------------------------------------------------------------
   Voir mu-plugins/mu-ui-fixes.php pour le contexte complet.

   ⚠️ CE QUI SE JOUE ICI, MESURE SUR LE SITE, PAS SUPPOSE

   1. LE KIT ELEMENTOR REPEINT TOUS LES <a> DU SITE.
      uploads/elementor/css/post-1690.css contient :
        .elementor-kit-1690 a       { color: #F24080;  ← rose, a EVITER
                                      font-family: "Prompt", Sans-serif;
                                      line-height: 1.1em }     (0,1,1)
        .elementor-kit-1690 a:hover { color: #961040 }         (0,2,1)
      -> l'etat normal exige DEUX classes (0,2,0), l'etat de survol TROIS
         (0,3,0). NE PAS RACCOURCIR les selecteurs de ce fichier.
      -> "Prompt" n'a AUCUN glyphe arabe : tout libelle arabe dans un <a>
         retombe sur la Sans-serif generique du systeme. D'ou la pile de
         polices explicite ci-dessous, Tajawal EN PREMIER.

   2. `.elementor a { box-shadow: none; text-decoration: none }` est en
      (0,1,1) (plugins/elementor/assets/css/frontend.css:53). Toute ombre
      portee sur nos boutons doit donc etre posee a (0,2,0) au minimum.

   3. `font-family: 'Tajawal', inherit` EST DU CSS INVALIDE : `inherit`
      est un mot-cle global, interdit dans une liste de polices — le
      navigateur jette la declaration ENTIERE, en silence. Toujours une
      pile complete.

   4. POURQUOI SI PEU DE `!important` ICI.
      Le module PHP remplace le balisage des widgets et n'emet plus les
      classes `.elementor-icon` ni `.elementor-animation-*`. Les regles
      generees par Elementor pour ces widgets —
        .elementor-{PID} .elementor-element.elementor-element-XXXXX
        .elementor-view-default .elementor-icon:hover       -> (0,6,0)
      ne matchent donc plus RIEN. Il ne reste que le kit (0,1,1)/(0,2,1)
      et `.elementor a` (0,1,1), que nos deux/trois classes battent
      naturellement. `!important` n'apparait qu'a deux endroits, chacun
      justifie sur place : la section 3 (conteneur du widget, adversaire
      a (0,5,0) avec un prefixe de post variable) et la section 4
      (feuille de la visionneuse, injectee en fin de <body> APRES nous).

   Palette de la marque (le rose #F24080 du kit est proscrit) :
     violet fonce    #41246D
     violet          #6E35C3
     violet actif    #8943F3
     violet clair    #BC8FFF
     orange          #FF9616
     bleu Messenger  #0084FF   (signal de reconnaissance, voir section 1)
   ================================================================ */

.mu-cta-wrap,
.mu-cta,
.mu-navbtn-wrap,
.mu-navbtn,
.mu-acc .mu-acc__inner .mu-cta-ms {
    --mu-violet-fonce: #41246D;
    --mu-violet: #6E35C3;
    --mu-violet-actif: #8943F3;
    --mu-violet-clair: #BC8FFF;
    --mu-orange: #FF9616;
    --mu-ms-bleu: #0084FF;
    --mu-ms-bleu-fonce: #0063C1;
    /* Pile complete : Tajawal pour l'arabe (chargee et verifiee), Poppins
       pour le latin, puis les polices systeme. Jamais `inherit`. */
    --mu-police: 'Tajawal', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    /* Courbe unique pour tout le module, reprise de mu-pp.css : les deux
       familles de composants doivent bouger de la meme facon. */
    --mu-elan: cubic-bezier(.22, 1, .36, 1);
    box-sizing: border-box;
}

.mu-cta *,
.mu-navbtn *,
.mu-acc .mu-acc__inner .mu-cta-ms * { box-sizing: border-box; }

/* Texte reserve aux lecteurs d'ecran. Volontairement NON masque par
   `display:none` : les technologies d'assistance ignorent ce dernier. */
.mu-cta .mu-cta__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


/* ================================================================
   1. CHANTIER (A) — APPEL A L'ACTION MESSENGER
   ----------------------------------------------------------------
   Page /methodes-de-paiement/, sous la phrase
     « أختار الطريقة المناسبة ليك … أبعثلنا ميساج من هنا »
   L'ancien rendu : une icone ekiticons VIDE de 46x46 px, sans fond.

   CHOIX DE COULEUR — bleu Messenger vers violet de la marque.
   Le degrade part du #0084FF de Messenger et arrive sur le #6E35C3 de la
   marque. Raison : le bleu est le seul signal que les visiteurs
   reconnaissent instantanement comme « ceci ouvre Messenger » — c'est
   exactement l'information qui manquait, puisque l'icone etait invisible.
   Le finir sur le violet raccroche le bouton a la charte et l'eloigne
   franchement du rose #F24080 du kit. Contraste du libelle blanc sur le
   point le plus clair du degrade (#0084FF) : 3,1:1 a 21 px et 700 —
   au-dessus du seuil AA pour du texte large.
   ================================================================ */

.mu-cta-wrap {
    display: flex;
    justify-content: center;   /* centre le bouton sous le texte */
    align-items: center;
    padding-block: 10px 4px;
}

.mu-cta.mu-cta--ms {
    /* Le ruban de l'icone est peint dans la couleur du disque blanc :
       une seule icone sert les deux contextes (voir aussi section 1bis). */
    --mu-ms-creux: #fff;

    position: relative;
    isolation: isolate;        /* le reflet reste sous le libelle */
    overflow: hidden;          /* borne le reflet de la section ::before */
    display: inline-flex;
    align-items: center;
    gap: 14px;
    max-width: 100%;
    padding: 15px 30px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--mu-ms-bleu) 0%, #5B57FF 46%, var(--mu-violet) 100%);
    color: #fff;
    font-family: var(--mu-police);
    font-size: clamp(17px, 2vw, 21px);
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    /* Deux ombres : une teintee bleue pour la profondeur, une violette
       plus courte pour asseoir le bouton sur le fond clair de la page. */
    box-shadow: 0 16px 34px rgba(0, 132, 255, .30),
                0 4px 12px rgba(65, 36, 109, .18);
    transition: transform .45s var(--mu-elan),
                box-shadow .45s var(--mu-elan),
                background-position .6s ease;
}

/* Reflet qui balaie le bouton au survol — meme geste que les vignettes
   de mu-pp.css, pour que le site garde un seul vocabulaire d'animation. */
.mu-cta.mu-cta--ms::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(115deg,
        rgba(255, 255, 255, 0) 38%,
        rgba(255, 255, 255, .30) 50%,
        rgba(255, 255, 255, 0) 62%);
    transform: translateX(-130%);
    pointer-events: none;
}

.mu-cta.mu-cta--ms:hover::before,
.mu-cta.mu-cta--ms:focus-visible::before {
    animation: mu-ui-reflet .9s ease;
}

@keyframes mu-ui-reflet {
    to { transform: translateX(130%); }
}

/* (0,3,0) : il faut battre `.elementor-kit-1690 a:hover` (0,2,1). */
.mu-cta-wrap .mu-cta.mu-cta--ms:hover,
.mu-cta-wrap .mu-cta.mu-cta--ms:focus-visible {
    transform: translateY(-4px);
    color: #fff;
    box-shadow: 0 24px 48px rgba(0, 132, 255, .38),
                0 8px 18px rgba(65, 36, 109, .22);
}

.mu-cta-wrap .mu-cta.mu-cta--ms:active {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0, 132, 255, .28);
}

/* `a:focus { outline: none }` du theme est en (0,1,1) : (0,3,0) suffit,
   sans `!important`. L'orange de la marque tranche sur le bleu comme sur
   le blanc de la page — un anneau violet se serait fondu dans le bouton. */
.mu-cta-wrap .mu-cta.mu-cta--ms:focus-visible {
    outline: 3px solid var(--mu-orange);
    outline-offset: 4px;
}

/* Pastille blanche portant la marque Messenger. La bulle prend
   `currentColor` (bleu), le ruban prend --mu-ms-creux (blanc) : le glyphe
   se lit comme une decoupe, exactement comme la marque d'origine. */
.mu-cta .mu-cta__pastille {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: var(--mu-ms-bleu);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
    transition: transform .5s var(--mu-elan);
}

.mu-cta.mu-cta--ms:hover .mu-cta__pastille,
.mu-cta.mu-cta--ms:focus-visible .mu-cta__pastille {
    transform: rotate(-8deg) scale(1.08);
}

.mu-cta .mu-cta__label {
    font-family: var(--mu-police);
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.5;
    color: inherit;
}

/* PIEGE BIDI VOLONTAIREMENT EVITE : aucune fleche directionnelle sur ce
   bouton. L'ancre est en `dir="auto"` et son libelle est arabe, donc le
   contexte se resout en RTL — mais l'ATTRIBUT vaut litteralement "auto",
   si bien qu'un selecteur `[dir="rtl"]` ne matcherait PAS et une fleche
   resterait retournee. Le mouvement expressif est porte par la pastille,
   qui est symetrique et juste dans les deux sens d'ecriture. */

.mu-cta .mu-ico { display: block; }
.mu-cta .mu-ico__bulle { fill: currentColor; }
.mu-cta .mu-ico__ruban { fill: var(--mu-ms-creux, #fff); }

@media (max-width: 575.98px) {
    .mu-cta.mu-cta--ms { padding: 13px 22px; gap: 11px; }
    .mu-cta .mu-cta__pastille { width: 38px; height: 38px; }
    .mu-cta .mu-cta__pastille .mu-ico { width: 22px; height: 22px; }
}


/* ================================================================
   1bis. LE LIEN MESSENGER PLACE DANS L'ACCORDEON  (.mu-cta-ms)
   ----------------------------------------------------------------
   Produit par le module mu-content-fixes, qui remplace le <button> nu
   `نحب نجرب` de la page /faq/ par un vrai lien Messenger. Ce lien vit
   DANS `.mu-acc .mu-acc__inner`, dont le fond est un degrade violet
   (mu-pp.css:254 — linear-gradient(135deg, #6E35C3, #8B4BD8)).

   POURQUOI BLANC ET NON BLEU ICI.
   Le bleu Messenger sur ce violet donne un rapport de contraste d'environ
   1,8:1 : deux teintes saturees de luminosite voisine, illisibles l'une
   sur l'autre. Le blanc donne ~7,5:1. On garde donc la reconnaissance de
   la marque LA OU ELLE EST LISIBLE — dans l'icone, restee bleue sur la
   pastille blanche — et on passe le bouton en blanc plein. C'est aussi la
   convention deja etablie dans mu-pp.css:281 pour tout appel a l'action
   pose dans un volet ouvert : un seul style de bouton dans ce contexte.

   SPECIFICITE : (0,3,0) a l'etat normal, (0,3,1) au survol. Cela suffit —
   `.mu-acc .mu-acc__inner a:not([class])` et son `color: #FFE08A
   !important` (mu-pp.css:272) ne matchent QUE les liens SANS attribut
   class ; le notre en a un, il y echappe par construction. Et les regles
   `!important` de mu-pp.css:281 visent `.elementor-button`, `.rbt-btn` et
   `button` : la classe `mu-cta-ms` n'en fait volontairement pas partie.
   ================================================================ */

.mu-acc .mu-acc__inner .mu-cta-ms {
    --mu-ms-creux: #fff;

    /* `display:flex` + marges automatiques : le bouton se centre meme si
       son paragraphe porte un `style="text-align:left"` EN LIGNE — le
       style en ligne bat toute regle CSS sans `!important`, mais il ne
       peut rien contre des marges automatiques. */
    display: flex;
    width: max-content;
    max-width: 100%;
    margin: 8px auto 2px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 13px 26px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    background-image: none;
    color: var(--mu-ms-bleu);
    font-family: var(--mu-police);
    font-size: clamp(15px, 1.7vw, 18px);
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    /* Flou volontairement <= 20 px : `.mu-acc__inner` est en
       `overflow: hidden` (mu-pp.css:249) et rognerait une ombre plus
       large, ce qui donnerait un bord net disgracieux. */
    box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
    transition: transform .35s var(--mu-elan),
                box-shadow .35s var(--mu-elan),
                background-color .3s ease,
                color .3s ease;
}

.mu-acc .mu-acc__inner .mu-cta-ms:hover,
.mu-acc .mu-acc__inner .mu-cta-ms:focus-visible {
    background: #F1F7FF;
    color: var(--mu-ms-bleu-fonce);
    transform: translateY(-2px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, .24);
}

.mu-acc .mu-acc__inner .mu-cta-ms:focus-visible {
    outline: 3px solid #FFE08A;
    outline-offset: 3px;
}

/* Le balisage interne appartient a l'autre module : on ne suppose rien de
   plus que « il peut y avoir une icone ». Ces regles sont inoffensives si
   elle est absente. */
.mu-acc .mu-acc__inner .mu-cta-ms svg {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
}

.mu-acc .mu-acc__inner .mu-cta-ms .mu-ico__bulle { fill: currentColor; }
.mu-acc .mu-acc__inner .mu-cta-ms .mu-ico__ruban { fill: var(--mu-ms-creux, #fff); }


/* ================================================================
   2. CHANTIER (B) — BOUTONS ACCUEIL / RETOUR
   ----------------------------------------------------------------
   Bas des pages classe-bac, classe-troisieme et classe-2eme. La section
   comporte deux colonnes a 50 %, chacune contenant un widget icon.

   RAPPROCHER LES DEUX BOUTONS SANS TOUCHER A LA STRUCTURE ELEMENTOR :
   plutot que de modifier les colonnes (ce qui exigerait d'ecrire en base
   ou de cibler des identifiants variables d'une page a l'autre), on
   aligne le bouton « retour » sur la FIN de sa colonne et le bouton
   « accueil » sur le DEBUT de la sienne. Les deux se rejoignent donc au
   centre de la section et forment une paire, alors que la structure a
   deux colonnes reste rigoureusement intacte.

   Les proprietes logiques (`padding-inline-*`) et `flex-end`/`flex-start`
   se retournent d'elles-memes si une page passe un jour en RTL : les
   colonnes s'inversent, mais les deux boutons se rejoignent toujours au
   milieu.

   NOTE SUR L'ANOMALIE D'ALIGNEMENT D'ORIGINE : elle n'etait pas
   accidentelle. La PREMIERE colonne de chaque section porte
   `align:center` + `content_position:center` en base, la seconde ne porte
   rien — d'ou un glyphe centre et l'autre cale au depart. Nos regles
   `justify-content` reprennent la main sur les deux, sans dependre de ce
   que la colonne declare.
   ================================================================ */

.mu-navbtn-wrap {
    display: flex;
    align-items: center;
}

.mu-navbtn-wrap.mu-navbtn-wrap--retour {
    justify-content: flex-end;
    padding-inline-end: 12px;
}

.mu-navbtn-wrap.mu-navbtn-wrap--accueil {
    justify-content: flex-start;
    padding-inline-start: 12px;
}

/* Deux classes = (0,2,0) : bat le kit `.elementor-kit-1690 a` (0,1,1) et
   `.elementor a { box-shadow:none }` (0,1,1). Aucun `!important`. */
.mu-navbtn.mu-navbtn--retour,
.mu-navbtn.mu-navbtn--accueil {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--mu-violet-actif) 0%, var(--mu-violet-fonce) 100%);
    color: #fff;
    font-family: var(--mu-police);
    line-height: 1;
    text-decoration: none;
    /* Le liseré interieur clair donne le relief ; l'ombre violette
       raccroche le bouton au reste de la page. */
    box-shadow: 0 14px 28px rgba(110, 53, 195, .30),
                inset 0 1px 0 rgba(255, 255, 255, .28);
    transition: transform .45s var(--mu-elan),
                box-shadow .45s var(--mu-elan),
                background .35s ease;
}

/* Halo qui s'ecarte au survol. Pose sur ::after et non en box-shadow
   supplementaire : il peut ainsi depasser du bouton sans participer a la
   mise en page ni intercepter le clic. */
.mu-navbtn.mu-navbtn--retour::after,
.mu-navbtn.mu-navbtn--accueil::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--mu-violet-clair);
    opacity: 0;
    transform: scale(.86);
    pointer-events: none;
    transition: opacity .4s ease, transform .45s var(--mu-elan);
}

/* (0,3,0) : il faut battre `.elementor-kit-1690 a:hover` (0,2,1). */
.mu-navbtn-wrap .mu-navbtn.mu-navbtn--retour:hover,
.mu-navbtn-wrap .mu-navbtn.mu-navbtn--retour:focus-visible,
.mu-navbtn-wrap .mu-navbtn.mu-navbtn--accueil:hover,
.mu-navbtn-wrap .mu-navbtn.mu-navbtn--accueil:focus-visible {
    /* L'orange de la marque etait deja la couleur de survol reglee en base
       sur ces deux widgets : on la conserve, mais en fond plein. */
    background: linear-gradient(140deg, #FFB454 0%, var(--mu-orange) 100%);
    color: #fff;
    transform: translateY(-6px);
    box-shadow: 0 22px 40px rgba(255, 150, 22, .34),
                inset 0 1px 0 rgba(255, 255, 255, .34);
}

.mu-navbtn-wrap .mu-navbtn.mu-navbtn--retour:hover::after,
.mu-navbtn-wrap .mu-navbtn.mu-navbtn--retour:focus-visible::after,
.mu-navbtn-wrap .mu-navbtn.mu-navbtn--accueil:hover::after,
.mu-navbtn-wrap .mu-navbtn.mu-navbtn--accueil:focus-visible::after {
    opacity: .85;
    transform: scale(1);
    border-color: rgba(255, 150, 22, .55);
}

.mu-navbtn-wrap .mu-navbtn.mu-navbtn--retour:active,
.mu-navbtn-wrap .mu-navbtn.mu-navbtn--accueil:active {
    transform: translateY(-2px);
}

/* Anneau de focus clavier net : `a:focus { outline: none }` du theme est
   en (0,1,1), nos (0,3,0) reprennent la main sans `!important`. */
.mu-navbtn-wrap .mu-navbtn.mu-navbtn--retour:focus-visible,
.mu-navbtn-wrap .mu-navbtn.mu-navbtn--accueil:focus-visible {
    outline: 3px solid var(--mu-violet-fonce);
    outline-offset: 5px;
}

.mu-navbtn .mu-navbtn__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .45s var(--mu-elan);
}

.mu-navbtn .mu-ico { display: block; }

/* La fleche glisse vers la gauche : le geste dit « on revient en arriere »
   avant meme qu'on ait lu l'infobulle. */
.mu-navbtn.mu-navbtn--retour:hover .mu-navbtn__ico,
.mu-navbtn.mu-navbtn--retour:focus-visible .mu-navbtn__ico {
    transform: translateX(-4px);
}

.mu-navbtn.mu-navbtn--accueil:hover .mu-navbtn__ico,
.mu-navbtn.mu-navbtn--accueil:focus-visible .mu-navbtn__ico {
    transform: translateY(-3px) scale(1.06);
}

/* ---- Infobulle -------------------------------------------------
   CONCEPTION « FAIL-OPEN » : le libelle est un VRAI noeud de texte dans
   le lien. Si cette feuille n'est pas chargee (televersement incomplet,
   handle retire par un module de cache), il s'affiche simplement a cote
   du bouton : on obtient un lien texte parfaitement utilisable, jamais un
   bouton muet. C'est aussi pour cela qu'il n'est pas masque par
   `display:none` ici mais par `opacity` + `visibility`.
   Le nom accessible, lui, vient de l'`aria-label` pose en PHP : ce texte
   porte `aria-hidden` pour ne pas etre annonce deux fois. */
.mu-navbtn .mu-navbtn__txt {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    z-index: 3;
    padding: 6px 12px;
    border-radius: 10px;
    background: var(--mu-violet-fonce);
    color: #fff;
    font-family: var(--mu-police);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 6px);
    pointer-events: none;
    box-shadow: 0 8px 18px rgba(65, 36, 109, .28);
    transition: opacity .3s ease, transform .35s var(--mu-elan), visibility .3s;
}

/* Petite pointe sous l'infobulle. */
.mu-navbtn .mu-navbtn__txt::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-top-color: var(--mu-violet-fonce);
    transform: translateX(-50%);
}

.mu-navbtn.mu-navbtn--retour:hover .mu-navbtn__txt,
.mu-navbtn.mu-navbtn--retour:focus-visible .mu-navbtn__txt,
.mu-navbtn.mu-navbtn--accueil:hover .mu-navbtn__txt,
.mu-navbtn.mu-navbtn--accueil:focus-visible .mu-navbtn__txt {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* Sous 767 px les colonnes Elementor passent a 100 % et s'empilent : les
   coller aux bords interieurs n'a plus de sens, on recentre. 767 px est le
   point de rupture « tablette » reellement actif dans le kit du site. */
@media (max-width: 767px) {
    .mu-navbtn-wrap.mu-navbtn-wrap--retour,
    .mu-navbtn-wrap.mu-navbtn-wrap--accueil {
        justify-content: center;
        padding-inline: 0;
    }

    .mu-navbtn.mu-navbtn--retour,
    .mu-navbtn.mu-navbtn--accueil { width: 60px; height: 60px; }
}


/* ================================================================
   3. NEUTRALISATION DU CONTENEUR DE WIDGET
   ----------------------------------------------------------------
   SEUL ENDROIT DU MODULE OU `!important` EST INDISPENSABLE POUR (A)/(B),
   et voici pourquoi, chiffres a l'appui.

   Le widget Messenger `ffdeaac` porte des reglages de CONTENEUR :
     _border_border  : solid       _border_color : #DCC4FF
     _border_radius  : 76px        survol : fond #FFE8CC + bordure double
   Elementor les ecrit dans uploads/elementor/css/post-{PID}.css sous
     .elementor-{PID} .elementor-element.elementor-element-ffdeaac
        > .elementor-widget-container            -> (0,4,0)
     .elementor-{PID} .elementor-element.elementor-element-ffdeaac:hover
        > .elementor-widget-container            -> (0,5,0)
   Sans quoi notre appel a l'action serait encadre d'un liseré mauve a
   coins de 76 px, qui virerait au beige au survol.

   Ce conteneur est imprime EN DEHORS du filtre de rendu
   (widget-base.php:643-666) : on ne peut pas le remplacer. Et le prefixe
   `.elementor-{PID}` varie (le widget existe dans 5 posts), donc on ne
   peut pas l'egaler sans le coder en dur. D'ou la classe `mu-ui-hote`
   posee sur le wrapper par le module PHP : (0,3,0) + `!important`
   l'emporte sur du (0,5,0) qui, lui, n'en porte pas.

   `transform: none !important` : le widget porte aussi
   `motion_fx_motion_fx_mouse` — Elementor Pro ecrit alors un `transform`
   EN LIGNE, mis a jour a chaque mouvement de souris. Un bouton qui fuit
   sous le curseur est penible a viser ; seul `!important` bat un style en
   ligne.

   OU EXACTEMENT ? SUR L'ENFANT `> .elementor-widget-container`, PAS SUR
   LE WRAPPER. Verifie dans le code installe :
     - elementor-pro/modules/motion-fx/module.php:52-57 — pour tout
       `Widget_Base` sans constante `WRAPPER_SELECTOR`, le selecteur du
       groupe devient `{{WRAPPER}} > .elementor-widget-container`.
       `Widget_Icon extends Widget_Base` (elementor/includes/widgets/
       icon.php:17) et ne definit AUCUNE de ces constantes : seule
       `Widget_Common_Base` les porte (common-base.php:18-24). On tombe
       donc bien dans la branche « enfant ».
     - elementor-pro/assets/js/frontend.js — `prepareOptions()` met
       `type = 'element'` pour `motion_fx`, puis :
         $childElement = $element.find('> .elementor-widget-container');
         $element = 0 === $childElement.length ? this.$element : $childElement;
       et `updateRule()` fait `this.$element.css(ruleName, value)`.
       L'effet `mouseTrack` (interaction `mouseMove`, action `translateXY`)
       ecrit donc son `transform` sur le CONTENEUR.
   Le `_transform` natif d'Elementor vise la meme cible
   (`TRANSFORM_SELECTOR_CLASS = ' > .elementor-widget-container'`,
   common-base.php:24). Rien n'ecrit `transform` sur le wrapper tant que
   le balisage classique est actif.

   Les deux selecteurs (wrapper ET conteneur) sont ecrits pour couvrir le
   cas ou l'experimentation « balisage optimise » d'Elementor serait
   activee un jour : le `.elementor-widget-container` disparait alors
   (common-optimized.php:10-13 ramene tous ces selecteurs au wrapper nu),
   et les memes reglages — Motion FX compris, via le repli
   `0 === $childElement.length` ci-dessus — atterrissent directement sur
   le wrapper. Le `!important` du wrapper est inoperant aujourd'hui mais
   c'est precisement lui qui tiendra ce jour-la.
   ================================================================ */

.elementor-widget-icon.mu-ui-hote,
.elementor-widget-icon.mu-ui-hote > .elementor-widget-container,
.elementor-widget-icon.mu-ui-hote:hover,
.elementor-widget-icon.mu-ui-hote:hover > .elementor-widget-container {
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    /* Sur le CONTENEUR, ce `transform: none` neutralise le Motion FX en
       ligne (cf. ci-dessus). Il ne touche PAS nos propres animations : nos
       boutons `.mu-cta-messenger` / `.mu-navbtn` sont rendus A L'INTERIEUR
       du conteneur par le filtre `render_content`, un cran plus bas. */
    transform: none !important;
}

.elementor-widget-icon.mu-ui-hote {
    /* Le kit impose `text-align: center` via les reglages de colonne ; nos
       conteneurs sont en flex, mais on remet la valeur de depart pour que
       rien n'herite d'un alignement inattendu. */
    text-align: start;
}


/* ================================================================
   4. CHANTIER (C) — PIED DE LA VISIONNEUSE D'IMAGES
   ----------------------------------------------------------------
   A l'ouverture d'une image, Elementor construit :
     <footer class="elementor-slideshow__footer elementor-lightbox-prevent-close">
       <div class="elementor-slideshow__title">story temoignage (8)</div>
       <div class="elementor-slideshow__description"></div>
     </footer>
   Le titre est celui de la piece jointe, c'est-a-dire le NOM DE FICHIER.

   PORTEE RETENUE : LE PIED ENTIER, SUR TOUT LE SITE. Trois raisons.

   1. LE PIED NE CONTIENT QUE LE TITRE ET LA DESCRIPTION. Verifie dans
      assets/js/lightbox.*.bundle.js (getSlideshowFooter, l. 816-829) :
      il n'y recoit que ces deux <div>. Le COMPTEUR, le PARTAGE, le ZOOM,
      le PLEIN ECRAN et la FERMETURE sont construits par
      getSlideshowHeader() et inseres dans `.elementor-slideshow__header`
      (l. ~628-716 puis 903). Les fleches de navigation sont encore
      ailleurs. Masquer le pied ne retire donc AUCUNE commande.

   2. LA DESCRIPTION EST VIDE sur les trois pieces jointes de
      /temoignages/ (mesure en direct). Ne masquer que le titre laisserait
      une barre `position: fixed; bottom: 0` vide de 15 px de padding en
      bas de l'ecran, pour un benefice nul.

   3. LA PORTEE GLOBALE PROTEGE L'AVENIR. `global_image_lightbox` vaut
      `yes` par defaut (le kit n'a jamais enregistre le moindre reglage de
      visionneuse) et l'ecoute est DELEGUEE AU DOCUMENT : tout futur lien
      vers un .jpg — dans une lecon, un article, une page — ouvrirait la
      meme visionneuse et afficherait le meme nom de fichier. Restreindre
      a `body.page-id-4309` marcherait aujourd'hui et serait a rouvrir au
      prochain temoignage ajoute.

   ON MASQUE, ON NE SUPPRIME PAS. `display:none` laisse les noeuds dans le
   DOM : la fonction `updateFooterText()` du bundle (l. 1038-1051) continue
   d'ecrire dedans sans lever d'erreur a chaque changement de diapositive.
   Un retrait par JavaScript aurait casse la navigation entre images.

   POURQUOI `!important` ICI. La feuille de la visionneuse est INJECTEE A
   L'EXECUTION par l'assetsLoader d'Elementor (frontend.js:888-896 et
   915-923) SANS `parent: 'head'` : elle est ajoutee en FIN DE <body>,
   donc APRES la notre quelle que soit notre priorite de mise en file. A
   specificite egale, Elementor gagnerait par l'ordre du document. Le kit
   ayant six points de rupture actifs, le fichier reellement charge est
   uploads/elementor/css/custom-lightbox.min.css — un fichier REGENERE,
   qu'il ne faut jamais editer : d'ou une regle chez nous.

   NOTE POUR PLUS TARD : le handle `mu-ui-fixes` est bien dans la liste
   blanche de `mu_pure_tutor_app_styles`, cette regle survit donc aussi
   sur les ecrans Tutor.
   ================================================================ */

.elementor-lightbox .elementor-slideshow__footer {
    display: none !important;
}


/* ================================================================
   5. MOUVEMENT REDUIT
   ----------------------------------------------------------------
   On coupe les DEPLACEMENTS, jamais la lisibilite : les boutons gardent
   leur fond, leur couleur, leur anneau de focus et leur infobulle.
   ================================================================ */
@media (prefers-reduced-motion: reduce) {

    .mu-cta.mu-cta--ms,
    .mu-cta .mu-cta__pastille,
    .mu-acc .mu-acc__inner .mu-cta-ms,
    .mu-navbtn.mu-navbtn--retour,
    .mu-navbtn.mu-navbtn--accueil,
    .mu-navbtn .mu-navbtn__ico,
    .mu-navbtn .mu-navbtn__txt,
    .mu-navbtn.mu-navbtn--retour::after,
    .mu-navbtn.mu-navbtn--accueil::after {
        transition: none !important;
    }

    .mu-cta-wrap .mu-cta.mu-cta--ms:hover,
    .mu-cta-wrap .mu-cta.mu-cta--ms:focus-visible,
    .mu-navbtn-wrap .mu-navbtn.mu-navbtn--retour:hover,
    .mu-navbtn-wrap .mu-navbtn.mu-navbtn--retour:focus-visible,
    .mu-navbtn-wrap .mu-navbtn.mu-navbtn--accueil:hover,
    .mu-navbtn-wrap .mu-navbtn.mu-navbtn--accueil:focus-visible {
        transform: none;
    }

    .mu-cta.mu-cta--ms:hover .mu-cta__pastille,
    .mu-cta.mu-cta--ms:focus-visible .mu-cta__pastille,
    .mu-navbtn.mu-navbtn--retour:hover .mu-navbtn__ico,
    .mu-navbtn.mu-navbtn--retour:focus-visible .mu-navbtn__ico,
    .mu-navbtn.mu-navbtn--accueil:hover .mu-navbtn__ico,
    .mu-navbtn.mu-navbtn--accueil:focus-visible .mu-navbtn__ico {
        transform: none;
    }

    .mu-cta.mu-cta--ms:hover::before,
    .mu-cta.mu-cta--ms:focus-visible::before {
        animation: none;
    }

    /* L'infobulle doit rester visible au survol : c'est une information,
       pas une decoration. Seul son glissement est supprime. */
    .mu-navbtn.mu-navbtn--retour:hover .mu-navbtn__txt,
    .mu-navbtn.mu-navbtn--retour:focus-visible .mu-navbtn__txt,
    .mu-navbtn.mu-navbtn--accueil:hover .mu-navbtn__txt,
    .mu-navbtn.mu-navbtn--accueil:focus-visible .mu-navbtn__txt {
        transform: translate(-50%, 0);
    }
}
