/* * Barre sticky bas-de-page -- SOURCE UNIQUE PARTAGÉE entre les pages CODE PROMO et les * pages AVIS V2 pilotes (2026-08-10, refactor Etienne "unifier avis/promo, jamais une * copie qui divergera -- la duplication a causé des semaines d'allers-retours"). * * Ce fichier est extrait TEL QUEL (aucune valeur/formule changée) du bloc qui vivait * auparavant en bas de promo-page.css -- tout l'historique de calibrage ci-dessous (~15 * itérations : scaling fluide clamp() par langue, bascule texte long/court, pastille, * logo, bouton) est RIGOUREUSEMENT INCHANGÉ, rien n'est perdu ni réécrit. * * Enqueué par LES DEUX types de page : * - Pages promo : MBS_Providers_Manager::promo_page_scripts() (is_singular('mbs_provider_promo')). * - Pages avis pilotes : MBS_Avis_V2_Preview::enqueue_live_css() (mbs_avis_v2_page_is_pilot()). * * Markup émis par includes/mbs-sticky-render.php (fonction mbs_render_sticky_bar()) -- * SOURCE UNIQUE du HTML `.mbs-promo-sticky-bar`, appelée par les deux générateurs. * * NE JAMAIS dupliquer ces règles dans promo-page.css ou avis-v2.css : une seule feuille, * un seul jeu de classes `.mps-*`, deux consommateurs. * * Ces sélecteurs ne sont volontairement PAS scopés sous `.mbs-promo-page` (contrairement au * reste de promo-page.css) : la barre est en `position:fixed`, indépendante de tout wrapper * ancêtre -- elle fonctionne donc identiquement qu'elle soit rendue dans le DOM d'une page * promo (avec le wrapper `.mbs-promo-page`) ou d'une page avis (sans ce wrapper). */ /* ──────────────────────────────────────────────────────────────────────── * Barre sticky (bas) — pleine largeur, fond navy marque (#17264a→#24365f), * révélée au scroll (.on). Gauche : logo + nom + « code promo CODE ». * Droite : réduction au-dessus du bouton « Voir l'offre ». Retour Etienne 2026-07-31. * * REFONTE 2026-08-07 (retour Etienne, 6e itération) : le round du 2026-08-06 * (juste en dessous dans l'historique) avait remplacé le scaling fluide par * DEUX PALIERS FIXES (≤639px / ≥640px) pour tuer un bug d'inversion. Design * validé par Etienne, mais pas la MÉTHODE : il veut désormais que la taille * varie EN CONTINU avec la largeur, jamais par saut. Le bug d'inversion * d'alors venait précisément d'avoir DEUX formules par élément (un clamp() * en base + une media query mobile qui le recroisait) : avec UN SEUL * clamp(MIN, A + Bvw, MAX) par élément couvrant TOUTE la plage 320-1280px et * ZÉRO media query de taille, deux formules ne peuvent plus se croiser — la * monotonie est garantie par construction (une seule fonction affine * croissante, `clamp()` ne fait qu'aplatir en dessous de MIN / au-dessus de * MAX). Bornes choisies : * - MIN (320px, petit mobile) = les valeurs du palier ≤639px ci-dessus * (déjà agrandies x1.3, jugées "bien" par Etienne) -- INCHANGÉES. * - MAX (1280px et au-delà, plateau) = les valeurs du palier ≥640px * ci-dessus x~1.2 (retour Etienne : "notablement plus grand qu'avant sur * grand écran, le texte doit s'étaler"). Ex. .mps-l1 23px -> 28px. * Toutes les tailles/espacements sont exposés en custom properties sur * `.mbs-promo-sticky-bar` (héritées par les enfants via `var()`) : un * override par langue redéfinit la variable sur le même élément (spécificité * normale, `.mps-lang-xx` gagne sur la règle de base) au lieu de dupliquer * toute la déclaration -- moins de code, impossible de désynchroniser deux * copies de la même formule. * * Ce qui reste un vrai palier (une DÉCISION DE CONTENU, pas une taille) : * l'agencement du connecteur « avec »/« with » (.mps-mavec fin de ligne 1 vs * .mps-davec début de ligne 2) et l'affichage de .mps-rdc (« de réduction » * sur la ligne 1, seulement quand le connecteur n'y est pas). C'est un choix * binaire de mots sur quelle ligne, aucun scaling continu n'a de sens ici -- * un seul point de bascule à 640px est conservé (identique à avant), les * TAILLES de part et d'autre restent, elles, continues. * * Simplifications actées avec ce refactor (risque en baisse, effet visuel * nul à négligeable) : * - .mps-l1 line-height unifié à 1.15 (au lieu de 1.12 / 1.15 par palier). * - .mps-disc margin-left unifié à .5em (au lieu de .55em / .4em) -- déjà * en `em`, donc déjà fluide (relatif à la police clampée du parent). * - .mps-amt-chip (montant no-code) : aucun changement -- déjà en `em` * relatif à .mps-l2, hérite donc déjà la courbe continue sans clamp dédié. * * Overrides par langue (bg/de/el/hu/nl/sv/hr + boutons EN/HU) : convertis en * clamp() individuels sur la même plage 320-1280, jamais en valeur fixe — une * valeur fixe recroiserait la courbe de base à une largeur intermédiaire * (piège explicitement signalé par Etienne). hu no-code garde une réduction * desktop dédiée via un sélecteur à 4 classes (`.mps-lang-hu .mps-txt--nc * .mps-l2`), plus spécifique que la règle générale à 3 classes -- la * spécificité CSS suffit seule à faire gagner la bonne règle à TOUTE largeur, * le garde-fou « @media (min-width:640px) OBLIGATOIRE » du round précédent * (nécessaire uniquement à cause du découpage en deux media queries) n'a * plus lieu d'être sans media query de taille du tout. * Resweep complet 25 langues (bcengi/nadanada n'ont pas de page 'no' — 26e * langue du site absente pour ces deux fournisseurs, confirmé côté API avant * ce commit) x largeurs 320-1440 x 2 variantes, police self-hosted réelle * (Poppins woff2 latin + latin-ext, mêmes fichiers que la prod), mesure * Range.getClientRects() du texte réel contre le bord de .mps-bt à chaque * largeur -- voir le message de commit / rapport de déploiement pour le * détail des overrides retenus et la preuve de monotonie. * * MOBILE ×1,25 2026-08-08 (retour Etienne, 8e itération) : « sur mobile, que * les bannières paraissent encore plus hautes/plus grandes, tout * proportionnel, augmente ~25% sur mobile, sous ~500px » -- DESKTOP (MAX de * chaque clamp, ≥1280px) explicitement INCHANGÉ. Même ancrage 320/1280 que * tous les rounds précédents, seul le MIN (et donc la pente) change par * propriété -- un ×1,25 uniforme sur TOUT (texte+bouton+logo+gaps) faisait * déborder ~48/50 langues×variantes à 320px dès le premier essai (mesuré --- * voir plus bas la mise en garde sur getBoundingClientRect), le budget * horizontal à 320px était déjà quasi nul avant ce round. Arbitrage retenu, * par ordre de priorité (comme demandé) : * 1. Hauteur de barre (--mps-pad-v) : ×1,25 FRANC (7px -> 8.75px). Vertical * pur, aucun coût horizontal -- zéro compromis ici. * 2. Logo (--mps-lg-size) : 34px -> 40px (x1.18, PAS le 42px suggéré au * départ). Mesuré : chaque px de logo coûte 1px de largeur disponible * pour le texte (le logo est carré, largeur=hauteur) ; à 42px le budget * texte devenait négatif pour la moitié des langues avant même d'y * toucher. 40px reste un agrandissement net et visible (logo carré donc * la hauteur grandit pareil) tout en gardant assez de budget pour le * texte, qui compte davantage pour l'effet « plus gros » recherché. * --mps-lg-radius suit proportionnellement (12px -> 14px). * 3. Texte (--mps-l1/--mps-l2/--mps-code-font) : calibré PAR LANGUE (voir * bloc d'overrides plus bas) au maximum qui tient à 320px avec ≥2px de * marge de sécurité, JAMAIS en dessous de la valeur de production * actuelle. Résultat réel (mesuré, pas visé) : de 0% (hu, la langue la * plus contrainte -- CTA le plus long + texte long) à +22% (langues * courtes : fi/ja/ko/tr/bg/da/it/nl/pl/sl/tr) selon la langue -- PAS un * ×1,25 uniforme, un ×1,25 uniforme n'était mathématiquement pas tenable * pour la moitié des langues sans repasser sous leur taille actuelle. * 4. Bouton EN (.mps-lang-en .mps-bt) : ×1,25 franc comme demandé (CTA * court « See deals », le plus de marge des 25 langues). Bouton HU * (.mps-lang-hu .mps-bt) : INCHANGÉ (0%) -- HU est la seule langue dont * jusqu'à son bouton actuel (déjà réduit) absorbe la totalité du * supplément logo+hauteur ; le grossir en plus aurait fait déborder même * sans toucher au texte. Bouton partagé (les 23 autres langues) : * INCHANGÉ (--mps-bt-font/--mps-bt-pad-h) -- le CTA est partagé par des * langues très longues (HU, NL, RO...), le grossir aurait mangé tout le * budget texte qu'on vient de leur redonner. * 5. Gaps/marges horizontales (--mps-gap-in/--mps-gap-lft/--mps-pad-h) : * RÉDUITS sous leur valeur actuelle (4px/4px/6px -> 2px/2px/1px) pour * compenser une partie du coût du logo -- aucune priorité explicite * dessus, effet visuel nul à cette échelle (le docblock du round * précédent qualifiait déjà l'ancienne marge de « quasi nulle »). * --mps-code-pad-v/--mps-bt-pad-v/--mps-bt-radius (vertical ou coût nul) : * ×1,25 franc, aucun compromis nécessaire. * MÉTHODE DE MESURE (piège corrigé en cours de route) : mesurer * l1.getBoundingClientRect() directement est FAUX ici -- .mps-l1/.mps-l2 sont * des DIV bloc white-space:nowrap dans un parent flex-shrink (min-width:0) ; * quand le texte est plus large que la place que le flex lui laisse, la boîte * du DIV reste à la largeur RÉDUITE mais le texte peint PAR-DESSUS, invisible * à un simple .getBoundingClientRect(). Seule une Range.getClientRects() sur * le contenu réel capture le vrai bord droit peint -- déjà documenté plus * haut dans ce fichier, ré-appris à la dure pendant ce round (un premier * harnais de test qui oubliait la media query de bascule "avec"/"with" * ci-dessous donnait aussi de faux positifs massifs avant d'être corrigé). * Resweep complet 25 langues (+no calibré séparément, contenu propre non * cloné d'EN) x largeurs 300-1440 x 2 variantes, police self-hosted réelle, * fixture Playwright + Range.getClientRects() : zéro débordement, zéro * régression de monotonie, zéro langue sous sa taille de production actuelle. * * RÉGLAGES FINS 2026-08-07 (retour Etienne, 7e itération, scaling fluide * inchangé) : 3 ajustements sur le même système de clamp() continu. * 1. Interligne resserré : .mps-l1 line-height 1.15 -> 1.05. .mps-l2 n'avait * en réalité JAMAIS de line-height propre (fuite du thème -- * `article, .post { line-height: 28px }` de rehub-theme, une valeur * ABSOLUE en px héritée telle quelle par tout le fil .entry-content > * .mbs-promo-sticky-bar > ... > .mps-l2, confirmé par getComputedStyle en * direct : .mps-l2 affichait 28px de line-height à TOUTES les largeurs * alors que son propre font-size, lui, est fluide 14->23px) -- fixé à * 1.05 (relatif, comme .mps-l1). margin-top retiré (superflu, c'est lui * qui masquait la fuite). Cette fuite gonflait aussi .mps-code/ * .mps-amt-chip (enfants inline-block de .mps-l2, eux non plus sans * line-height propre) bien au-delà de leur padding -- notamment sur * mobile, où un texte de 14px se retrouvait dans une pastille calée sur * 28px de hauteur de ligne. * 2. Pastilles resserrées : --mps-code-pad-v 3-5px -> 2-3px, --mps-code-pad-h * 9-17px -> 8-14px. .mps-amt-chip (montant, no-code) passe d'un padding * en `em` (relatif à .mps-l2, jamais exactement identique à .mps-code) * à ces MÊMES variables px -- bcengi et nadanada ont donc désormais une * pastille rigoureusement identique à largeur égale. * 3. Logo agrandi au petit : --mps-lg-size MIN 28px -> 34px (MAX 55px * desktop inchangé, jugé bon par Etienne). --mps-lg-radius MIN suit * proportionnellement (10px -> 12px). Un logo plus grand au plancher * mange ~6px de largeur disponible à 320px sur TOUTES les langues (la * marge y était déjà nulle par construction -- le sweep d'origine * calibre chaque override pile au bord) ; recompensé par : * - un tour de vis partagé sur --mps-gap-in/--mps-pad-h/--mps-gap-lft/ * --mps-bt-pad-h (MIN de chacun réduit de 1px, MAX inchangé) ; * - un ajustement ciblé (MIN réduit de ~0.5-2px, MAX inchangé, donc * toujours monotone) des overrides déjà existants pour de/el/hu/sv (et * du plafond dédié hu no-code), plus DEUX nouveaux overrides -- en et * nn -- qui n'en avaient jamais eu besoin avant ce logo plus grand. * Resweep complet 25 langues x largeurs 320-1440 (pas de 20px) x 2 * variantes refait après ces 3 changements, même méthode (fixture * statique locale, police self-hosted réelle, Range.getClientRects()) : * zéro débordement, zéro régression de monotonie. * ──────────────────────────────────────────────────────────────────────── */ .mbs-promo-sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; padding: 0; opacity: 0; transform: translateY(140%); transition: opacity .25s, transform .25s; pointer-events: none; z-index: 9990; font-family: 'Poppins', system-ui, sans-serif; box-sizing: border-box; line-height: 1; /* Courbes fluides 320->1280px (voir docblock, round 2026-08-08 : MIN x1.25, MAX INCHANGÉ -- même ancrage 320/1280 que tous les rounds précédents, seule la pente change). */ /* MOBILE HAUTEUR + AIR 2026-08-08 (retour Etienne, 9e itération) : 2 réglages mobile uniquement, même méthode (MIN change, MAX identique, même ancrage 320/1280, un seul clamp par élément) : 1. Hauteur (--mps-pad-v) encore augmentée : MIN 8.75px -> 16.75px (barre ~63px -> ~77px à 375px sur bcengi/nadanada EN, mesuré). Vertical pur, aucun coût horizontal. 2. Air autour du texte : logo et bouton étaient "collés" au texte sur mobile (--mps-gap-lft/--mps-gap-in réduits à 2px/2px au round précédent pour caser le gros logo). Remontés à 8px/9px (~9-10px rendu à 375px, mesuré Playwright réel) -- financé en réduisant le logo mobile (--mps-lg-size MIN 40px -> 34px, --mps-lg-radius suit proportionnellement 14px -> 11.9px), PAS le texte (jamais sous sa taille de production actuelle) ni le bouton (marge suffisante une fois le logo réduit, cf. mesure ci-dessous). Budget 320px (le plus contraint) : gap-lft n'est JAMAIS compressible (positionné avant l'élément qui rétrécit, mesuré constant à travers tous les largeurs) -- augmenter --mps-gap-in ne change RIEN à la marge réelle une fois le contenu à l'étroit (le flex-shrink de .mps-txt absorbe l'écart demandé, cf. calcul détaillé dans le rapport de déploiement) ; seul compte, à 320px : logo + gap-lft + texte + bouton vs largeur dispo. En code le plus large des 25 langues (en, calibré au plus juste au round précédent) : marge réelle mesurée 3.48px à 320px (Range.getClientRects(), même méthode que les rounds précédents) -- comparable à la marge d'origine (~3.48px, calcul identique) malgré les gaps ×4, entièrement financée par le logo. Resweep complet 25 langues x 2 variantes x largeurs 300-1440, police self-hosted réelle : zéro débordement, zéro régression de monotonie. Effet de bord mathématique DIVULGUÉ (pas de palier caché) : un clamp() unique ancré 320/1280 ne peut pas bouger le plancher (320) sans aussi déplacer les largeurs intermédiaires (640/900) -- déjà le cas à chaque round précédent (ex. round du 2026-08-08 précédent : logo à 640px 41px -> 45px). Ici, avec un delta de MIN plus large (hauteur), 640px se déplace davantage (mesuré ~81px -> ~92px) ; 900px un peu moins (~100px -> ~107px) ; 1280px INCHANGÉ à la décimale près (vérifié getComputedStyle). Aucune media query de taille ajoutée -- la seule façon d'isoler totalement le ≤500px serait un second clamp/palier, explicitement exclu par la contrainte "un seul clamp par élément". */ /* ROUND 2026-08-08 (10e itération, retour Etienne « chevauchement persistant 300-315px + fixture qui divergeait du live ») : 1. MARGE DE SÉCURITÉ REDÉFINIE JUSQU'À 300px (pas seulement 320) : mesuré en direct sur le LIVE (pas seulement en fixture), la marge texte<->bouton à 320px n'était que de ~3.5px pour le pire cas (nadanada EN) -- et comme TOUT est plafonné (clamp) en dessous de 320px, ce qui manque de largeur entre 300 et 320px (jusqu'à 20px de moins) se traduisait en chevauchement RÉEL, pas cosmétique : jusqu'à ~16px de recouvrement mesuré à 300px avant ce round, sur la quasi-totalité des 25 langues x 2 variantes (le budget était juste partout, pas seulement sur les langues déjà connues comme tendues). Découverte clé qui a guidé le calibrage : une fois le contenu assez petit pour tenir dans la largeur dispo, `.mps-in` (flex, justify-content:center) n'a plus rien à écraser -- la marge devient alors EXACTEMENT égale à --mps-gap-in (un gap CSS garanti, indépendant de la police/du rendu). Stratégie retenue : réduire pastille/bouton/texte (dans cet ordre, comme demandé) JUSTE assez pour atteindre ce régime "confortable" à 300px, puis porter la marge garantie sur --mps-gap-in lui-même (8px, largement au-dessus du minimum de 6px exigé, avec 3px de coussin supplémentaire absorbé pendant le calibrage pour tolérer un rendu de police légèrement différent d'un navigateur à l'autre). Résultat mesuré (fixture Playwright validée EXACTEMENT contre le live, cf. commit suivant) : marge >= 8px sur les 50 combinaisons langue x variante à 300px (8 à 9.67px) -- un premier passage de calibrage avait mesuré 6.33px avec un override --mps-l1/--mps-l2 en réalité INERTE (bug de spécificité CSS trouvé et corrigé avant le calibrage final ci-dessus, qui est bien celui déployé). Un seul clamp par propriété, MIN seul modifié, MAX (>=1280px) INCHANGÉ à la décimale près sur toutes les propriétés partagées. 2. FUITE DE THÈME NEUTRALISÉE (cause de la divergence fixture/live) : le thème rehub applique un reset global `*{font:inherit}` (criticalcss.php) qui met `line-height:inherit` sur tout span/div/a/b sans règle plus spécifique, remontant jusqu'à `.post,article{line-height:28px}` (valeur ABSOLUE) -- .mps-bt (bouton) n'avait pas de line-height propre et héritait donc ce 28px fixe, gonflant sa hauteur réelle de façon invisible à un fixture qui ne rejoue pas cet ancêtre. N'affecte PAS la largeur (line-height est un axe vertical), donc sans lien avec le chevauchement lui-même, mais documenté et corrigé par hygiène (voir line-height explicite posé sur .mps-in/.mps-lft/.mps-txt/.mps-lg/.mps-bt plus bas) -- désormais le sticky ne dépend plus d'AUCUNE règle du thème, fixture et live rendent identique. ROUND 2026-08-08 (11e itération, GROWTH -- raccourcissement du texte livre du budget, retour Etienne "grossir texte+bouton, surtout au petit") : le texte du sticky promo est raccourci (voir mbs-sticky-i18n.php -- 'code_pre' remplace conn+lecode, ligne 1 perd 'rdc', nc_l1/nc_l2 réécrits plus courts) -- ce round ne change RIEN au mécanisme de scaling (toujours un seul clamp() par propriété, ancré 320/1280, MAX inchangé partout), il AGRANDIT le MIN (mobile) là où le nouveau contenu, plus court, laisse du slack. Méthode de mesure IDENTIQUE aux rounds précédents (Range.getClientRects() sur le texte réel peint) MAIS avec un piège corrigé en cours de calibrage : au-delà d'un certain point de croissance, `.mps-lft` (qui n'a PAS flex-shrink:0, contrairement à .mps-lg/.mps-bt) se fait compresser par le flex container une fois le cluster plus large que la barre -- mesurer sa largeur ALLOUÉE (post-shrink) masque alors un chevauchement déjà réel (le texte, white-space:nowrap, peint par-dessus). Le slack de calibrage a donc été mesuré en forçant temporairement flex-shrink:0 + min-width:max-content sur .mps-lft/.mps-txt (largeur NATURELLE, non écrasée) -- uniquement pendant la mesure, aucun changement de ce comportement en production. Ordre de croissance (priorité mission : bouton d'abord, texte ensuite) : (1) bouton PARTAGÉ (23 langues/25, +40% environ) ; (2) bouton HU dédié (+22%, le plus contraint, CTA "Ajánlat megtekintése" resté long) ; (3) bouton EN dédié (+75%, le plus de marge) ; (4) --mps-l1/--mps-l2 PAR LANGUE (partagés code+nocode, pire des deux variantes) ; (5) --mps-code-font PAR LANGUE (variante à code seule), plafonné à 92% du MAX pour ne jamais aplatir la pente. Cible de sécurité : 5px de slack (largeur naturelle) résiduel à 300px avant de s'arrêter -- garantit une marge texte<->bouton réelle qui reste au moins égale à --mps-gap-in (8px, le plancher garanti par le gap flex) avec un coussin cross-navigateur. Resweep complet 25 langues x 2 variantes x largeurs 300-1440, police self-hosted réelle, Range.getClientRects() : zéro chevauchement, zéro régression de monotonie (voir commit de déploiement pour le détail des valeurs retenues). */ --mps-gap-in: clamp(8px, 4.3333px + 1.1458vw, 19px); --mps-pad-v: clamp(16.75px, 16.6667px + .026vw, 17px); --mps-pad-h: clamp(0px, -12.6667px + 3.9583vw, 38px); --mps-gap-lft: clamp(5px, 1px + 1.25vw, 17px); --mps-lg-size: clamp(34px, 27px + 2.1875vw, 55px); --mps-lg-radius: clamp(11.9px, 9.5333px + .7396vw, 19px); --mps-l1: clamp(18px, 14.6667px + 1.0417vw, 28px); --mps-l2: clamp(15.5px, 13px + .7813vw, 23px); --mps-code-font: clamp(11px, 6.6667px + 1.3542vw, 24px); --mps-code-pad-v: clamp(1.5px, 1px + .1563vw, 3px); --mps-code-pad-h: clamp(5px, 2px + .9375vw, 14px); --mps-bt-font: clamp(12.57px, 9.0933px + 1.0865vw, 23px); --mps-bt-pad-v: clamp(9.08px, 6.7733px + .7208vw, 16px); --mps-bt-pad-h: clamp(6.98px, -2.0267px + 2.8146vw, 34px); --mps-bt-radius: clamp(11.25px, 9.3333px + .599vw, 17px); } .mbs-promo-sticky-bar.on { opacity: 1; transform: translateY(0); pointer-events: auto; } .mbs-promo-sticky-bar .mps-in { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: var(--mps-gap-in); background: #24365f; border: none; border-radius: 0; box-shadow: 0 -6px 28px -12px rgba(15,23,42,.55); padding: var(--mps-pad-v) var(--mps-pad-h); padding-bottom: calc(var(--mps-pad-v) + env(safe-area-inset-bottom)); width: 100%; color: #fff; text-decoration: none; cursor: pointer; box-sizing: border-box; line-height: 1; letter-spacing: normal; font-family: inherit; } .mbs-promo-sticky-bar .mps-in:hover { color: #fff; } .mbs-promo-sticky-bar .mps-lft { display: flex; align-items: center; gap: var(--mps-gap-lft); min-width: 0; box-sizing: border-box; line-height: 1; } .mbs-promo-sticky-bar .mps-lg { width: var(--mps-lg-size); height: var(--mps-lg-size); border-radius: var(--mps-lg-radius); background: #fff; border: 1px solid rgba(255,255,255,.4); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; padding: 5px; font-size: 0; line-height: 0; box-sizing: border-box; } /* Logo vertically off-center fix (retour Etienne 2026-08-07) : le logo est servi en + par le plugin d'optimisation d'images (EWWW) -- pas le nu du markup PHP. Or est mis en display:block par un reset CSS du thème, sans hauteur propre : sa hauteur devient celle de la LIGNE inline qui contient l' (pilotée par le font-size/line-height ambiants hérités, ex 16px/28px), pas celle de l'image elle-même -- l'image (vertical-align:top) se retrouve donc en haut d'une boîte invisible plus haute qu'elle, elle-même centrée par le flex de .mps-lg : le logo apparaît décalé vers le haut (mesuré en direct sur bcengi+nadanada mobile : ~8px de décalage, 0 sur desktop où l'image dépasse déjà la ligne fantôme). font-size/line-height:0 sur .mps-lg annule la "ligne fantôme" (héritée par /), qui se réduit alors pile à la hauteur de l'image -- confirmé par mesure Playwright réelle (offset 0 partout, 375/1280, bcengi et nadanada) avant ce commit. */ .mbs-promo-sticky-bar .mps-lg img { width: 100%; height: 100%; object-fit: contain; display: block; } .mbs-promo-sticky-bar .mps-txt { min-width: 0; text-align: left; box-sizing: border-box; line-height: 1; } /* .mps-txtset (2026-08-08, réintroduction du texte long) : LES DEUX jeux de contenu (long/court) sont dans le DOM, un seul visible à la fois. Desktop-first : le LONG est visible par défaut (aucun media query nécessaire pour ça), le COURT est caché par défaut -- display:none le retire entièrement du flux, donc il ne pèse RIEN sur la largeur naturelle de .mps-txt tant qu'aucun media query ne l'active. Les seuils PAR LANGUE qui activent le court (et cachent le long en dessous) vivent plus bas dans ce fichier, sous les overrides .mps-lang-xx -- une media query par seuil DISTINCT, plusieurs langues au même seuil partagent le même bloc. Les deux .mps-txtset héritent les mêmes classes .mps-l1/.mps-l2 (mêmes clamp() de taille, cf. racine du fichier) -- ce round ne change AUCUNE taille, seul le contenu affiché à chaque largeur change. */ .mbs-promo-sticky-bar .mps-txtset--long { display: block; } .mbs-promo-sticky-bar .mps-txtset--short { display: none; } .mbs-promo-sticky-bar .mps-l1 { font-weight: 800; font-size: var(--mps-l1); line-height: 1.05; color: #fff; white-space: nowrap; box-sizing: border-box; letter-spacing: normal; vertical-align: baseline; font-family: inherit; } .mbs-promo-sticky-bar .mps-l1 .mps-pname { font-weight: 800; letter-spacing: normal; vertical-align: baseline; } .mbs-promo-sticky-bar .mps-l1 .mps-disc { font-weight: 900; font-size: 1.06em; margin-left: .5em; letter-spacing: normal; vertical-align: baseline; } /* .mps-rdc RÉINTRODUIT (2026-08-08, version LONGUE) -- même reset qu'avant son retrait round 2026-08-08 précédent (letter-spacing/vertical-align, hygiène anti-fuite thème), maintenant utilisé UNIQUEMENT à l'intérieur de .mps-txtset--long (voir class-provider-promo-pages-generator.php). .mps-mavec/.mps-davec eux ne sont PAS réintroduits (la version longue affiche 'conn' en tête de ligne 2 systématiquement, plus de bascule mobile/desktop) -- mais gardés cachés ci-dessous par défense : une page promo dont le post_content baké n'a pas encore été régénéré depuis avant le round 2026-08-08 peut encore contenir ces deux classes dans son HTML stocké (rendu LIVE via render_current()/the_content, PAS ce post_content baké, pour toute page réellement visitée -- voir class-provider-promo-pages-generator.php::live_render_content() -- donc sans risque en pratique, ce n'est qu'un filet de sécurité au cas où ce chemin de repli baked serait un jour servi tel quel). */ .mbs-promo-sticky-bar .mps-l1 .mps-rdc { letter-spacing: normal; vertical-align: baseline; } .mbs-promo-sticky-bar .mps-mavec, .mbs-promo-sticky-bar .mps-davec { display: none; } /* line-height explicite (retour Etienne, round 2026-08-07 : interligne trop large, "plus ça grossit, plus ça s'écarte") -- voir docblock en tête de bloc. margin-top retiré : superflu une fois le vrai line-height en place. */ .mbs-promo-sticky-bar .mps-l2 { font-size: var(--mps-l2); line-height: 1.05; font-weight: 700; color: #fff; white-space: nowrap; box-sizing: border-box; letter-spacing: normal; vertical-align: baseline; font-family: inherit; } /* Pastille (.mps-code + .mps-amt-chip, voir plus bas) : padding resserré (retour Etienne, round 2026-08-07) -- --mps-code-pad-v/-h pilotent les DEUX pastilles identiquement (bcengi = nadanada à largeur égale). line-height/ box-sizing explicites (round 2026-08-08, auto-suffisance anti-fuite thème) -- sans ça .mps-code (un ) hériterait "inherit" du reset thème comme .mps-bt (voir docblock racine) ; ici sans effet visible (le parent .mps-l2 fournit déjà un line-height numérique sain) mais posé par cohérence/défense. */ .mbs-promo-sticky-bar .mps-code { display: inline-block; vertical-align: middle; background: rgba(255,255,255,.2); color: #fff; padding: var(--mps-code-pad-v) var(--mps-code-pad-h); border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 800; letter-spacing: .3px; font-size: var(--mps-code-font); margin-left: 0; box-sizing: border-box; line-height: 1.05; } /* Bouton : jamais écrasé (flex-shrink:0) ET jamais empilé (.mps-in est flex-wrap:nowrap plus haut, aucune media query ne le fait plus basculer en pleine largeur -- retour Etienne : "toujours à droite, vraiment toujours"). Fuite de thème CORRIGÉE (round 2026-08-08, 10e itération -- documentée sans être corrigée au round précédent) : comme .mps-l2 avant son propre fix (round 2026-08-07 plus haut), .mps-bt n'avait PAS de line-height propre et héritait le `line-height:28px` fixe de `article,.post` (rehub-theme/inc/criticalcss.php), le vrai ancêtre DOM de la barre (single-mbs_provider_promo.php :
...). Sans effet sur la largeur (line-height est un axe vertical, aucun lien avec le chevauchement texte<->bouton de ce round) mais gonflait la hauteur réelle du bouton EN dédié (police jusqu'à 32px desktop) de façon invisible à un fixture qui ne rejoue pas cet ancêtre -- ligne explicite ci-dessous : le sticky ne dépend plus d'AUCUNE règle du thème (fixture == live, vérifié). */ .mbs-promo-sticky-bar .mps-bt { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: #dc2626; color: #fff; font-weight: 800; font-size: var(--mps-bt-font); padding: var(--mps-bt-pad-v) var(--mps-bt-pad-h); border-radius: var(--mps-bt-radius); box-shadow: 0 12px 26px -8px rgba(220,38,38,.75); white-space: nowrap; box-sizing: border-box; line-height: 1.1; letter-spacing: normal; font-family: inherit; } .mbs-promo-sticky-bar .mps-bt:hover { background: #b91c1c; color: #fff; box-shadow: 0 14px 30px -8px rgba(220,38,38,.85); } /* Garde défensive (retour Florentin/Etienne 2026-08-06, « boîte sombre vide » en sans-code entre le texte et le CTA) : relecture de tout l'historique git de ce bloc confirme que la variante sans-code (.mps-payg), depuis son tout premier commit, n'a JAMAIS émis de pastille .mps-code — celle-ci n'existe que dans la branche à code. Si une page très ancienne sert encore du HTML figé (post_content baked) d'avant la bascule sans-code (pastille vide faute de code à l'époque), cette règle la neutralise sans dépendre d'une régénération — live immédiatement via cette feuille de style, sans effet sur une page correctement générée (ne matche qu'un élément VRAIMENT vide). */ .mbs-promo-sticky-bar .mps-code:empty { display: none; } /* No-code affiliate mode : le no-code réutilise .mps-l1/.mps-l2 tel quel (mêmes variables --mps-l1/--mps-l2 que nadanada, donc même courbe fluide, aucune règle propre par défaut). .mps-txt--nc (posé par le générateur sur le conteneur .mps-txt, jamais sur .mps-l1/.mps-l2 eux-mêmes) est le crochet CSS qui scope les rares overrides no-code SEUL (ex. hu plus bas) -- sans effet sur nadanada quel que soit son contenu, puisqu'elle n'a jamais ce conteneur. Montant en PASTILLE (.mps-amt-chip, même traitement pilule que .mps-code, texte ambre #fbbf24) : sa police reste en `em` relative à .mps-l2 (hérite donc déjà la courbe fluide de .mps-l2 sans clamp dédié, par langue ou non), mais son PADDING est sur --mps-code-pad-v/-h (px, partagé avec .mps-code, round 2026-08-07) au lieu d'un padding en `em` -- retour Etienne : les deux pastilles doivent être identiques (bcengi = nadanada), un padding en `em` relatif à .mps-l2 ne tombait pas exactement sur les mêmes px que celui, fixe, de .mps-code. */ .mbs-promo-sticky-bar .mps-l2 .mps-amt-chip { display: inline-block; vertical-align: middle; background: rgba(255,255,255,.2); color: #fbbf24; font-weight: 800; border-radius: 8px; padding: var(--mps-code-pad-v) var(--mps-code-pad-h); margin: 0 .12em; box-sizing: border-box; } /* Bouton EN : nettement plus gros que le bouton partagé (CTA court "See deals", voir mbs-sticky-i18n.php) -- .mps-bt partagé non touché (plusieurs langues ont un libellé long, ex HU "Ajánlat megtekintése", NL "Bekijk aanbieding", RO "Vezi oferta" -- les grossir toutes ferait déborder ces libellés). Un seul clamp par propriété sur toute la plage 320-1280, aucune media query. MIN AGRANDI (round 2026-08-08, 11e itération, GROWTH -- voir docblock racine) : +75% de MIN, le texte EN raccourci (ligne 2 "with MYBESTSIM" au lieu de "with the code MYBESTSIM") laisse le plus de marge des 25 langues. MAX INCHANGÉ (32/23/50/22, border-radius non touché). */ .mbs-promo-sticky-bar.mps-lang-en .mps-bt { font-size: clamp(23.62px, 20.8267px + .8729vw, 32px); padding: clamp(11.37px, 7.4933px + 1.2115vw, 23px) clamp(12.25px, -.3333px + 3.9323vw, 50px); border-radius: clamp(13.75px, 11px + .8594vw, 22px); } /* Bouton HU : reste le plus contraint des 25 langues (CTA "Ajánlat megtekintése" long, inchangé par ce round -- seul le sticky promo est raccourci, pas le CTA du bouton). MIN AGRANDI malgré tout (round 2026-08-08, 11e itération, GROWTH) : +22%, calibré au maximum que le slack HU (le plus faible des 25 langues, ~28px à 300px) permet en gardant 5px de coussin. MAX INCHANGÉ (23/16/34/17, identique au bouton partagé au plus grand). */ .mbs-promo-sticky-bar.mps-lang-hu .mps-bt { font-size: clamp(10.39px, 6.1867px + 1.3135vw, 23px); padding: clamp(6.72px, 3.6267px + .9667vw, 16px) clamp(6.72px, -2.3733px + 2.8417vw, 34px); border-radius: clamp(8px, 5px + .9375vw, 17px); } /* Overrides .mps-l1/.mps-l2/--mps-code-font PAR LANGUE (round 2026-08-08, 11e itération, GROWTH -- voir docblock racine). MIN AGRANDI partout (le texte raccourci de mbs-sticky-i18n.php libère du slack), calibré par langue au maximum que permet un coussin de 5px de slack à 300px (--mps-code-font plafonné à 92% du MAX pour ne jamais aplatir la pente). es/it reçoivent ici leur premier --mps-code-font DÉDIÉ (avant ce round ils retombaient sur le défaut --mps-code-font: clamp(11px,...,24px) de la racine, jamais agrandi). MAX INCHANGÉ partout (28/23 pour .mps-l1/.mps-l2, 24 pour --mps-code-font) -- desktop volontairement laissé tel quel (déjà généreux, "reste tasteful"). */ .mbs-promo-sticky-bar.mps-lang-bg .mps-l1 { font-size: clamp(15.93px, 11.9067px + 1.2573vw, 28px); } .mbs-promo-sticky-bar.mps-lang-bg .mps-l2 { font-size: clamp(14.61px, 11.8133px + .874vw, 23px); } .mbs-promo-sticky-bar.mps-lang-bg { --mps-code-font: clamp(21.36px, 20.48px + .275vw, 24px); } .mbs-promo-sticky-bar.mps-lang-cs .mps-l1 { font-size: clamp(14.12px, 9.4933px + 1.4458vw, 28px); } .mbs-promo-sticky-bar.mps-lang-cs .mps-l2 { font-size: clamp(12.44px, 8.92px + 1.1vw, 23px); } .mbs-promo-sticky-bar.mps-lang-cs { --mps-code-font: clamp(18.81px, 17.08px + .5406vw, 24px); } .mbs-promo-sticky-bar.mps-lang-da .mps-l1 { font-size: clamp(17.81px, 14.4133px + 1.0615vw, 28px); } .mbs-promo-sticky-bar.mps-lang-da .mps-l2 { font-size: clamp(18.35px, 16.8px + .4844vw, 23px); } .mbs-promo-sticky-bar.mps-lang-da { --mps-code-font: clamp(17.86px, 15.8133px + .6396vw, 24px); } .mbs-promo-sticky-bar.mps-lang-de .mps-l1 { font-size: clamp(16.67px, 12.8933px + 1.1802vw, 28px); } .mbs-promo-sticky-bar.mps-lang-de .mps-l2 { font-size: clamp(15.63px, 13.1733px + .7677vw, 23px); } .mbs-promo-sticky-bar.mps-lang-de { --mps-code-font: clamp(19.02px, 17.36px + .5188vw, 24px); } .mbs-promo-sticky-bar.mps-lang-el .mps-l1 { font-size: clamp(13.01px, 8.0133px + 1.5615vw, 28px); } .mbs-promo-sticky-bar.mps-lang-el .mps-l2 { font-size: clamp(11.22px, 7.2933px + 1.2271vw, 23px); } .mbs-promo-sticky-bar.mps-lang-el { --mps-code-font: clamp(15.74px, 12.9867px + .8604vw, 24px); } .mbs-promo-sticky-bar.mps-lang-en .mps-l1 { font-size: clamp(12.31px, 7.08px + 1.6344vw, 28px); } .mbs-promo-sticky-bar.mps-lang-en .mps-l2 { font-size: clamp(11.49px, 7.6533px + 1.199vw, 23px); } .mbs-promo-sticky-bar.mps-lang-en { --mps-code-font: clamp(12.43px, 8.5733px + 1.2052vw, 24px); } .mbs-promo-sticky-bar.mps-lang-es .mps-l1 { font-size: clamp(16.74px, 12.9867px + 1.1729vw, 28px); } .mbs-promo-sticky-bar.mps-lang-es .mps-l2 { font-size: clamp(15.76px, 13.3467px + .7542vw, 23px); } .mbs-promo-sticky-bar.mps-lang-es { --mps-code-font: clamp(20.07px, 18.76px + .4094vw, 24px); } .mbs-promo-sticky-bar.mps-lang-fi .mps-l1 { font-size: clamp(16.82px, 13.0933px + 1.1646vw, 28px); } .mbs-promo-sticky-bar.mps-lang-fi .mps-l2 { font-size: clamp(13.95px, 10.9333px + .9427vw, 23px); } .mbs-promo-sticky-bar.mps-lang-fi { --mps-code-font: clamp(17.02px, 14.6933px + .7271vw, 24px); } .mbs-promo-sticky-bar.mps-lang-fr .mps-l1 { font-size: clamp(18.4px, 15.2px + 1vw, 28px); } .mbs-promo-sticky-bar.mps-lang-fr .mps-l2 { font-size: clamp(18.14px, 16.52px + .5063vw, 23px); } .mbs-promo-sticky-bar.mps-lang-fr { --mps-code-font: clamp(19.6px, 18.1333px + .4583vw, 24px); } .mbs-promo-sticky-bar.mps-lang-hr .mps-l1 { font-size: clamp(14.15px, 9.5333px + 1.4427vw, 28px); } .mbs-promo-sticky-bar.mps-lang-hr .mps-l2 { font-size: clamp(12.46px, 8.9467px + 1.0979vw, 23px); } .mbs-promo-sticky-bar.mps-lang-hr { --mps-code-font: clamp(18.84px, 17.12px + .5375vw, 24px); } .mbs-promo-sticky-bar.mps-lang-hu .mps-l1 { font-size: clamp(13.54px, 8.72px + 1.5063vw, 28px); } .mbs-promo-sticky-bar.mps-lang-hu .mps-l2 { font-size: clamp(8.4px, 3.5333px + 1.5208vw, 23px); } .mbs-promo-sticky-bar.mps-lang-hu { --mps-code-font: clamp(16.29px, 13.72px + .8031vw, 24px); } .mbs-promo-sticky-bar.mps-lang-it .mps-l1 { font-size: clamp(17.29px, 13.72px + 1.1156vw, 28px); } .mbs-promo-sticky-bar.mps-lang-it .mps-l2 { font-size: clamp(17.56px, 15.7467px + .5667vw, 23px); } .mbs-promo-sticky-bar.mps-lang-it { --mps-code-font: clamp(18.82px, 17.0933px + .5396vw, 24px); } .mbs-promo-sticky-bar.mps-lang-ja .mps-l1 { font-size: clamp(19.4px, 16.5333px + .8958vw, 28px); } .mbs-promo-sticky-bar.mps-lang-ja .mps-l2 { font-size: clamp(15.89px, 13.52px + .7406vw, 23px); } .mbs-promo-sticky-bar.mps-lang-ja { --mps-code-font: clamp(19.72px, 18.2933px + .4458vw, 24px); } .mbs-promo-sticky-bar.mps-lang-ko .mps-l1 { font-size: clamp(21.38px, 19.1733px + .6896vw, 28px); } .mbs-promo-sticky-bar.mps-lang-ko .mps-l2 { font-size: clamp(17.51px, 15.68px + .5719vw, 23px); } .mbs-promo-sticky-bar.mps-lang-ko { --mps-code-font: clamp(22.08px, 21.44px + .2vw, 24px); } .mbs-promo-sticky-bar.mps-lang-nl .mps-l1 { font-size: clamp(13.4px, 8.5333px + 1.5208vw, 28px); } .mbs-promo-sticky-bar.mps-lang-nl .mps-l2 { font-size: clamp(16.57px, 14.4267px + .6698vw, 23px); } .mbs-promo-sticky-bar.mps-lang-nl { --mps-code-font: clamp(12.38px, 8.5067px + 1.2104vw, 24px); } .mbs-promo-sticky-bar.mps-lang-nn .mps-l1 { font-size: clamp(18.32px, 15.0933px + 1.0083vw, 28px); } .mbs-promo-sticky-bar.mps-lang-nn .mps-l2 { font-size: clamp(18.32px, 16.76px + .4875vw, 23px); } .mbs-promo-sticky-bar.mps-lang-nn { --mps-code-font: clamp(18.72px, 16.96px + .55vw, 24px); } .mbs-promo-sticky-bar.mps-lang-no .mps-l1 { font-size: clamp(18.4px, 15.2px + 1vw, 28px); } .mbs-promo-sticky-bar.mps-lang-no .mps-l2 { font-size: clamp(18.14px, 16.52px + .5063vw, 23px); } .mbs-promo-sticky-bar.mps-lang-no { --mps-code-font: clamp(19.6px, 18.1333px + .4583vw, 24px); } .mbs-promo-sticky-bar.mps-lang-pl .mps-l1 { font-size: clamp(16.67px, 12.8933px + 1.1802vw, 28px); } .mbs-promo-sticky-bar.mps-lang-pl .mps-l2 { font-size: clamp(14.91px, 12.2133px + .8427vw, 23px); } .mbs-promo-sticky-bar.mps-lang-pl { --mps-code-font: clamp(22.08px, 21.44px + .2vw, 24px); } .mbs-promo-sticky-bar.mps-lang-pt .mps-l1 { font-size: clamp(18.06px, 14.7467px + 1.0354vw, 28px); } .mbs-promo-sticky-bar.mps-lang-pt .mps-l2 { font-size: clamp(16.98px, 14.9733px + .6271vw, 23px); } .mbs-promo-sticky-bar.mps-lang-pt { --mps-code-font: clamp(11px, 6.6667px + 1.3542vw, 24px); } .mbs-promo-sticky-bar.mps-lang-ro .mps-l1 { font-size: clamp(18.81px, 15.7467px + .9573vw, 28px); } .mbs-promo-sticky-bar.mps-lang-ro .mps-l2 { font-size: clamp(15.34px, 12.7867px + .7979vw, 23px); } .mbs-promo-sticky-bar.mps-lang-ro { --mps-code-font: clamp(22.08px, 21.44px + .2vw, 24px); } .mbs-promo-sticky-bar.mps-lang-ru .mps-l1 { font-size: clamp(13.62px, 8.8267px + 1.4979vw, 28px); } .mbs-promo-sticky-bar.mps-lang-ru .mps-l2 { font-size: clamp(12.71px, 9.28px + 1.0719vw, 23px); } .mbs-promo-sticky-bar.mps-lang-ru { --mps-code-font: clamp(11.53px, 7.3733px + 1.299vw, 24px); } .mbs-promo-sticky-bar.mps-lang-sk .mps-l1 { font-size: clamp(14.65px, 10.2px + 1.3906vw, 28px); } .mbs-promo-sticky-bar.mps-lang-sk .mps-l2 { font-size: clamp(13.38px, 10.1733px + 1.0021vw, 23px); } .mbs-promo-sticky-bar.mps-lang-sk { --mps-code-font: clamp(19.52px, 18.0267px + .4667vw, 24px); } .mbs-promo-sticky-bar.mps-lang-sl .mps-l1 { font-size: clamp(14.33px, 9.7733px + 1.424vw, 28px); } .mbs-promo-sticky-bar.mps-lang-sl .mps-l2 { font-size: clamp(14.55px, 11.7333px + .8802vw, 23px); } .mbs-promo-sticky-bar.mps-lang-sl { --mps-code-font: clamp(18.84px, 17.12px + .5375vw, 24px); } .mbs-promo-sticky-bar.mps-lang-sv .mps-l1 { font-size: clamp(15.39px, 11.1867px + 1.3135vw, 28px); } .mbs-promo-sticky-bar.mps-lang-sv .mps-l2 { font-size: clamp(17.48px, 15.64px + .575vw, 23px); } .mbs-promo-sticky-bar.mps-lang-sv { --mps-code-font: clamp(14.35px, 11.1333px + 1.0052vw, 24px); } .mbs-promo-sticky-bar.mps-lang-tr .mps-l1 { font-size: clamp(19.18px, 16.24px + .9188vw, 28px); } .mbs-promo-sticky-bar.mps-lang-tr .mps-l2 { font-size: clamp(15.71px, 13.28px + .7594vw, 23px); } .mbs-promo-sticky-bar.mps-lang-tr { --mps-code-font: clamp(22.08px, 21.44px + .2vw, 24px); } .mbs-promo-sticky-bar.mps-lang-uk .mps-l1 { font-size: clamp(13.03px, 8.04px + 1.5594vw, 28px); } .mbs-promo-sticky-bar.mps-lang-uk .mps-l2 { font-size: clamp(9.94px, 5.5867px + 1.3604vw, 23px); } .mbs-promo-sticky-bar.mps-lang-uk { --mps-code-font: clamp(12.23px, 8.3067px + 1.226vw, 24px); } /* hu no-code : override dédié RETIRÉ (round 2026-08-08, 11e itération -- réévaluation demandée par Etienne). Il existait car l'ancienne phrase HU sans-code ("Igénylem a {discount} kedvezményemet") était nettement plus longue que "kód MYBESTSIM" (variante à code) à taille égale ; le nc_l2 raccourci ("{discount} kedvezmény", verbe déplacé en nc_l1) est maintenant du même ordre de longueur que la ligne 2 à code -- testé (voir resweep final-sweep.mjs) : .mps-lang-hu .mps-l2 (partagé, ci-dessus) tient seul sans chevauchement pour bcengi/hu ET nadanada/hu à toutes les largeurs 300-1440. */ /* Round 2026-08-08 (raccourcissement sticky promo) : le media query "bascule .mps-rdc/.mps-mavec/.mps-davec" qui vivait ici est RETIRÉ -- le générateur n'émet plus ces classes dans le rendu promo (ligne 2 = un seul champ 'code_pre', même emplacement mobile et desktop, plus de rewording responsive à faire). Zéro media query de taille dans tout ce bloc, comme voulu depuis le round 2026-08-07 ("un seul clamp() par élément, la monotonie est garantie par construction"). */ /* Seuil de bascule LONG/COURT (2026-08-08, réintroduction du texte long, retour Etienne "long sur desktop, court seulement là où le long ne rentre plus") -- LA SEULE media query de taille de tout ce bloc, ajoutée volontairement pour un choix de CONTENU (pas une taille : les clamp() ci-dessus sont TOUS inchangés par ce round, y compris leurs MIN -- voir mbs-sticky-i18n.php / class-provider-promo-pages-generator.php). MESURÉ (fixture Playwright, police self-hosted réelle -- 4 fichiers latin/latin-ext 400/700, mêmes que omgf/poppins/poppins.css -- markup PHP réel généré pour les 26 langues x 2 variantes, resweep 300-1920px par pas de 4px, marge = max(getBoundingClientRect, Range.getClientRects()) du texte réel vs .mps-bt, méthode croisée pour ne jamais sous-compter un chevauchement réel), PAS deviné : contrairement à l'intuition "chaque langue a son propre seuil", le seuil qui compte ici n'est PAS content-dependent une fois la compression flex terminée. Le pire cas mesuré (PT à-code, "nadanada -10% de desconto" / "com o código MYBESTSIM") décompresse dès 480px -- mais TOUTE langue/ variante une fois décompressée voit sa marge réelle devenir EXACTEMENT --mps-gap-in(largeur), une variable CSS PARTAGÉE et indépendante du texte affiché (même mécanisme déjà établi plus haut dans ce fichier pour le régime "confortable" de la version courte à 300px). --mps-gap-in ne franchit le plancher de 10px que vers ~495px, bien après que TOUTES les 52 combinaisons langue x variante aient déjà décompressé (pire cas 480px) -- le seuil est donc gouverné par cette formule PARTAGÉE, pas par le contenu d'une langue en particulier : UN SEUL seuil suffit pour les 26 langues (fr, en, bg, cs, da, de, el, es, fi, hr, hu, it, ja, ko, nl, nn, no, pl, pt, ro, ru, sk, sl, sv, tr, uk) ET les 2 variantes (à code / sans-code). Retenu : 600px (marge LONGUE mesurée 11.2px à 600px pour les 52 combinaisons, >= 10px minimum requis, coussin cross-navigateur ; marge COURTE mesurée sur toute la plage 300-599px : plancher 8.0px pile à 300px -- valeur déjà en prod, INCHANGÉE par ce round -- jamais en dessous ailleurs dans la plage). Au-dessus de 600px (desktop et tablette), long visible partout ; en dessous (tout mobile, y compris les plus grands téléphones ~430px), court. Resweep complet, zéro chevauchement, zéro régression de monotonie confirmée jusqu'à 1920px (le plafond --mps-gap-in à 19px à partir de 1280px fait que la marge PLAFONNE aussi à 19px au-delà, par construction de `justify-content: center` + `gap` -- l'espace en trop va aux marges extérieures, jamais au gap central). */ @media (max-width: 599px) { .mbs-promo-sticky-bar .mps-txtset--long { display: none; } .mbs-promo-sticky-bar .mps-txtset--short { display: block; } }