/* * Tenue du site sur mobile — In'Box Container. * * ⭐⭐⭐ CE FICHIER NE CONTIENT QUE DES CORRECTIFS DE DEBORDEMENT, et il est * charge SUR TOUTES LES PAGES, en DERNIER. Les deux points comptent : * * 1. « Toutes les pages », parce que les elements en cause — le bouton des * temoignages, les fleches de carrousel, la rangee FAQ — vivent dans le * pied de page et dans des sections partagees. Les corriger sur la seule * fiche produit laissait le reste du site glisser lateralement. * * 2. « En dernier », parce que la feuille du theme est chargee APRES les * mu-plugins. A specificite egale, c'est l'ordre qui tranche, et le * theme gagnait : `white-space: normal` etait ecrit, applique nulle * part, et rien ne le signalait. La priorite 999 de l'enfilage regle * cela une fois pour toutes, et evite d'avoir a surencherir selecteur * par selecteur. * * ⛔⛔ CE QU'ON NE FAIT PAS : `overflow-x: hidden` sur `body` ou `html`. C'est * le reflexe courant et c'est un pansement : il masque le defaut au lieu de * le corriger, il casse `position: sticky` chez tous les descendants, et il * n'empeche pas le viewport de MISE EN PAGE de s'elargir — donc sur un vrai * telephone la page reste zoomee. On corrige chaque cause. * * 🪤🪤 COMMENT MESURER, PARCE QUE LE TEST EVIDENT EST FAUX : * ni `scrollWidth > clientWidth` (il compte la barre de defilement * reservee : 10 px a 320, 0 a 375), ni une tentative de defilement par * script (elle renvoie 0 meme quand la page deborde vraiment — verifie en * reintroduisant le defaut). Le seul indicateur fiable est : * * window.innerWidth - window.visualViewport.width * * c'est-a-dire l'ecart entre le viewport de mise en page et ce qu'on voit. * C'est exactement ce que le doigt peut faire glisser. Calibre : 0 quand * tout va bien, 26 px des qu'on remet le defaut. */ @media (max-width: 991.98px) { /* --------------------------------------------------------------------- * 1. LE BOUTON DES TEMOIGNAGES * * ⭐ LA SOURCE PRINCIPALE. « Retrouvez tous nos temoignages » herite du * `white-space: nowrap` de Bootstrap : sa largeur MINIMALE est de 348 px, * et c'est cette largeur minimale — pas la largeur affichee — qui * determine le viewport de mise en page. Le borner par `max-width` ne * suffit donc PAS : le bouton rentrait bien dans l'ecran, et la page * restait large de 330. Il faut l'autoriser a passer a la ligne. * ⛔ Selecteur en `a.btn.btn-temoignages` et non `.btn-temoignages` seul : * il doit battre `.btn { white-space: nowrap }` de Bootstrap. */ a.btn.btn-temoignages, .btn.btn-temoignages { white-space: normal; max-width: 100%; } /* --------------------------------------------------------------------- * 2. LES FLECHES DE CARROUSEL * * ⭐ Slick pose ses fleches a `right: -25px`, volontairement HORS du cadre, * et personne ne les rogne. D'ou un debordement de 25 px IDENTIQUE a * toutes les largeurs : c'est cette constance qui les a trahies. Un * debordement proportionnel vient d'un contenu trop large ; un * debordement constant vient d'un element de taille fixe colle au bord. * ⭐ La regle vise TOUS les carrousels, pas seulement celui des * accessoires : le meme composant sert aux temoignages et aux * realisations. */ .slick-slider .slick-prev { left: 0; right: auto; } .slick-slider .slick-next { right: 0; left: auto; } /* --------------------------------------------------------------------- * 3. LES RANGEES SANS CONTENEUR * * Une rangee Bootstrap porte -15 px de marge de chaque cote, que le * remplissage de son conteneur compense. Posee directement dans le `main` * ou dans l'enveloppe de page, elle n'a rien qui la compense et sort de * l'ecran des deux cotes. * * ⭐ REGLE STRUCTURELLE, PAS LISTE DE NOMS. J'ai releve les rangees de * quatorze types de page : sur une quinzaine de motifs, une seule * deborde vraiment (`.row.texte-long`, posee directement dans * `#page.site`, sur les pages de gamme et d'accessoires). Toutes les * autres sont dans une colonne qui porte deja le remplissage : les * toucher aurait casse leur alignement. On vise donc la SITUATION - * « rangee sans conteneur » - et non les classes du moment, qui * changeront. */ #page.site > .row, .site-main > .row { margin-left: 0; margin-right: 0; } /* --------------------------------------------------------------------- * 4. LES TABLEAUX LARGES * * Ils defilent dans LEUR PROPRE cadre, jamais la page. `min-width` les * garde lisibles plutot que de les ecraser en colonnes illisibles, et * `overscroll-behavior` empeche le geste de se propager a la page. */ .content-dimensions, .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .content-dimensions > table { min-width: 460px; margin-bottom: 0; } /* --------------------------------------------------------------------- * 5. LE TAMPON « CERTIFIE CSC », EN BAS A DROITE DE L'IMAGE * * ⭐ Trois choses devaient etre corrigees ENSEMBLE, et chacune seule ne * donnait rien : * 1. `left: auto` — sinon le tampon reste cale a gauche ; * 2. `top: auto` — sinon, `top` ET `bottom` etant tous deux fixes, la * BOITE s'etire entre les deux (309 px de haut pour une marque qui en * occupe 72, en haut) et c'est la boite qui descend, pas la marque ; * 3. `right: 27px` — 15 px de gouttiere du cadre + 12 px de retrait, soit * le meme retrait que le rayon du coin arrondi de l'image. * * ⛔⛔ ET IL FALLAIT QUATRE CLASSES. Le theme pose * `.content-image .tampon.certificat_csc.not_haccp { top: 24px }`, de * poids (0,4,0). La SPECIFICITE prime sur l'ordre de chargement : etre * charge en dernier ne suffisait pas, il fallait le meme poids. D'ou ce * selecteur a quatre classes, qui gagne alors par l'ordre — et qui couvre * aussi la variante `haccp`, qu'un selecteur copiant `not_haccp` aurait * laissee de cote. */ .content-image .cadre_img .tampon.certificat_csc { top: auto; left: auto; right: 27px; bottom: 12px; /* * ⛔⛔⛔ LA BOITE DOIT EPOUSER L'ENCRE, ET ELLE NE LE FAISAIT PAS. * Le SVG declare `viewBox="0 0 300 300"` - un carre - alors que son * DESSIN n'occupe que `4 5 292 131`. Rendu a 72 px de large, cela * laisse **39 px de vide sous l'encre**, a l'interieur meme du SVG. * Resultat : la boite etait bien a 12 px du bord droit ET du bord * bas - la mesure ne mentait pas - mais ce qu'on VOIT s'arretait a * 13 px du bord droit et **51 px** du bord bas. D'ou un tampon qui * parait remonte alors que tous les chiffres disent le contraire. * * ⭐ `aspect-ratio: 300 / 140` donne a la boite la hauteur de l'encre * (140 unites du repere interne au lieu de 300), et `overflow` * coupe le vide en trop. Le rapport vient des valeurs MESUREES par * `getBBox()`, pas d'un ajustement a l'oeil : si le dessin change, * on remesure et on remplace 140. * ⛔ Ne PAS reduire la hauteur du SVG lui-meme : avec un `viewBox`, il * ne se recadre pas, il se REDIMENSIONNE - le dessin deviendrait * minuscule et centre. */ height: auto; aspect-ratio: 300 / 140; overflow: hidden; } /* ⛔⛔ ET LE DERNIER SEPT PIXELS, QUI FAISAIENT TOUTE LA DIFFERENCE. Le SVG etait en `display: inline` : il reposait donc sur la ligne de base et laissait 7 px de vide SOUS lui, a l'interieur de sa propre boite. Les retraits mesures etaient bien de 12 et 12 - la boite ne mentait pas - mais ce qu'on VOIT s'arretait 19 px au-dessus du bord bas pour 12 px du bord droit, et le tampon paraissait remonte. ⭐ `display: block` retire cet espace : la boite epouse enfin la marque, et les deux retraits deviennent egaux a l'oeil comme a la mesure. */ .content-image .cadre_img .tampon.certificat_csc > svg { display: block; } /* --------------------------------------------------------------------- * 6. LA BARRE FIXE « DEMANDER UN DEVIS » * * ⭐ `max-width: 100vw` est la ceinture : `100vw` vaut toujours la largeur * de l'ecran, alors qu'un `100 %` se mesure sur un bloc conteneur qui, * lui, grandit avec le debordement. Sans cela, la barre nourrissait le * probleme qu'elle subissait. */ .btn-demande-devis { left: 0; right: 0; width: auto; max-width: 100vw; box-sizing: border-box; } .btn-demande-devis > .btn { width: 100%; white-space: normal; } } /* ------------------------------------------------------------------------- * 7. L'EN-TETE SUR LES TRES PETITS ECRANS * * Sous 360 px, la colonne du menu porte 15 px de remplissage de chaque cote * alors qu'il ne reste plus la place. On les reduit a 4 px : le menu reste * touchable, et la barre cesse de pousser. * ------------------------------------------------------------------------- */ @media (max-width: 360px) { .site-header .col-menu { padding-left: 4px; padding-right: 4px; } }