/** * Correctifs de defilement — Mikso * ------------------------------------------------------------------ * Ecrit a la main : ce fichier n'est PAS produit par le generateur de * feuilles de fidelite (wp-content/uploads/mikso/). Il ne redefinit * aucune dimension de la maquette, uniquement le comportement du * defilement. * * A terme, la regle du point 1 a sa place dans le generateur. */ /* --- Reperes --------------------------------------------------------- */ :root { --mikso-entete: 109px; /* hauteur mesuree de .xpro-theme-builder-header */ --mikso-air-ancre: 24px; /* respiration entre l'en-tete et la cible */ --mikso-barre-admin: 0px; } @media (max-width: 1024px) { :root { --mikso-entete: 104px; } } /* La barre d'administration n'est fixe qu'au-dessus de 782 px ; en dessous elle defile avec la page et ne masque donc rien. */ body.admin-bar { --mikso-barre-admin: 32px; } @media screen and (max-width: 782px) { body.admin-bar { --mikso-barre-admin: 0px; } } /** * 1. Cibles d'ancre. * * L'en-tete est collant : sans marge de defilement, une ancre amene la * cible a 0 px du haut de la fenetre, donc entierement sous l'en-tete. * Mesure avant correctif : #comparatif, #faq, #organisation, #articles, * #immeuble, #solutions, #contenu arrivaient tous a top = 0, masques de * 109 px (141 px avec la barre d'administration). * * scroll-margin-top ne deplace rien : il ne s'applique qu'au moment ou le * navigateur defile vers l'element. Les hauteurs de section sont intactes. */ body [id] { scroll-margin-top: calc(var(--mikso-entete) + var(--mikso-barre-admin) + var(--mikso-air-ancre)); } /* ==================================================================== * 2. Debordement horizontal sous 560 px — bloc d'actions de l'en-tete * -------------------------------------------------------------------- * Mesure avant correctif, identique sur les 8 pages : * scrollWidth - clientWidth = +193 a 320, +138 a 375, +33 a 480, 0 a 560. * L'element qui fixe le scrollWidth est .elementor-element-mk00006 * (.cdp-hdr-s6), le bloc « Appeler Mikso » + « Faire une demande ». * Il est en « flex: 0 0 auto » : largeur constante de 363 px, posee a * left:150 px une fois le badge masque — bord droit fige a 513 px quelle * que soit la largeur de la fenetre. * * On ne retouche aucune dimension de la maquette : on rend la barre * capable de se replier, ce que la maquette ne prevoyait pas puisqu'elle * est fluide et non responsive. * ==================================================================== */ /* Sous 760 px — seuil ecrit par la maquette, la ou le badge s'efface et le bouton d'appel apparait : la barre peut passer a la ligne et le bloc d'actions cesse d'etre indeformable. */ @media (max-width: 760px) { body .elementor.elementor.elementor.elementor .cdp-hdr-s2 { flex-wrap: wrap; column-gap: 14px; row-gap: 8px; } body .elementor.elementor.elementor.elementor .cdp-hdr-s6 { flex: 1 1 auto; min-width: 0; justify-content: flex-end; gap: 8px; } body .elementor.elementor.elementor.elementor .cdp-hdr-s7, body .elementor.elementor.elementor.elementor .cdp-hdr-s8 { min-width: 0; font-size: 14px; padding: 10px 16px; } } /* Sous 560 px : le bloc d'actions prend sa propre ligne et les deux boutons se partagent la largeur a parts egales. « white-space: normal » garantit qu'aucune etiquette ne peut plus imposer la largeur : a 320 px « Faire une demande » se replie sur deux lignes plutot que de deborder. */ @media (max-width: 560px) { body .elementor.elementor.elementor.elementor .cdp-hdr-s6 { flex: 1 0 100%; justify-content: stretch; } body .elementor.elementor.elementor.elementor .cdp-hdr-s7, body .elementor.elementor.elementor.elementor .cdp-hdr-s8 { flex: 1 1 0; text-align: center; white-space: normal; font-size: 13.5px; padding: 10px 10px; line-height: 1.2; } } /* L'en-tete gagne une ligne sous 560 px : la marge d'ancre suit. */ @media (max-width: 560px) { :root { --mikso-entete: 148px; } } /* ==================================================================== * 3. La barre de defilement horizontale redevient un signal * -------------------------------------------------------------------- * Blocksy pose « body { overflow-x: hidden } » (static/bundle/main.min.css). * html restant en « visible », la propagation donne l'overflow au viewport : * plus de barre de defilement, donc le visiteur ne pouvait pas atteindre la * partie coupee — le debordement etait masque, pas resolu. * Le debordement etant desormais nul de 320 a 1600 px sur les 8 pages, on * retire le pansement : tout debordement futur redeviendra visible. * ==================================================================== */ body { overflow-x: visible; } /* ==================================================================== * 4. /expertises/ : +3 px de 768 a 1100 px * -------------------------------------------------------------------- * La mascotte .cdp-mai-s139 est posee en « position:absolute; right:-26px » * dans .cdp-mai-s128, lui-meme dans la grille .cdp-mai-s122 (max-width 1180, * padding 24). En dessous de 1228 px la grille touche les bords : le * debordement de 26 px sort alors du document. * « overflow-x: clip » coupe exactement ce qui depasse du cadre, sans creer * de boite de defilement et sans rien deplacer ; « overflow-y » reste * visible, la retombee basse de la mascotte est conservee. * ==================================================================== */ @media (max-width: 1239px) { body .elementor.elementor.elementor.elementor .cdp-mai-s121 { overflow-x: clip; } } /* ==================================================================== * 5. Hamburger et croix de fermeture : icones dessinees en CSS * -------------------------------------------------------------------- * Xpro rend et , mais * Font Awesome n'est charge nulle part sur le site : aucune feuille * « fontawesome » dans le HTML, et getComputedStyle(i,'::before').content * vaut la chaine vide. Le bouton existe bien (40x40, cliquable) mais ne * dessine rien — d'ou un hamburger invisible sous 1024 px. * On dessine les deux traits en CSS, en « currentColor » : la couleur * blanche deja posee par commun.css continue de s'appliquer. * ==================================================================== */ body .elementor .mk-menu .xpro-elementor-horizontal-menu-toggler i.fa-bars, body .elementor .mk-menu .xpro-elementor-horizontal-menu-close i.fa-times { font-size: 0; line-height: 0; position: relative; display: block; background: currentColor; border-radius: 2px; } /* Hamburger : trois traits de 24 px. */ body .elementor .mk-menu .xpro-elementor-horizontal-menu-toggler i.fa-bars { width: 24px; height: 2px; margin: 11px 0; } body .elementor .mk-menu .xpro-elementor-horizontal-menu-toggler i.fa-bars::before, body .elementor .mk-menu .xpro-elementor-horizontal-menu-toggler i.fa-bars::after { content: ""; position: absolute; left: 0; width: 24px; height: 2px; background: currentColor; border-radius: 2px; } body .elementor .mk-menu .xpro-elementor-horizontal-menu-toggler i.fa-bars::before { top: -7px; } body .elementor .mk-menu .xpro-elementor-horizontal-menu-toggler i.fa-bars::after { top: 7px; } /* Croix de fermeture du panneau. */ body .elementor .mk-menu .xpro-elementor-horizontal-menu-close i.fa-times { width: 20px; height: 20px; background: none; } body .elementor .mk-menu .xpro-elementor-horizontal-menu-close i.fa-times::before, body .elementor .mk-menu .xpro-elementor-horizontal-menu-close i.fa-times::after { content: ""; position: absolute; top: 9px; left: 0; width: 20px; height: 2px; background: currentColor; border-radius: 2px; } body .elementor .mk-menu .xpro-elementor-horizontal-menu-close i.fa-times::before { transform: rotate(45deg); } body .elementor .mk-menu .xpro-elementor-horizontal-menu-close i.fa-times::after { transform: rotate(-45deg); } /* ==================================================================== * 6. Ordre de tabulation * -------------------------------------------------------------------- * Le bouton d'appel (.cdp-hdr-s7) au-dessus de 760 px et le hamburger * au-dessus de 1024 px sont deja sortis du flux par « display:none » : * .cdp-hdr-s7 dans commun.css, le hamburger par la feuille de Xpro. * Mesure : element.checkVisibility() = false pour les deux a 1440 px. * Les deux arrets a 0x0 releves par l'audit etaient l'element interne * (,