/* ============================================================================ app_promo_banner.css — bandeau de promotion de l'application mobile ============================================================================ Affiché en haut de la page de connexion sur mobile (cf. js/app_promo_banner.js). Remplace la feuille de la lib SmartBanner (2015) et ses thèmes « iOS 6 » / « Android Gingerbread » (fond rayé en GIF base64, dégradés, boutons biseautés, texte en majuscules) par un bandeau unique aligné sur la charte de la page de connexion : Inter, ardoise, bleu produit --eb-primary, coins arrondis. Ne sert que sur login.php : les sélecteurs peuvent donc s'appuyer sur la mise en page de css/login.css (html/body en height:100%, box-sizing:border-box). ============================================================================ */ :root { --eb-app-promo-h: 68px; } /* Réservation de la hauteur du bandeau. La page de connexion épingle html, body, #kt_login et la colonne du formulaire à 100dvh en !important et coupe tout débordement (css/login.css, ≤ 991px). Se contenter de pousser la page — ce que faisait l'ancien bandeau avec son margin-top sur — décalait donc le formulaire vers le bas et en sortait le pied de page, sans défilement possible pour aller le chercher. On retranche la hauteur du bandeau de ces boîtes au lieu de pousser. */ /* #kt_body est aussi ciblé par « #kt_body { margin: 0 } » (css/main.css) : sans l'identifiant dans le sélecteur, la marge de réservation serait ignorée. */ html.eb-app-promo-on body, html.eb-app-promo-on body#kt_body { margin-top: var(--eb-app-promo-h); height: calc(100% - var(--eb-app-promo-h)); } @media (max-width: 991px) { html.eb-app-promo-on body, html.eb-app-promo-on body#kt_body { height: calc(100vh - var(--eb-app-promo-h)) !important; height: calc(100dvh - var(--eb-app-promo-h)) !important; max-height: calc(100vh - var(--eb-app-promo-h)) !important; max-height: calc(100dvh - var(--eb-app-promo-h)) !important; } /* Mêmes sélecteurs que css/login.css, préfixés : les !important qu'ils portent ne cèdent qu'à une spécificité supérieure. */ html.eb-app-promo-on #kt_login, html.eb-app-promo-on .login.login-1, html.eb-app-promo-on body#kt_body .login.login-1 > .row > .col-lg-4, html.eb-app-promo-on body#kt_body .login.login-1 > .row > .col-lg-4.flex-column, html.eb-app-promo-on .login.login-1 > div:last-child, html.eb-app-promo-on .justify-content-center.small-margin-top.d-flex.col-12.col-lg-4, html.eb-app-promo-on .justify-content-center.small-margin-top.d-flex.col-xs-12.col-md-12.col-lg-4 { height: 100% !important; max-height: 100% !important; } } .eb-app-promo { /* fixed, pas absolute : la page de connexion défile (colonne en min-height 100dvh, remontée du clavier), et l'ancien bandeau en position:absolute disparaissait de l'écran au premier défilement. */ position: fixed; top: 0; left: 0; right: 0; z-index: 1080; display: flex; align-items: center; gap: 0.625rem; height: var(--eb-app-promo-h); padding-left: max(0.75rem, env(safe-area-inset-left)); padding-right: max(0.75rem, env(safe-area-inset-right)); background: var(--eb-surface, #FFFFFF); border-bottom: 1px solid var(--eb-border, #E2E8F0); box-shadow: 0 10px 24px -18px rgba(15, 23, 42, 0.55); font-family: 'Inter', 'Roboto', sans-serif; } .eb-app-promo__close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; /* main.css impose un rayon et une ombre à tous les