/* demo-overrides.css * * Surcouche minimaliste posée par-dessus les bundles CSS du site cible. * Contient uniquement : * - Le style du bandeau démo en haut de page * - Le décalage de la topbar fixed du site cible pour ne pas être masquée * - Le style de la modale démo (popup mode démo) * - Cache éventuel d'éléments sans sens en démo statique (notifications * temps réel, AI Assist, chat support…) * * Pas d'override des couleurs, espacements ou composants existants : la fidélité * pixel-perfect au site cible est assurée par les bundles CSS d'origine. */ /* ------------------------------------------------------------------ * * Variables * * ------------------------------------------------------------------ */ :root { --boond-demo-banner-height: 40px; --boond-demo-accent: #f5b800; --boond-demo-accent-dark: #c99500; --boond-demo-text: #282c32; --boond-demo-bg-modal: rgba(0, 0, 0, 0.55); } /* ------------------------------------------------------------------ * * Bandeau démo * * ------------------------------------------------------------------ */ #boond-demo-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 100000; background: var(--boond-demo-accent); color: var(--boond-demo-text); font-family: Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 13px; line-height: 1.4; border-bottom: 1px solid var(--boond-demo-accent-dark); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); } .boond-demo-banner__inner { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 10px 16px; max-width: 1600px; margin: 0 auto; position: relative; } .boond-demo-banner__text { text-align: right; flex: 0 1 auto; margin-right: 4px; } .boond-demo-banner__cta { display: inline-block; background-color: #DC2626; color: #FFFFFF !important; text-decoration: none; font-weight: 500; font-size: 13px; padding: 6px 14px; border-radius: 50px; white-space: nowrap; flex-shrink: 0; transition: background-color 0.2s ease; } .boond-demo-banner__cta:hover, .boond-demo-banner__cta:focus { background-color: #B91C1C; color: #FFFFFF !important; text-decoration: none; } .boond-demo-banner__close { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: transparent; border: 0; font-size: 22px; line-height: 1; color: var(--boond-demo-text); cursor: pointer; padding: 4px 8px; opacity: 0.7; } .boond-demo-banner__close:hover { opacity: 1; } /* Décale tout le contenu vers le bas pour libérer l'espace du bandeau. * On cible en padding-top et on force la topbar fixed du site cible * à se positionner sous le bandeau. */ body { padding-top: var(--boond-demo-banner-height) !important; } /* Topbar fixed du site cible (classe BMC connue : .bml-topbar). */ .bml-topbar, .bml-topbar-fixed, header[role="banner"][class*="bml-"] { top: var(--boond-demo-banner-height) !important; } /* La sidebar fixed peut aussi avoir besoin du décalage selon son ancrage. */ .bml-sidebar, .bmc-layout-left-sidebar, aside[class*="bml-sidebar"] { top: calc(var(--boond-demo-banner-height) + var(--bml-topbar-height, 42px)) !important; } /* ------------------------------------------------------------------ * * Sidebar collante en démo * * * * Le menu latéral du site n'est pas fixe par défaut — il scrolle * * avec la page. Pour la démo, on le rend sticky pour qu'il reste * * visible pendant la navigation et le walkthrough. * * ------------------------------------------------------------------ */ /* On rend la sidebar PARENT collante (et non le UL enfant) : elle a déjà sa * largeur (200px), son fond blanc et son layout. Le UL conserve son * comportement natif (chevrons des sous-menus positionnés en absolu et * débordant légèrement vers la droite — comme sur l'original Boond). */ .bmc-layout-sidebar { position: sticky !important; top: calc(var(--boond-demo-banner-height) + var(--bml-topbar-height, 42px)) !important; align-self: flex-start !important; /* La sidebar est plus haute que son contenu nominal : on borne à la hauteur * du viewport disponible afin de ne pas pousser le contenu central vers le * bas quand le menu serait plus long. */ max-height: calc(100vh - var(--boond-demo-banner-height) - var(--bml-topbar-height, 42px)) !important; /* Quand le menu déborde (beaucoup d'items, iframe étroite), permettre le scroll * interne au menu plutôt que de tronquer les items du bas. */ overflow-y: auto !important; } /* ------------------------------------------------------------------ * * Modale "mode démo" * * ------------------------------------------------------------------ */ .boond-demo-modal { position: fixed; inset: 0; z-index: 200000; display: none; font-family: Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--boond-demo-text); } .boond-demo-modal.is-open { display: block; } body.boond-demo-modal-open { overflow: hidden; } .boond-demo-modal__backdrop { position: absolute; inset: 0; background: var(--boond-demo-bg-modal); } .boond-demo-modal__panel { position: relative; margin: 10vh auto; max-width: 480px; background: #fff; border-radius: 6px; padding: 32px 32px 24px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); } .boond-demo-modal__close { position: absolute; top: 8px; right: 12px; background: transparent; border: 0; font-size: 24px; line-height: 1; cursor: pointer; color: #888; padding: 4px 8px; } .boond-demo-modal__close:hover { color: var(--boond-demo-text); } .boond-demo-modal__title { margin: 0 0 12px; font-size: 18px; font-weight: 500; color: var(--boond-demo-text); } .boond-demo-modal__body { margin: 0 0 24px; font-size: 14px; line-height: 1.5; color: #555; } .boond-demo-modal__actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .boond-demo-modal__cta { display: inline-block; background: var(--boond-demo-accent); color: var(--boond-demo-text) !important; padding: 10px 20px; border-radius: 4px; text-decoration: none; font-weight: 500; font-size: 14px; border: 1px solid var(--boond-demo-accent-dark); transition: background 0.15s ease; } .boond-demo-modal__cta:hover, .boond-demo-modal__cta:focus { background: var(--boond-demo-accent-dark); text-decoration: none; } .boond-demo-modal__secondary { background: transparent; border: 1px solid #ccc; color: #555; padding: 10px 16px; border-radius: 4px; cursor: pointer; font-size: 14px; } .boond-demo-modal__secondary:hover { background: #f5f5f5; } /* ------------------------------------------------------------------ * * Cache d'éléments sans sens en démo statique * * ------------------------------------------------------------------ */ /* Widgets résiduels qui afficheraient des erreurs en mode statique. */ [data-demo-hide], .intercom-launcher, .intercom-frame, #userflow-host, .userflow-tooltip, [class^="userflow-"], [class*=" userflow-"], [class^="userflowjs-"], [class*=" userflowjs-"] { display: none !important; } /* Désactive visuellement les liens neutralisés par sanitize.mjs. */ [data-demo-disabled] { cursor: pointer; /* on garde un curseur normal — demo-mode.js ouvrira la modale */ } /* Les boutons ronds icon-only perdent parfois leur centrage après extraction statique, notamment dans les en-têtes d'apps et les tableaux compacts. */ .bmc-btn.bmb-circle, a.bmb-circle { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; line-height: 1 !important; } .bmc-btn.bmb-circle { padding: 0 !important; } .bmb-circle > i[class^="bmi-"], .bmb-circle > i[class*=" bmi-"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; line-height: 1 !important; } .bmb-circle > i[class^="bmi-"]::before, .bmb-circle > i[class*=" bmi-"]::before { display: block; line-height: 1 !important; } .bmc-btn.bmb-circle.bmb-global-sidebar-create { width: 60px !important; height: 60px !important; min-width: 60px !important; max-width: 60px !important; min-height: 60px !important; max-height: 60px !important; border-radius: 50% !important; flex: 0 0 60px !important; } /* ------------------------------------------------------------------ * * Responsive : sur petits écrans le bandeau prend deux lignes * * ------------------------------------------------------------------ */ @media (max-width: 640px) { :root { --boond-demo-banner-height: 60px; } .boond-demo-banner__inner { padding: 8px 36px 8px 12px; } .boond-demo-banner__text { font-size: 12px; line-height: 1.35; } .boond-demo-modal__panel { margin: 6vh 16px; padding: 24px; } } /* ------------------------------------------------------------------ * * Sidebar : retour au flow normal sur mobile/tablette portrait * * * * Sur petit écran, la sidebar Boond fait toujours 200px de large * * et sticky elle prendrait la moitié du viewport. On lève notre * * override : c'est l'application.css d'origine qui reprend la main. * * ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ * * Drawer mobile : sidebar overlay déclenchée par le burger ☰ * * * * Sur mobile, la sidebar est cachée par défaut. Le bouton burger * * (data-name="button-toggle-menu-mobile") toggle la classe * * `boond-mobile-menu-open` sur , ce qui transforme la sidebar * * en drawer overlay au-dessus du contenu, avec un backdrop sombre. * * ------------------------------------------------------------------ */ @media (max-width: 768px) { .bmc-layout-sidebar { display: none !important; } /* Bandeau démo : NON sticky sur mobile. * * En desktop le bandeau jaune reste figé en haut. Sur mobile il prend * ~60 px sur ~600 px de viewport (10 % de l'écran consommé en permanence) ; * on le bascule en flux normal pour qu'il scrolle avec le contenu et libère * l'espace pendant la consultation. La topbar et la sidebar mobile * s'ancrent directement à y=0 puisque le bandeau ne dicte plus leur * référence verticale. */ body { padding-top: 0 !important; } #boond-demo-banner { position: relative !important; } .bml-topbar, .bml-topbar-fixed, header[role="banner"][class*="bml-"] { top: 0 !important; } .bml-sidebar, .bmc-layout-left-sidebar, aside[class*="bml-sidebar"] { top: var(--bml-topbar-height, 42px) !important; } /* Topbar : empêcher le wrap. Sur viewports étroits le bloc utilisateur * (notifications + IA + James) passe en seconde ligne par défaut, ce qui * fait une topbar à 2 lignes et éloigne le bouton James des autres icônes. * Le `.bmb-dropdown` interne du bouton James (avatar + label + chevron) a * lui aussi `flex-wrap: wrap` par défaut → sur viewport très étroit le label * passe sous l'avatar, on force aussi nowrap dessus. */ .bml-topbar, #bml-user-tools, #bml-topbar_context, #bml-user-tools .bmb-dropdown, #bml-user-tools .ember-basic-dropdown-trigger { flex-wrap: nowrap !important; } /* Boond a son propre voile gris (`.bmc-layout-sidebar_mask-overlay`) qui * s'affiche derrière sa sidebar ouverte. En démo statique ce voile se * superpose à notre backdrop et donne l'illusion d'un drawer "en deux * parties" (zone blanche + bande grise sombre au milieu, puis backdrop). * On le masque pour ne garder que notre seul backdrop propre. */ .bmc-layout-sidebar_mask-overlay { display: none !important; } } /* Backdrop : créé par demo-mode.js au premier open. */ .boond-mobile-menu-backdrop { display: none; position: fixed; top: var(--boond-demo-banner-height); left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 99500; cursor: pointer; } @media (max-width: 768px) { /* Bandeau scrollable en mobile : le backdrop part de y=0. */ .boond-mobile-menu-backdrop { top: 0 !important; } body.boond-mobile-menu-open .boond-mobile-menu-backdrop { display: block; } body.boond-mobile-menu-open .bmc-layout-sidebar { display: flex !important; flex-direction: column !important; position: fixed !important; top: var(--bml-topbar-height, 42px) !important; left: 0 !important; bottom: 0 !important; width: 280px !important; max-width: 80vw !important; max-height: none !important; z-index: 99600 !important; background: #fff !important; box-shadow: 2px 0 12px rgba(0, 0, 0, 0.18) !important; overflow-y: auto !important; padding: 8px 0 !important; } /* Verrouille le scroll du fond quand le drawer est ouvert. */ body.boond-mobile-menu-open { overflow: hidden; } } /* ------------------------------------------------------------------ * * Layout responsive : ajustements supplémentaires pour mobile * * ------------------------------------------------------------------ */ @media (max-width: 768px) { /* Padding bas du contenu : les FABs flottants en bas à droite (≈ 90px de * réservation incluant les 24px de margin) ne doivent pas masquer la * dernière ligne du contenu au scroll. */ main, .bml-content, .bmc-layout-search, .bmc-layout-profile { padding-bottom: 96px !important; } /* Tabs des fiches détail : permettre le scroll horizontal pour voir tous * les onglets quand ils débordent (Synthèse, Informations, Administratif, * DTs, Actions, etc.). */ .bmc-layout-profile-tabs { overflow-x: auto !important; -webkit-overflow-scrolling: touch; /* masque la scrollbar verticale parasite mais conserve le scroll touch */ overflow-y: hidden; } .bmc-layout-profile-tabs::-webkit-scrollbar { height: 0; } .bmc-layout-profile-tabs-items { flex-wrap: nowrap !important; } /* Indicateur visuel : fade sur le bord droit des tables qui débordent, pour * suggérer qu'on peut swiper horizontalement. Le wrapper Boond a déjà * overflow:auto donc le scroll touch fonctionne — on rend juste l'affordance * visible. */ .bmc-table-list.table-responsive { position: relative; } .bmc-table-list.table-responsive::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 24px; pointer-events: none; background: linear-gradient( to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 100% ); } /* Grilles dashboard : passer en colonne unique sur mobile. * Boond utilise CSS Grid avec inline-style sur chaque widget : * style="grid-column: 2 / span 1; grid-row-end: span 378" * Le `grid-row-end: span 378` combiné à `grid-auto-rows: 1px` produit des * widgets aux dimensions absurdes (~6000 px) si on essaie juste de * réordonner les colonnes. On bascule donc carrément la grille en flex * column : toutes les contraintes grid disparaissent, le contenu se * dimensionne sur sa propre hauteur. */ .bmc-dashboard-grid { display: flex !important; flex-direction: column !important; gap: 16px !important; grid-template-columns: none !important; grid-auto-rows: auto !important; } .bmc-dashboard-grid > * { grid-column: auto !important; grid-row: auto !important; width: 100% !important; } /* Layouts Bootstrap-like : colonnes `col-md-*` / `col-lg-*` qui sur desktop * s'alignent en plusieurs colonnes restent en `col-12` sur mobile par défaut * (Bootstrap), mais certaines pages forcent une largeur via flex-basis * inline-style. On force le flex-basis 100%. */ .row > [class*='col-']:not([class*='col-12']) { flex-basis: 100% !important; max-width: 100% !important; } /* Conteneurs flex génériques utilisés sur les fiches détail (sections type * deux colonnes côte à côte) : on les empile. */ .bmc-layout-profile .bmc-row, .bmc-layout-profile .bmc-flex-row { flex-direction: column !important; } /* Boutons d'action sur les fiches détail (Demander à l'IA + ronds + bouton +) : * sur desktop ils sont alignés à droite ; sur mobile ils débordent et la 2e * ligne reste collée à droite (effet visuel cassé). On centre tout pour * obtenir un rendu équilibré, et on ajoute un gap plus visible. */ .bml-infos-action-buttons { justify-content: center !important; align-items: center !important; gap: 8px !important; row-gap: 10px !important; padding: 8px 0 !important; } /* Le bouton bleu "+" (.bmb-circle dans un .dropdown) est plus large que les * boutons ronds standard (~60px vs 40px) ; on le ramène à la même taille * visuelle pour éviter qu'il déséquilibre la rangée. */ .bml-infos-action-buttons .dropdown .bmb-circle.bmb-confirm, .bml-infos-action-buttons .dropdown .bmb-circle:not(.bmb-dropdown) { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; } /* Chevrons de dropdown (▼ Font Awesome) à côté des boutons ronds : sur * mobile ils sont visuellement parasites (séparés du bouton, sans action * possible en démo). On les masque pour un alignement propre. * NB : on cible uniquement les chevrons des boutons ronds — le ▼ inline du * bouton "Demander à l'IA" reste visible car il fait partie du label. */ .bml-infos-action-buttons .bmb-circle.bmb-dropdown::after, .bml-infos-action-buttons .dropdown > .bmb-circle + i.bmi-arrow-down { display: none !important; } }