/* Le CSS du thème masque tous les fils d'ariane du site par défaut (".page .breadcrumb{display:none!important}") et ne les réaffiche, avec un style spécifique (défilement horizontal, hauteur des maillons...), que sur les pages portant la classe "breadcrumb--private-account". Certaines pages du module (dashboard, payoutstatements) n'ont pas cette classe : on réaffiche donc le fil d'ariane ET on reproduit exactement le même style ici, pour un rendu identique sur toutes les pages du module quelle que soit la méthode qui a généré le fil d'ariane. Ciblage via l'id de commun à toutes les pages psbooking ("module-psbooking-..."), avec une spécificité suffisante pour l'emporter sur la règle du thème. */ body[id^="module-psbooking-"] .breadcrumb-container, body[id^="module-psbooking-"] .breadcrumb__wrapper, body[id^="module-psbooking-"] .breadcrumb { display: flex !important; flex-wrap: nowrap; align-items: center; overflow-x: auto; white-space: nowrap; scrollbar-width: none; } /* Shared visual header for the main host workspace pages. */ .gm-host-page-hero { box-sizing: border-box; display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 24px; margin: 0 0 24px; padding: 22px 25px; border-radius: 16px; background: linear-gradient(135deg, #123a63, #1e5f9f); color: #fff; box-shadow: 0 14px 32px rgba(18, 58, 99, .16); } .gm-host-page-hero > div { min-width: 0; } .gm-host-page-hero .gm-host-page-hero__eyebrow { display: block; margin-bottom: 4px; color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .gm-host-page-hero h1 { margin: 0; color: #fff; font-size: clamp(25px, 3vw, 34px); line-height: 1.12; } .gm-host-page-hero p { max-width: 650px; margin: 7px 0 0; color: rgba(255, 255, 255, .86); font-size: 13.5px; line-height: 1.5; } .gm-host-intro.gm-host-page-hero { flex-wrap: wrap; align-items: center; margin-bottom: 24px; } .gm-host-intro.gm-host-page-hero > div { flex: 1 1 520px; } .gm-host-intro.gm-host-page-hero h1 { margin: 0; color: #fff; font-size: clamp(25px, 3vw, 34px); line-height: 1.12; } .gm-host-intro.gm-host-page-hero p { max-width: 650px; margin: 7px 0 0; color: rgba(255, 255, 255, .86); font-size: 13.5px; line-height: 1.5; } .gm-host-intro.gm-host-page-hero .gm-host-badge { max-width: 100%; text-align: center; white-space: normal; } @media (max-width: 767px) { .gm-host-page-hero, .gm-host-intro.gm-host-page-hero { display: block; padding: 19px; } .gm-host-intro.gm-host-page-hero .gm-host-badge { display: inline-block; margin-top: 14px; } } body[id^="module-psbooking-"] .breadcrumb::-webkit-scrollbar { display: none; } body[id^="module-psbooking-"] .breadcrumb .breadcrumb-item { display: flex; flex: 0 0 auto; align-items: center; min-height: 32px; } body[id^="module-psbooking-"] .breadcrumb .breadcrumb-item > span, body[id^="module-psbooking-"] .breadcrumb .breadcrumb-item + .breadcrumb-item::before { display: inline-flex; align-items: center; min-height: 32px; line-height: inherit; } body[id^="module-psbooking-"] .breadcrumb .breadcrumb-item + .breadcrumb-item::before { float: none; } .gm-host-workspace-nav { margin: 0 0 22px; border: 1px solid #dce5ef; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(24, 52, 82, .06); } .gm-host-workspace-nav__primary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); } .gm-host-workspace-nav__tab { position: relative; display: flex; min-width: 0; min-height: 58px; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; border-right: 1px solid #e7edf4; color: #52677d; font-size: 12px; font-weight: 750; line-height: 1.25; text-align: center; text-decoration: none !important; } .gm-host-workspace-nav__primary > .gm-host-workspace-nav__tab:first-child { border-top-left-radius: 13px; border-bottom-left-radius: 13px; } .gm-host-workspace-nav__primary > .gm-host-workspace-nav__tab:last-child { border-top-right-radius: 13px; border-bottom-right-radius: 13px; } .gm-host-workspace-nav__tab:last-child { border-right: 0; } .gm-host-workspace-nav__tab .material-icons { flex: 0 0 auto; color: #6b8299; font-size: 21px; } .gm-host-workspace-nav__tab:hover, .gm-host-workspace-nav__tab:focus, .gm-host-workspace-nav__tab.is-active { background: #eef5fc; color: #174a7e; } .gm-host-workspace-nav__tab.is-active::after { position: absolute; right: 12px; bottom: 0; left: 12px; height: 3px; border-radius: 3px 3px 0 0; background: #174a7e; content: ''; } .gm-host-workspace-nav__tab.is-active .material-icons { color: #174a7e; } .gm-host-workspace-nav__chevron { font-size: 18px !important; margin-left: -3px; color: #96a7b8 !important; transition: transform .15s ease; } .gm-host-workspace-nav__tab[aria-expanded="true"] .gm-host-workspace-nav__chevron { transform: rotate(180deg); } .gm-host-workspace-nav__tab.is-active .gm-host-workspace-nav__chevron { color: #174a7e !important; } .gm-host-workspace-nav__dot { display: inline-block; width: 7px; height: 7px; margin-left: 4px; border-radius: 50%; background: #d7492f; vertical-align: middle; } .gm-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Le sous-menu est un vrai menu déroulant compact, ancré sous le bouton cliqué (position calculée en JS via host-workspace.js, pas de largeur imposée ici) : replié par défaut, il ne s'affiche qu'au clic. En "position: fixed", il n'est jamais tronqué par le défilement horizontal des onglets sur mobile/tablette. */ .gm-host-workspace-nav__secondary { position: fixed; z-index: 1000; display: flex; width: max-content; min-width: 220px; max-width: min(92vw, 280px); flex-direction: column; gap: 2px; padding: 6px; border: 1px solid #dce5ef; border-radius: 12px; background: #fff; box-shadow: 0 16px 36px rgba(24, 52, 82, .18); } .gm-host-workspace-nav__secondary[hidden] { display: none; } .gm-host-workspace-nav__secondary a { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px; color: #4d6278; font-size: 12.5px; font-weight: 750; text-decoration: none !important; white-space: nowrap; } .gm-host-workspace-nav__secondary a .material-icons { flex: 0 0 auto; color: #6b8299; font-size: 18px; } .gm-host-workspace-nav__secondary a:hover, .gm-host-workspace-nav__secondary a:focus, .gm-host-workspace-nav__secondary a.is-active { background: #eef5fc; color: #174a7e; } .gm-host-workspace-nav__secondary a:hover .material-icons, .gm-host-workspace-nav__secondary a:focus .material-icons, .gm-host-workspace-nav__secondary a.is-active .material-icons { color: #174a7e; } .gm-host-workspace-nav__mobile { display: none; } @media (max-width: 991px) { .gm-host-workspace-nav { margin-bottom: 17px; border-radius: 12px; overflow: hidden; } /* Les cinq onglets PC ne deviennent plus une bande horizontale difficile à découvrir. Le bouton ci-dessous indique toujours la page actuelle. */ .gm-host-workspace-nav__primary, .gm-host-workspace-nav__secondary { display: none !important; } .gm-host-workspace-nav__mobile { display: block; } .gm-host-workspace-nav__mobile-toggle { display: grid; width: 100%; min-height: 68px; grid-template-columns: 42px minmax(0, 1fr) 26px; align-items: center; gap: 11px; padding: 10px 13px; border: 0; background: #fff; color: #183a5c; text-align: left; list-style: none; cursor: pointer; } .gm-host-workspace-nav__mobile-toggle::-webkit-details-marker { display: none; } .gm-host-workspace-nav__mobile-toggle:hover, .gm-host-workspace-nav__mobile-toggle:focus, .gm-host-workspace-nav__mobile[open] > .gm-host-workspace-nav__mobile-toggle { background: #f5f9fd; } .gm-host-workspace-nav__mobile-toggle:focus-visible, .gm-host-workspace-nav__mobile-main:focus-visible, .gm-host-workspace-nav__mobile-sublist a:focus-visible { position: relative; z-index: 1; outline: 3px solid rgba(23, 74, 126, .28); outline-offset: -3px; } .gm-host-workspace-nav__mobile-current-icon { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 12px; background: #eaf3fc; color: #174a7e; } .gm-host-workspace-nav__mobile-current-icon .material-icons { font-size: 23px; } .gm-host-workspace-nav__mobile-current { display: flex; min-width: 0; flex-direction: column; gap: 1px; } .gm-host-workspace-nav__mobile-eyebrow { color: #71859a; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; } .gm-host-workspace-nav__mobile-current strong { overflow: hidden; color: #183a5c; font-size: 14.5px; font-weight: 800; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .gm-host-workspace-nav__mobile-current small { overflow: hidden; color: #667b90; font-size: 11.5px; font-weight: 650; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .gm-host-workspace-nav__mobile-chevron { color: #647b91; font-size: 24px; transition: transform .18s ease; } .gm-host-workspace-nav__mobile[open] > .gm-host-workspace-nav__mobile-toggle .gm-host-workspace-nav__mobile-chevron { transform: rotate(180deg); } .gm-host-workspace-nav__mobile-panel { padding: 7px; border-top: 1px solid #dce5ef; background: #f7fafd; } .gm-host-workspace-nav__mobile-main { display: grid; min-height: 50px; grid-template-columns: 27px minmax(0, 1fr) 24px; align-items: center; gap: 8px; margin: 0; padding: 8px 10px; border: 0; border-radius: 9px; color: #4d6278; font-size: 13.5px; font-weight: 750; line-height: 1.25; list-style: none; text-decoration: none !important; cursor: pointer; } .gm-host-workspace-nav__mobile-main::-webkit-details-marker { display: none; } .gm-host-workspace-nav__mobile-main > .material-icons:first-child { color: #6b8299; font-size: 20px; } a.gm-host-workspace-nav__mobile-main::after { color: #8ba0b5; font-family: 'Material Icons'; font-size: 19px; content: 'chevron_right'; } .gm-host-workspace-nav__mobile-main:hover, .gm-host-workspace-nav__mobile-main:focus, .gm-host-workspace-nav__mobile-main.is-active, .gm-host-workspace-nav__mobile-group.is-active > .gm-host-workspace-nav__mobile-main { background: #eaf3fc; color: #174a7e; } .gm-host-workspace-nav__mobile-main.is-active > .material-icons:first-child, .gm-host-workspace-nav__mobile-group.is-active > .gm-host-workspace-nav__mobile-main > .material-icons:first-child { color: #174a7e; } .gm-host-workspace-nav__mobile-group { margin: 0; } .gm-host-workspace-nav__mobile-group-chevron { color: #8ba0b5; font-size: 21px; transition: transform .18s ease; } .gm-host-workspace-nav__mobile-group[open] .gm-host-workspace-nav__mobile-group-chevron { transform: rotate(180deg); } .gm-host-workspace-nav__mobile-sublist { display: flex; flex-direction: column; gap: 2px; margin: 2px 8px 7px 23px; padding: 3px 0 3px 13px; border-left: 2px solid #c9daeb; } .gm-host-workspace-nav__mobile-sublist a { position: relative; display: flex; min-height: 43px; align-items: center; padding: 8px 10px 8px 18px; border-radius: 8px; color: #596f84; font-size: 12.5px; font-weight: 700; line-height: 1.3; text-decoration: none !important; } .gm-host-workspace-nav__mobile-sublist a::before { position: absolute; top: 50%; left: 4px; width: 6px; height: 6px; border: 2px solid #91a7bb; border-radius: 50%; content: ''; transform: translateY(-50%); } .gm-host-workspace-nav__mobile-sublist a:hover, .gm-host-workspace-nav__mobile-sublist a:focus, .gm-host-workspace-nav__mobile-sublist a.is-active { background: #fff; color: #174a7e; box-shadow: 0 3px 10px rgba(24, 52, 82, .07); } .gm-host-workspace-nav__mobile-sublist a.is-active::before { border-color: #174a7e; background: #174a7e; } }