/* Définition des variables pour le thème clair */
:root {
  /* Variables */
  --desp-background-color: #0D1527FF;
  --desp-background-color-transparent: #0D1527BB;
  --desp-font-color: #FFFFFF;
  --desp-hover-color: #7A7A7A;
  --desp-purple-color: #EF2B89;
  --desp-violet-color: #7B34DB;
  --desp-frame-grey-color: #B7B7B7;
  --desp-darkgrey-color: #3C3C3C;
  --desp-frame-hover-color: #1E2637;
  --desp-frame-background-color: #0D1527BB;
  --desp-font-size: 16px;
  --desp-frame-font-size: 16px;
  --header-username-max-width: 200px;
  --header-height: 64px;
  --header-logo-width: 72px;
  --header-logo-height: 36px;
  --header-icon-height: 24px;
  --header-user-icon-height: 18px;
  --header-padding: 20px;
  --link-padding: 16px;

  /* Footer Variables */
  --footer-height: 64px;
  --footer-logo-height: 40px;

  margin: 0;
  padding: 0;
}

/* Conteneur principal du footer */
#footer-container {
  box-sizing: border-box;
  position: fixed; /* Rend le footer toujours visible */
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--footer-height);
  margin: 0;
  padding: 0;
  background-color: var(--desp-background-color);
  color: var(--desp-font-color);
  font-family: 'Roboto', sans-serif;
  font-size: var(--desp-font-size, 16px);
  border-top: solid 2px var(--desp-violet-color);
  z-index: 99;
}

/* Ajout d'un espacement pour que le contenu ne recouvre pas le footer */
body {
  margin: 0;
  padding: 0;
  /*padding-bottom: var(--footer-height); /* Ajoute un espace au bas du contenu */
  box-sizing: border-box;
}

#footer-inner-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-grow: 1;
  margin: 0 var(--header-padding);
  padding: 0;
}

#footer-left-container,
#footer-central-container,
#footer-right-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

#footer-desp-logo,
.footer-logo,
.mobile-footer-logo {
  display: block;
  max-width: auto;
  max-height: var(--footer-logo-height);
  width: auto;
  height: var(--footer-logo-height);
}

#footer-menu-icon {
  width: auto;
  height: var(--footer-logo-height);
  transition: color 250ms ease-in-out;
  color: var(--desp-font-color); /* Assure la visibilité sur fond blanc */
  cursor: pointer;
}

#footer-menu-icon:hover {
  color: var(--desp-hover-color);
}

#footer-menu {
  position: absolute;
  display: none;
  right: 0;
  bottom: var(--footer-height);
  width: 240px;
  background-color: var(--desp-frame-background-color);
  flex-direction: column;
  padding: 0;
  margin: 0;
  gap: 0px;
  font-size: var(--desp-frame-font-size);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

#footer-menu hr {
  border: none;
  border-top: 1px solid var(--desp-darkgrey-color);
  margin: 0 10px;
}

.footer-frame-link {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 0;
  transition: background-color 250ms, color 250ms ease-in-out;
  cursor: pointer;
  color: var(--desp-font-color); /* Texte en noir */
}

.footer-frame-link:hover {
  background-color: var(--desp-frame-hover-color);
}

.mobile-link {
  display: none;
}

/* Responsivité */
@media only screen and (max-width: 1024px) {
  #footer-central-container {
      display: none;
  }
  .mobile-link {
      display: block;
  }
}

@media only screen and (min-width: 1025px) {
  .mobile-link {
      display: none;
  }
}