.nono-mb-bar { position: fixed; left: 0; right: 0; bottom: 0; /* Volontairement bien en dessous des overlays internes du plugin de carte (filtre, fiche, galerie), qui se déplacent eux-mêmes sous avec des z-index très élevés (jusqu'à 1000000) — pour qu'ils s'affichent toujours au-dessus de notre propre lightbox une fois relocalisés. */ z-index: 500000; display: none; justify-content: space-around; align-items: stretch; padding: 6px 4px calc(8px + env(safe-area-inset-bottom, 0px)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.08); transition: transform 0.25s ease; transform: translateY(0); } .nono-mb-bar.nono-mb-bar-hidden { transform: translateY(100%); } /* Le menu du bas est pensé pour les téléphones : en largeur (portrait, comme avant), ou en hauteur (paysage — un iPhone tourné garde une hauteur d'écran de téléphone même si sa largeur dépasse 767px, ce qui le faisait disparaître à tort, surtout sur les iPhone récents plus larges que la plupart des Android testés). */ /* Le menu du bas est pensé pour les téléphones et tablettes, portrait comme paysage : - largeur ≤1024px : couvre téléphones en portrait ET tablettes en portrait (jusqu'à l'iPad Pro 12.9", 1024px de large dans ce sens) - hauteur ≤1024px ET largeur ≤1366px, en paysage : couvre téléphones ET tablettes tournés (l'iPad Pro 12.9" en paysage fait 1366×1024) */ @media (max-width: 1024px), (orientation: landscape) and (max-height: 1024px) and (max-width: 1366px) { .nono-mb-bar { display: flex; } } .nono-mb-btn { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: none; border: none; padding: 4px 2px; cursor: pointer; text-decoration: none; color: inherit; font-family: inherit; } .nono-mb-btn-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .nono-mb-btn-icon img { width: 22px; height: 22px; object-fit: contain; } .nono-mb-btn-icon svg { width: 22px; height: 22px; } /* Effet de roulement "Bientôt" pour les boutons sans lien/shortcode renseigné */ .nono-mb-btn-icon-flip { position: relative; perspective: 200px; } .nono-mb-icon-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; backface-visibility: hidden; transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1); } .nono-mb-icon-face-front { transform: rotateX(0deg); } .nono-mb-icon-face-back { transform: rotateX(180deg); font-size: 9px; line-height: 1.1; text-align: center; padding: 0 2px; } .nono-mb-btn-icon-flip.nono-mb-rolling .nono-mb-icon-face-front { transform: rotateX(180deg); } .nono-mb-btn-icon-flip.nono-mb-rolling .nono-mb-icon-face-back { transform: rotateX(360deg); } .nono-mb-btn-label { font-size: 11px; line-height: 1.1; /* Réserve toujours cette hauteur, même si le texte est vide (sélecteur de langue, sans texte en dessous) — sinon ce bouton-là avait un contenu total plus court que les autres, et le centrage vertical de la colonne (icône + texte) le plaçait donc plus bas qu'eux. */ min-height: calc(11px * 1.1); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nono-mb-corner-rounded .nono-mb-btn-icon { border-radius: 12px; } .nono-mb-corner-square .nono-mb-btn-icon { border-radius: 0; } .nono-mb-corner-circle .nono-mb-btn-icon { border-radius: 50%; } /* Réduction progressive si beaucoup de boutons */ .nono-mb-bar[data-count="5"] .nono-mb-btn-icon, .nono-mb-bar[data-count="6"] .nono-mb-btn-icon, .nono-mb-bar[data-count="7"] .nono-mb-btn-icon { width: 34px; height: 34px; } .nono-mb-bar[data-count="5"] .nono-mb-btn-label, .nono-mb-bar[data-count="6"] .nono-mb-btn-label, .nono-mb-bar[data-count="7"] .nono-mb-btn-label { font-size: 10px; } /* ---------- Sélecteur de langue ---------- */ .nono-mb-lang-wrap { /* Reprend exactement les mêmes règles que .nono-mb-btn (flex:1, colonne centrée) pour participer à la barre de la même façon que les autres boutons — sans ça, ce conteneur n'occupait pas la même largeur que les autres (d'où le mauvais espacement près du bord) et son contenu n'était pas aligné verticalement au même endroit qu'eux. */ position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .nono-mb-lang-btn { /* Le vrai bouton, à l'intérieur du conteneur ci-dessus, n'a plus à gérer lui-même sa participation à la barre (déjà faite par son parent) — juste à remplir l'espace qui lui est donné. */ flex: 1 1 0; width: 100%; } .nono-mb-lang-current { display: flex; /* --nono-mb-flag-w est posée par le PHP (réglage admin), avec 28px par défaut si jamais absente. La hauteur suit toujours les mêmes proportions (2:3) plutôt qu'une valeur fixe, pour ne jamais déformer le drapeau quelle que soit la taille choisie. */ width: var(--nono-mb-flag-w, 28px); height: calc(var(--nono-mb-flag-w, 28px) * 2 / 3); overflow: hidden; border-radius: 2px; } .nono-mb-lang-current svg, .nono-mb-lang-current img { width: 100%; height: 100%; object-fit: cover; } /* Fond transparent par défaut : les réglages admin (gap/padding déjà posés en style inline) restent corrects même sans fond, pour ne pas avoir à retoucher l'espacement le jour où une couleur est activée. */ .nono-mb-lang-menu { display: none; position: absolute; bottom: 100%; left: 50%; border-radius: 12px; flex-direction: column; align-items: center; gap: 12px; z-index: 999999; /* État fermé : caché + décalé vers le bas, prêt à glisser vers le haut en fondu à l'ouverture. La durée de la transition est posée en JS (pas ici) car elle dépend du nombre de langues, pour rester au même rythme que la cascade complète des drapeaux — voir openLangMenu()/closeLangMenu() dans front.js. */ opacity: 0; transform: translateX(-50%) translateY(24px); } .nono-mb-lang-menu.nono-mb-lang-menu-visible { display: flex; } .nono-mb-lang-menu.nono-mb-lang-menu-open { opacity: 1; transform: translateX(-50%) translateY(0); } .nono-mb-lang-opt { display: flex; width: var(--nono-mb-flag-w, 28px); height: calc(var(--nono-mb-flag-w, 28px) * 2 / 3); overflow: hidden; border-radius: 2px; border: none; background: none; padding: 0; cursor: pointer; opacity: 0; transform: translateY(10px); } .nono-mb-lang-opt svg, .nono-mb-lang-opt img { width: 100%; height: 100%; object-fit: cover; } /* --- Sélecteur de langue dans l'en-tête desktop --- */ /* Masqué en dur en dessous de 990px (repère desktop d'Enfold) : le menu du bas gère déjà les langues sur mobile, et cette rangée d'icônes pourrait être dupliquée dans le menu mobile plein écran de certains thèmes — cette règle garantit qu'on ne la verra jamais là-bas, quelle que soit la façon dont le JS l'a insérée. */ .nono-mb-header-lang-item { list-style: none; } @media (max-width: 989px) { .nono-mb-header-lang-item { display: none !important; } } .nono-mb-lang-header-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .nono-mb-lang-header-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; } .nono-mb-lang-header-btn svg, .nono-mb-lang-header-btn img { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; } /* Même principe que le menu du bas (fondu + glissement), mais vers le BAS au lieu du haut, puisque ce sélecteur est en haut de page — état fermé décalé vers le HAUT (translateY négatif), prêt à glisser vers le bas à l'ouverture. */ .nono-mb-lang-header-menu { display: none; position: absolute; top: 100%; left: 50%; margin-top: 14px; border-radius: 12px; flex-direction: column; align-items: center; gap: 12px; z-index: 999999; opacity: 0; transform: translateX(-50%) translateY(-24px); } .nono-mb-lang-header-menu.nono-mb-lang-menu-visible { display: flex; } .nono-mb-lang-header-menu.nono-mb-lang-menu-open { opacity: 1; transform: translateX(-50%) translateY(0); } /* Masque la barre que Google ajoute lui-même tout en haut de la page une fois une traduction active ("Traduit en : ... / Afficher l'original / Options") — un élément séparé, ajouté directement dans , distinct du widget cliqué (déjà masqué, lui, par ailleurs). Sans la 2e règle, Google pousse aussi tout le contenu de la page vers le bas pour lui faire de la place — annulée ici pour que rien ne bouge. ".goog-te-banner-frame" (1ère tentative) et "body > .skiptranslate" (la vraie structure confirmée sur le site, une autre version du widget) — gardées toutes les deux, sans risque, au cas où l'une ou l'autre s'applique selon le navigateur/la version du widget chargée. Le vrai filet de sécurité reste le script JS (front.js), qui réagit et corrige en continu quoi que fasse Google — cette règle CSS n'est qu'un premier rempart. */ .goog-te-banner-frame, body > .skiptranslate { display: none !important; } body { top: 0 !important; }