/* Hide .dark-mode elements in light theme */
:root[data-fr-theme="light" i] .dark-mode {
  display: none !important;
}

/* Hide .light-mode elements in dark theme */
:root[data-fr-theme="dark" i] .light-mode {
  display: none !important;
}

/* Light theme banner */
:root[data-fr-theme="light" i] .banner {
  background-color: #000091;
  /* Blue in light mode */
}

/* Dark theme banner */
:root[data-fr-theme="dark" i] .banner {
  background-color: #272747;
  /* Dark purple in dark mode */
}

:root[data-fr-theme="light" i] .callout-adaptive-bg {
  background-color: #E3E3FD;
  /* Blue in light mode */
}

:root[data-fr-theme="dark" i] .callout-adaptive-bg {
  background-color: #272747;
  /* Dark purple in dark mode */
}

:root[data-fr-theme="light" i] .callout-nb {
  background: #F5F5FE;
}

:root[data-fr-theme="light" i] .cartes-usage {
  background-color: #f6f6f6;
}

.banner {
  position: relative;
  overflow: hidden;
}

.banner > .fr-container {
  z-index: 1;
}

.dots-grid {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
}

img.shrink {
  width: 100%;
}

.fr-sidemenu--sticky {
  align-self: start;
  top: 1em;
}

/* This is mandatory to have a sticky summary */
#main article .fr-container--fluid {
  overflow: unset;
}