/* EDQ — Bandeau système / maintenance technique */

:root {
  --edq-system-banner-height: 0px;
}

.edq-system-banner {
  position: sticky;
  top: 0;
  z-index: 10000;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  line-height: 1.35;
  text-align: center;
  box-sizing: border-box;
  overflow: hidden;
}

.edq-system-banner[hidden] {
  display: none !important;
}

.edq-system-banner--notice {
  color: #1f1600;
  background: #fbbf24;
  border-bottom: 1px solid rgba(120, 78, 0, 0.34);
}

.edq-system-banner--maintenance {
  color: #fff;
  background: #b91c1c;
  border-bottom: 1px solid rgba(69, 10, 10, 0.65);
}

.edq-system-banner__viewport {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.edq-system-banner__track {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.65rem;
  padding:
    max(0.55rem, env(safe-area-inset-top, 0px))
    max(0.9rem, env(safe-area-inset-right, 0px))
    0.55rem
    max(0.9rem, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
}

.edq-system-banner__message {
  display: inline-block;
  max-width: none;
  white-space: nowrap;
  font-size: clamp(0.84rem, 1.6vw, 0.98rem);
  font-weight: 750;
  letter-spacing: 0.01em;
}

.edq-system-banner__message strong {
  font-weight: 850;
}

.edq-system-banner.is-overflowing .edq-system-banner__track {
  justify-content: flex-start;
  width: max-content;
  min-width: 100%;
  gap: var(--edq-system-banner-marquee-gap, 4rem);
  animation: edq-system-banner-scroll var(--edq-system-banner-scroll-duration, 18s) linear infinite;
}

.edq-system-banner.is-overflowing .edq-system-banner__message {
  flex: 0 0 auto;
  max-width: none;
  white-space: nowrap;
  text-wrap: nowrap;
  padding-inline: 0;
}

body.edq-system-banner-visible .app-header {
  inset: var(--edq-system-banner-height) 0 auto 0 !important;
}

/*
 * Le bandeau sticky occupe déjà sa hauteur dans le flux normal.
 * Les surfaces fixed / plein écran doivent en revanche intégrer
 * explicitement cette hauteur dans leur géométrie viewport.
 */
body.edq-system-banner-visible #dashboard-app-shell > .dashboard-sidebar {
  margin-top: var(--edq-system-banner-height) !important;
  max-height: calc(100dvh - var(--edq-system-banner-height) - var(--app-header-height, 0px) - 1.5rem) !important;
}

@media (max-width: 1023px) {
  /*
   * Le header fixe est repoussé sous le bandeau ; l'origine du contenu
   * dashboard doit avancer de la même hauteur pour ne pas rester dessous.
   */
  body.edq-system-banner-visible.is-dashboard-shell-visible #app-root {
    padding-top: calc(var(--edq-system-banner-height) + var(--edq-navbar-height-current, 3.35rem)) !important;
  }

  /*
   * L'accueil public utilise lui aussi la navbar mobile injectée dans
   * .app-header. On verrouille explicitement son origine sous le bandeau.
   */
  body.edq-system-banner-visible.is-public-mobile-shell-visible .app-header {
    inset: var(--edq-system-banner-height) 0 auto 0 !important;
    top: var(--edq-system-banner-height) !important;
  }

  /*
   * Certains slots de l'accueil public mobile sont fixed au viewport dans
   * dashboard-home-v2.css : ils doivent intégrer eux-mêmes le bandeau.
   */
  body.edq-system-banner-visible.is-public-mobile-shell-visible:not(.is-public-panel-shell)
    .mobile-shell-navbar.is-public-home.is-dashboard-native-home.is-mobile-mode
    .mobile-shell-navbar__center:not(.has-custom-center) {
    top: calc(var(--edq-system-banner-height) + env(safe-area-inset-top, 0px) + 1.46rem) !important;
  }

  body.edq-system-banner-visible.is-public-mobile-shell-visible:not(.is-public-panel-shell)
    .mobile-shell-navbar.is-public-home.is-dashboard-native-home.is-mobile-mode
    .mobile-shell-navbar__right {
    top: calc(var(--edq-system-banner-height) + env(safe-area-inset-top, 0px) + .36rem) !important;
  }

  body.edq-system-banner-visible.is-dashboard-shell-visible:has(#dashboard-view > .dashboard-v2--native-mobile) .dashboard-app-main,
  body.edq-system-banner-visible.is-dashboard-shell-visible:has(#dashboard-view > .dashboard-v2--native-mobile) #dashboard-view {
    height: calc(100dvh - var(--edq-system-banner-height)) !important;
    min-height: calc(100dvh - var(--edq-system-banner-height)) !important;
  }

  body.edq-system-banner-visible.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--native-mobile {
    height: calc(100dvh - var(--edq-system-banner-height)) !important;
    min-height: calc(100dvh - var(--edq-system-banner-height)) !important;
  }

  body.edq-system-banner-visible.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--native-mobile .dashboard-mobile-pager {
    height: calc(100dvh - var(--edq-system-banner-height) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - var(--dashboard-mobile-navbar-height) - var(--dashboard-mobile-dots-height) - 0.25rem) !important;
  }
}


/*
 * EDQ Issue #58 — géométrie NOTICE transverse
 *
 * Le menu shell verrouille html/body pendant son ouverture. Dans cet état,
 * le bandeau sticky doit devenir explicitement ancré au viewport afin de
 * rester visible au-dessus de l'overlay plein écran.
 */
body.edq-system-banner-visible.mobile-shell-menu-open .edq-system-banner {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

/*
 * Les panels dashboard historiques consomment un offset commun indépendant
 * de #app-root. Sous bandeau système, cet offset doit inclure la hauteur
 * mesurée du bandeau afin que leurs héros/contenus restent sous la navbar.
 */
body.edq-system-banner-visible.is-dashboard-shell-visible {
  --dashboard-floating-content-offset: calc(4.25rem + var(--edq-system-banner-height));
}

@media (max-width: 1023px) {
  /*
   * Le dashboard natif mobile est lui-même une surface fixed/inset:0.
   * Réduire sa hauteur ne déplace pas son origine : on l'ancre donc
   * explicitement sous le bandeau.
   */
  body.edq-system-banner-visible.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--native-mobile {
    top: var(--edq-system-banner-height) !important;
  }
}

@keyframes edq-system-banner-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(var(--edq-system-banner-scroll-distance, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .edq-system-banner__track {
    width: 100%;
    min-width: 0;
    animation: none !important;
    transform: none !important;
  }

  .edq-system-banner__message {
    max-width: 100%;
    white-space: normal;
    text-wrap: balance;
    padding-inline: 0;
  }
}

@media (max-width: 479px) {
  .edq-system-banner__track {
    min-height: 2.85rem;
    padding-inline:
      max(0.72rem, env(safe-area-inset-right, 0px))
      max(0.72rem, env(safe-area-inset-left, 0px));
  }

  .edq-system-banner__message {
    font-size: 0.82rem;
  }
}

/* EDQ Issue #58 — Planning mobile NOTICE
 *
 * La daybar du Planning est fixed et échappe au flux déjà décalé par
 * #app-root. Sous bandeau système, son origine doit donc intégrer
 * explicitement la hauteur mesurée du bandeau sans modifier le padding
 * réservé à la grille.
 */
@media (max-width: 767px) and (orientation: portrait) {
  body.edq-system-banner-visible.is-dashboard-shell-visible.is-planning-public-panel .planning-public-mobile-week {
    --planning-mobile-daybar-top: calc(
      var(--edq-system-banner-height)
      + var(--edq-safe-area-top-effective, env(safe-area-inset-top, 0px))
      + 3.42rem
    );
  }
}

/* EDQ Issue #58 — Calendrier mobile NOTICE
 *
 * Le dock du Calendrier est fixed relativement au viewport et conserve
 * normalement une origine égale à la hauteur de navbar. Sous bandeau
 * système, il doit aussi intégrer la hauteur mesurée du bandeau sans
 * redéfinir --calendar-mobile-navbar-height, utilisée ailleurs par le
 * Calendrier et son contrôleur JavaScript.
 */
@media (max-width: 719px) {
  body.edq-system-banner-visible.is-dashboard-shell-visible:has(#calendar-full-panel-content) .calendar-modern-dock-host {
    top: calc(
      var(--edq-system-banner-height)
      + var(--calendar-mobile-navbar-height)
    ) !important;
  }
}