. 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 ,
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.mu-cta--ms:hover,
.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);
}
}
/* =====================================================================
1ter. LE BOUTON WHATSAPP (.mu-cta--wa)
=====================================================================
TOUT ce qui definit la FORME du bouton — dimensions, rembourrage,
rayon, typographie, pastille, libelle, reflet, comportement au survol —
est deja porte par les selecteurs SANS variante (`.mu-cta`,
`.mu-cta__pastille`, `.mu-cta__label`, `.mu-ico*`) ou par les regles
partagees ci-dessus. On ne redit donc ici QUE la couleur.
C'est volontaire et c'est la garantie demandee : les deux boutons ne
peuvent pas diverger en taille ni en effet, puisqu'une seule regle les
dimensionne. Si l'on ajuste un jour le rembourrage de `.mu-cta--ms`,
il faudra l'ajouter au selecteur groupe — d'ou les selecteurs groupes
introduits plus bas.
===================================================================== */
.mu-cta.mu-cta--wa {
--mu-ms-creux: #fff; /* le combine se lit comme une decoupe */
position: relative;
isolation: isolate;
overflow: hidden;
display: inline-flex;
align-items: center;
gap: 14px;
max-width: 100%;
padding: 15px 30px;
border: 0;
border-radius: 999px;
background: linear-gradient(135deg, #34E27A 0%, var(--mu-wa-vert) 46%, var(--mu-wa-vert-fonce) 100%);
color: #fff;
font-family: var(--mu-police);
font-size: clamp(17px, 2vw, 21px);
font-weight: 700;
line-height: 1.5;
text-decoration: none;
box-shadow: 0 16px 34px rgba(37, 211, 102, .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;
}
/* Meme reflet balaye que Messenger — la regle est identique, seul le
selecteur change. */
.mu-cta.mu-cta--wa::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--wa:hover::before,
.mu-cta.mu-cta--wa:focus-visible::before {
animation: mu-ui-reflet .9s ease;
}
/* (0,3,0) : il faut battre `.elementor-kit-1690 a:hover` (0,2,1). */
.mu-cta.mu-cta--wa:hover,
.mu-cta.mu-cta--wa:focus-visible {
transform: translateY(-4px);
color: #fff;
box-shadow: 0 24px 48px rgba(37, 211, 102, .38),
0 8px 18px rgba(65, 36, 109, .22);
}
.mu-cta.mu-cta--wa:active {
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(37, 211, 102, .28);
}
/* L'orange de la marque tranche sur le vert comme sur le blanc de la
page — un anneau vert se serait fondu dans le bouton. Meme choix que
pour Messenger. */
.mu-cta.mu-cta--wa:focus-visible {
outline: 3px solid var(--mu-orange);
outline-offset: 4px;
}
/* La pastille est blanche dans les deux cas ; seule la couleur du glyphe
change, et elle est prise sur `color`, donc heritee par currentColor. */
.mu-cta.mu-cta--wa .mu-cta__pastille {
color: var(--mu-wa-vert);
}
.mu-cta.mu-cta--wa:hover .mu-cta__pastille,
.mu-cta.mu-cta--wa:focus-visible .mu-cta__pastille {
transform: rotate(-8deg) scale(1.08);
}
@media (max-width: 575.98px) {
.mu-cta.mu-cta--wa { padding: 13px 22px; gap: 11px; }
}
/* Mouvement reduit : on reprend exactement les memes coupures que pour
Messenger. Un utilisateur qui a demande moins d'animation ne doit pas
en recevoir d'un bouton et pas de l'autre. */
@media (prefers-reduced-motion: reduce) {
.mu-cta.mu-cta--wa { transition: none; }
.mu-cta.mu-cta--wa::before,
.mu-cta.mu-cta--wa:hover::before,
.mu-cta.mu-cta--wa:focus-visible::before { animation: none; }
.mu-cta.mu-cta--wa:hover,
.mu-cta.mu-cta--wa:focus-visible { transform: none; }
.mu-cta.mu-cta--wa:hover .mu-cta__pastille,
.mu-cta.mu-cta--wa:focus-visible .mu-cta__pastille { transform: none; }
}
/* =====================================================================
1quater. LA PAIRE DE BOUTONS (.mu-cta-duo)
=====================================================================
Emise par mu-content-fixes.php a la place du