/* FOOTER */
.footer {
  display: flex;
  flex-direction: column;
}

.footer h3 {
  font-size: 24px;
  line-height: 28px;
}

.footer .footer-main-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 4%;
  row-gap: 30px;
}

.footer .footer-main-content .footer-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}

.footer .footer-main-content .footer-col h2,
.footer .footer-main-content .footer-col h3,
.footer .footer-main-content .footer-col h4,
.footer .footer-main-content .footer-col h5,
.footer .footer-main-content .footer-col p,
.footer .footer-main-content .footer-col a {
  margin-bottom: 0px;
}

.footer .footer-main-content .footer-col .menu-footer-container .menu {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}

.footer .footer-main-content .footer-col ul,
.footer .footer-main-content .footer-col ol {
  list-style: none;
  margin: 0px;
}

.footer .footer-main-content .footer-col ul li .sub-menu,
.footer .footer-main-content .footer-col ol li .sub-menu {
  list-style: none;
  margin: 0px;
}

.footer .footer-main-content .footer-col ul .menu-soustitre {
  display: flex;
  flex-direction: column;
  row-gap: 5px;
}

.footer .footer-main-content .footer-col ul .menu-soustitre .sub-menu {
  display: flex;
  flex-direction: column;
  row-gap: 5px;
}

.footer .footer-main-content .footer-col ul .menu-soustitre>a {
  pointer-events: none;
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  color: var(--noir);
}

.footer .footer-main-content .footer-col ul .menu-soustitre:hover {
  color: var(--accent);
}

.footer .footer-main-content .footer-col ul:not(.sub-menu)>.menu-item-object-page {
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  color: var(--noir);
}

.footer .footer-main-content .footer-col ul:not(.sub-menu)>.menu-item-object-page a {
  color: var(--noir);
}

.footer .footer-main-content .footer-col ul:not(.sub-menu)>.menu-item-object-page:hover a {
  color: var(--accent);
}

.footer .menu-footer-container .menu-item-has-children .sub-menu li a {
  font-weight: normal;
  color: var(--noir) !important;
}

.footer .menu-footer-container .menu li.current-menu-item a {
  font-weight: bold;
  color: var(--principale) !important;
}

.footer .menu-footer-container .menu li.currrent-menu-item:hover a {
  color: var(--accent) !important;
}

.footer .menu-footer-container .menu-item-has-children .sub-menu li:hover a {
  color: var(--accent) !important;
}

.footer .footer-main-content .footer-col .footer-logo {
  max-width: 150px;
}

.footer .footer-main-content .footer-col .coordonnees {
  display: flex;
  flex-direction: column;
  row-gap: 5px;
}

.footer .footer-main-content .footer-col .button {
  width: fit-content;
}

.footer .footer-main-content .footer-col .social-medias {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 2%;
  row-gap: 20px;
}

.footer .footer-copyright {
  padding-bottom: 20px;
  padding-top: 20px;
  background-color: rgba(255, 255, 255, 0.1);
}

.footer .footer-copyright .footer-copyright-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.footer .footer-copyright .footer-copyright-content p,
.footer .footer-copyright .footer-copyright-content a {
  margin-bottom: 0px;
  font-size: 16px;
}

.footer .media-sociaux,
.footer .coordonnees-icones {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 5px;
  row-gap: 10px;
  width: 100%;
}

.footer .media-sociaux a,
.footer .coordonnees-icones a {
  width: 30px;
  height: 30px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}

/* ---------------------- Options de couleurs ---------------------- */
/* Icones - sur fond noir */
.footer.bg-noir .media-sociaux a,
.footer.bg-noir .coordonnees-icones a {
  background-color: var(--noir);
  border: 1px solid var(--accent);
}

.footer.bg-noir .media-sociaux a:hover,
.footer.bg-noir .coordonnees-icones a:hover {
  border: 1px solid var(--blanc);
}

.footer.bg-noir .media-sociaux a i,
.footer.bg-noir .coordonnees-icones a i {
  color: var(--accent);
}

.footer.bg-noir .media-sociaux a:hover i,
.footer.bg-noir .coordonnees-icones a:hover i {
  color: var(--blanc);
}

/* Icones - sur fond blanc */
.footer.bg-blanc .media-sociaux a,
.footer.bg-blanc .coordonnees-icones a {
  background-color: var(--blanc);
  border: 1px solid var(--accent);
}

.footer.bg-blanc .media-sociaux a:hover,
.footer.bg-blanc .coordonnees-icones a:hover {
  border: 1px solid var(--principale);
}

.footer.bg-blanc .media-sociaux a i,
.footer.bg-blanc .coordonnees-icones a i {
  color: var(--accent);
}

.footer.bg-blanc .media-sociaux a:hover i,
.footer.bg-blanc .coordonnees-icones a:hover i {
  color: var(--principale);
}

/* Icones - sur fond gris */
.footer.bg-gris .media-sociaux a,
.footer.bg-gris .coordonnees-icones a {
  background-color: var(--gris);
  border: 1px solid var(--accent);
}

.footer.bg-gris .media-sociaux a:hover,
.footer.bg-gris .coordonnees-icones a:hover {
  border: 1px solid var(--principale);
}

.footer.bg-gris .media-sociaux a i,
.footer.bg-gris .coordonnees-icones a i {
  color: var(--accent);
}

.footer.bg-gris .media-sociaux a:hover i,
.footer.bg-gris .coordonnees-icones a:hover i {
  color: var(--principale);
}

/* Icones - sur fond principale */
.footer.bg-principale .media-sociaux a,
.footer.bg-principale .coordonnees-icones a {
  background-color: var(--principale);
  border: 1px solid var(--blanc);
}

.footer.bg-principale .media-sociaux a:hover,
.footer.bg-principale .coordonnees-icones a:hover {
  border: 1px solid var(--accent);
}

.footer.bg-principale .media-sociaux a i,
.footer.bg-principale .coordonnees-icones a i {
  color: var(--blanc);
}

.footer.bg-principale .media-sociaux a:hover i,
.footer.bg-principale .coordonnees-icones a:hover i {
  color: var(--accent);
}

/* Icones - sur fond accent */
.footer.bg-accent .media-sociaux a,
.footer.bg-accent .coordonnees-icones a {
  background-color: var(--accent);
  border: 1px solid var(--blanc);
}

.footer.bg-accent .media-sociaux a:hover,
.footer.bg-accent .coordonnees-icones a:hover {
  border: 1px solid var(--principale);
}

.footer.bg-accent .media-sociaux a i,
.footer.bg-accent .coordonnees-icones a i {
  color: var(--blanc);
}

.footer.bg-accent .media-sociaux a:hover i,
.footer.bg-accent .coordonnees-icones a:hover i {
  color: var(--principale);
}

/* Autres */
.footer.bg-noir p,
.footer.bg-noir h3,
.footer.bg-noir a:not(.button),
.footer.bg-noir .footer-copyright-content,
.footer.bg-noir .footer-main-content .footer-col ul .menu-soustitre>a,
.footer.bg-noir .footer-main-content .footer-col ul:not(.sub-menu)>.menu-item-object-page a {
  color: var(--blanc);
}

.footer.bg-noir a:not(.button):hover,
.footer.bg-noir .footer-main-content .footer-col ul .menu-soustitre>a:hover,
.footer.bg-noir .footer-main-content .footer-col ul:not(.sub-menu)>.menu-item-object-page a:hover {
  color: var(--accent);
}

.footer.bg-noir .menu-footer-container .menu-item-has-children .sub-menu li a {
  color: var(--blanc) !important;
}

.footer.bg-noir .menu-footer-container .menu li.current-menu-item a,
.footer.bg-noir .menu-footer-container .menu li.currrent-menu-item:hover a,
.footer.bg-noir .menu-footer-container .menu-item-has-children .sub-menu li:hover a {
  color: var(--accent) !important;
}

.footer.bg-principale p,
.footer.bg-principale h3,
.footer.bg-principale a:not(.button),
.footer.bg-principale .footer-copyright-content,
.footer.bg-principale .footer-main-content .footer-col ul .menu-soustitre>a,
.footer.bg-principale .footer-main-content .footer-col ul:not(.sub-menu)>.menu-item-object-page a {
  color: var(--blanc);
}

.footer.bg-principale a:not(.button):hover,
.footer.bg-principale .footer-main-content .footer-col ul .menu-soustitre>a:hover,
.footer.bg-principale .footer-main-content .footer-col ul:not(.sub-menu)>.menu-item-object-page a:hover {
  color: var(--accent);
}

.footer.bg-principale .menu-footer-container .menu-item-has-children .sub-menu li a {
  color: var(--blanc) !important;
}

.footer.bg-principale .menu-footer-container .menu li.current-menu-item a,
.footer.bg-principale .menu-footer-container .menu li.currrent-menu-item:hover a,
.footer.bg-principale .menu-footer-container .menu-item-has-children .sub-menu li:hover a {
  color: var(--gris) !important;
}

.footer.bg-accent p,
.footer.bg-accent h3,
.footer.bg-accent a:not(.button),
.footer.bg-accent .footer-copyright-content,
.footer.bg-accent .footer-main-content .footer-col ul .menu-soustitre>a,
.footer.bg-accent .footer-main-content .footer-col ul:not(.sub-menu)>.menu-item-object-page a {
  color: var(--blanc);
}

.footer.bg-accent a:not(.button):hover,
.footer.bg-accent .footer-main-content .footer-col ul .menu-soustitre>a:hover,
.footer.bg-accent .footer-main-content .footer-col ul:not(.sub-menu)>.menu-item-object-page a:hover {
  color: var(--gris);
}

.footer.bg-accent .menu-footer-container .menu-item-has-children .sub-menu li a {
  color: var(--blanc) !important;
}

.footer.bg-accent .menu-footer-container .menu li.current-menu-item a,
.footer.bg-accent .menu-footer-container .menu li.currrent-menu-item:hover a,
.footer.bg-accent .menu-footer-container .menu-item-has-children .sub-menu li:hover a {
  color: var(--gris) !important;
}

.footer a.button {
  color: var(--blanc);
}

.footer.bg-accent a.button {
  background-color: var(--principale);
}

.footer.bg-accent a.button:hover {
  background-color: var(--blanc);
  color: var(--principale);
}

.footer.bg-noir a.button,
.footer.bg-principale a.button,
.footer.bg-blanc a.button,
.footer.bg-gris a.button {
  background-color: var(--accent);
}

.footer.bg-noir a.button:hover,
.footer.bg-principale a.button:hover {
  background-color: var(--blanc);
  color: var(--accent);
}

.footer.bg-blanc a.button:hover,
.footer.bg-gris a.button:hover {
  background-color: var(--principale);
  color: var(--blanc);
}

.footer.bg-blanc .footer-copyright,
.footer.bg-gris .footer-copyright {
  background-color: rgba(0, 0, 0, 0.05);
}

/* --------------- RESPONSIVE --------------- */

@media screen and (max-width: 1480px) {
  .footer .footer-copyright {
    padding: 20px 40px;
  }
}

@media screen and (max-width: 1270px) {}

@media screen and (max-width: 1024px) {}

@media screen and (max-width: 960px) {
  .footer .footer-main-content {
    flex-direction: column;
    row-gap: 20px;
  }

  .footer .footer-copyright .footer-copyright-content {
    flex-direction: column;
  }
}

@media screen and (max-width: 820px) {}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 600px) {
  .footer .footer-main-content {
    flex-direction: column;
  }

  .footer .footer-copyright {
    padding: 20px 20px;
  }
}

@media screen and (max-width: 450px) {}