/* ========================================================================= Le Petit Roannay — corrections version MOBILE (page d'accueil) Retours cliente du 16/09/2026. A ajouter dans Apparence › Personnaliser › CSS additionnel, à la suite de l'existant (ou dans la feuille du thème enfant). Tout est enfermé dans @media (max-width: 767.98px) : la version desktop, burger compris, n'est pas touchée. ========================================================================= */ /* ------------------------------------------------------------------------- 1. « Les coordonnées tél & mail s'affichent sous le logo puis disparaissent… normal ? » → NON, c'est un défaut d'affichage. Cause : le menu principal est servi OUVERT dans le HTML (c'est une simple liste). Sur mobile, il s'affiche donc en entier sous le logo — y compris les deux entrées « Tél: +32 (0)80 60 50 70 » et « Place Saint-Remacle 18 » — puis le JavaScript du thème le replie une fois chargé. Mesuré sur le site : 709 px de hauteur de menu visible avant repli, tél à 686 px et adresse à 742 px du haut de page. Correctif : on masque le menu tant que le JS du thème n'y a pas touché. Dès qu'il pose son style inline, la règle cesse de s'appliquer — le burger continue donc de l'ouvrir et de le fermer normalement. ------------------------------------------------------------------------- */ @media (max-width: 767.98px) { .milenia-header .milenia-navigation:not([style]) { display: none; } } /* ------------------------------------------------------------------------- 1 bis. Le bandeau téléphone + adresse qui réapparaît une fraction de seconde à chaque défilement de la page. C'est un SECOND défaut, de cause différente du précédent — celui-là est bien le bandeau de coordonnées (.milenia-header-section-md), et c'est lui que voit la cliente quand elle fait défiler la page. Cause, tracée dans milenia.sticky-header-section.js : sur chaque événement « resize », le script exécute unsticky(), qui appelle showSections() sur les sections marquées --sticky-hidden — donc sur le bandeau de coordonnées. showSections() fait un slideDown() jQuery, lequel écrit « display: block » EN STYLE INLINE : ce style inline l'emporte sur la règle « display: none » du CSS additionnel, qui n'a pas de !important. Le bandeau se déplie donc sur ~400 ms (mesuré : hauteur de 0 à 83 px), puis le callback complete() remet display à vide et il redisparaît. Pourquoi au défilement ? Sur téléphone, faire défiler la page replie la barre d'URL du navigateur : la hauteur de la fenêtre change, ce qui déclenche un « resize ». D'où un clignotement à chaque défilement. Correctif : le !important, pour que le style inline posé par jQuery ne puisse plus l'emporter. L'animation continue de tourner à vide, sans effet visible et sans décalage de mise en page (vérifié : hauteur de l'en-tête et padding du body inchangés pendant toute la séquence). ⚠️ La règle sans !important reste dans Apparence › Personnaliser › CSS additionnel. Celle-ci la complète ; ne pas la supprimer en pensant qu'elle fait doublon. ------------------------------------------------------------------------- */ @media (max-width: 767.98px) { .milenia-header .milenia-header-section-md { display: none !important; } } /* ------------------------------------------------------------------------- 2. Changement de langues sorti du menu burger, placé à droite du bouton « Réservation ». Fonctionne avec le fichier langues-mobile.js, qui construit le sélecteur à partir des liens Polylang déjà présents dans le menu. ------------------------------------------------------------------------- */ /* Le sélecteur n'existe qu'en mobile : masqué par défaut. Le préfixe .milenia-header est indispensable : le thème applique « .milenia-header-items > div { display: inline-block } », plus spécifique qu'un simple .pr-lang — sans ce préfixe, le bloc reste visible en desktop. */ .milenia-header .pr-lang { display: none; } @media (max-width: 767.98px) { /* La colonne du bouton « Réservation » est forcée à 20 % de large par le CSS existant (.milenia-header-col-xl-4 { flex: 1 1 20% }), sans media query : sur mobile le bouton débordait donc de sa colonne. On lui rend toute la largeur pour y loger le bouton ET les langues. */ .milenia-header .milenia-header-col-xl-4 { -webkit-box-flex: 1; flex: 1 1 100%; max-width: 100%; } .milenia-header .milenia-header-col-xl-4 .milenia-aligner-outer, .milenia-header .milenia-header-col-xl-4 .milenia-aligner-inner { width: 100%; } /* Bouton à gauche, langues à droite, sur une seule ligne. */ .milenia-header .milenia-header-col-xl-4 .milenia-header-items { display: flex; align-items: center; justify-content: space-between; } .milenia-header .milenia-header-col-xl-4 .milenia-header-items > * { margin: 0; } /* Les langues ne doivent plus apparaître dans le burger. Les sélecteurs par classe couvrent les quatre langues du site ; les #menu-item-4772-* visent les anciennes règles « langues mobiles » du CSS existant, qui portent un !important sur un ID. */ .milenia-header .milenia-navigation > .pll-parent-menu-item, .milenia-header .milenia-navigation .lang-item, #menu-item-4772-fr, #menu-item-4772-en, #menu-item-4772-de, #menu-item-4772-nl { display: none !important; } /* Le sélecteur lui-même : drapeau + code, comme en desktop. flex + flex-end : sans ça le bloc s'étire et le drapeau ne reste pas collé au bord droit de l'écran. */ .milenia-header .pr-lang { display: flex; justify-content: flex-end; align-items: center; position: relative; /* ancre du menu déroulant */ padding-right: 1.25rem; } /* Le bouton qui ouvre le menu : sans encadré, comme en desktop */ .milenia-header .pr-lang__toggle { display: flex; align-items: center; gap: .4rem; height: 2.75rem; /* zone de tap confortable au doigt */ padding: 0 .25rem; border: 0; background-color: transparent; cursor: pointer; } .milenia-header .pr-lang__toggle:hover .pr-lang__code, .milenia-header .pr-lang__toggle[aria-expanded="true"] .pr-lang__code { color: #c7b374; } .milenia-header .pr-lang__toggle:hover .pr-lang__chevron, .milenia-header .pr-lang__toggle[aria-expanded="true"] .pr-lang__chevron { border-color: #c7b374; } /* Drapeaux : Polylang les sert en 16 px avec width/height en dur, le script retire ces attributs pour que la taille vienne d'ici. Le sélecteur est volontairement long : le CSS existant applique « a.milenia-ln--independent img { margin-top: 8px } », qui sinon décale les drapeaux du menu déroulant. */ .milenia-header .pr-lang .pr-lang__flag { display: block; width: 20px; height: auto; margin: 0; flex: 0 0 auto; } .milenia-header .pr-lang__code { font-family: "Noto Sans", "Open Sans", sans-serif; font-size: .8125rem; letter-spacing: 1px; line-height: 1; color: #1c1c1c; transition: color .4s cubic-bezier(.165,.84,.44,1); } .milenia-header .pr-lang__chevron { width: 7px; height: 7px; border-right: 1px solid #737373; border-bottom: 1px solid #737373; transform: rotate(45deg) translate(-2px, -2px); transition: transform .3s cubic-bezier(.165,.84,.44,1); } .milenia-header .pr-lang__toggle[aria-expanded="true"] .pr-lang__chevron { transform: rotate(225deg) translate(-2px, -2px); } /* Le menu déroulant */ .milenia-header .pr-lang__menu { position: absolute; top: 100%; right: 1.25rem; z-index: 9999; min-width: 10.5rem; margin: .25rem 0 0; padding: .25rem 0; list-style: none; background-color: #fff; border: 1px solid #e6e6e6; box-shadow: 0 10px 30px rgba(28, 28, 28, .12); } .milenia-header .pr-lang__menu[hidden] { display: none; } .milenia-header .pr-lang__menu li { margin: 0; } .milenia-header .pr-lang__link { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; font-family: "Noto Sans", "Open Sans", sans-serif; font-size: .8125rem; letter-spacing: .5px; line-height: 1.2; color: #1c1c1c; text-decoration: none; background-image: none; /* neutralise le soulignement animé du thème */ transition: color .4s cubic-bezier(.165,.84,.44,1); } .milenia-header .pr-lang__link:hover, .milenia-header .pr-lang__link:focus-visible { color: #c7b374; text-decoration: none; } } /* ------------------------------------------------------------------------- 3. Slider de la bannière : dépannage pour les liens non cliquables. ⚠️ Rustine, pas une correction de fond. Le vrai réglage est dans Slider Revolution (voir le README) : Slider Revolution pose lui-même « pointer-events: none » + la classe .sr-force-nointeraction sur la couche du bouton « Réservez maintenant » quand son animation d'entrée ne se termine pas sur mobile. Cette règle rend le clic aux couches qui contiennent un lien, sans toucher aux autres (pour ne pas gêner le balayage du slider). A activer seulement si la correction dans Slider Revolution ne peut pas être faite tout de suite — et à retirer une fois le slider corrigé. ------------------------------------------------------------------------- */ /* @media (max-width: 767.98px) { #SR7_2_1 sr7-txt:has(a[href]), #SR7_2_1 sr7-txt:has(a[href]) a { pointer-events: auto !important; } } */