:root {
  color-scheme: light dark;
  accent-color: hsl(32, 76%, 50%);
  --error: hsl(0, 50%, 50%);
  --background: light-dark(hsl(202, 18%, 95%), hsl(202, 18%, 5%));
  --background-gradient-0: light-dark(hsl(212, 18%, 84%), hsl(212, 18%, 16%));
  --background-gradient-11: light-dark(hsl(211, 18%, 85%), hsl(211, 18%, 15%));
  --background-gradient-22: light-dark(hsl(210, 18%, 86%), hsl(210, 18%, 14%));
  --background-gradient-33: light-dark(hsl(210, 18%, 87%), hsl(210, 18%, 13%));
  --background-gradient-44: light-dark(hsl(209, 18%, 88%), hsl(209, 18%, 12%));
  --background-gradient-56: light-dark(hsl(208, 18%, 89%), hsl(208, 18%, 11%));
  --background-gradient-67: light-dark(hsl(207, 18%, 90%), hsl(207, 18%, 10%));
  --background-gradient-78: light-dark(hsl(207, 18%, 91%), hsl(207, 18%, 9%));
  --background-gradient-89: light-dark(hsl(206, 18%, 92%), hsl(206, 18%, 8%));
  --background-gradient-100: light-dark(hsl(206, 18%, 93%), hsl(206, 18%, 7%));
  --ardoise: hsl(202, 18%, 50%);
  --ardoise-10: light-dark(hsl(202, 18%, 10%), hsl(202, 18%, 90%));
  --ardoise-20: light-dark(hsl(202, 18%, 20%), hsl(202, 18%, 80%));
  --ardoise-25: light-dark(hsl(202, 18%, 25%), hsl(202, 18%, 75%));
  --ardoise-30: light-dark(hsl(202, 18%, 30%), hsl(202, 18%, 70%));
  --ardoise-40: light-dark(hsl(202, 18%, 40%), hsl(202, 18%, 60%));
  --ardoise-50: hsl(202, 18%, 50%);
  --ardoise-60: light-dark(hsl(202, 18%, 60%), hsl(202, 18%, 40%));
  --ardoise-70: light-dark(hsl(202, 18%, 70%), hsl(202, 18%, 30%));
  --ardoise-75: light-dark(hsl(202, 18%, 75%), hsl(202, 18%, 25%));
  --ardoise-80: light-dark(hsl(202, 18%, 80%), hsl(202, 18%, 20%));
  --ardoise-90: light-dark(hsl(202, 18%, 90%), hsl(202, 18%, 10%));
  --green: hsl(166, 18%, 50%);
  --green-10: light-dark(hsl(166, 18%, 10%), hsl(166, 18%, 90%));
  --green-20: light-dark(hsl(166, 18%, 20%), hsl(166, 18%, 80%));
  --green-30: light-dark(hsl(166, 18%, 30%), hsl(166, 18%, 70%));
  --green-40: light-dark(hsl(166, 18%, 40%), hsl(166, 18%, 60%));
  --green-50: hsl(166, 18%, 50%);
  --green-60: light-dark(hsl(166, 18%, 60%), hsl(166, 18%, 40%));
  --green-70: light-dark(hsl(166, 18%, 70%), hsl(166, 18%, 30%));
  --green-80: light-dark(hsl(166, 18%, 80%), hsl(166, 18%, 20%));
  --green-90: light-dark(hsl(166, 18%, 90%), hsl(166, 18%, 10%));
  --red: hsl(0, 18%, 50%);
  --red-50: hsl(0, 18%, 50%);
  --red-20: light-dark(hsl(0, 18%, 20%), hsl(0, 18%, 80%));
  --yellow: hsl(45, 50%, 50%);
  --yellow-50: hsl(45, 50%, 50%);
  --purple: hsl(306, 50%, 50%);
  --purple-50: hsl(306, 50%, 50%);
  --orange: hsl(32, 76%, 50%);
  --orange-10: hsl(32, 76%, 10%);
  --orange-20: hsl(32, 76%, 20%);
  --orange-30: hsl(32, 76%, 30%);
  --orange-40: hsl(32, 76%, 40%);
  --orange-50: hsl(32, 76%, 50%);
  --orange-60: hsl(32, 76%, 60%);
  --orange-70: hsl(32, 76%, 70%);
  --orange-80: hsl(32, 76%, 80%);
  --orange-90: hsl(32, 76%, 90%);
  --add-this: hsl(45, 80%, 45%);
  --start-this-series: hsl(186, 80%, 45%);
  --add-this-episode: hsl(45, 80%, 45%);
  --up-to-date-series: hsl(127, 25%, 45%);
  --up-to-date-series-border: hsl(127, 25%, 35%);
  --up-to-date-series-bg: hsl(127, 25%, 25%);
  --that-s-all-folks: cadetblue;
  --that-s-all-folks-border: teal;
  --user-episode-actions: cadetblue;
  --user-episode-list: hsl(202, 20%, 60%);
  --remove-this-series: hsl(0, 50%, 45%);
  --favorite-series: hsl(32, 76%, 50%);
  --marathoner-series: hsl(45, 80%, 45%);
  --rating: hsl(45, 80%, 45%);
}

:root[data-theme=dark] {
  color-scheme: dark;
}

:root[data-theme=light] {
  color-scheme: light;
}

::view-transition-old(root) {
  /*animation: move-out 500ms ease-in-out;*/
  animation-delay: 500ms;
}

::view-transition-new(root) {
  animation: move-in 500ms ease-in-out;
}

@keyframes move-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes move-out {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

::selection {
  background-color: var(--orange-50);
  color: var(--orange-90);
}

html {
  color-scheme: light dark;
  interpolate-size: allow-keywords;
  scroll-behavior: smooth;
}

a {
  color: var(--ardoise-10);
  font-weight: 400;
  text-decoration: none;
}
a:hover, a:visited, a:focus {
  color: var(--ardoise-10);
}

body {
  align-items: center;
  background: var(--background) linear-gradient(45deg, var(--background-gradient-0) 0%, var(--background-gradient-11) 11%, var(--background-gradient-22) 22%, var(--background-gradient-33) 33%, var(--background-gradient-44) 44%, var(--background-gradient-56) 56%, var(--background-gradient-67) 67%, var(--background-gradient-78) 78%, var(--background-gradient-89) 89%, var(--background-gradient-100) 100%) fixed;
  color: var(--ardoise-10);
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1rem;
  font-weight: 100;
  /*height: 100dvh;*/
  line-height: 1.5rem;
  margin: 0;
  position: relative;
}
body.frozen {
  overflow: hidden;
}
body img, body picture, body svg, body video {
  display: block;
  max-width: 100%;
}
body label, body input, body textarea, body select, body button {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 300;
  margin: 0;
}
body select option {
  font-family: inherit;
}
body button {
  border: none;
}
body input[type=checkbox][switch] {
  accent-color: hsl(166, 50%, 50%);
}
body .hidden {
  display: none;
}
body h1, body h2, body h3, body h4, body h5, body h6 {
  font-weight: 300;
  line-height: 1.25;
  text-wrap: balance;
}

body:has(.search-results.showing-something),
body:is(.menu.main.open.show),
body:is(.menu.user.open.show),
body:has(dialog[open]) {
  overflow: hidden;
}

.d-none {
  display: none !important;
}

.svg {
  fill: currentColor;
  height: 18px;
  width: 18px;
}

.container, .container-fluid {
  display: flex;
  flex-direction: column;
  background-color: transparent;
  margin-inline: auto;
  min-height: calc(100dvh - 3rem);
  padding-block-start: 1rem !important;
  padding-inline: 0;
  position: relative;
  width: 100%;
}
.container.error, .container-fluid.error {
  align-items: center;
  justify-content: center;
}

.backgroundImage {
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
}

.backgroundImageOverlay {
  /*-webkit-backdrop-filter: blur(256px) brightness(75%) saturate(85%);
  backdrop-filter: blur(256px) brightness(75%) saturate(85%);*/
  overflow: hidden;
  padding: 0;
  width: 100%;
  /*&:has(dialog[open]) {
      overflow: hidden;
  }*/
}

@media (width >= 800px) {
  .container, .container-fluid:not(:has(.backgroundImageOverlay)) {
    padding-inline: 0.75rem;
  }
  .backgroundImageOverlay {
    padding: 1rem;
  }
}
@media (width >= 1025px) {
  .container {
    max-width: 1024px;
    padding-inline: unset;
  }
  .container-fluid:not(:has(.backgroundImageOverlay)) {
    padding-inline: 1rem;
  }
}
@media (width >= 1200px) {
  .container {
    max-width: 1140px;
  }
}
@media (width >= 1400px) {
  .container {
    max-width: 1320px;
  }
}
@media (width >= 1600px) {
  .container {
    max-width: 1520px;
  }
}
@media (width >= 1920px) {
  .container {
    max-width: 1860px;
  }
}
:root {
  --navbar-bg: var(--ardoise-60);
  --navbar-border: var(--ardoise-20);
  --navbar-bg-hover: var(--orange-50);
  --navbar-bg-25: var(--ardoise-70-alpha-25);
  --navbar-bg-50: hsla(from var(--ardoise-70) h s l / .5);
  --navbar-bg-75: var(--ardoise-70-alpha-75);
  --navbar-color: var(--ardoise-25-alpha-25);
  --navbar-color-hover: var(--ardoise-10);
  --navbar-opacity: 1;
  --tooltips-bg: var(--ardoise-90);
  --tooltips-color: var(--ardoise-20);
  --notification-color: var(--ardoise-10);
  --notification-validated: var(--ardoise-25);
  --menu-easing: linear(0, 0.009 1%, 0.035 2%, 0.079 3.1%, 0.142 4.3%, 0.287 6.5%, 0.728 12.5%, 0.849 14.4%, 0.946 16.2%, 1.025 18%, 1.086 19.8%, 1.129 21.6%, 1.156 23.5%, 1.169 26%, 1.159 28.9%, 1.016 41.6%, 0.989 45.3%, 0.975 49.2%, 0.973 55%, 1.004 74.4%, 1);
}

.debug {
  background-color: var(--orange-30);
  border: 2px dashed var(--orange-50);
  border-radius: 0.25rem;
  color: var(--orange-80);
  padding: 0.125rem 0.5rem;
  position: fixed;
  right: 10rem;
  top: 1.5rem;
  z-index: 100;
}

label:has(select) {
  align-items: center;
  display: flex;
  gap: 1rem;
  margin-inline-start: auto;
  position: relative;
  white-space: nowrap;
}
label:has(select) .logo {
  align-items: center;
  background-color: hsl(0, 0%, 100%);
  border: 1px solid var(--orange-50);
  border-radius: 0.25rem;
  display: flex;
  justify-content: center;
  height: 1.5rem;
  padding: 0.25rem;
}
label:has(select) .logo img {
  border-radius: 0.25rem;
  height: 100%;
}
label:has(select) select {
  appearance: none;
  background-color: var(--ardoise-80);
  border: 1px solid var(--ardoise-50);
  border-radius: 0.25rem;
  color: var(--ardoise-10);
  outline: none;
  padding-block: 0.25rem;
  padding-inline: 1rem 2rem;
  width: 100%;
}
label:has(select):focus-within select {
  background-color: var(--ardoise-50);
  outline: var(--orange-50) auto 2px;
}
label:has(select)::after {
  border-bottom: 4px solid var(--ardoise-20);
  border-left: 4px solid transparent;
  border-right: 4px solid var(--ardoise-20);
  border-top: 4px solid transparent;
  content: "";
  display: block;
  height: 0.5em;
  position: absolute;
  right: 0.75em;
  top: 62%;
  transform: rotate(45deg);
  width: 0.5em;
  z-index: 2;
}

.all-my-series label:has(select) select, .home label:has(select) select {
  margin-inline-start: auto;
  width: unset;
}
.all-my-series label:has(select)::after, .home label:has(select)::after {
  top: 20%;
}

label:has(input[type=password]),
label:has(input[type=text]) {
  position: relative;
}

.navbar {
  align-items: center;
  backdrop-filter: blur(8px);
  background-color: hsla(from var(--navbar-bg) h s l/0.4);
  border: 0.125rem solid transparent;
  border-radius: 5rem;
  color: var(--navbar-color-hover);
  display: flex;
  font-weight: 300;
  gap: 0.5rem;
  height: 3rem;
  justify-content: flex-start;
  left: 1rem;
  opacity: var(--navbar-opacity);
  padding-inline: 1rem 0;
  position: fixed;
  right: 1rem;
  top: 1rem;
  transition: opacity 0.25ms ease-in-out;
  z-index: 500;
}
.navbar:has(.navbar-items-toggler.open), .navbar:has(.search-results.showing-something), .navbar:has(.menu.open) {
  --navbar-opacity: 1;
  color: var(--navbar-color-hover);
}
.navbar .navbar-items-toggler {
  background-color: transparent;
  border-radius: 50%;
  align-items: center;
  display: none;
  height: 2.5rem;
  justify-content: center;
  transition: background-color 300ms ease-in-out;
  width: 2.5rem;
}
.navbar .navbar-items-toggler svg {
  color: var(--navbar-color-hover);
  height: 1.5rem;
  width: 1.5rem;
}
.navbar .navbar-items {
  align-items: center;
  display: flex;
  gap: 0.5rem;
}
.navbar .navbar-items.right {
  margin-inline-start: 0;
}
.navbar:not(:has(.multi-search)) .navbar-items.left {
  margin-inline-end: auto;
}
.navbar .navbar-items > a,
.navbar .navbar-item {
  align-items: center;
  border-radius: 0.25rem;
  cursor: pointer;
  display: flex;
  height: 2rem;
  justify-content: center;
  padding-inline: 0.5rem;
  position: relative;
  transition: background-color 0.25ms, color 0.25ms;
}
.navbar .navbar-items > a:has(.burger),
.navbar .navbar-item:has(.burger) {
  padding-inline: 0;
}
.navbar .navbar-item .menu {
  background-color: var(--navbar-bg);
  border-radius: 0.25rem;
  box-shadow: 0 0 1rem hsla(from var(--ardoise-90) h s l/0.2);
  list-style: none;
  width: max-content;
}
.navbar .navbar-item .menu ul {
  list-style-type: none;
  max-height: 50dvh;
  overflow-y: auto;
}
.navbar .navbar-item .menu .menu-item#history-options,
.navbar .navbar-item .menu .menu-item#log-options {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  padding-inline: 1rem;
}
.navbar .navbar-item .menu .menu-item#history-options label,
.navbar .navbar-item .menu .menu-item#log-options label {
  display: flex;
  gap: 0.5rem;
}
.navbar .navbar-item .menu .menu-item#history-options input[type=number],
.navbar .navbar-item .menu .menu-item#log-options input[type=number] {
  border: 1px solid var(--orange-50);
  border-radius: 0.25rem;
  padding-inline: 0.5rem;
  width: 4rem;
}
.navbar .navbar-item .menu .menu-item {
  border-radius: 0.25rem;
  color: var(--navbar-color-hover);
  /*padding-inline: 1rem;*/
}
.navbar .navbar-item .menu .menu-item:hover {
  background-color: var(--orange-50);
  color: var(--orange-90);
}
.navbar .navbar-item .menu .menu-item#history-options, .navbar .navbar-item .menu .menu-item#log-options {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  padding-inline: 1rem;
}
.navbar .navbar-item .menu .menu-item#history-options label, .navbar .navbar-item .menu .menu-item#log-options label {
  display: flex;
  gap: 0.5rem;
}
.navbar .navbar-item .menu .menu-item#history-options input[type=number], .navbar .navbar-item .menu .menu-item#log-options input[type=number] {
  border: 1px solid var(--orange-50);
  border-radius: 0.25rem;
  padding-inline: 0.5rem;
  width: 4rem;
}
.navbar .navbar-item .menu .menu-item .loading {
  align-items: center;
  background-color: var(--orange-50);
  border-radius: 0.25rem;
  color: var(--orange-90);
  display: flex;
  height: 2rem;
  justify-content: center;
  padding-inline: 0.5rem;
  width: 100%;
}
.navbar .navbar-item .menu .menu-item a {
  height: 100%;
  padding-block-start: 0.125rem;
  padding-inline: 1rem;
  text-decoration: none;
  width: 100%;
}
.navbar .navbar-item .menu .menu-item a.history {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  justify-content: stretch;
}
.navbar .navbar-item .menu .menu-item a.history .poster {
  align-items: center;
  aspect-ratio: 78/117;
  background-color: var(--orange-50);
  border-radius: 0.125rem;
  color: var(--orange-90);
  display: flex;
  font-size: 1.5rem;
  height: 3rem;
  justify-content: center;
  text-align: center;
}
.navbar .navbar-item .menu .menu-item a.history .poster img {
  border-radius: 0.125rem;
  height: 3rem;
  object-fit: cover;
  width: 100%;
}
.navbar .navbar-item .menu .menu-item a.history .name {
  flex-grow: 1;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.navbar .navbar-item .menu .menu-item a.history .device, .navbar .navbar-item .menu .menu-item a.history .vote {
  align-items: center;
  border-radius: 0.25rem;
  border: 1px solid var(--orange-50);
  display: flex;
  height: 2.5rem;
  justify-content: center;
  width: 2.5rem;
}
.navbar .navbar-item .menu .menu-item a.history .provider img {
  aspect-ratio: 1/1;
  border-radius: 0.25rem;
  border: 1px solid var(--orange-50);
  height: 2.5rem;
  object-fit: cover;
}
.navbar .navbar-item .menu .menu-item a.history .device, .navbar .navbar-item .menu .menu-item a.history .vote, .navbar .navbar-item .menu .menu-item a.history .provider, .navbar .navbar-item .menu .menu-item a.history .provider img {
  overflow: hidden;
  transition: width 250ms ease-in-out, height 250ms ease-in-out;
}
.navbar .navbar-item .menu .menu-item a.history .device.hidden, .navbar .navbar-item .menu .menu-item a.history .vote.hidden, .navbar .navbar-item .menu .menu-item a.history .provider.hidden, .navbar .navbar-item .menu .menu-item a.history .provider img.hidden {
  border-width: 0;
  height: 0;
  width: 0;
}
.navbar .navbar-item .menu .menu-item a.history .number {
  background-color: var(--orange-50);
  border-radius: 0.25rem;
  color: var(--orange-90);
  margin-inline-start: auto;
  padding-inline: 0.5rem;
}
.navbar .navbar-item .menu .menu-item a.history .number.ended {
  background-color: var(--green-50);
  color: var(--green-90);
}
.navbar .navbar-item .menu .menu-item a.history .date {
  background-color: var(--orange-50);
  border-radius: 0.25rem;
  color: var(--orange-90);
  margin-inline-start: auto;
  padding-inline: 0.5rem;
}
.navbar .navbar-item .menu .menu-item a.log {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  justify-content: stretch;
}
.navbar .navbar-item .menu .menu-item a.log .name {
  flex-grow: 1;
  font-weight: 300;
  max-width: calc(100% - 7rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.navbar .navbar-item .menu .menu-item a.log .time {
  background-color: hsla(from var(--ardoise-90) h s l/0.2);
  border-radius: 0.25rem;
  color: var(--orange-90);
  font-family: monospace;
  padding-inline: 0.5rem;
}
.navbar .navbar-item .menu .menu-item.log-date {
  background-color: var(--orange-50);
  border-radius: 0.25rem;
  color: var(--orange-90);
  font-weight: 600;
  padding-inline: 0.5rem;
}
.navbar .navbar-item .menu .menu-item.log-item:hover, .navbar .navbar-item .menu .menu-item.history-item:hover {
  background-color: var(--orange-40);
}
.navbar .navbar-item .menu .menu-item:has(input[type=checkbox]):hover {
  background-color: var(--green-50);
  color: var(--green-90);
}
.navbar .navbar-item .menu .menu-item label:has(input[type=checkbox]) {
  align-items: center;
  color: var(--orange-90);
  display: flex;
  gap: 0.5rem;
  justify-content: flex-start;
  padding-block: 1rem;
}
.navbar .navbar-item .menu .menu-item label:has(input[type=search]) {
  display: block;
  padding: 0.25rem;
  position: relative;
}
.navbar .navbar-item .menu .menu-item label:has(input[type=search]) input {
  appearance: none;
  background-color: var(--ardoise-80);
  border: 1px solid var(--ardoise-50);
  border-radius: 999px;
  /*margin-block: .5rem;*/
  padding-block: 0.25rem;
  padding-inline: 0.5rem 2.25rem;
}
.navbar .navbar-item .menu .menu-item label:has(input[type=search]) .magnifying-glass {
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}
.navbar .navbar-item .menu .menu-item:has(input[type=search]) {
  position: relative;
}
.navbar > *:not(.multi-search, .navbar-items):hover,
.navbar .navbar-item:not(:has(.avatar, .burger)):hover,
.navbar .navbar-items > a:hover {
  background-color: var(--navbar-bg-hover);
  color: var(--navbar-bg-hover);
}
.navbar > *:not(.multi-search, .navbar-items):hover svg,
.navbar .navbar-item:not(:has(.avatar, .burger)):hover svg,
.navbar .navbar-items > a:hover svg {
  color: var(--navbar-color-hover);
}
.navbar .navbar-item:has(.avatar):hover .avatar img {
  border-color: var(--orange-50);
}
.navbar > a:visited {
  color: var(--navbar-color);
}
.navbar .search-results {
  background-color: var(--ardoise-80);
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  left: 0;
  list-style: none;
  position: absolute;
  top: 2.75rem;
  z-index: 10;
}
.navbar .search-results ul {
  border-radius: 0.25rem;
  max-height: 50dvh;
  overflow-y: auto;
}
.navbar .search-results ul li {
  padding-inline: 0;
}
.navbar .search-results ul li.active {
  background-color: var(--orange-50);
  color: var(--orange-90);
}
.navbar .search-results ul li a {
  align-items: center;
  color: var(--navbar-color-hover);
  display: flex;
  gap: 0.5rem;
  padding-block: 0.125rem;
  padding-inline: 1rem;
}
.navbar .search-results ul li a:hover {
  background-color: var(--orange-40);
}
.navbar .search-results ul li a .poster {
  align-items: center;
  aspect-ratio: 78/117;
  display: flex;
  font-size: 0.5rem;
  height: 3rem;
  justify-content: center;
  text-align: center;
}
.navbar .search-results ul li a .poster img {
  border-radius: 0.125rem;
  height: 3rem;
  object-fit: cover;
  width: 100%;
}
.navbar .search-results ul li a .title {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.navbar .search-results ul a {
  color: var(--navbar-color);
  display: block;
  padding-block: 0.5rem;
  text-decoration: none;
}
.navbar:hover {
  /*background-color: var(--navbar-bg);*/
  border-color: var(--navbar-border);
  /*opacity: 1;*/
}
.navbar:hover a, .navbar:hover > button {
  color: var(--navbar-color-hover);
}
.navbar:hover .debug {
  background-color: var(--orange-20);
}
.navbar .multi-search {
  margin-inline: auto 1rem;
  position: relative;
  /*&:has(input[type="search"]:not(:focus)) {
      .search-options, .search-results {
          display: none;
      }
  }*/
  /*&:has(input[type="search"]:focus) {
      .search-results {
          left: 0
      }
  }*/
  /*.search-options {
      backdrop-filter: blur(8px);
      background-color: var(--green-60);
      border-radius: .25rem;
      display: flex;
      flex-direction: column;
      gap: .5rem;
      overflow: hidden;
      padding-block: .5rem;
      padding-inline: 1rem;
      width: 100%;

      .row {
          display: flex;
          gap: 1rem;

          label {
              align-items: center;
              display: flex;
              gap: .5rem;
              justify-content: flex-start;
          }
      }
  }*/
  /*&:has(.search-results.showing-something) {
      .search-options {
          padding-inline: 1rem;
          width: 0;
      }
  }*/
}
.navbar .multi-search > label {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  position: relative;
}
.navbar .multi-search > label input {
  appearance: none;
  background-color: hsla(from var(--ardoise-90) h s l/0.2);
  border: none;
  border-radius: 5rem;
  color: var(--orange-90);
  font-size: 1rem;
  font-weight: 300;
  height: 2rem;
  padding-inline: 0 2.5rem;
  transition: all 300ms ease-in-out;
  width: 0;
}
.navbar .multi-search > label input::-webkit-textfield-decoration-container {
  display: none;
}
.navbar .multi-search > label .magnifying-glass {
  align-items: center;
  border-radius: 5rem;
  color: var(--orange-60);
  cursor: pointer;
  display: flex;
  font-size: 1rem;
  height: 1.5rem;
  justify-content: center;
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5rem;
}
.navbar .multi-search > label:has(input:focus) .magnifying-glass {
  color: var(--orange-70);
}
.navbar .multi-search.active input {
  background-color: var(--orange-30);
  padding-inline: 1rem 3rem;
  width: 20rem;
}
.navbar .multi-search.active input::-webkit-textfield-decoration-container {
  display: flex;
}
.navbar .multi-search .search-results {
  background-color: var(--navbar-bg);
  border-radius: 0.25rem;
  left: 0;
  max-height: calc(100dvh - 5.5rem);
  overflow-y: auto;
  padding-inline: 0;
  transition: left 300ms ease-in-out;
}
.navbar .debug {
  align-items: center;
  background-color: var(--orange-30);
  border: 2px dashed var(--orange-50);
  border-radius: 0.25rem;
  color: var(--orange-80);
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.125rem 0.5rem;
  position: unset;
  right: unset;
  top: unset;
}
.navbar .debug:hover {
  color: var(--orange-90);
}
.navbar .notifications em {
  color: var(--orange-50);
}
.navbar .notifications span {
  align-items: center;
  background-color: var(--orange-50);
  border-radius: 999px;
  color: var(--orange-90);
  display: flex;
  font-size: 0.5rem;
  font-weight: 600;
  height: 1rem;
  justify-content: center;
  margin-block-end: 0.5rem;
  min-width: 1rem;
  padding-inline: 0.25rem;
  transform-origin: center top;
  transition: scale 250ms ease-in-out;
  z-index: 1;
}
.navbar .notifications span:hover {
  scale: 4;
}
.navbar .notifications:has(.menu-notifications.show) {
  background-color: var(--orange-50);
  color: var(--orange-90);
}
.navbar .notifications:has(.menu-notifications.show) em {
  color: var(--orange-90);
}
.navbar .notifications:has(.menu-notifications.show) span {
  background-color: var(--green-50);
  color: var(--green-10);
}
.navbar .notifications .menu-notifications {
  max-height: 30dvh;
  max-width: calc(100vw - 6rem);
  overflow-y: auto;
}
.navbar .notifications .menu-notifications .item {
  align-items: center;
  border-radius: 0.25rem;
  color: var(--notification-color);
  display: flex;
  flex-shrink: 0;
  gap: 0.5rem;
  height: 2rem;
  justify-content: flex-start;
  padding-inline: 1rem;
  width: 100%;
}
.navbar .notifications .menu-notifications .item:hover {
  background-color: var(--orange-50);
  color: var(--orange-90);
}
.navbar .notifications .menu-notifications .item.validated {
  color: var(--notification-validated);
}
.navbar .notifications .menu-notifications .item.validated:hover {
  background-color: var(--green-50);
  color: var(--green-90);
}
.navbar .notifications .menu-notifications .item .message {
  flex-grow: 0;
  flex-shrink: 1;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.navbar .notifications .menu-notifications .item .date {
  flex-shrink: 0;
  font-size: 0.75rem;
  margin-inline-start: auto;
}
.navbar .avatar {
  background-color: var(--orange-50);
  border-radius: 50%;
  flex-shrink: 0;
  z-index: 11;
}
.navbar .avatar img {
  aspect-ratio: 1/1;
  border: 4px solid;
  border-radius: 50%;
  height: 4rem;
  width: 4rem;
}
.navbar .avatar .svg {
  align-items: center;
  aspect-ratio: 1/1;
  border: 4px solid;
  border-radius: 50%;
  display: flex;
  height: auto;
  justify-content: center;
  width: 4rem;
}
.navbar .avatar.open img {
  border-color: var(--green-50);
}
.navbar .burger {
  align-items: center;
  border-radius: 5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  height: 2.75rem;
  justify-content: center;
  transition: transform 500ms ease-in-out;
  width: 2.75rem;
}
.navbar .burger:hover {
  background-color: var(--orange-50);
}
.navbar .burger > div {
  border: 2px solid var(--ardoise-10);
  border-radius: 0.5rem;
  display: flex;
  height: 0.75rem;
  transition: background-color 500ms ease-in-out 500ms;
  width: 1.75rem;
}
.navbar .burger > div div {
  background-color: var(--ardoise-10);
  border-radius: 50%;
  height: 0.5rem;
  transition: transform 500ms ease-in-out 500ms;
  width: 0.5rem;
}
.navbar .burger > div:first-child {
  background-color: var(--navbar-bg);
}
.navbar .burger > div:first-child div {
  background-color: var(--ardoise-10);
  transform: translate(1rem, 0);
  transition: all 500ms ease-in-out 500ms;
}
.navbar .burger > div:last-child {
  background-color: var(--ardoise-10);
}
.navbar .burger > div:last-child div {
  background-color: var(--navbar-bg);
  transform: translate(0, 0);
  transition: all 500ms ease-in-out 500ms;
}
.navbar .navbar-item.open .burger {
  transform: rotate(180deg);
}
.navbar .navbar-item.open .burger > div:first-child {
  background-color: var(--ardoise-10);
}
.navbar .navbar-item.open .burger > div:first-child div {
  background-color: var(--navbar-bg);
  transform: translate(0, 0);
}
.navbar .navbar-item.open .burger > div:last-child {
  background-color: var(--navbar-bg);
}
.navbar .navbar-item.open .burger > div:last-child div {
  background-color: var(--ardoise-10);
  transform: translate(1rem, 0);
}
.navbar .menu.users label::after {
  top: 32%;
}
.navbar .menu.main,
.navbar .menu.user,
.navbar .menu.users,
.navbar .menu.menu-notifications {
  right: 0;
  top: 3rem;
  transform: translateX(100%);
}
.navbar .menu.main.show,
.navbar .menu.user.show,
.navbar .menu.users.show,
.navbar .menu.menu-notifications.show {
  transform: translateX(0);
}
.navbar .menu.movies,
.navbar .menu.series,
.navbar .menu.videos,
.navbar .menu.albums,
.navbar .menu.people,
.navbar .menu.history,
.navbar .menu.log,
.navbar .menu.map {
  left: 0;
  top: 2.625rem;
  transform: translateY(calc(-100% - 4.75rem));
}
.navbar .menu.movies.show,
.navbar .menu.series.show,
.navbar .menu.videos.show,
.navbar .menu.albums.show,
.navbar .menu.people.show,
.navbar .menu.history.show,
.navbar .menu.log.show,
.navbar .menu.map.show {
  transform: translateY(0);
}
.navbar .menu.movies,
.navbar .menu.series,
.navbar .menu.videos,
.navbar .menu.albums,
.navbar .menu.people,
.navbar .menu.history,
.navbar .menu.log,
.navbar .menu.map,
.navbar .menu.menu-notifications,
.navbar .menu.main,
.navbar .menu.users,
.navbar .menu.user {
  backdrop-filter: blur(8px);
  background-color: hsla(from var(--navbar-bg) h s l/0.8);
  border-radius: 0.25rem;
  display: none;
  flex-direction: column;
  gap: 0.125rem;
  max-height: calc(100dvh - 6rem);
  opacity: 0;
  padding: 0.5rem;
  position: absolute;
  transition: opacity 250ms ease-in-out, transform 1s var(--menu-easing);
  z-index: 10;
  /*> *:hover {
      background-color: var(--orange-50);
      color: var(--orange-90);
  }*/
}
.navbar .menu.movies.open,
.navbar .menu.series.open,
.navbar .menu.videos.open,
.navbar .menu.albums.open,
.navbar .menu.people.open,
.navbar .menu.history.open,
.navbar .menu.log.open,
.navbar .menu.map.open,
.navbar .menu.menu-notifications.open,
.navbar .menu.main.open,
.navbar .menu.users.open,
.navbar .menu.user.open {
  display: flex;
}
.navbar .menu.movies.show,
.navbar .menu.series.show,
.navbar .menu.videos.show,
.navbar .menu.albums.show,
.navbar .menu.people.show,
.navbar .menu.history.show,
.navbar .menu.log.show,
.navbar .menu.map.show,
.navbar .menu.menu-notifications.show,
.navbar .menu.main.show,
.navbar .menu.users.show,
.navbar .menu.user.show {
  opacity: 1;
}
.navbar .menu.main {
  max-width: calc(100vw - 2rem);
  overflow-x: auto;
  overflow-y: auto;
}
.navbar svg {
  height: 1.5rem;
  width: 1.5rem;
}

.menu.main > a,
.menu.main .a-preview > a,
.menu.main .menu-preview,
.menu.main .menu-theme, .menu.user > a,
.menu.user .a-preview > a,
.menu.user .menu-preview,
.menu.user .menu-theme {
  align-items: center;
  border-radius: 0.25rem;
  color: var(--navbar-color-hover);
  display: flex;
  flex-shrink: 0;
  height: 2rem;
  justify-content: flex-start;
  padding-inline: 1rem;
  white-space: nowrap;
  width: 100%;
}
.menu.main > a:hover,
.menu.main .a-preview > a:hover,
.menu.main .menu-preview:hover,
.menu.main .menu-theme:hover, .menu.user > a:hover,
.menu.user .a-preview > a:hover,
.menu.user .menu-preview:hover,
.menu.user .menu-theme:hover {
  background-color: var(--orange-50) !important;
  color: var(--orange-90);
}
.menu.main > a:hover.active,
.menu.main .a-preview > a:hover.active,
.menu.main .menu-preview:hover.active,
.menu.main .menu-theme:hover.active, .menu.user > a:hover.active,
.menu.user .a-preview > a:hover.active,
.menu.user .menu-preview:hover.active,
.menu.user .menu-theme:hover.active {
  background-color: var(--green-40);
  color: var(--green-90);
}
.menu.main > a.active,
.menu.main .a-preview > a.active,
.menu.main .menu-preview.active,
.menu.main .menu-theme.active, .menu.user > a.active,
.menu.user .a-preview > a.active,
.menu.user .menu-preview.active,
.menu.user .menu-theme.active {
  background-color: var(--green-50);
}
.menu.main > a.active::after,
.menu.main .a-preview > a.active::after,
.menu.main .menu-preview.active::after,
.menu.main .menu-theme.active::after, .menu.user > a.active::after,
.menu.user .a-preview > a.active::after,
.menu.user .menu-preview.active::after,
.menu.user .menu-theme.active::after {
  content: "*";
  margin-inline-start: auto;
}
.menu.main > a.watched,
.menu.main .a-preview > a.watched,
.menu.main .menu-preview.watched,
.menu.main .menu-theme.watched, .menu.user > a.watched,
.menu.user .a-preview > a.watched,
.menu.user .menu-preview.watched,
.menu.user .menu-theme.watched {
  background-color: var(--green-50);
  color: var(--green-90);
}
.menu.main a > em:has(svg), .menu.user a > em:has(svg) {
  align-items: center;
  background-color: var(--add-this-episode);
  border-radius: 0.125rem;
  display: flex;
  height: 1.5rem;
  justify-content: center;
  margin-inline-end: 0.5rem;
  width: 1.75rem;
}
.menu.main > details ul, .menu.user > details ul {
  left: unset;
  right: 100%;
  top: 1rem;
}
.menu.main .separation, .menu.user .separation {
  background-color: var(--navbar-bg-75);
  color: var(--orange-80);
  flex-shrink: 0;
  padding-block: 0.25rem;
  margin-inline: -0.5rem;
  padding-inline: 1rem;
  width: calc(100% + 1rem);
}
.menu.main .a-preview, .menu.user .a-preview {
  display: flex;
  position: relative;
}
.menu.main .a-preview > a, .menu.user .a-preview > a {
  display: flex;
  gap: 1rem;
}
.menu.main .a-preview > a > div, .menu.user .a-preview > a > div {
  display: flex;
  gap: 0.5rem;
}
.menu.main .a-preview > a > div svg, .menu.user .a-preview > a > div svg {
  flex-shrink: 0;
  margin-inline-end: 1rem;
}
.menu.main .a-preview > a .time, .menu.user .a-preview > a .time {
  background-color: var(--orange-50);
  border-radius: 0.25rem;
  color: var(--orange-90);
  font-family: monospace;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.25em;
  margin-inline-start: auto;
  padding-inline: 0.5rem;
}
.menu.main .a-preview > a .time.movie, .menu.user .a-preview > a .time.movie {
  background-color: var(--green-50);
  color: var(--green-20);
}
.menu.main .a-preview > a .provider, .menu.user .a-preview > a .provider {
  height: 1.75rem;
  width: 1.75rem;
}
.menu.main .a-preview > a .provider img, .menu.user .a-preview > a .provider img {
  border-radius: 0.25rem;
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.menu.main .a-preview .episode-of-the-day-preview, .menu.main .a-preview .pinned-series-preview, .menu.user .a-preview .episode-of-the-day-preview, .menu.user .a-preview .pinned-series-preview {
  align-items: center;
  background-color: var(--navbar-bg);
  border-radius: 0.75rem;
  display: none;
  justify-content: center;
  opacity: 0;
  padding: 0.25rem;
  position: absolute;
  right: 2.5rem;
  top: 2rem;
  transform: translateX(100%);
  transition: opacity 250ms ease-in-out, transform 250ms ease-in-out;
  z-index: 1;
}
.menu.main .a-preview .episode-of-the-day-preview.open, .menu.main .a-preview .pinned-series-preview.open, .menu.user .a-preview .episode-of-the-day-preview.open, .menu.user .a-preview .pinned-series-preview.open {
  display: flex;
}
.menu.main .a-preview .episode-of-the-day-preview.show, .menu.main .a-preview .pinned-series-preview.show, .menu.user .a-preview .episode-of-the-day-preview.show, .menu.user .a-preview .pinned-series-preview.show {
  opacity: 1;
  transform: translateX(0);
}
.menu.main .a-preview .episode-of-the-day-preview a img, .menu.main .a-preview .pinned-series-preview a img, .menu.user .a-preview .episode-of-the-day-preview a img, .menu.user .a-preview .pinned-series-preview a img {
  aspect-ratio: 78/117;
  border-radius: 0.5rem;
  width: 9.75rem; /* 156px;*/
}
.menu.main .a-preview .episode-of-the-day-preview a:not(:has(img)), .menu.main .a-preview .pinned-series-preview a:not(:has(img)), .menu.user .a-preview .episode-of-the-day-preview a:not(:has(img)), .menu.user .a-preview .pinned-series-preview a:not(:has(img)) {
  align-items: center;
  aspect-ratio: 78/117;
  background-color: var(--orange-50);
  border-radius: 0.5rem;
  display: flex;
  font-size: 1.5rem;
  gap: 0.5rem;
  justify-content: center;
  padding-inline: 0.5rem;
  width: 9.75rem; /* 156px;*/
}

@media (width <= 56rem) { /* 896px */
  .navbar {
    padding-inline: 0.125rem 1rem;
  }
  .navbar .debug {
    position: absolute;
    right: 0;
    top: 4rem;
  }
  .navbar .navbar-items-toggler {
    background-color: var(--orange-50);
    display: flex;
  }
  .navbar .navbar-items-toggler.open {
    background-color: var(--green-50);
  }
  .navbar .navbar-items-toggler.open svg {
    color: var(--orange-90);
  }
  .navbar .navbar-items.left {
    display: none;
  }
  .navbar .navbar-items.left.open {
    align-items: flex-start;
    background-color: var(--navbar-bg);
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    max-height: calc(100dvh - 7rem);
    overflow-y: auto;
    padding-block: 0.5rem;
    padding-inline: 1rem;
    position: absolute;
    top: 3rem;
    width: 100%;
  }
  .navbar .navbar-items.left.open > a {
    justify-content: flex-start;
    padding-inline: 0.25rem;
    width: 100%;
  }
  .navbar .navbar-items.left.open > a svg {
    height: 1.5rem;
    width: 1.5rem;
  }
  .navbar .navbar-items.left.open .navbar-item {
    align-items: flex-start;
    flex-direction: column;
    height: unset;
    justify-content: flex-start;
    position: unset;
    width: 100%;
  }
  .navbar .navbar-items.left.open .navbar-item:hover {
    background-color: transparent;
  }
  .navbar .navbar-items.left.open .navbar-item .menu {
    border-top: 2px solid var(--navbar-bg-75);
    box-shadow: none;
    display: flex;
    left: unset;
    opacity: 1;
    margin-block-start: 0.5rem;
    position: unset;
    top: unset;
    transform: translateY(0);
    width: 100%;
  }
  .navbar .navbar-items.left.open .navbar-item .menu .menu-item > label,
  .navbar .navbar-items.left.open .navbar-item .menu .separation {
    display: none;
  }
  .navbar .navbar-items.left.open .navbar-item .menu.history, .navbar .navbar-items.left.open .navbar-item .menu.log {
    max-height: min(30rem, 50dvh);
  }
  .navbar .navbar-items.left.open .navbar-item .menu.history label:has(#history-option-device),
  .navbar .navbar-items.left.open .navbar-item .menu.history label:has(#history-option-vote) {
    display: none;
  }
  .navbar .navbar-items.left.open .navbar-item .menu.history .number, .navbar .navbar-items.left.open .navbar-item .menu.history .date {
    margin-inline-start: unset;
  }
  .navbar .navbar-items.left.open .navbar-item .menu.history .vote, .navbar .navbar-items.left.open .navbar-item .menu.history .device {
    display: none;
  }
  .navbar .navbar-items.left.open .navbar-item .menu.history .provider {
    margin-inline-start: auto;
  }
  .navbar .multi-search {
    position: unset;
  }
  .navbar .multi-search .search-results .search-options {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .navbar .multi-search > label:has(input:focus) {
    left: 0;
    position: absolute;
    right: 0;
    top: 3rem;
    z-index: 120;
  }
  .navbar .multi-search > label:has(input:focus) input {
    width: 100%;
  }
  .navbar .multi-search:has(input[type=search]:focus) .search-results {
    left: 0;
    max-height: calc(100dvh - 5.25rem);
    right: 0;
    top: 5.25rem;
    z-index: 120;
  }
  .navbar .multi-search:has(input[type=search]:focus) .search-results ul {
    max-height: calc(100dvh - 5.25rem);
  }
}
@media (width <= 52rem) { /* 800px */
  .container, .container-fluid {
    /*margin-block-start: 0 !important;*/
  }
  .navbar {
    left: 0;
    right: 0;
    top: 0;
    border-radius: 0;
    height: 3rem;
    margin-inline: 0;
    padding-inline: 0;
    width: 100%;
  }
  .navbar .navbar-items-toggler {
    border-radius: 0.25rem;
    height: 2rem;
    margin-inline-start: 0.25rem;
    width: 2rem;
  }
  .navbar .navbar-items.left.open .navbar-item .menu ul li {
    padding-inline: 0;
  }
  .navbar .navbar-items.left.open .navbar-item .menu ul li .menu-item {
    padding-inline: 0;
  }
  .navbar .navbar-items.left.open .navbar-item .menu.history label:has(input[type=number]) {
    flex-direction: column;
  }
  .navbar .navbar-items.left.open .navbar-item .menu.history label:has(#history-option-provider) {
    display: none;
  }
  .navbar .navbar-items.left.open .navbar-item .menu.history .name {
    max-width: calc(100% - 4rem);
  }
  .navbar .navbar-items.left.open .navbar-item .menu.history .number {
    margin-inline-start: auto;
  }
  .navbar .navbar-items.left.open .navbar-item .menu.history .date, .navbar .navbar-items.left.open .navbar-item .menu.history .provider {
    display: none;
  }
}
/*@media (width >= 1920px) {
    body {
        align-items: flex-start;

        .container, .container-fluid {
            margin-inline: unset;
            width: calc(100vw - 40rem);
        }

        .navbar {
            width: calc(100vw - 42rem);

            .burger {
                display: none;
            }

            .menu.main {
                border-right: 0;
                bottom: calc(3.5rem - 100vh);
                display: flex;
                max-height: unset;
                max-width: unset;
                opacity: 1 !important;
                top: -1.5rem;
                transform: translateX(calc(100% + 2.125rem));
                width: 40rem;
            }
        }

        .add-this, .to-top {
            right: 41rem;
        }
    }
}*/
section:has(.pages) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  justify-content: center;
}
section:has(.pages) .block:has(.pages) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  justify-content: center;
}
section:has(.pages) .block:has(.pages) .pages {
  background-color: hsla(from var(--ardoise-60) h s l/0.5);
  margin-block-start: unset;
  padding: 0.25rem;
}
section:has(.pages) .block:has(.pages) .pages .page {
  height: unset;
}

.pages:has(form) form {
  align-items: center;
  display: flex;
  gap: 1rem;
}
.pages:has(form) form label {
  display: flex;
  align-items: center;
  font-weight: 300;
  gap: 1rem;
}
.pages:has(form) form label input {
  appearance: none;
  background-color: var(--orange-50);
  border: 1px solid var(--orange-90);
  border-radius: 0.25rem;
  color: var(--orange-90);
  /*padding-block: 3px;*/
  padding-inline-start: 0.5rem;
}

.home-footer {
  align-items: center;
  background-color: var(--navbar-bg);
  border-radius: 0 0 0.5rem 0.5rem;
  color: var(--ardoise-10);
  display: flex;
  font-weight: 300;
  gap: 1rem;
  justify-content: space-evenly;
  margin-block-start: auto;
  padding-block: 0.5rem;
  width: 100%;
  /*&.dark {
      color: hsl(202, 18%, 10%);
  }*/
}
.home-footer .mytvtime, .home-footer .powered {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  height: 2rem;
  justify-content: flex-start;
}
.home-footer .mytvtime .logo, .home-footer .powered .logo {
  height: 2rem;
}
.home-footer .mytvtime .logo img, .home-footer .powered .logo img {
  height: 100%;
  width: auto;
}
.home-footer .mytvtime a, .home-footer .powered a {
  color: var(--ardoise-10);
}

.container-fluid:has(.login),
.container-fluid:has(.register) {
  align-items: center;
  display: flex;
  justify-content: center;
  width: 100%;
}
.container-fluid:has(.login) .home-footer,
.container-fluid:has(.register) .home-footer {
  margin-block-start: auto;
}

@property --add-this-fill-start {
  syntax: "<color>";
  inherits: true;
  initial-value: hsl(166, 18%, 50%);
}
@property --add-this-fill-end {
  syntax: "<color>";
  inherits: true;
  initial-value: hsl(32, 76%, 50%);
}
.add-this {
  align-items: center;
  background: linear-gradient(45deg, var(--add-this-fill-start), var(--add-this-fill-end)) padding-box, linear-gradient(-45deg, var(--add-this-fill-start), var(--add-this-fill-end)) border-box;
  bottom: 6rem;
  border: 0.75vw solid transparent;
  border-radius: 1.5vw;
  color: var(--ardoise-10);
  display: flex;
  font-size: 4vw;
  font-weight: 500;
  justify-content: center;
  line-height: 1em;
  padding: 2vw;
  position: fixed;
  right: 1rem;
  text-align: center;
  transition: --add-this-fill-start 300ms ease-in-out, --add-this-fill-end 300ms ease-in-out;
}
.add-this:hover, .add-this:focus-visible {
  --add-this-fill-start: var(--add-this);
  --add-this-fill-end: var(--add-this);
}

.switcher {
  border: 2px solid var(--ardoise-80);
  border-radius: calc(0.5em + 2px);
  cursor: pointer;
  display: inline-block;
  height: calc(1em + 4px);
  margin-left: auto;
  margin-right: 0.5em;
  overflow: hidden;
  position: relative;
  width: calc(2em + 4px);
}
.switcher input {
  height: 0;
  position: absolute;
  top: -2em;
  width: 0;
}
.switcher input + span {
  background: var(--ardoise-50);
  border-radius: 0.5em;
  cursor: pointer;
  inset: 0;
  position: absolute;
}
.switcher input + span:before {
  background: white;
  border-radius: 50%;
  content: "";
  cursor: pointer;
  display: inline-block;
  height: 1rem;
  left: 0;
  position: absolute;
  top: 0;
  transition: all 0.2s ease-in-out;
  width: 1rem;
}
.switcher input:checked + span {
  background: var(--orange-50);
}
.switcher input:checked + span:before {
  left: 1em;
}

.login form, .register form {
  background-color: hsla(from var(--ardoise-80) h s l/0.5);
  border-radius: 1rem;
  border: 2px solid hsla(from var(--ardoise-20) h s l/0.5);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-block: auto;
  padding: 2rem;
  width: 32rem;
}
.login form .header, .register form .header {
  align-items: center;
  display: flex;
  font-size: 1.25rem;
  font-weight: 300;
  justify-content: center;
  width: 100%;
}
.login form .body, .register form .body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}
.login form .body label, .register form .body label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
}
.login form .body label input[type=text],
.login form .body label input[type=password], .register form .body label input[type=text],
.register form .body label input[type=password] {
  background-color: hsla(from var(--ardoise-80) h s l/0.5);
  border: 1px solid hsla(from var(--ardoise-20) h s l/0.5);
  border-radius: 0.25rem;
  color: var(--ardoise-10);
  padding: 0.5rem;
  transition: border-color 0.25ms;
  width: 100%;
}
.login form .body label input[type=text]:focus,
.login form .body label input[type=password]:focus, .register form .body label input[type=text]:focus,
.register form .body label input[type=password]:focus {
  border-color: var(--orange-50);
}
.login form .body label .password-toggle-view, .register form .body label .password-toggle-view {
  bottom: 0.75rem;
  cursor: pointer;
  position: absolute;
  right: 2.5rem;
}
.login form .body label .help, .register form .body label .help {
  color: var(--orange-50);
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 0.75rem;
  margin-inline-start: 0.5rem;
  text-wrap: initial;
  width: 100%;
}
.login form .body label:has(select)::after, .register form .body label:has(select)::after {
  top: 75%;
}
.login form .body .remember-me label, .register form .body .remember-me label {
  align-items: center;
  flex-direction: row;
  /*input[type="checkbox"] {
      width: unset;
  }*/
}
.login form .body .remember-me label span, .register form .body .remember-me label span {
  display: block;
}
.login form .footer, .register form .footer {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  width: 100%;
}
.login form .footer button[type=submit], .register form .footer button[type=submit] {
  background-color: var(--orange-50);
  border: 1px solid var(--orange-60);
  border-radius: 0.25rem;
  color: var(--orange-90);
  cursor: pointer;
  padding-block: 0.25rem;
  padding-inline: 1rem;
}
.login form .footer button[type=button], .register form .footer button[type=button] {
  background-color: var(--ardoise-50);
  border: 1px solid var(--ardoise-60);
  border-radius: 0.25rem;
  color: var(--ardoise-90);
  cursor: pointer;
  padding-block: 0.25rem;
  padding-inline: 1rem;
}

.flying-poster {
  align-items: center;
  display: none;
  background-color: hsla(from var(--ardoise-90) h s l/0.8);
  border-radius: 0.5rem;
  height: 44rem;
  justify-content: center;
  opacity: 0;
  position: absolute;
  transition: opacity 150ms ease-in-out;
  width: 30rem;
  z-index: 10;
}
.flying-poster img {
  border-radius: 0.25rem;
  height: 42rem;
  object-fit: cover;
  width: 28rem;
}
.flying-poster.show {
  display: flex;
  opacity: 1;
}

dialog.diaporama {
  border-radius: 0;
  border: none;
  inset: unset;
  margin-block: 0;
  margin-inline: 0;
  max-height: unset;
  max-width: unset;
  padding: 0;
  position: unset;
  width: 100%;
  height: 100%;
  top: 0;
}

.back-diapo {
  align-items: center;
  background-color: hsla(from var(--ardoise-90) h s l/0.8);
  display: flex;
  inset: 0;
  justify-content: center;
  position: absolute;
  transition: bottom 300ms ease-in-out, top 300ms ease-in-out;
  z-index: 9999;
}
.back-diapo .wrapper {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100dvh;
  justify-content: center;
  position: relative;
  width: 100dvw;
}
.back-diapo .wrapper:hover .thumbnails {
  opacity: 1;
}
.back-diapo .wrapper .image {
  align-items: center;
  display: flex;
  gap: 1rem;
  height: 100%;
  justify-content: center;
  position: relative;
  width: 100%;
}
.back-diapo .wrapper .image img {
  border-radius: 1rem;
  max-height: 100%;
  max-width: 100%;
  /*object-fit: cover;*/
  opacity: 0;
  transition: opacity 300ms ease-in-out;
}
.back-diapo .wrapper .image img.fade {
  opacity: 1;
}
.back-diapo .wrapper .image .chevron {
  align-items: center;
  background-color: hsla(from var(--ardoise-60) h s l/0.5);
  border-radius: 50%;
  color: var(--ardoise-20);
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  font-size: 2rem;
  height: 3rem;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
}
.back-diapo .wrapper .image .chevron.left {
  left: 1rem;
}
.back-diapo .wrapper .image .chevron.right {
  right: 1rem;
}
.back-diapo .wrapper .thumbnails {
  align-items: center;
  bottom: 0;
  display: flex;
  justify-content: center;
  gap: 1rem;
  height: 8rem;
  opacity: 0;
  overflow-x: auto;
  position: absolute;
  transition: opacity 300ms ease-in-out;
  width: 100%;
}
.back-diapo .wrapper .thumbnails .thumbnail {
  position: relative;
}
.back-diapo .wrapper .thumbnails .thumbnail img {
  border: 0.25em solid var(--green-20);
  cursor: pointer;
  max-height: 4rem;
  max-width: 4rem;
  object-fit: cover;
  opacity: 1;
}
.back-diapo .wrapper .thumbnails .thumbnail.active img {
  border: 0.25em solid var(--orange-50);
}
.back-diapo .wrapper .thumbnails .thumbnail.active::before {
  align-items: center;
  background-color: var(--orange-50);
  border-radius: 999px;
  content: "";
  display: flex;
  flex-direction: column;
  height: 0.5rem;
  justify-content: center;
  left: 0;
  position: absolute;
  top: -1rem;
  width: 100%;
}
.back-diapo .wrapper .thumbnails .thumbnail.active::after {
  align-items: center;
  background-color: var(--orange-50);
  border-radius: 999px;
  bottom: -1rem;
  content: "";
  display: flex;
  flex-direction: column;
  height: 0.5rem;
  justify-content: center;
  left: 0;
  position: absolute;
  width: 100%;
}
.back-diapo .close {
  position: absolute;
  right: 1rem;
  top: 1rem;
}
.back-diapo .close > div {
  align-items: center;
  background-color: hsla(from var(--ardoise-20) h s l/0.5);
  border-radius: 50%;
  color: var(--ardoise-10);
  cursor: pointer;
  display: flex;
  font-size: 2rem;
  height: 3rem;
  justify-content: center;
  width: 3rem;
}
.back-diapo .navigation {
  bottom: 1em;
  color: var(--ardoise-10);
  position: absolute;
  right: 1em;
  transition: height 300ms ease-in-out, width 100ms ease-in-out;
}
.back-diapo .navigation .help {
  height: 16em;
  position: relative;
  width: 15em;
}
.back-diapo .navigation .help .maxi {
  background-color: var(--ardoise-75);
  border-radius: 1em;
  inset: 0;
  padding: 1em;
  position: absolute;
}
.back-diapo .navigation .help .maxi .title {
  font-weight: bold;
}
.back-diapo .navigation .help .maxi .key {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-top: 0.5em;
}
.back-diapo .navigation .help .maxi .key img {
  border: 1px solid;
  border-radius: 0.25em;
  height: 2em;
  width: auto;
}
.back-diapo .navigation .help .maxi .key > div {
  flex-shrink: 0;
  margin-left: 1em;
}
.back-diapo .navigation .help .maxi .close {
  cursor: pointer;
  position: absolute;
  right: 1em;
  top: 1em;
}
.back-diapo .navigation .help .mini {
  align-items: center;
  background-color: var(--ardoise-40);
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  font-size: 2em;
  font-weight: bold;
  height: 1.2em;
  justify-content: center;
  inset: 0;
  position: absolute;
  width: 1.2em;
}
.back-diapo .navigation .help.minimise {
  height: 0.75em;
  width: 0.75em;
}
.back-diapo .navigation .help.minimise .maxi {
  display: none;
}
.back-diapo .navigation:has(.help.minimise) {
  bottom: 2em;
  height: 2.4em;
  right: 2em;
  width: 2.4em;
}

.tool-tips {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: revert;
  left: 0;
  min-height: 4rem;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: -4rem;
  transition: opacity 300ms ease-in-out;
  z-index: 510;
}
.tool-tips:not(:has(img)) {
  max-width: max(25%, 25rem);
}
.tool-tips.show {
  opacity: 1;
}
.tool-tips.masked {
  display: none;
}
.tool-tips.orange .body, .tool-tips.orange .tail {
  background-color: var(--orange-40);
  color: var(--orange-90);
  font-weight: 400;
}
.tool-tips.highlight .body, .tool-tips.highlight .tail {
  background-color: var(--tooltips-bg);
  color: var(--tooltips-color);
  font-weight: 400;
}
.tool-tips .body {
  /*@include flex-row();*/
  background-color: var(--ardoise-90);
  border-radius: 0.25em;
  color: var(--ardoise-10);
  padding: 0.5em;
  width: fit-content;
  z-index: 2;
}
.tool-tips .body:has(img) {
  flex-direction: column;
}
.tool-tips .body img {
  border-radius: 0.25em;
  transition: all 300ms ease-in-out;
}
.tool-tips .tail {
  background-color: var(--ardoise-90);
  border-radius: 0.125em;
  min-height: 1em;
  rotate: 45deg;
  translate: 0 -0.55em;
  width: 1em;
  z-index: 1;
}

.flash-messages {
  align-items: flex-end;
  background-color: hsla(from var(--orange-50) h s l/0.5);
  border-radius: 0.5rem;
  border: 1px dashed var(--orange-50);
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 0.5rem;
  margin-inline: auto;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  padding: 1rem;
  position: fixed;
  right: 0;
  top: 2rem;
  transition: all 500ms ease-in-out;
  z-index: 999;
}
.flash-messages:not(:has(.flash-message)) {
  display: none;
}
.flash-messages .flash-message {
  align-items: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid;
  border-radius: 0.5rem;
  display: flex;
  gap: 1rem;
  font-weight: 500;
  opacity: 1;
  padding-block: 1rem;
  padding-inline: 1rem 2rem;
  position: relative;
  transition: all 500ms ease-in-out;
  width: fit-content;
}
.flash-messages .flash-message.vanishing {
  opacity: 0;
}
.flash-messages .flash-message.info {
  background-color: hsl(from var(--purple) h s l/0.5);
  border-color: vhsl(from var(--purple) h s 50%);
  color: hsl(from var(--purple) h s 50%);
}
.flash-messages .flash-message.success {
  background-color: var(--green-70-50);
  border-color: var(--green-10);
  color: var(--green-10);
}
.flash-messages .flash-message.warning {
  background-color: hsla(from var(--orange-50) h s l/0.5);
  border-color: var(--orange-70);
  color: var(--orange-90);
  font-weight: 300;
}
.flash-messages .flash-message.danger {
  background-color: hsla(from var(--red-50) h s l/0.5);
  border-color: var(--red-20);
  color: var(--red-20);
}
.flash-messages .flash-message .close {
  cursor: pointer;
  position: absolute;
  right: 0.5rem;
  top: 0.25rem;
}
.flash-messages .flash-message.hide-scale {
  transform: scale(0);
  opacity: 0;
}
.flash-messages .flash-message.hide-to-left {
  transform: translateX(-500%);
  opacity: 0;
}
.flash-messages .flash-message.hide-to-right {
  transform: translateX(500%);
  opacity: 0;
}
.flash-messages .flash-message.hide-to-top {
  transform: translateY(-500%);
  opacity: 0;
}
.flash-messages .flash-message.hide-to-bottom {
  transform: translateY(500%);
  opacity: 0;
}
.flash-messages .flash-message.update {
  background-color: hsla(from var(--green-70) h s l/0.5);
  border-color: var(--green-10);
  color: var(--green-10);
  display: flex;
  gap: 1rem;
  padding: 0;
}
.flash-messages .flash-message.update .poster {
  align-items: center;
  aspect-ratio: 78/117;
  display: flex;
  font-size: 0.5rem;
  height: 5rem;
  justify-content: center;
  text-align: center;
}
.flash-messages .flash-message.update .poster img {
  border-radius: 0.5rem 0 0 0.5rem;
  height: 5rem;
  object-fit: cover;
  width: 100%;
}
.flash-messages .flash-message.update .infos {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  height: 5rem;
  overflow-y: auto;
  padding-inline-end: 3rem;
}
.flash-messages .flash-message.update .infos .name {
  font-weight: 500;
}
.flash-messages .flash-message.update .infos .content {
  font-weight: 100;
}
.flash-messages .flash-message.update .infos .content ul {
  list-style: circle inside;
  padding-inline-start: 1rem;
}
.flash-messages .flash-close-all {
  align-items: center;
  background-color: var(--orange-50);
  border-color: var(--orange-70);
  border-radius: 50%;
  color: var(--orange-90);
  cursor: pointer;
  display: flex;
  font-size: 3rem;
  height: 3rem;
  justify-content: center;
  margin-left: auto;
  width: 3rem;
}

.closure-countdown {
  --clr: var(--ardoise-10);
  --bg: var(--ardoise-90);
  --cd: var(--orange-70);
  align-items: center;
  border-radius: 50%;
  background-image: conic-gradient(var(--clr) 360deg, var(--cd) 360deg);
  color: var(--clr);
  cursor: pointer;
  display: flex;
  height: 1.5rem;
  justify-content: center;
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  width: 1.5rem;
}
.closure-countdown div {
  align-items: center;
  background-color: var(--bg);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  height: 1.25rem;
  position: relative;
  width: 1.25rem;
}
.closure-countdown .circle-start, .closure-countdown .circle-end {
  background-color: var(--clr);
  border-radius: 50%;
  box-shadow: 0 0 0.125rem var(--clr), 0 0 0.25rem var(--clr);
  height: 0.25rem;
  position: absolute;
  left: 0.625rem;
  top: 0.625rem;
  width: 0.25rem;
}
.closure-countdown .circle-start {
  transform: rotate(0deg) translateY(-0.6875rem);
}
.closure-countdown .circle-end {
  transform: rotate(360deg) translateY(-0.6875rem);
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
.to-top {
  align-items: center;
  background-color: var(--orange-50);
  border-radius: 50%;
  bottom: 1rem;
  color: var(--orange-90);
  cursor: pointer;
  display: none;
  font-size: 1.5rem;
  height: 2rem;
  justify-content: center;
  opacity: 0;
  position: fixed;
  right: 1rem;
  transition: display 0.25s, height 0.25s, opacity 0.25s, width 0.25s;
  transition-behavior: allow-discrete;
  transition-timing-function: ease-in-out;
  width: 2rem;
  z-index: 999;
}
.to-top svg {
  transition: all 0.25s ease-in-out;
}
.to-top.show {
  display: flex;
  opacity: 1;
}
.to-top.dev {
  bottom: 3rem;
}
.to-top:hover {
  backdrop-filter: blur(8px);
  background-color: var(--orange-90-alpha-25);
  color: var(--orange-90);
  height: 6rem;
  width: 6rem;
}
.to-top:hover svg {
  height: 3rem;
  width: 3rem;
}

.error-page {
  background-color: hsla(from var(--ardoise-80) h s l/0.5);
  border-radius: 1rem;
  border: 2px solid hsla(from var(--ardoise-20) h s l/0.5);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
}
.error-page .countdown {
  align-items: center;
  background: conic-gradient(var(--orange-50) 0deg, var(--orange-50) 360deg, var(--green-50) 360deg, var(--green-50) 360deg);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 10rem;
  justify-content: center;
  margin-inline: auto;
  width: 10rem;
}
.error-page .countdown div {
  align-items: center;
  background-color: var(--ardoise-80);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 9rem;
  justify-content: center;
  width: 9rem;
}
.error-page .countdown div .countdown-number {
  color: var(--ardoise-10);
  font-size: 6rem;
  font-weight: 500;
}
.error-page .exception {
  background-color: var(--red-50);
  border-radius: 0.25rem;
  font-family: monospace;
  padding: 2rem;
}

/*# sourceMappingURL=app.output.css.map */