:root {
  --color--neutral-white: #ffffff;
  --color--neutral-extralightgrey: #f8f9f8;
  --color--neutral-lightgrey: #e6f0ea;
  --color--neutral-semilightgrey: #dae4de;
  --color--neutral-grey: #c6d5cc;
  --color--neutral-darkgrey: #595959;
  --color--neutral-extradarkgrey: #3f3f3f;
  --color--neutral-black: #000000;
  --color--primary-darkgreen: #002300;
  --color--primary-mediumgreen: #02640b;
  --color--primary-green: #78d700;
  --color--secondary-yellow: #e8c500;
  --color--secondary-purple: #8c8cff;
  --color--secondary-pink: #ffb9ff;
  --color--secondary-orange: #ff8c12;
  --color--secondary-cyan: #73beff;
  --color--secondary-blue: #12a0f3;
  --color--pastel-green: #f0ffe6;
  --color--pastel-yellow: #fffacd;
  --color--pastel-purple: #ebebff;
  --color--pastel-orange: #fff5eb;
  --color--pastel-pink: #fff0ff;
  --color--pastel-blue: #ebf5ff;
  --color--service-red: #a4280d;
  --color--service-orange: #d38003;
  --color--service-yellow: #d7c200;
  --highlight-green: linear-gradient(
    to top,
    rgb(118 197 18/0.3) 0%,
    rgb(118 197 18/0.3) 50%,
    transparent 50%,
    transparent 100%
  );
  --gradient-darkgreen: linear-gradient(27.28deg, #1a2300 47.17%, #034003 100%);
  --gradient-green: linear-gradient(20.98deg, #78d700 59.75%, #abe604 100%);
  --gradient-yellow: linear-gradient(239.34deg, #fce149 2.54%, #e8c500 36.42%);
  --gradient-purple: linear-gradient(58.54deg, #8c8cff 51.27%, #9d9dff 100%);
  --gradient-orange: linear-gradient(238.07deg, #ffac54 -0.05%, #ff8c12 41.32%);
  --gradient-pink: linear-gradient(239.42deg, #ffe1ff -0.06%, #ffb9ff 33.16%);
  --gradient-cyan: linear-gradient(48.71deg, #73beff 70.04%, #a3d4ff 100%);

  --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --shadow-hover: 0 0 0 0.2rem var(--color--primary-green);
  --shadow-yellow: 0 0.5rem 1rem rgba(232, 197, 0, 0.5);
}

@font-face {
  font-family: "NaotypoBold";
  src: url("/fonts/Naotypo-Bold.woff") format("woff");
}

@font-face {
  font-family: "NaotypoExtraBold";
  src: url("/fonts/Naotypo-ExtraBold.woff") format("woff");
}

@font-face {
  font-family: "NaotypoLight";
  src: url("/fonts/Naotypo-Light.woff") format("woff");
}

@font-face {
  font-family: "NaotypoSemiBold";
  src: url("/fonts/Naotypo-SemiBold.woff") format("woff");
}

@font-face {
  font-family: "DotMatrixBold";
  src: url("/fonts/DOTM-Bold.ttf") format("truetype");
  font-weight: bold;
}

@font-face {
  font-family: "LedCounter7";
  src: url("/fonts/led-counter-7.ttf") format("truetype");
  font-weight: bold;
}

body {
  font-family: "NaotypoLight", Arial, Helvetica, sans-serif;
  height: 100vh;
  width: 100vw;
  margin: 0;
  background-color: #eef2f6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
}

body.hide-filtered-elements .filtered-element {
  display: none !important;
}

#loading {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background: var(--gradient-darkgreen);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 999999999999;
}

#loading img {
  height: 200px;
}

#head {
  width: 100%;
  height: 125px;
  min-height: 125px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--gradient-orange);
  color: white;
  padding-bottom: 30.5px;
}

#head #left {
  flex: 1;
  text-align: left;
}

#head #left #logo {
  height: 115px;
}

#head #center {
  flex: 1;
  text-align: center;
}

#head #center #title {
  font-family: "NaotypoExtraBold", Arial, Helvetica, sans-serif;
  font-size: 80px;
  line-height: 80px;
  text-shadow: var(--shadow);
  white-space: nowrap;
  margin: 0px;
}

#head #center #devmode {
  border-radius: 5px;
  margin: 0px;
  font-size: 125%;
  cursor: pointer;
  transition: box-shadow 0.15s ease-in-out;
}

#head #center #devmode:hover {
  box-shadow: var(--shadow-hover);
}

#head #right {
  flex: 1;
  display: flex;
  justify-content: end;
}

#head #right #update {
  margin-right: 15px;
}

#headband.hidden {
  display: none;
}

#headband:not(.hidden) {
  width: calc(100% - 70px);
  padding: 20px 10px;
  border-radius: 15px;
  margin-top: -30.5px;
  background-color: var(--background);
  color: var(--contrast);
  box-shadow: var(--shadow);
  text-align: center;
  font-family: "NaotypoLight", Arial, Helvetica, sans-serif;
  font-size: 25px;
  transition: box-shadow 0.15s ease-in-out;
}

#headband:not(.hidden).clickable {
  cursor: pointer;
}

#headband:not(.hidden).clickable:hover {
  box-shadow: var(--shadow-hover);
}

#headband:not(.hidden) p {
  margin: 0px;
}

#headband:not(.hidden) a {
  color: var(--contrast);
}

#tabs {
  width: calc(100% - 50px);
  padding: 25px;
  padding-top: 0px;
  padding-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 25px;
  margin-top: -30.5px;
}

body:has(#headband:not(.hidden)) #tabs {
  margin-top: 25px;
}

#tabs .tab {
  padding: 12px 17px;
  cursor: pointer;
  background-color: #f8f9fd;
  border-radius: 10px;
  cursor: pointer;
  transition:
    box-shadow 0.15s ease-in-out,
    background-color 0.25s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 20px;
  font-weight: bold;
  box-shadow: var(--shadow);
}

#tabs .tab.disabled {
  color: rgba(0, 0, 0, 0.5);
  cursor: not-allowed;
}

#tabs .tab:not(.disabled):hover {
  box-shadow: var(--shadow-hover);
}

#tabs .tab.active {
  background-color: var(--color--secondary-yellow);
  box-shadow: var(--shadow-yellow);
}

#tabs .tab img {
  height: 35px;
}

#tabs .tab.disabled img {
  opacity: 0.5;
}

#containers {
  width: 100%;
}

#containers .container {
  width: 100%;
  padding: 25px;
  padding-top: 0px;
  box-sizing: border-box;
}

#containers .container:not(.active) {
  display: none !important;
}

#containers .container#tc {
  position: relative;
}

#containers .container#tc #general-messages:not(:empty) {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  gap: 25px;
}

#containers .container#tc #general-messages .alert {
  width: calc(100% - 30px);
  padding: 15px;
  border-radius: 15px;
  background-color: var(--color--primary-darkgreen);
  color: white;
  text-align: center;
  font-size: 125%;
}

#containers .container#tc #general-messages .alert.clickable {
  cursor: pointer;
  transition: box-shadow 0.15s ease-in-out;
}

#containers .container#tc #general-messages .alert.clickable:hover {
  box-shadow: var(--shadow-hover);
}

#containers .container#tc #settings {
  width: 100%;
  padding: 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 15px;
  position: sticky;
  top: 0px;
  z-index: 1;
}

#containers .container#tc:has(.popup) #settings {
  display: none;
}

#containers .container#tc #settings #periods {
  background-color: white;
  box-shadow: var(--shadow);
  padding: 5px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12.5px;
}

#containers .container#tc #settings #periods .period {
  flex: 1;
  display: flex;
  align-content: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  white-space: nowrap;
  padding: 12.5px 25px;
  border-radius: 15px;
  font-family: "NaotypoSemiBold", Arial, Helvetica, sans-serif;
  transition: 0.25s background-color;
}

#containers .container#tc #settings #periods .period:hover {
  background-color: #e6f0ea;
}

#containers .container#tc #settings #periods .period.active {
  background-color: var(--color--primary-green);
}

#containers .container#tc #settings #views {
  background-color: white;
  box-shadow: var(--shadow);
  padding: 5px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12.5px;
}

#containers .container#tc #settings #views .view {
  flex: 1;
  display: flex;
  align-content: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  white-space: nowrap;
  padding: 12.5px 25px;
  border-radius: 15px;
  font-family: "NaotypoSemiBold", Arial, Helvetica, sans-serif;
  transition: 0.25s background-color;
}

#containers .container#tc #settings #views .view:hover {
  background-color: #e6f0ea;
}

#containers .container#tc #settings #views .view.active {
  background-color: var(--color--primary-green);
}

#containers .container#tc #settings #views .view img {
  height: 25px;
}

#containers .container#tc #content {
  margin-top: 25px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  gap: 25px;
}

#containers .container#tc #content .nothing {
  text-align: center;
  background-color: var(--color--primary-darkgreen);
  color: white;
  margin: 25px;
  border-radius: 25px;
  padding: 25px;
}

#containers .container#tc #content .nothing img {
  border-radius: 25px;
}

#containers .container#tc #content .element {
  width: 100%;
  background-color: white;
  border: solid 2px #e3e8ef;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  transition: box-shadow 0.15s ease-in-out;
  cursor: pointer;
}

#containers
  .container#tc
  #content
  .element:has(.head:hover):not(:has(.body:hover)):not(
    :has(.favorite-button:hover)
  ) {
  box-shadow: var(--shadow-hover);
}

#containers .container#tc #content .element.transparent {
  opacity: 0.5;
}

#containers .container#tc #content .element .head {
  width: calc(100% - 20px);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}

#containers .container#tc #content .element .head .left {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 5px;
}

#containers .container#tc #content .element .head .left img {
  height: 50px;
}

#containers .container#tc #content .element.route .head .left .picto {
  height: 50px;
  width: 75px;
}

#containers .container#tc #content .element.route .head .left .picto::before {
  background-color: black;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  border-radius: 10px;
  font-size: 30px;
  font-family: "NaotypoSemiBold", Arial, Helvetica, sans-serif;
}

#containers .container#tc #content .element .head .left .title {
  font-family: "NaotypoSemiBold", Arial, Helvetica, sans-serif;
  font-size: 35px;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-left: 10px;
}

#containers .container#tc #content .element .head .right {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 15px;
}

#containers .container#tc #content .element .head .right .arrow {
  height: 50px;
  width: 50px;
  border-radius: 15px;
  background-color: #e3e8ef;
  display: flex;
  align-items: center;
  justify-content: center;
}

#containers .container#tc #content .element .head .right .arrow::after {
  content: "";
  height: 75%;
  width: 75%;
  background-image: url("/assets/arrow.svg");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.25s;
  transform: rotate(90deg);
}

#containers
  .container#tc
  #content
  .element.no-animation
  .head
  .right
  .arrow::after {
  transition: 0s;
}

#containers .container#tc #content .element.open .head .right .arrow::after {
  transform: rotate(0deg);
}

#containers .container#tc #content .element .head .right .dynamic-container {
  position: relative;
  flex: 1 1 auto;
  height: 50px;
}

#containers
  .container#tc
  #content
  .element
  .head
  .right
  .dynamic-container
  .status-badges {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 15px;
  position: absolute;
  top: 0px;
  right: 0px;
  transition: top 0.25s;
  background-color: white;
  padding-left: 10px;
}

#containers
  .container#tc
  #content
  .element.no-animation
  .head
  .right
  .dynamic-container
  .status-badges {
  transition: 0s;
}

#containers
  .container#tc
  #content
  .element.open
  .head
  .right
  .dynamic-container
  .status-badges {
  top: 75px;
}

#containers
  .container#tc
  #content
  .element
  .head
  .right
  .dynamic-container
  .status-badges
  .badge {
  height: 30px;
  padding: 10px 20px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e3e8ef;
  font-size: 20px;
  font-family: "NaotypoSemiBold", Arial, Helvetica, sans-serif;
  white-space: nowrap;
}

#containers
  .container#tc
  #content
  .element
  .head
  .right
  .dynamic-container
  .status-badges
  .badge.transparent {
  opacity: 0.5;
}

#containers
  .container#tc
  #content
  .element
  .head
  .right
  .dynamic-container
  .status-badges
  .badge.unplanned {
  background-color: #e64415;
  color: white;
}

#containers
  .container#tc
  #content
  .element
  .head
  .right
  .dynamic-container
  .status-badges
  .badge.current {
  background-color: var(--color--secondary-orange);
  color: white;
}

#containers
  .container#tc
  #content
  .element
  .head
  .right
  .dynamic-container
  .status-badges
  .badge.upcoming {
  background-color: var(--color--secondary-yellow);
  color: black;
}

#containers
  .container#tc
  #content
  .element
  .head
  .right
  .dynamic-container
  .status-badges
  .badge.ended {
  background-color: var(--color--primary-green);
  color: black;
}

#containers
  .container#tc
  #content
  .element
  .head
  .right
  .dynamic-container
  .favorite-button {
  height: 50px;
  width: 50px;
  border-radius: 15px;
  background-color: #e3e8ef;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -75px;
  right: 0px;
  transition:
    box-shadow 0.15s ease-in-out,
    top 0.25s;

  /* à retirer */
  display: none;
}

#containers
  .container#tc
  #content
  .element.no-animation
  .head
  .right
  .dynamic-container
  .favorite-button {
  transition: box-shadow 0.15s ease-in-out;
}

#containers
  .container#tc
  #content
  .element.open
  .head
  .right
  .dynamic-container
  .favorite-button {
  top: 0px;
}

#containers
  .container#tc
  #content
  .element
  .head
  .right
  .dynamic-container
  .favorite-button:hover {
  box-shadow: var(--shadow-hover);
}

#containers
  .container#tc
  #content
  .element
  .head
  .right
  .dynamic-container
  .favorite-button::after {
  content: "";
  height: 75%;
  width: 75%;
  background-image: url("/assets/heart.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

#containers .container#tc #content .element .body {
  cursor: default;
  background-color: #e3e8ef;
  width: calc(100% - 40px);
  padding: 0px 10px;
  border-radius: 15px;
  margin: 10px;
  margin-top: 0px;
  margin-bottom: 0px;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 15px;
  overflow: hidden;
  height: 0px;
  transition:
    height 0.25s,
    padding 0.25s,
    margin-top 0.25s;
}

#containers .container#tc #content .element.open .body {
  padding: 10px;
  height: calc(var(--height) - 20px);
  margin-top: 10px;
  margin-bottom: 10px;
}

#containers .container#tc #content .element.no-animation .body {
  transition: 0s;
}

#containers .container#tc #content .alert {
  background-color: white;
  width: calc(100% - 24px);
  padding: 10px;
  border: solid 2px #e3e8ef;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 10px;
  cursor: pointer;
  transition: box-shadow 0.15s ease-in-out;
  height: 64px;
}

#containers .container#tc #content .alert.transparent {
  opacity: 0.5;
}

#containers .container#tc #content .alert:hover {
  box-shadow: var(--shadow-hover);
}

#containers .container#tc #content .alert .badge {
  height: 44px;
  width: 175px;
  padding: 10px 20px;
  border-radius: 15px;
  background-color: #e3e8ef;
  font-size: 19px;
  font-family: "NaotypoSemiBold", Arial, Helvetica, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-align: center;
}

#containers .container#tc #content .alert .badge.unplanned {
  background-color: #e64415;
  color: white;
}

#containers .container#tc #content .alert .badge.current {
  background-color: var(--color--secondary-orange);
  color: white;
}

#containers .container#tc #content .alert .badge.upcoming {
  background-color: var(--color--secondary-yellow);
  color: black;
}

#containers .container#tc #content .alert .badge.ended {
  background-color: var(--color--primary-green);
  color: black;
}

#containers .container#tc #content .alert .content {
  width: calc(100% - 210px);
  overflow: hidden;
  flex: 1 1 auto;
}

#containers .container#tc #content .alert .content .title {
  font-size: 150%;
  font-family: "NaotypoSemiBold", Arial, Helvetica, sans-serif;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: start;
}

#containers .container#tc #content .alert .content .title img {
  height: 33px;
}

#containers .container#tc #content .alert .content .summary {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 0.75;
}

#containers .container#tc #content .alert .affects {
  display: inline-grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  gap: 5px;
  height: 55px;
  justify-content: end;
  justify-items: end;
  align-items: center;
  direction: rtl;
}

#containers .container#tc #content .alert .affects .route {
  height: 25px;
  direction: ltr;
}

#containers .container#tc #content .alert .affects .route::before {
  height: 25px;
  width: 37.5px;
  border-radius: 5px;
  background-color: black;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

#containers .container#tc:has(.popup) #content {
  display: none;
}

#containers .container#tc #content #search {
  width: calc(100% - 10px);
  padding: 5px;
  border-radius: 15px;
  background-color: white;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 5px;
}

#containers .container#tc #content #search #loop {
  height: 50px;
  width: 50px;
  background-color: #e3e8ef;
  border-radius: 15px;
}

#containers .container#tc #content #search #loop::after {
  content: "";
  height: 50px;
  width: 50px;
  background-image: url("/assets/loop.svg");
  background-size: 90%;
  background-position: center;
  background-repeat: no-repeat;
  display: inline-block;
}

#containers .container#tc #content #search #input {
  flex: 1 1 auto;
  border: none;
  height: 50px;
  font-size: 25px;
  outline: none;
  font-family: "NaotypoSemiBold", Arial, Helvetica, sans-serif;
}

#containers .container#tc #content #search #input::placeholder {
  font-family: "NaotypoLight", Arial, Helvetica, sans-serif;
}

#containers .container#tc .popup,
#containers .container#voitures .popup,
#containers .container#velos .popup {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  max-width: 100%;
  background-color: #eef2f6;
  display: flex;
}

#containers .container#tc .popup .content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  gap: 5px;
  padding-bottom: 5px;
  max-width: 100%;
}

#containers .container#tc .popup:has(.map-aera) .content {
  max-width: 50%;
}

#containers .container#tc .popup .content .head {
  width: calc(100% - 50px);
  padding: 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#containers .container#tc .popup .content .head .left .title {
  font-size: 35px;
  font-family: "NaotypoSemiBold", Arial, Helvetica, sans-serif;
}

#containers .container#tc .popup .content .head .left .subtitle {
  font-style: italic;
  opacity: 5;
}

#containers .container#tc .popup .content .head .right .button {
  height: 50px;
  width: 50px;
  border-radius: 100%;
  background-color: var(--color--primary-green);
  cursor: pointer;
  background-size: 75%;
  background-repeat: no-repeat;
  background-position: center;
  transition: 0.15s box-shadow ease-in-out;
}

#containers .container#tc .popup .content .head .right .button:hover {
  box-shadow: var(--shadow-hover);
}

#containers .container#tc .popup .content .head .right .button.close {
  background-image: url("/assets/close.svg");
}

#containers .container#tc .popup .content .description {
  width: min-content;
  padding: 25px;
  white-space: nowrap;
  max-width: calc(100% - 50px);
  overflow: hidden;
  overflow-x: auto;
}

#containers .container#tc .popup .content .description .block {
  margin: 10px 0px;
  border-left: solid 2.5px rgba(0, 0, 0, 0.5);
}

#containers .container#tc .popup .content .description .block .title {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: start;
}

#containers .container#tc .popup .content .description .block .title::before {
  content: "";
  transition: transform 0.25s;
  background-image: url("/assets/arrow.svg");
  background-size: contain;
  background-repeat: no-repeat;
  height: 20px;
  width: 20px;
  display: inline-block;
  margin: 5px;
  transform: rotate(-90deg);
}

#containers
  .container#tc
  .popup
  .content
  .description
  .block:not(.close)
  .title::before {
  transform: rotate(0deg);
}

#containers .container#tc .popup .content .description .block .text {
  margin-left: 25px;
  overflow: hidden;
  height: var(--height);
  transition: height 0.25s;
}

#containers .container#tc .popup .content .description .block.close .text {
  height: 0px;
}

#containers .container#tc .popup .content .integration {
  max-width: calc(100% - 55px);
  padding: 15px;
  border-radius: 15px;
  border: solid 2px #e3e8ef;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  gap: 5px;
}

#containers .container#tc .popup .content .integration embed {
  max-width: 100%;
  max-height: 75vh;
  border-radius: 15px;
}

#containers .container#tc .popup .content .integration .alt {
  width: 100%;
  text-align: center;
}

#containers .container#tc .popup .content .integration .buttons {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

#containers .container#tc .popup .content .integration .buttons a:has(.button) {
  text-decoration: none;
  flex: 1;
  color: black;
}

#containers .container#tc .popup .content .integration .buttons .button {
  width: calc(100% - 15px);
  padding: 10px 7.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background-color: var(--color--primary-green);
  border-radius: 15px;
  cursor: pointer;
  font-size: 20px;
  transition: 0.15s box-shadow ease-in-out;
}

#containers
  .container#tc
  .popup
  .content
  .integration
  .buttons
  .button.secondary {
  background-color: #e3e8ef;
}

#containers .container#tc .popup .content .integration .buttons .button:hover {
  box-shadow: var(--shadow-hover);
}

#containers .container#tc .popup .content a:has(.link) {
  text-decoration: none;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
}

#containers .container#tc .popup .content .integration .buttons .button img {
  height: 25px;
}

#containers .container#tc .popup .content .link {
  width: calc(100% - 50px);
  padding: 12.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background-color: var(--color--primary-green);
  border-radius: 15px;
  cursor: pointer;
  font-size: 20px;
  text-align: center;
}

#containers .container#tc .popup .content .channels {
  max-width: calc(100% - 100px);
  padding: 25px;
  border-radius: 15px;
  background-color: white;
  border: solid 2px #e3e8ef;
}

#containers .container#tc .popup .content .channels table {
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: separate;
  border-spacing: 20px 5px;
}

#containers .container#tc .popup .content .affects {
  max-width: calc(100% - 70px);
  padding: 10px;
  border-radius: 15px;
  background-color: white;
  border: solid 2px #e3e8ef;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px 5px;
}

#containers .container#tc .popup .content .affects .route {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

#containers .container#tc .popup .content .affects .route .picto {
  height: 25px;
}

#containers .container#tc .popup .content .affects > .stops {
  width: 100%;
}

#containers .container#tc .popup .map-aera {
  flex: 1;
  max-height: 100vh;
  position: sticky;
  top: 0px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 25px 0px 0px 25px;
}

#containers .container#tc .popup .map-aera .layer {
  width: calc(100% - 50px);
  padding: 15px 25px;
  background-color: var(--color--primary-darkgreen);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
}

#containers .container#tc .popup .map-aera .layer .title {
  font-size: 125%;
  font-family: "NaotypoSemiBold", Arial, Helvetica, sans-serif;
}

#containers .container#tc .popup .map-aera .layer .buttons {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 15px;
}

#containers .container#tc .popup .map-aera .layer .buttons a:has(.button) {
  text-decoration: none;
  color: black;
}

#containers .container#tc .popup .map-aera .layer .buttons .button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color--primary-green);
  height: 50px;
  width: 50px;
  border-radius: 100%;
  cursor: pointer;
  font-size: 20px;
  text-align: center;
}

#containers .container#tc .popup .map-aera .layer .buttons .button img {
  height: 30px;
}

#containers .container#tc .popup .map-aera .map {
  width: 100%;
  flex: 1 1 auto;
}

.channel-integration[data-type="twitter"] {
  background-color: black;
  padding: 10px;
  border-radius: 5px;
  color: white;
  text-align: left;
  cursor: pointer;
  transition: box-shadow 0.15s ease-in-out;
}

.channel-integration[data-type="twitter"]:hover:not(:has(a:hover)) {
  box-shadow: var(--shadow-hover);
}

.channel-integration[data-type="twitter"] a {
  color: #1d9bf0;
  transition: color 0.25s;
}

.channel-integration[data-type="twitter"] a:hover {
  color: #38afff;
}

.channel-integration[data-name="BIV Decaux"],
.channel-integration[data-name="SIC embarqué"] {
  position: relative;
  background-color: black;
  color: white;
  padding: 10px;
  border-radius: 5px;
  overflow: hidden;
}

.channel-integration[data-name="BIV Decaux"] .text:not(:has(br)),
.channel-integration[data-name="SIC embarqué"] .text:not(:has(br)) {
  font-family: "LedCounter7", Arial, Helvetica, sans-serif;
  font-weight: bolder;
  animation: biv-animation linear infinite 5s;
  min-width: 100%;
  white-space: nowrap;
}

@keyframes biv-animation {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

.channel-integration[data-name="SIC à quai"] {
  position: relative;
  background-color: black;
  color: white;
  padding: 10px;
  border-radius: 5px;
  font-family: "LedCounter7", Arial, Helvetica, sans-serif;
  font-weight: bolder;
}

#containers .container#velos,
#containers .container#voitures {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  gap: 25px;
  position: relative;
}

#containers .container#velos .category,
#containers .container#voitures .category {
  width: calc(100% - 30px);
  padding: 15px;
  border-radius: 15px;
  background-color: white;
  box-shadow: var(--shadow);
  font-size: 125%;
}

#containers .container#velos .category .name,
#containers .container#voitures .category .name {
  font-weight: bold;
}

#containers .container#velos .category .alerts,
#containers .container#voitures .category .alerts {
  width: calc(100% - 20px);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 15px;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: start;
}

#containers .container#velos .category .alerts .alert,
#containers .container#voitures .category .alerts .alert {
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 10px;
  background-color: var(--color--primary-green);
  color: var(--color--primary-darkgreen);
  cursor: pointer;
  transition: box-shadow 0.15s ease-in-out;
}

#containers .container#velos .category .alerts .alert:hover,
#containers .container#voitures .category .alerts .alert:hover {
  box-shadow: var(--shadow-hover);
}

#containers .container#velos .popup,
#containers .container#voitures .popup {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#containers .container#velos .popup .title,
#containers .container#voitures .popup .title {
  font-size: 35px;
  font-family: "NaotypoSemiBold", Arial, Helvetica, sans-serif;
}

#containers .container#velos .popup .close,
#containers .container#voitures .popup .close {
  width: 50%;
  padding: 15px 20px;
  border-radius: 15px;
  background-color: var(--color--primary-green);
  color: var(--color--primary-darkgreen);
  cursor: pointer;
  text-align: center;
  font-family: "NaotypoSemiBold", Arial, Helvetica, sans-serif;
  font-size: 125%;
  transition: box-shadow 0.15s ease-in-out;
}

#containers .container#velos .popup .close:hover,
#containers .container#voitures .popup .close:hover {
  box-shadow: var(--shadow-hover);
}

#too-small-screen {
  display: none;
}

@media (max-width: 1230px) {
  body {
    overflow: hidden;
  }

  #too-small-screen {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100vh;
    width: 100vw;
    background: var(--gradient-darkgreen);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 9999999999;
    text-align: center;
  }

  #too-small-screen h1 {
    font-family: "NaotypoSemiBold", Arial, Helvetica, sans-serif;
  }

  #too-small-screen a {
    padding: 15px 20px;
    border-radius: 15px;
    background-color: var(--color--primary-green);
    color: var(--color--primary-darkgreen);
    text-decoration: none;
    font-family: "NaotypoSemiBold", Arial, Helvetica, sans-serif;
    font-size: 125%;
    transition: box-shadow 0.15s ease-in-out;
  }

  #too-small-screen a:hover {
    box-shadow: var(--shadow-hover);
  }
}