/* /public_html/assets/css/ui-navbar-unified.css
Navbar invisible EDQ unique.
Ce fichier est charge en dernier et doit rester la source visuelle commune
de la navbar invisible pour l'accueil, les panels publics et les panels connectes. */
body.is-dashboard-shell-visible,
body.is-public-mobile-shell-visible,
body.is-public-panel-shell {
--edq-navbar-safe-top-current: var(--edq-safe-area-top-effective, env(safe-area-inset-top, 0px));
--edq-navbar-safe-left-current: var(--edq-safe-area-left-effective, env(safe-area-inset-left, 0px));
--edq-navbar-safe-right-current: var(--edq-safe-area-right-effective, env(safe-area-inset-right, 0px));
--edq-navbar-height-current: calc(var(--edq-navbar-safe-top-current) + 3.35rem);
--edq-navbar-fade-height-current: 3.55rem;
--edq-navbar-edge-left-current: max(0.85rem, calc(var(--edq-navbar-safe-left-current) + 0.85rem));
--edq-navbar-edge-right-current: max(0.85rem, calc(var(--edq-navbar-safe-right-current) + 0.85rem));
}
/* Tablette / PC : pas de safe area artificielle. */
@media (min-width: 720px) and (min-height: 521px) {
body.is-dashboard-shell-visible,
body.is-public-mobile-shell-visible,
body.is-public-panel-shell {
--edq-navbar-safe-top-current: 0px;
--edq-navbar-safe-left-current: 0px;
--edq-navbar-safe-right-current: 0px;
--edq-navbar-height-current: clamp(4.05rem, 5.4vw, 4.85rem);
--edq-navbar-fade-height-current: clamp(3.25rem, 4.8vw, 4.35rem);
--edq-navbar-edge-left-current: clamp(1.15rem, 3vw, 3rem);
--edq-navbar-edge-right-current: clamp(1.15rem, 3vw, 3rem);
}
}
/* Mobile/tablette paysage : on garde les safe areas laterales. */
@media (orientation: landscape) and (max-width: 1180px) {
body.is-dashboard-shell-visible,
body.is-public-mobile-shell-visible,
body.is-public-panel-shell {
--edq-navbar-safe-top-current: var(--edq-safe-area-top-effective, env(safe-area-inset-top, 0px));
--edq-navbar-safe-left-current: var(--edq-safe-area-left-effective, env(safe-area-inset-left, 0px));
--edq-navbar-safe-right-current: var(--edq-safe-area-right-effective, env(safe-area-inset-right, 0px));
--edq-navbar-height-current: calc(var(--edq-navbar-safe-top-current) + 3.35rem);
--edq-navbar-fade-height-current: 3.35rem;
--edq-navbar-edge-left-current: max(1.05rem, calc(var(--edq-navbar-safe-left-current) + 0.95rem));
--edq-navbar-edge-right-current: max(1.05rem, calc(var(--edq-navbar-safe-right-current) + 0.95rem));
}
}
body.is-dashboard-shell-visible .app-header,
body.is-public-mobile-shell-visible .app-header,
body.is-public-panel-shell .app-header {
position: fixed !important;
inset: 0 0 auto 0 !important;
display: block !important;
width: 100% !important;
height: var(--edq-navbar-height-current) !important;
min-height: var(--edq-navbar-height-current) !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
isolation: isolate !important;
z-index: 1040 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body.is-dashboard-shell-visible .app-header > :not(.mobile-shell-navbar),
body.is-public-mobile-shell-visible .app-header > :not(.mobile-shell-navbar),
body.is-public-panel-shell .app-header > :not(.mobile-shell-navbar) {
display: none !important;
}
body.is-dashboard-shell-visible .app-header::before,
body.is-public-mobile-shell-visible .app-header::before,
body.is-public-panel-shell .app-header::before {
content: "" !important;
position: absolute !important;
inset: 0 0 auto 0 !important;
height: calc(var(--edq-navbar-height-current) + var(--edq-navbar-fade-height-current)) !important;
z-index: 0 !important;
pointer-events: none !important;
border: 0 !important;
box-shadow: none !important;
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--color-bg, #ffffff) 23%, transparent) 0%,
color-mix(in srgb, var(--color-bg, #ffffff) 17%, transparent) 48%,
color-mix(in srgb, var(--color-bg, #ffffff) 9%, transparent) 72%,
color-mix(in srgb, var(--color-bg, #ffffff) 3%, transparent) 88%,
transparent 100%
) !important;
backdrop-filter: blur(25px) saturate(1.18) !important;
-webkit-backdrop-filter: blur(25px) saturate(1.18) !important;
-webkit-mask-image: linear-gradient(
to bottom,
#000 0%,
#000 48%,
rgba(0,0,0,.82) 66%,
rgba(0,0,0,.46) 84%,
rgba(0,0,0,.14) 96%,
transparent 100%
) !important;
mask-image: linear-gradient(
to bottom,
#000 0%,
#000 48%,
rgba(0,0,0,.82) 66%,
rgba(0,0,0,.46) 84%,
rgba(0,0,0,.14) 96%,
transparent 100%
) !important;
}
html[data-theme="dark"] body.is-dashboard-shell-visible .app-header::before,
html[data-theme="dark"] body.is-public-mobile-shell-visible .app-header::before,
html[data-theme="dark"] body.is-public-panel-shell .app-header::before,
body[data-theme="dark"].is-dashboard-shell-visible .app-header::before,
body[data-theme="dark"].is-public-mobile-shell-visible .app-header::before,
body[data-theme="dark"].is-public-panel-shell .app-header::before {
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--color-bg, #020617) 31%, transparent) 0%,
color-mix(in srgb, var(--color-bg, #020617) 22%, transparent) 48%,
color-mix(in srgb, var(--color-bg, #020617) 11%, transparent) 72%,
color-mix(in srgb, var(--color-bg, #020617) 4%, transparent) 88%,
transparent 100%
) !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar,
body.is-public-mobile-shell-visible .mobile-shell-navbar,
body.is-public-panel-shell .mobile-shell-navbar {
position: relative !important;
z-index: 1 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
min-height: var(--edq-navbar-height-current) !important;
padding: 0 !important;
color: var(--color-text, #0f172a) !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar.is-hidden,
body.is-public-mobile-shell-visible .mobile-shell-navbar.is-hidden,
body.is-public-panel-shell .mobile-shell-navbar.is-hidden {
display: none !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar__left,
body.is-dashboard-shell-visible .mobile-shell-navbar__center,
body.is-dashboard-shell-visible .mobile-shell-navbar__right,
body.is-public-mobile-shell-visible .mobile-shell-navbar__left,
body.is-public-mobile-shell-visible .mobile-shell-navbar__center,
body.is-public-mobile-shell-visible .mobile-shell-navbar__right,
body.is-public-panel-shell .mobile-shell-navbar__left,
body.is-public-panel-shell .mobile-shell-navbar__center,
body.is-public-panel-shell .mobile-shell-navbar__right {
position: absolute !important;
top: calc(var(--edq-navbar-safe-top-current) + ((var(--edq-navbar-height-current) - var(--edq-navbar-safe-top-current)) / 2)) !important;
transform: translateY(-50%) !important;
min-height: 2.55rem !important;
z-index: 2 !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar__left,
body.is-public-mobile-shell-visible .mobile-shell-navbar__left,
body.is-public-panel-shell .mobile-shell-navbar__left {
left: var(--edq-navbar-edge-left-current) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar__right,
body.is-public-mobile-shell-visible .mobile-shell-navbar__right,
body.is-public-panel-shell .mobile-shell-navbar__right {
right: var(--edq-navbar-edge-right-current) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 0.5rem !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar__center,
body.is-public-mobile-shell-visible .mobile-shell-navbar__center,
body.is-public-panel-shell .mobile-shell-navbar__center {
left: 50% !important;
transform: translate(-50%, -50%) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: min(58rem, calc(100vw - var(--edq-navbar-edge-left-current) - var(--edq-navbar-edge-right-current) - 7.25rem)) !important;
max-width: min(58rem, calc(100vw - var(--edq-navbar-edge-left-current) - var(--edq-navbar-edge-right-current) - 7.25rem)) !important;
min-width: 0 !important;
text-align: center !important;
overflow: hidden !important;
pointer-events: none !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar__title-viewport,
body.is-dashboard-shell-visible .mobile-shell-navbar__title-window,
body.is-public-mobile-shell-visible .mobile-shell-navbar__title-viewport,
body.is-public-mobile-shell-visible .mobile-shell-navbar__title-window,
body.is-public-panel-shell .mobile-shell-navbar__title-viewport,
body.is-public-panel-shell .mobile-shell-navbar__title-window {
display: block !important;
width: 100% !important;
min-width: 0 !important;
overflow: hidden !important;
white-space: nowrap !important;
box-sizing: border-box !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar__title-track,
body.is-public-mobile-shell-visible .mobile-shell-navbar__title-track,
body.is-public-panel-shell .mobile-shell-navbar__title-track {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-width: 0 !important;
transform: translate3d(0,0,0);
}
body.is-dashboard-shell-visible .mobile-shell-navbar__title-text,
body.is-public-mobile-shell-visible .mobile-shell-navbar__title-text,
body.is-public-panel-shell .mobile-shell-navbar__title-text {
display: block !important;
max-width: 100% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
font-size: clamp(.98rem, 2.1vw, 1.18rem) !important;
font-weight: 850 !important;
line-height: 1.1 !important;
letter-spacing: -.02em !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar__logo,
body.is-public-mobile-shell-visible .mobile-shell-navbar__logo,
body.is-public-panel-shell .mobile-shell-navbar__logo {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
max-width: clamp(7rem, 12vw, 10rem) !important;
max-height: 3.15rem !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar__logo svg,
body.is-dashboard-shell-visible .mobile-shell-navbar__logo img,
body.is-public-mobile-shell-visible .mobile-shell-navbar__logo svg,
body.is-public-mobile-shell-visible .mobile-shell-navbar__logo img,
body.is-public-panel-shell .mobile-shell-navbar__logo svg,
body.is-public-panel-shell .mobile-shell-navbar__logo img {
display: block !important;
width: auto !important;
max-width: 100% !important;
max-height: 3.15rem !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar__btn,
body.is-public-mobile-shell-visible .mobile-shell-navbar__btn,
body.is-public-panel-shell .mobile-shell-navbar__btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 2.55rem !important;
min-width: 2.55rem !important;
height: 2.55rem !important;
min-height: 2.55rem !important;
padding: 0 !important;
border-radius: 999px !important;
border: 1px solid color-mix(in srgb, var(--color-border-subtle, rgba(15,23,42,.14)) 64%, transparent) !important;
background: color-mix(in srgb, var(--color-surface, #ffffff) 24%, transparent) !important;
color: var(--color-text, #0f172a) !important;
box-shadow: 0 14px 34px rgba(15,23,42,.10) !important;
backdrop-filter: blur(22px) saturate(1.3) !important;
-webkit-backdrop-filter: blur(22px) saturate(1.3) !important;
}
html[data-theme="dark"] body.is-dashboard-shell-visible .mobile-shell-navbar__btn,
html[data-theme="dark"] body.is-public-mobile-shell-visible .mobile-shell-navbar__btn,
html[data-theme="dark"] body.is-public-panel-shell .mobile-shell-navbar__btn,
body[data-theme="dark"].is-dashboard-shell-visible .mobile-shell-navbar__btn,
body[data-theme="dark"].is-public-mobile-shell-visible .mobile-shell-navbar__btn,
body[data-theme="dark"].is-public-panel-shell .mobile-shell-navbar__btn {
border-color: color-mix(in srgb, rgba(255,255,255,.18) 68%, transparent) !important;
background: color-mix(in srgb, var(--color-surface, #0f172a) 28%, transparent) !important;
color: var(--color-text, #f8fafc) !important;
box-shadow: 0 16px 38px rgba(0,0,0,.24) !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar__btn[data-mobile-shell-menu-trigger="1"].is-menu-open,
body.is-public-mobile-shell-visible .mobile-shell-navbar__btn[data-mobile-shell-menu-trigger="1"].is-menu-open,
body.is-public-panel-shell .mobile-shell-navbar__btn[data-mobile-shell-menu-trigger="1"].is-menu-open {
border-color: transparent !important;
background: transparent !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body.is-public-panel-shell #app-root,
body.is-public-panel-shell #dashboard-app-shell,
body.is-public-panel-shell .dashboard-app-main {
width: 100% !important;
max-width: none !important;
margin-inline: 0 !important;
padding-inline: 0 !important;
}
/* =========================================================
EDQ V45 - Navbar invisible unique : fade plus court
---------------------------------------------------------
Objectif : la nappe de navbar reste commune, mais ne descend
plus jusque dans les headers de panels placés juste dessous.
========================================================= */
body.is-dashboard-shell-visible,
body.is-public-mobile-shell-visible,
body.is-public-panel-shell {
--edq-navbar-fade-height-current: 1.05rem !important;
}
@media (min-width: 720px) and (min-height: 521px) {
body.is-dashboard-shell-visible,
body.is-public-mobile-shell-visible,
body.is-public-panel-shell {
--edq-navbar-fade-height-current: clamp(1.05rem, 1.9vw, 1.45rem) !important;
}
}
@media (orientation: landscape) and (max-width: 1180px) {
body.is-dashboard-shell-visible,
body.is-public-mobile-shell-visible,
body.is-public-panel-shell {
--edq-navbar-fade-height-current: 1.15rem !important;
}
}
body.is-dashboard-shell-visible .app-header::before,
body.is-public-mobile-shell-visible .app-header::before,
body.is-public-panel-shell .app-header::before {
height: calc(var(--edq-navbar-height-current) + var(--edq-navbar-fade-height-current)) !important;
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--color-bg, #ffffff) 28%, transparent) 0%,
color-mix(in srgb, var(--color-bg, #ffffff) 22%, transparent) 56%,
color-mix(in srgb, var(--color-bg, #ffffff) 10%, transparent) 82%,
transparent 100%
) !important;
-webkit-mask-image: linear-gradient(
to bottom,
#000 0%,
#000 62%,
rgba(0,0,0,.72) 82%,
rgba(0,0,0,.18) 96%,
transparent 100%
) !important;
mask-image: linear-gradient(
to bottom,
#000 0%,
#000 62%,
rgba(0,0,0,.72) 82%,
rgba(0,0,0,.18) 96%,
transparent 100%
) !important;
}
html[data-theme="dark"] body.is-dashboard-shell-visible .app-header::before,
html[data-theme="dark"] body.is-public-mobile-shell-visible .app-header::before,
html[data-theme="dark"] body.is-public-panel-shell .app-header::before,
body[data-theme="dark"].is-dashboard-shell-visible .app-header::before,
body[data-theme="dark"].is-public-mobile-shell-visible .app-header::before,
body[data-theme="dark"].is-public-panel-shell .app-header::before {
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--color-bg, #020617) 34%, transparent) 0%,
color-mix(in srgb, var(--color-bg, #020617) 25%, transparent) 56%,
color-mix(in srgb, var(--color-bg, #020617) 12%, transparent) 82%,
transparent 100%
) !important;
}
/* =========================================================
EDQ V21.2 — Navbar invisible connectée aussi en tablette/PC
---------------------------------------------------------
La navbar unifiée est maintenant pilotée par ui-mobile-navbar.js
sur tous les supports lorsque le dashboard shell est visible.
On cale donc le contenu connecté sous la nappe translucide,
sans réintroduire l'ancien header ni la floating-bar legacy.
========================================================= */
@media (min-width: 720px) and (min-height: 521px) {
body.is-dashboard-shell-visible #app-root {
padding-top: calc(var(--edq-navbar-height-current) + clamp(0.35rem, 1.1vw, 0.8rem)) !important;
}
body.is-dashboard-shell-visible #dashboard-app-shell,
body.is-dashboard-shell-visible .dashboard-app-main,
body.is-dashboard-shell-visible #dashboard-view {
padding-top: 0 !important;
}
body.is-dashboard-shell-visible .mobile-shell-menu {
--mobile-shell-menu-panel-right: var(--edq-navbar-edge-right-current);
--mobile-shell-menu-panel-top: calc((var(--edq-navbar-height-current) - 2.55rem) / 2);
}
}
/* =========================================================
EDQ V21.3 — Navbar invisible : tons CTA + badges tous supports
---------------------------------------------------------
La navbar est maintenant visible aussi tablette/PC. Ces regles
remettent les tons bleu/vert/rouge et les badges sur les boutons
proxifies, sans dependre uniquement de ui-mobile-topbar.css.
========================================================= */
body.is-dashboard-shell-visible .mobile-shell-navbar__btn--primary,
body.is-public-mobile-shell-visible .mobile-shell-navbar__btn--primary,
body.is-public-panel-shell .mobile-shell-navbar__btn--primary {
border-color: color-mix(in srgb, var(--theme-primary, #38bdf8) 52%, rgba(255,255,255,.16)) !important;
background: linear-gradient(
135deg,
color-mix(in srgb, var(--theme-primary, #38bdf8) 34%, transparent),
color-mix(in srgb, #0ea5e9 34%, transparent)
) !important;
color: #e0f2fe !important;
box-shadow: 0 12px 28px color-mix(in srgb, var(--theme-primary, #0ea5e9) 28%, transparent) !important;
}
html[data-theme="light"] body.is-dashboard-shell-visible .mobile-shell-navbar__btn--primary,
html[data-theme="light"] body.is-public-mobile-shell-visible .mobile-shell-navbar__btn--primary,
html[data-theme="light"] body.is-public-panel-shell .mobile-shell-navbar__btn--primary,
body[data-theme="light"].is-dashboard-shell-visible .mobile-shell-navbar__btn--primary,
body[data-theme="light"].is-public-mobile-shell-visible .mobile-shell-navbar__btn--primary,
body[data-theme="light"].is-public-panel-shell .mobile-shell-navbar__btn--primary {
border-color: color-mix(in srgb, var(--theme-primary, #38bdf8) 42%, rgba(15,23,42,.08)) !important;
background: linear-gradient(
135deg,
color-mix(in srgb, var(--theme-primary, #38bdf8) 22%, #ffffff 78%),
color-mix(in srgb, var(--theme-primary, #38bdf8) 42%, #ffffff 58%)
) !important;
color: #075985 !important;
box-shadow: 0 10px 24px color-mix(in srgb, var(--theme-primary, #0ea5e9) 24%, transparent) !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar__btn--success,
body.is-public-mobile-shell-visible .mobile-shell-navbar__btn--success,
body.is-public-panel-shell .mobile-shell-navbar__btn--success {
border-color: color-mix(in srgb, #22c55e 58%, rgba(255,255,255,.16)) !important;
background: linear-gradient(135deg, rgba(34,197,94,.34), rgba(22,163,74,.34)) !important;
color: #dcfce7 !important;
box-shadow: 0 12px 28px rgba(34,197,94,.22) !important;
}
html[data-theme="light"] body.is-dashboard-shell-visible .mobile-shell-navbar__btn--success,
html[data-theme="light"] body.is-public-mobile-shell-visible .mobile-shell-navbar__btn--success,
html[data-theme="light"] body.is-public-panel-shell .mobile-shell-navbar__btn--success,
body[data-theme="light"].is-dashboard-shell-visible .mobile-shell-navbar__btn--success,
body[data-theme="light"].is-public-mobile-shell-visible .mobile-shell-navbar__btn--success,
body[data-theme="light"].is-public-panel-shell .mobile-shell-navbar__btn--success {
border-color: color-mix(in srgb, #22c55e 42%, rgba(15,23,42,.08)) !important;
background: linear-gradient(135deg, rgba(220,252,231,.98), rgba(187,247,208,.98)) !important;
color: #166534 !important;
box-shadow: 0 10px 24px rgba(34,197,94,.18) !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar__btn--danger,
body.is-public-mobile-shell-visible .mobile-shell-navbar__btn--danger,
body.is-public-panel-shell .mobile-shell-navbar__btn--danger {
border-color: color-mix(in srgb, #ef4444 60%, rgba(255,255,255,.16)) !important;
background: linear-gradient(135deg, rgba(239,68,68,.34), rgba(249,115,22,.34)) !important;
color: #ffe4e6 !important;
box-shadow: 0 12px 28px rgba(239,68,68,.26) !important;
}
html[data-theme="light"] body.is-dashboard-shell-visible .mobile-shell-navbar__btn--danger,
html[data-theme="light"] body.is-public-mobile-shell-visible .mobile-shell-navbar__btn--danger,
html[data-theme="light"] body.is-public-panel-shell .mobile-shell-navbar__btn--danger,
body[data-theme="light"].is-dashboard-shell-visible .mobile-shell-navbar__btn--danger,
body[data-theme="light"].is-public-mobile-shell-visible .mobile-shell-navbar__btn--danger,
body[data-theme="light"].is-public-panel-shell .mobile-shell-navbar__btn--danger {
border-color: color-mix(in srgb, #ef4444 42%, rgba(15,23,42,.08)) !important;
background: linear-gradient(135deg, rgba(254,226,226,.98), rgba(255,237,213,.98)) !important;
color: #b91c1c !important;
box-shadow: 0 10px 24px rgba(239,68,68,.20) !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar__btn.has-badge,
body.is-public-mobile-shell-visible .mobile-shell-navbar__btn.has-badge,
body.is-public-panel-shell .mobile-shell-navbar__btn.has-badge {
position: relative !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar__btn.has-badge::after,
body.is-public-mobile-shell-visible .mobile-shell-navbar__btn.has-badge::after,
body.is-public-panel-shell .mobile-shell-navbar__btn.has-badge::after {
content: attr(data-badge-count) !important;
position: absolute !important;
top: -0.18rem !important;
right: -0.18rem !important;
min-width: 1.08rem !important;
height: 1.08rem !important;
padding: 0 0.26rem !important;
border-radius: 999px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: #ff4d6d !important;
color: #ffffff !important;
font-size: 0.64rem !important;
font-weight: 900 !important;
line-height: 1 !important;
letter-spacing: -0.01em !important;
box-shadow: 0 4px 14px rgba(2,6,23,.22) !important;
z-index: 3 !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar__btn.has-badge.has-badge-priority::after,
body.is-public-mobile-shell-visible .mobile-shell-navbar__btn.has-badge.has-badge-priority::after,
body.is-public-panel-shell .mobile-shell-navbar__btn.has-badge.has-badge-priority::after {
background: #ff4d6d !important;
color: #ffffff !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar__btn[data-mobile-shell-menu-trigger="1"].is-menu-open.has-badge::after,
body.is-public-mobile-shell-visible .mobile-shell-navbar__btn[data-mobile-shell-menu-trigger="1"].is-menu-open.has-badge::after,
body.is-public-panel-shell .mobile-shell-navbar__btn[data-mobile-shell-menu-trigger="1"].is-menu-open.has-badge::after {
opacity: 0 !important;
transform: scale(.6) !important;
}
/* =========================================================
V21.4 — dashboard navbar : logo fiable + actions système PC
========================================================= */
body.is-dashboard-shell-visible .mobile-shell-navbar.is-dashboard .mobile-shell-navbar__center {
overflow: visible !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar.is-dashboard .mobile-shell-navbar__logo {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
height: clamp(2.45rem, 4.2vw, 3.2rem) !important;
max-width: clamp(8.4rem, 17vw, 12rem) !important;
max-height: clamp(2.45rem, 4.2vw, 3.2rem) !important;
color: var(--color-text, #0f172a) !important;
pointer-events: none !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar.is-dashboard .mobile-shell-navbar__logo-art {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 100% !important;
width: auto !important;
max-width: 100% !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar.is-dashboard .mobile-shell-navbar__logo svg,
body.is-dashboard-shell-visible .mobile-shell-navbar.is-dashboard .mobile-shell-navbar__logo img {
display: block !important;
width: auto !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar__profile-glyph {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 1.72rem !important;
height: 1.72rem !important;
border-radius: 999px !important;
overflow: hidden !important;
color: var(--color-text, #0f172a) !important;
font-size: .72rem !important;
font-weight: 900 !important;
letter-spacing: -.02em !important;
background: color-mix(in srgb, var(--color-accent, #ef4444) 14%, var(--color-surface, #fff)) !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar__profile-glyph img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
@media (min-width: 1024px) and (min-height: 521px) {
body.is-dashboard-shell-visible .mobile-shell-navbar__right {
gap: .62rem !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar__btn[data-mobile-shell-system-action="notifications"],
body.is-dashboard-shell-visible .mobile-shell-navbar__btn[data-mobile-shell-system-action="chat"],
body.is-dashboard-shell-visible .mobile-shell-navbar__btn[data-mobile-shell-system-action="profile"] {
width: 2.8rem !important;
min-width: 2.8rem !important;
height: 2.8rem !important;
min-height: 2.8rem !important;
}
}
/* =========================================================
V21.5 — dashboard PC/tablette : profil = pastille bouton
========================================================= */
@media (min-width: 1024px) and (min-height: 521px) {
body.is-dashboard-shell-visible .mobile-shell-navbar__btn.mobile-shell-navbar__btn--profile-plain {
width: 2.8rem !important;
min-width: 2.8rem !important;
height: 2.8rem !important;
min-height: 2.8rem !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar__btn.mobile-shell-navbar__btn--profile-plain:hover,
body.is-dashboard-shell-visible .mobile-shell-navbar__btn.mobile-shell-navbar__btn--profile-plain:focus-visible {
transform: translateY(-1px) scale(1.03);
background: transparent !important;
box-shadow: none !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar__btn.mobile-shell-navbar__btn--profile-plain .mobile-shell-navbar__profile-glyph {
width: 2.8rem !important;
height: 2.8rem !important;
font-size: .78rem !important;
border: 1px solid color-mix(in srgb, var(--color-border-subtle, #cbd5e1) 72%, transparent) !important;
background: color-mix(in srgb, var(--color-accent, #ef4444) 16%, var(--color-surface, #fff)) !important;
box-shadow:
0 12px 28px rgba(15, 23, 42, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.76) !important;
}
}
/* =========================================================
V21.7 — dashboard : logo navbar autonome, sans dépendre du morph public
========================================================= */
body.is-dashboard-shell-visible .mobile-shell-navbar.is-dashboard .mobile-shell-navbar__logo,
body.is-dashboard-shell-visible.has-public-home-logo-morph .mobile-shell-navbar.is-dashboard .mobile-shell-navbar__logo,
body.is-dashboard-shell-visible .mobile-shell-navbar.is-dashboard .mobile-shell-navbar__logo--dashboard-stable {
display: inline-flex !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar.is-dashboard .mobile-shell-navbar__logo--dashboard-stable,
body.is-dashboard-shell-visible .mobile-shell-navbar.is-dashboard .mobile-shell-navbar__logo--dashboard-stable .mobile-shell-navbar__logo-art {
min-width: clamp(5.6rem, 14vw, 8.25rem) !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar.is-dashboard .mobile-shell-navbar__logo--dashboard-stable img,
body.is-dashboard-shell-visible .mobile-shell-navbar.is-dashboard .mobile-shell-navbar__logo--dashboard-stable svg {
opacity: 1 !important;
visibility: visible !important;
}
/* ========== EDQ V23.1.10 · CTA navbar forts · override final ==========
Les boutons circulaires de la navbar sont des CTA réels : ils utilisent
les variables navbar fortes, pas les fonds soft réservés au menu. */
.mobile-shell-navbar__btn.mobile-shell-navbar__btn--primary,
body.is-dashboard-shell-visible .mobile-shell-navbar__btn.mobile-shell-navbar__btn--primary,
body.is-public-mobile-shell-visible .mobile-shell-navbar__btn.mobile-shell-navbar__btn--primary,
body.is-public-panel-shell .mobile-shell-navbar__btn.mobile-shell-navbar__btn--primary {
border-color: var(--edq-action-primary-navbar-border, var(--edq-action-primary-border, rgba(125, 211, 252, .82))) !important;
background: var(--edq-action-primary-navbar-bg, var(--edq-action-primary-bg, linear-gradient(135deg, rgba(14,165,233,.72), rgba(56,189,248,.44)))) !important;
background-image: var(--edq-action-primary-navbar-bg, var(--edq-action-primary-bg, linear-gradient(135deg, rgba(14,165,233,.72), rgba(56,189,248,.44)))) !important;
box-shadow: var(--edq-action-primary-navbar-shadow, var(--edq-action-primary-shadow, 0 0 28px rgba(56,189,248,.58))) !important;
color: var(--edq-action-primary-navbar-icon, var(--edq-action-primary-text, #e0f7ff)) !important;
}
.mobile-shell-navbar__btn.mobile-shell-navbar__btn--success,
body.is-dashboard-shell-visible .mobile-shell-navbar__btn.mobile-shell-navbar__btn--success,
body.is-public-mobile-shell-visible .mobile-shell-navbar__btn.mobile-shell-navbar__btn--success,
body.is-public-panel-shell .mobile-shell-navbar__btn.mobile-shell-navbar__btn--success {
border-color: var(--edq-action-success-navbar-border, var(--edq-action-success-border, rgba(134, 239, 172, .82))) !important;
background: var(--edq-action-success-navbar-bg, var(--edq-action-success-bg, linear-gradient(135deg, rgba(34,197,94,.76), rgba(52,211,153,.44)))) !important;
background-image: var(--edq-action-success-navbar-bg, var(--edq-action-success-bg, linear-gradient(135deg, rgba(34,197,94,.76), rgba(52,211,153,.44)))) !important;
box-shadow: var(--edq-action-success-navbar-shadow, var(--edq-action-success-shadow, 0 0 28px rgba(52,211,153,.58))) !important;
color: var(--edq-action-success-navbar-icon, var(--edq-action-success-text, #dcfce7)) !important;
}
.mobile-shell-navbar__btn.mobile-shell-navbar__btn--danger,
body.is-dashboard-shell-visible .mobile-shell-navbar__btn.mobile-shell-navbar__btn--danger,
body.is-public-mobile-shell-visible .mobile-shell-navbar__btn.mobile-shell-navbar__btn--danger,
body.is-public-panel-shell .mobile-shell-navbar__btn.mobile-shell-navbar__btn--danger {
border-color: var(--edq-action-danger-navbar-border, var(--edq-action-danger-border, rgba(253, 164, 175, .82))) !important;
background: var(--edq-action-danger-navbar-bg, var(--edq-action-danger-bg, linear-gradient(135deg, rgba(239,68,68,.78), rgba(251,113,133,.44)))) !important;
background-image: var(--edq-action-danger-navbar-bg, var(--edq-action-danger-bg, linear-gradient(135deg, rgba(239,68,68,.78), rgba(251,113,133,.44)))) !important;
box-shadow: var(--edq-action-danger-navbar-shadow, var(--edq-action-danger-shadow, 0 0 28px rgba(251,113,133,.60))) !important;
color: var(--edq-action-danger-navbar-icon, var(--edq-action-danger-text, #ffe4e6)) !important;
}
.mobile-shell-navbar__btn.mobile-shell-navbar__btn--primary i,
.mobile-shell-navbar__btn.mobile-shell-navbar__btn--success i,
.mobile-shell-navbar__btn.mobile-shell-navbar__btn--danger i,
body.is-dashboard-shell-visible .mobile-shell-navbar__btn.mobile-shell-navbar__btn--primary i,
body.is-dashboard-shell-visible .mobile-shell-navbar__btn.mobile-shell-navbar__btn--success i,
body.is-dashboard-shell-visible .mobile-shell-navbar__btn.mobile-shell-navbar__btn--danger i,
body.is-public-mobile-shell-visible .mobile-shell-navbar__btn.mobile-shell-navbar__btn--primary i,
body.is-public-mobile-shell-visible .mobile-shell-navbar__btn.mobile-shell-navbar__btn--success i,
body.is-public-mobile-shell-visible .mobile-shell-navbar__btn.mobile-shell-navbar__btn--danger i,
body.is-public-panel-shell .mobile-shell-navbar__btn.mobile-shell-navbar__btn--primary i,
body.is-public-panel-shell .mobile-shell-navbar__btn.mobile-shell-navbar__btn--success i,
body.is-public-panel-shell .mobile-shell-navbar__btn.mobile-shell-navbar__btn--danger i {
color: currentColor !important;
filter: drop-shadow(0 0 .58rem color-mix(in srgb, currentColor 72%, transparent)) !important;
}
html[data-theme="light"] .mobile-shell-navbar__btn.mobile-shell-navbar__btn--primary,
body[data-theme="light"] .mobile-shell-navbar__btn.mobile-shell-navbar__btn--primary {
color: var(--edq-action-primary-navbar-icon, #075985) !important;
}
html[data-theme="light"] .mobile-shell-navbar__btn.mobile-shell-navbar__btn--success,
body[data-theme="light"] .mobile-shell-navbar__btn.mobile-shell-navbar__btn--success {
color: var(--edq-action-success-navbar-icon, #166534) !important;
}
html[data-theme="light"] .mobile-shell-navbar__btn.mobile-shell-navbar__btn--danger,
body[data-theme="light"] .mobile-shell-navbar__btn.mobile-shell-navbar__btn--danger {
color: var(--edq-action-danger-navbar-icon, #7f1d1d) !important;
}
/* =========================================================
EDQ V23.1.18 — navbar multi-support : profil direct tablette/PC
Sur tablette et PC, l’action Profil visible dans la navbar doit être une
pastille seule de la taille d’un bouton, pas un avatar inséré dans un bouton.
========================================================= */
@media (min-width: 768px) {
body.is-dashboard-shell-visible .mobile-shell-navbar__btn.mobile-shell-navbar__btn--profile-plain {
width: 2.8rem !important;
min-width: 2.8rem !important;
height: 2.8rem !important;
min-height: 2.8rem !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar__btn.mobile-shell-navbar__btn--profile-plain:hover,
body.is-dashboard-shell-visible .mobile-shell-navbar__btn.mobile-shell-navbar__btn--profile-plain:focus-visible {
transform: translateY(-1px) scale(1.03);
background: transparent !important;
box-shadow: none !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar__btn.mobile-shell-navbar__btn--profile-plain .mobile-shell-navbar__profile-glyph {
width: 2.8rem !important;
height: 2.8rem !important;
font-size: .78rem !important;
border: 1px solid color-mix(in srgb, var(--color-border-subtle, #cbd5e1) 72%, transparent) !important;
background: color-mix(in srgb, var(--color-accent, #ef4444) 16%, var(--color-surface, #fff)) !important;
box-shadow:
0 12px 28px rgba(15, 23, 42, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.76) !important;
}
}
/* =========================================================
V26.7.1 — Navbar : avatar utilisateur sans fond coloré parasite
Quand l'utilisateur a une image d'avatar, la pastille profil affiche
l'image seule : pas de fond accent rouge, pas de bordure/cadre.
========================================================= */
body.is-dashboard-shell-visible .mobile-shell-navbar__profile-glyph.has-avatar-image {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar__profile-glyph.has-avatar-image img {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
@media (min-width: 768px) {
body.is-dashboard-shell-visible .mobile-shell-navbar__btn.mobile-shell-navbar__btn--profile-plain .mobile-shell-navbar__profile-glyph.has-avatar-image {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
}
/* =========================
Mobile shell navbar badges V29.5.1
========================= */
body.is-dashboard-shell-visible .mobile-shell-navbar__btn.has-badge::after,
body.is-public-mobile-shell-visible .mobile-shell-navbar__btn.has-badge::after,
body.is-public-panel-shell .mobile-shell-navbar__btn.has-badge::after{
background:linear-gradient(135deg,#ff4d6d,#e11d48) !important;
box-shadow:
0 0 0 2px rgba(2,6,23,.72),
0 .35rem .95rem rgba(225,29,72,.32) !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar__btn.has-badge[data-badge-kind="notifications"]::after,
body.is-public-mobile-shell-visible .mobile-shell-navbar__btn.has-badge[data-badge-kind="notifications"]::after,
body.is-public-panel-shell .mobile-shell-navbar__btn.has-badge[data-badge-kind="notifications"]::after{
background:linear-gradient(135deg,#ff4d6d,#e11d48) !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar__btn.has-badge[data-badge-kind="chat"]::after,
body.is-public-mobile-shell-visible .mobile-shell-navbar__btn.has-badge[data-badge-kind="chat"]::after,
body.is-public-panel-shell .mobile-shell-navbar__btn.has-badge[data-badge-kind="chat"]::after{
background:linear-gradient(135deg,#38bdf8,#2563eb) !important;
box-shadow:
0 0 0 2px rgba(2,6,23,.72),
0 .35rem .95rem rgba(37,99,235,.30) !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar__btn.has-badge[data-badge-kind="chat-mention"]::after,
body.is-public-mobile-shell-visible .mobile-shell-navbar__btn.has-badge[data-badge-kind="chat-mention"]::after,
body.is-public-panel-shell .mobile-shell-navbar__btn.has-badge[data-badge-kind="chat-mention"]::after{
background:linear-gradient(135deg,#fb7185,#ec4899) !important;
box-shadow:
0 0 0 2px rgba(2,6,23,.72),
0 .35rem .95rem rgba(236,72,153,.34) !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar__btn.has-badge[data-badge-kind="mixed"]::after,
body.is-public-mobile-shell-visible .mobile-shell-navbar__btn.has-badge[data-badge-kind="mixed"]::after,
body.is-public-panel-shell .mobile-shell-navbar__btn.has-badge[data-badge-kind="mixed"]::after{
background:linear-gradient(135deg,#ff4d6d 0%,#e11d48 42%,#38bdf8 58%,#2563eb 100%) !important;
box-shadow:
0 0 0 2px rgba(2,6,23,.72),
0 .35rem .95rem rgba(99,102,241,.34) !important;
}
html[data-theme="light"] body.is-dashboard-shell-visible .mobile-shell-navbar__btn.has-badge::after,
html[data-theme="light"] body.is-public-mobile-shell-visible .mobile-shell-navbar__btn.has-badge::after,
html[data-theme="light"] body.is-public-panel-shell .mobile-shell-navbar__btn.has-badge::after,
body[data-theme="light"].is-dashboard-shell-visible .mobile-shell-navbar__btn.has-badge::after,
body[data-theme="light"].is-public-mobile-shell-visible .mobile-shell-navbar__btn.has-badge::after,
body[data-theme="light"].is-public-panel-shell .mobile-shell-navbar__btn.has-badge::after{
box-shadow:
0 0 0 2px rgba(255,255,255,.92),
0 .35rem .95rem rgba(15,23,42,.16) !important;
}
/* EDQ V42.0.12 — pastilles sans anneau noir/blanc parasite */
body.is-dashboard-shell-visible .mobile-shell-navbar__btn.has-badge::after,
body.is-public-mobile-shell-visible .mobile-shell-navbar__btn.has-badge::after,
body.is-public-panel-shell .mobile-shell-navbar__btn.has-badge::after,
.filter-bubbles-trigger.has-badge::after,
.mobile-shell-menu__action-badge,
.mobile-shell-menu__title-badge {
border: 0 !important;
outline: 0 !important;
box-shadow: 0 .35rem .95rem color-mix(in srgb, #000 18%, transparent) !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar__btn.has-badge[data-badge-kind="notifications"]::after,
body.is-public-mobile-shell-visible .mobile-shell-navbar__btn.has-badge[data-badge-kind="notifications"]::after,
body.is-public-panel-shell .mobile-shell-navbar__btn.has-badge[data-badge-kind="notifications"]::after,
.mobile-shell-menu__action-badge[data-badge-kind="notifications"] {
box-shadow: 0 .35rem .95rem color-mix(in srgb, #e11d48 28%, transparent) !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar__btn.has-badge[data-badge-kind="chat"]::after,
body.is-public-mobile-shell-visible .mobile-shell-navbar__btn.has-badge[data-badge-kind="chat"]::after,
body.is-public-panel-shell .mobile-shell-navbar__btn.has-badge[data-badge-kind="chat"]::after,
.mobile-shell-menu__action-badge[data-badge-kind="chat"] {
box-shadow: 0 .35rem .95rem color-mix(in srgb, #2563eb 26%, transparent) !important;
}
/* EDQ V42.0.13 — pastilles sans bord clair/noir parasite */
body.is-dashboard-shell-visible .mobile-shell-navbar__btn.has-badge::after,
body.is-public-mobile-shell-visible .mobile-shell-navbar__btn.has-badge::after,
body.is-public-panel-shell .mobile-shell-navbar__btn.has-badge::after,
.filter-bubbles-trigger.has-badge::after,
.mobile-shell-menu__action-badge,
.mobile-shell-menu__title-badge,
.chat-navbar-badge {
border: 0 !important;
outline: 0 !important;
box-shadow: 0 8px 18px rgba(15, 23, 42, .18), 0 0 12px rgba(239, 68, 68, .18) !important;
}
/* EDQ V42.0.14 — pastilles sans cerclage clair/sombre */
body.is-dashboard-shell-visible .mobile-shell-navbar__btn.has-badge::after,
body.is-public-mobile-shell-visible .mobile-shell-navbar__btn.has-badge::after,
body.is-public-panel-shell .mobile-shell-navbar__btn.has-badge::after,
.filter-bubbles-trigger.has-badge::after,
.mobile-shell-menu__action-badge,
.mobile-shell-menu__title-badge,
.chat-navbar-badge {
border: none !important;
outline: none !important;
box-shadow: 0 8px 16px rgba(15, 23, 42, .18) !important;
background-clip: border-box !important;
}
/* EDQ V42.0.15 — badges sans cerclage, override final après les styles navbar */
body.is-dashboard-shell-visible .mobile-shell-navbar__btn.has-badge::after,
body.is-public-mobile-shell-visible .mobile-shell-navbar__btn.has-badge::after,
body.is-public-panel-shell .mobile-shell-navbar__btn.has-badge::after,
.filter-bubbles-trigger.has-badge::after,
.mobile-shell-menu__action-badge,
.mobile-shell-menu__title-badge,
.chat-navbar-badge {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background-clip: padding-box !important;
}
/* EDQ V42.0.16 — pastille filtres sans bordure, après les styles navbar */
.filter-bubbles-trigger.filter-bubbles-trigger--bottom-right,
.filter-bubbles-trigger.filter-bubbles-trigger--bottom-right.is-open,
.filter-bubbles-trigger.filter-bubbles-trigger--bottom-right.is-active,
.planning-public-mobile-filter-trigger.filter-bubbles-trigger--bottom-right,
.planning-public-mobile-filter-trigger.filter-bubbles-trigger--bottom-right.is-open,
.planning-public-mobile-filter-trigger.filter-bubbles-trigger--bottom-right.is-active {
border: 0 !important;
outline: 0 !important;
background-clip: padding-box !important;
}
.filter-bubbles-trigger.filter-bubbles-trigger--bottom-right::before,
.filter-bubbles-trigger.filter-bubbles-trigger--bottom-right::after,
.planning-public-mobile-filter-trigger.filter-bubbles-trigger--bottom-right::before,
.planning-public-mobile-filter-trigger.filter-bubbles-trigger--bottom-right::after {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
/* V42.0.20 - Cours Lab : navbar translucide avec bord progressif */
body.courses-lab-active .app-header {
background: transparent !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body.courses-lab-active .app-header::before {
content: "" !important;
position: absolute !important;
inset: 0 0 auto 0 !important;
height: calc(var(--edq-navbar-height-current, var(--courses-lab-nav-height, 64px)) + clamp(1.65rem, 3.4vw, 2.8rem)) !important;
z-index: 0 !important;
pointer-events: none !important;
border: 0 !important;
box-shadow: none !important;
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--color-bg, #020617) 34%, transparent) 0%,
color-mix(in srgb, var(--color-bg, #020617) 26%, transparent) 45%,
color-mix(in srgb, var(--color-bg, #020617) 13%, transparent) 72%,
color-mix(in srgb, var(--color-bg, #020617) 4%, transparent) 88%,
transparent 100%
) !important;
backdrop-filter: blur(24px) saturate(1.18) !important;
-webkit-backdrop-filter: blur(24px) saturate(1.18) !important;
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0,0,0,.72) 74%, rgba(0,0,0,.2) 94%, transparent 100%) !important;
mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0,0,0,.72) 74%, rgba(0,0,0,.2) 94%, transparent 100%) !important;
}
html[data-theme="light"] body.courses-lab-active .app-header::before,
body[data-theme="light"].courses-lab-active .app-header::before {
background:
linear-gradient(
180deg,
rgba(255,255,255,.68) 0%,
rgba(255,255,255,.48) 45%,
rgba(255,255,255,.21) 72%,
rgba(255,255,255,.07) 88%,
transparent 100%
) !important;
}
/* EDQ V42.0.57 — Navbar large : ancrage stable et contrôles agrandis sans décalage. */
@media (min-width: 1181px) and (min-height: 521px) {
body.is-dashboard-shell-visible,
body.is-public-mobile-shell-visible,
body.is-public-panel-shell {
--edq-navbar-edge-left-current: clamp(1.05rem, 1.25vw, 1.55rem);
--edq-navbar-edge-right-current: clamp(1.05rem, 1.25vw, 1.55rem);
}
body.is-dashboard-shell-visible .mobile-shell-navbar__left,
body.is-public-mobile-shell-visible .mobile-shell-navbar__left,
body.is-public-panel-shell .mobile-shell-navbar__left {
left: var(--edq-navbar-edge-left-current) !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar__right,
body.is-public-mobile-shell-visible .mobile-shell-navbar__right,
body.is-public-panel-shell .mobile-shell-navbar__right {
right: var(--edq-navbar-edge-right-current) !important;
gap: clamp(.54rem, .7vw, .78rem) !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar__btn,
body.is-public-mobile-shell-visible .mobile-shell-navbar__btn,
body.is-public-panel-shell .mobile-shell-navbar__btn {
width: clamp(2.72rem, 2.55vw, 3.16rem) !important;
min-width: clamp(2.72rem, 2.55vw, 3.16rem) !important;
height: clamp(2.72rem, 2.55vw, 3.16rem) !important;
min-height: clamp(2.72rem, 2.55vw, 3.16rem) !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar__btn.mobile-shell-navbar__btn--profile-plain,
body.is-public-mobile-shell-visible .mobile-shell-navbar__btn.mobile-shell-navbar__btn--profile-plain,
body.is-public-panel-shell .mobile-shell-navbar__btn.mobile-shell-navbar__btn--profile-plain,
body.is-dashboard-shell-visible .mobile-shell-navbar__btn.mobile-shell-navbar__btn--profile-plain .mobile-shell-navbar__profile-glyph,
body.is-public-mobile-shell-visible .mobile-shell-navbar__btn.mobile-shell-navbar__btn--profile-plain .mobile-shell-navbar__profile-glyph,
body.is-public-panel-shell .mobile-shell-navbar__btn.mobile-shell-navbar__btn--profile-plain .mobile-shell-navbar__profile-glyph {
width: clamp(2.72rem, 2.55vw, 3.16rem) !important;
min-width: clamp(2.72rem, 2.55vw, 3.16rem) !important;
height: clamp(2.72rem, 2.55vw, 3.16rem) !important;
min-height: clamp(2.72rem, 2.55vw, 3.16rem) !important;
}
body.courses-lab-active .mobile-shell-navbar .courses-searchbar--navbar {
width: min(100%, clamp(34rem, 46vw, 46rem)) !important;
height: clamp(2.45rem, 2.05vw, 2.82rem) !important;
padding-block: clamp(.22rem, .28vw, .34rem) !important;
padding-inline: clamp(.78rem, .95vw, 1.05rem) clamp(.36rem, .5vw, .58rem) !important;
}
body.courses-lab-active .mobile-shell-navbar .courses-searchbar--navbar .courses-searchbar__clear {
width: clamp(1.82rem, 1.55vw, 2.1rem) !important;
height: clamp(1.82rem, 1.55vw, 2.1rem) !important;
}
}
/* EDQ V46.7.6 — les panels avec centre personnalisé interactif doivent laisser cliquer leur Smartbar. */
body.is-dashboard-shell-visible .mobile-shell-navbar.has-custom-center .mobile-shell-navbar__center.has-custom-center,
body.is-public-mobile-shell-visible .mobile-shell-navbar.has-custom-center .mobile-shell-navbar__center.has-custom-center,
body.is-public-panel-shell .mobile-shell-navbar.has-custom-center .mobile-shell-navbar__center.has-custom-center {
pointer-events: auto !important;
overflow: visible !important;
z-index: 8 !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar.has-custom-center .mobile-shell-navbar__center.has-custom-center > *,
body.is-public-mobile-shell-visible .mobile-shell-navbar.has-custom-center .mobile-shell-navbar__center.has-custom-center > *,
body.is-public-panel-shell .mobile-shell-navbar.has-custom-center .mobile-shell-navbar__center.has-custom-center > * {
pointer-events: auto !important;
}
/* V49.2.23 — Navbar épurée : les actions système restent lisibles sans pastille/verre. */
body.is-dashboard-shell-visible .mobile-shell-navbar__btn[data-mobile-shell-system-action="notifications"],
body.is-dashboard-shell-visible .mobile-shell-navbar__btn[data-mobile-shell-system-action="chat"],
body.is-dashboard-shell-visible .mobile-shell-navbar__btn[data-mobile-shell-menu-trigger="1"],
body.is-public-mobile-shell-visible .mobile-shell-navbar__btn[data-mobile-shell-system-action="notifications"],
body.is-public-mobile-shell-visible .mobile-shell-navbar__btn[data-mobile-shell-system-action="chat"],
body.is-public-mobile-shell-visible .mobile-shell-navbar__btn[data-mobile-shell-menu-trigger="1"],
body.is-public-panel-shell .mobile-shell-navbar__btn[data-mobile-shell-system-action="notifications"],
body.is-public-panel-shell .mobile-shell-navbar__btn[data-mobile-shell-system-action="chat"],
body.is-public-panel-shell .mobile-shell-navbar__btn[data-mobile-shell-menu-trigger="1"] {
border-color: transparent !important;
background: transparent !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar__btn[data-mobile-shell-system-action="notifications"]:hover,
body.is-dashboard-shell-visible .mobile-shell-navbar__btn[data-mobile-shell-system-action="chat"]:hover,
body.is-dashboard-shell-visible .mobile-shell-navbar__btn[data-mobile-shell-menu-trigger="1"]:hover,
body.is-public-mobile-shell-visible .mobile-shell-navbar__btn[data-mobile-shell-system-action="notifications"]:hover,
body.is-public-mobile-shell-visible .mobile-shell-navbar__btn[data-mobile-shell-system-action="chat"]:hover,
body.is-public-mobile-shell-visible .mobile-shell-navbar__btn[data-mobile-shell-menu-trigger="1"]:hover,
body.is-public-panel-shell .mobile-shell-navbar__btn[data-mobile-shell-system-action="notifications"]:hover,
body.is-public-panel-shell .mobile-shell-navbar__btn[data-mobile-shell-system-action="chat"]:hover,
body.is-public-panel-shell .mobile-shell-navbar__btn[data-mobile-shell-menu-trigger="1"]:hover {
border-color: transparent !important;
background: color-mix(in srgb, var(--color-text, #f9fafb) 7%, transparent) !important;
box-shadow: none !important;
}
/* V49.2.24 — Navbar vraiment nue : actions système neutres sans verre, bordure ni fond. */
body.is-dashboard-shell-visible .mobile-shell-navbar .mobile-shell-navbar__right > button.mobile-shell-navbar__btn:not(.mobile-shell-navbar__btn--primary):not(.mobile-shell-navbar__btn--success):not(.mobile-shell-navbar__btn--danger):not(.mobile-shell-navbar__btn--profile-plain),
body.is-public-mobile-shell-visible .mobile-shell-navbar .mobile-shell-navbar__right > button.mobile-shell-navbar__btn:not(.mobile-shell-navbar__btn--primary):not(.mobile-shell-navbar__btn--success):not(.mobile-shell-navbar__btn--danger):not(.mobile-shell-navbar__btn--profile-plain),
body.is-public-panel-shell .mobile-shell-navbar .mobile-shell-navbar__right > button.mobile-shell-navbar__btn:not(.mobile-shell-navbar__btn--primary):not(.mobile-shell-navbar__btn--success):not(.mobile-shell-navbar__btn--danger):not(.mobile-shell-navbar__btn--profile-plain),
body.is-dashboard-shell-visible .mobile-shell-navbar .mobile-shell-navbar__right > button.mobile-shell-navbar__btn[data-mobile-shell-system-action="notifications"],
body.is-dashboard-shell-visible .mobile-shell-navbar .mobile-shell-navbar__right > button.mobile-shell-navbar__btn[data-mobile-shell-system-action="chat"],
body.is-dashboard-shell-visible .mobile-shell-navbar .mobile-shell-navbar__right > button.mobile-shell-navbar__btn[data-mobile-shell-menu-trigger="1"],
body.is-public-mobile-shell-visible .mobile-shell-navbar .mobile-shell-navbar__right > button.mobile-shell-navbar__btn[data-mobile-shell-system-action="notifications"],
body.is-public-mobile-shell-visible .mobile-shell-navbar .mobile-shell-navbar__right > button.mobile-shell-navbar__btn[data-mobile-shell-system-action="chat"],
body.is-public-mobile-shell-visible .mobile-shell-navbar .mobile-shell-navbar__right > button.mobile-shell-navbar__btn[data-mobile-shell-menu-trigger="1"],
body.is-public-panel-shell .mobile-shell-navbar .mobile-shell-navbar__right > button.mobile-shell-navbar__btn[data-mobile-shell-system-action="notifications"],
body.is-public-panel-shell .mobile-shell-navbar .mobile-shell-navbar__right > button.mobile-shell-navbar__btn[data-mobile-shell-system-action="chat"],
body.is-public-panel-shell .mobile-shell-navbar .mobile-shell-navbar__right > button.mobile-shell-navbar__btn[data-mobile-shell-menu-trigger="1"] {
border: 0 !important;
border-color: transparent !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
outline: 0 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar .mobile-shell-navbar__right > button.mobile-shell-navbar__btn:not(.mobile-shell-navbar__btn--primary):not(.mobile-shell-navbar__btn--success):not(.mobile-shell-navbar__btn--danger):not(.mobile-shell-navbar__btn--profile-plain):hover,
body.is-dashboard-shell-visible .mobile-shell-navbar .mobile-shell-navbar__right > button.mobile-shell-navbar__btn:not(.mobile-shell-navbar__btn--primary):not(.mobile-shell-navbar__btn--success):not(.mobile-shell-navbar__btn--danger):not(.mobile-shell-navbar__btn--profile-plain):focus-visible,
body.is-public-mobile-shell-visible .mobile-shell-navbar .mobile-shell-navbar__right > button.mobile-shell-navbar__btn:not(.mobile-shell-navbar__btn--primary):not(.mobile-shell-navbar__btn--success):not(.mobile-shell-navbar__btn--danger):not(.mobile-shell-navbar__btn--profile-plain):hover,
body.is-public-mobile-shell-visible .mobile-shell-navbar .mobile-shell-navbar__right > button.mobile-shell-navbar__btn:not(.mobile-shell-navbar__btn--primary):not(.mobile-shell-navbar__btn--success):not(.mobile-shell-navbar__btn--danger):not(.mobile-shell-navbar__btn--profile-plain):focus-visible,
body.is-public-panel-shell .mobile-shell-navbar .mobile-shell-navbar__right > button.mobile-shell-navbar__btn:not(.mobile-shell-navbar__btn--primary):not(.mobile-shell-navbar__btn--success):not(.mobile-shell-navbar__btn--danger):not(.mobile-shell-navbar__btn--profile-plain):hover,
body.is-public-panel-shell .mobile-shell-navbar .mobile-shell-navbar__right > button.mobile-shell-navbar__btn:not(.mobile-shell-navbar__btn--primary):not(.mobile-shell-navbar__btn--success):not(.mobile-shell-navbar__btn--danger):not(.mobile-shell-navbar__btn--profile-plain):focus-visible {
border: 0 !important;
border-color: transparent !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
outline: 0 !important;
transform: none !important;
}
/* V49.2.25 — Navbar nue : le bouton Retour rejoint les actions système transparentes. */
body.is-dashboard-shell-visible .mobile-shell-navbar .mobile-shell-navbar__left > button.mobile-shell-navbar__btn--neutral,
body.is-public-mobile-shell-visible .mobile-shell-navbar .mobile-shell-navbar__left > button.mobile-shell-navbar__btn--neutral,
body.is-public-panel-shell .mobile-shell-navbar .mobile-shell-navbar__left > button.mobile-shell-navbar__btn--neutral {
border: 0 !important;
border-color: transparent !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
outline: 0 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body.is-dashboard-shell-visible .mobile-shell-navbar .mobile-shell-navbar__left > button.mobile-shell-navbar__btn--neutral:hover,
body.is-dashboard-shell-visible .mobile-shell-navbar .mobile-shell-navbar__left > button.mobile-shell-navbar__btn--neutral:focus-visible,
body.is-public-mobile-shell-visible .mobile-shell-navbar .mobile-shell-navbar__left > button.mobile-shell-navbar__btn--neutral:hover,
body.is-public-mobile-shell-visible .mobile-shell-navbar .mobile-shell-navbar__left > button.mobile-shell-navbar__btn--neutral:focus-visible,
body.is-public-panel-shell .mobile-shell-navbar .mobile-shell-navbar__left > button.mobile-shell-navbar__btn--neutral:hover,
body.is-public-panel-shell .mobile-shell-navbar .mobile-shell-navbar__left > button.mobile-shell-navbar__btn--neutral:focus-visible {
border: 0 !important;
border-color: transparent !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
outline: 0 !important;
transform: none !important;
}