/* * Correctif : menu mobile illisible (texte blanc sur fond blanc) sur les sections dont la couleur * d'en-tête est réglée en « texte clair » (ex. MoMo). * * Cause : functions/menus.php (mtnivid_output_header_color) injecte en * .header-closed a, .header-closed .menu-item { color: #ffffff; } * pensé pour la barre du haut *fermée*. Le panneau du menu mobile, une fois *ouvert*, garde la * classe .header-closed sur son conteneur et a un fond blanc : ses éléments de premier niveau * (Particuliers/Business/People & Culture/Momo, list .mobile-menu) héritent donc ce blanc et * deviennent invisibles. Le thème corrige déjà ce cas pour les sous-menus (.dropdown-menu a), * pas pour ce premier niveau — cette règle comble ce trou, avec la même couleur (#000000) que le * correctif déjà choisi par le thème pour rester cohérent visuellement. * * Reproduit et confirmé sur /momo-particulier/ (largeur mobile, menu ouvert) le 2026-09-28 ; * indépendant de toute fonctionnalité des plugins MTNBJ, présent même sans eux. */ @media (max-width: 880px) { .header-closed .mobile-menu .menu-item { color: #000000; } } /* * Correctif : tableau qui déborde de la page sur mobile (fiches de service, ex. services business). * * Cause : components/deals/forfait-accordion.php rend un (ou * une table WYSIWYG) directement dans .forfait-accordion-panel, sans conteneur scrollable — un tableau * plus large que l'écran pousse alors toute la page en scroll horizontal au lieu de rester dans le * panneau. Confirmé sur une fiche services business (ex. /businessservices/...), CSS uniquement, * n'affecte pas la mise en page desktop (où le tableau tient déjà dans la largeur). */ .forfait-accordion-panel { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* * Sidebar (.ots-side, bloc thème « Offer Tabs Sidebar » et fiches MTNBJ « navigation latérale ») : * masquée par défaut sur mobile derrière un bouton, plutôt qu'empilée en premier au-dessus du * contenu — même principe que le filtre de la liste « style Forfait » déjà sur le site. Bouton injecté * par assets/js/patches.js (générique : fonctionne sur toute page utilisant .ots, pas seulement MoMo). */ @media (max-width: 800px) { .ots-side { display: none; } .ots-side.is-open { display: block; margin-bottom: 16px; } .ots-side-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 20px; margin-bottom: 16px; background: #ffffff; border: 1.5px solid #FFCB05; border-radius: 10px; font-family: 'MTNBrighterSans-Bold', sans-serif; font-size: 15px; color: #004F71; cursor: pointer; } .ots-side-toggle__chev { flex: none; width: 11px; height: 7px; transition: transform .15s ease; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 7' fill='none'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23004F71' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .ots-side-toggle[aria-expanded="true"] .ots-side-toggle__chev { transform: rotate(180deg); } } @media (min-width: 801px) { .ots-side-toggle { display: none; } } /* * Marge latérale sur mobile : .ots (thème et fiches MTNBJ) n'a par défaut aucun padding propre — il * colle aux deux bords de l'écran sous ~800px (vérifié identique sur la page native du thème et sur les * fiches MTNBJ, ce n'est pas une régression du plugin, un manque déjà présent dans le composant thème). */ @media (max-width: 800px) { .ots { padding: 0 16px; box-sizing: border-box; } } /* * Même manque de marge latérale sur mobile que .ots, sur deux autres conteneurs « hero + accordéon » * du thème qui partagent le même défaut : max-width + margin:auto sans padding propre, donc collés aux * bords en dessous de leur largeur max (.bs : fiches services business ; .forfait-hero : pages famille de * forfaits/brand, ex. /brands/xxx/). Vérifié identique sur les pages natives du thème, pas une régression. */ @media (max-width: 900px) { .bs, .forfait-hero { padding: 0 16px; box-sizing: border-box; } } /* * Correctif : le tableau « Grille tarifaire » (accordéon à plusieurs colonnes) crée un scroll horizontal * de toute la page sur mobile, même avec le overflow-x:auto ci-dessus sur .forfait-accordion-panel. * * Cause : .bs-layout est une grille (display:grid, grid-template-columns: 1fr en dessous de 720px). Par * défaut, un enfant de grille a min-width:auto (pas 0) : sa piste ne peut pas rétrécir sous la largeur * minimale de son contenu. Un tableau large force donc .bs-right (et toute la grille) à s'élargir au lieu * de laisser son overflow-x:auto interne faire effet — .bs-right doit explicitement avoir min-width:0 * pour que son propre scroll fonctionne. Reproduit sur /businessservices/mtn-fleet-pro/ (tableau à 5 * colonnes) : 673px de contenu dans un écran de 390px avant ce correctif. */ .bs-right { min-width: 0; } /* * Correctif : bouton « retour » du menu mobile (.mobile-dropdowns, fond jaune #FFCB05) trop étroit * (largeur fixe 80px) pour des libellés comme « SERVICES MOMO » ou « MOMO BUSINESS » — le texte se coupe * sur deux lignes et chevauche la barre bleue du header au lieu de rester dans son encadré jaune. * Reproduit le 2026-09-28 en forçant l'état « sous-menu ouvert » sur /momo-particulier/ (mobile). */ @media (max-width: 880px) { .header-container .mobile-dropdowns { /* width:auto ne suffit pas à faire grandir la boîte jusqu'au texte (elle reste bloquée à min-width malgré un contenu plus long, .mobile-dropdowns étant en display:flex positionné en absolute) : une largeur fixe généreuse est plus fiable que de compter sur le shrink-to-fit. */ width: 220px; padding-right: 12px; white-space: nowrap; } } /* * Correctif : le footer « Contactez-nous » des fiches services business/business solutions n'affiche * qu'un bloc noir vide sur mobile (son contenu disparaît entièrement). * * Cause : components/footer/solutions-footer.php enveloppe la carte de contact dans *
* — en réutilisant la classe .deal-footer-details de l'ANCIEN footer « deal » (barre de prix), dont la * règle mobile légitime est de se masquer sous 860px (remplacée par un simple bouton CTA). Le footer * business n'a pas ce bouton de repli : il perd juste tout son contenu, ne laissant que le fond dégradé * noir. On restaure l'affichage spécifiquement pour .solution-footer-details (classe propre au footer * business, absente de l'ancien footer deal), sans toucher au comportement du footer deal d'origine. * !important nécessaire : même spécificité exacte (4 classes) que la règle du thème qu'on corrige, sur * le même media query — sans lui, l'ordre de chargement des feuilles de style décide, pas fiable. */ @media (max-width: 860px) { .deal-footer .deal-footer-background .deal-footer-container .solution-footer-details { display: flex !important; } } /* * Cohérence visuelle du footer « Contactez-nous » (business) sur mobile/tablette, une fois son contenu * réaffiché par le correctif ci-dessus : plus de respiration, et le lien de bas de carte repris comme un * vrai bouton pilule jaune (même langage que les autres CTA du site, ex. « SOUSCRIRE MAINTENANT » sur * cette même page) plutôt qu'un simple lien souligné qui détonnait avec le reste de la page. * * Bug trouvé au passage : le titre « Contactez-nous » a DEUX classes dans le HTML du thème — *

* .deal-footer-price vient de l'ancien footer « deal » (pensée pour un gros prix, ex. « 15 000 FCFA ») * et gagne avec 32px (sélecteur à 4 classes, largement plus spécifique que .solutions-footer-heading * seule) — le titre s'affichait donc bien plus gros que prévu, y compris sur desktop. On cible les deux * classes ensemble pour être certain de gagner face à .deal-footer-price, sans dépendre de l'ordre de * chargement ni ajouter !important. */ @media (max-width: 900px) { .solutions-footer-card { padding: 4px 0; } .deal-footer .deal-footer-background .deal-footer-container .deal-footer-price.solutions-footer-heading { font-size: 22px; margin-bottom: 20px; } .solutions-footer-contacts { gap: 22px 24px; } .solutions-footer-contact-item { gap: 14px; } .solutions-footer-divider { margin: 24px 0 20px; } .solutions-footer-link-wrap { margin: 0; } .solutions-footer-link { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px 20px; background: #FFCB05; color: #1a1a1a; font-family: 'MTNBrighterSans-Bold', sans-serif; font-size: 14px; text-transform: uppercase; text-decoration: none; border-radius: 999px; box-sizing: border-box; } .solutions-footer-link:hover { background: #f1c200; color: #1a1a1a; } .solutions-footer-chevron { font-size: 18px; } } @media (max-width: 700px) { .solutions-footer-contacts { gap: 20px; } }