footer {
  background-color: blue;
}

footer h3 {
  font-family: Apparat !important;
  font-size: 14px;
  font-weight: semi-condensed;
  line-height: 1.3;
  margin-top: 0px;
  color: black;
}

footer p,
footer a,
footer li {
  font-family: Apparat !important;
  font-size: 13px;
  line-height: 1.3;
  color: #1e1e1e;
}

footer a {
  text-decoration: none;
}

footer a:hover {
  color: #0a5adb;
}

footer ul {
  padding: 0px;
}

footer li {
  list-style: none;
}

footer .s-1 {
  background-color: #0a5adb;
}

footer .s-1 .ctn {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 30px 0px 30px 0px;
}

footer .s-1 .trait-vertical {
  border-right: 1px solid white;
  height: 52px;
}

footer .s-1 > div {
  width: 79%;
  margin: auto;
}

footer .s-1 img,
footer .s-1 p {
  display: inline-block;
}

footer .s-1 img {
  margin-right: 19px;
  max-width: 30px;
}

footer .s-1 p {
  margin: 0px;
  color: white;
}

footer .s-1 div {
  display: inline-flex;
}

footer .s-1 .col-4 {
  width: 45%;
}

footer .s-2 {
  background-color: #f2f2f2;
}

footer .s-2 .ctn {
  display: flex;
  flex-direction: row;
  gap: 20px;
  flex-wrap: nowrap;
  padding: 40px 0px 10px 0px;
}

footer .s-2 img {
  max-width: 120px;
}

footer .s-2 .col-1 {
  width: 20%;
}

footer .s-2 .col-2 {
  width: 30%;
  padding-right: 20px;
}

footer .s-2 .col-3,
footer .s-2 .col-4,
footer .s-2 .col-5 {
  width: 13%;
}

footer .s-3 {
  background-color: #f2f2f2;
}

footer .s-3 .ctn {
  display: flex;
  align-items: end;
  padding-bottom: 20px;
}

footer .mentions-legales {
  width: 80%;
}

footer .mentions-legales p {
  display: inline-block;
}

footer .boutons a {
  margin-right: 20px;
  margin-bottom: 8px;
}

footer .icons-rs {
  display: flex;
  flex-direction: row;
  gap: 14px;
  align-items: center;
}

footer .rs,
footer .UE {
  width: 20%;
}

footer .UE img {
  max-width: 160px;
}

footer .icons-rs img {
  width: 28px;
  transition: transform 0.4s cubic-bezier(0.23, 1.83, 0.42, 1.19);
  -webkit-transition: transform 0.4s cubic-bezier(0.23, 1.83, 0.42, 1.19);
}

footer .icons-rs img:hover {
  transform: scale(1.2);
}

footer .icons-rs a#fb img,
footer .icons-rs a#insta img,
footer .icons-rs a#lk img {
  margin-right: 10%;
}

footer .icons-rs a#yt img {
  width: 32px;
}

footer .rs .titre p {
  margin-top: 0px;
}

/*********** RESPONSIF ***********/

@media screen and (max-width: 1000px) {
  footer p,
  footer a,
  footer li {
    font-size: 14px;
  }

  footer h3 {
    font-size: 15px;
    margin-bottom: 0px;
  }

  footer .s-2 .col-3,
  footer .s-2 .col-4,
  footer .s-2 .col-5 {
    border-top: 0.5px solid black;
    padding-top: 20px;
  }

  footer .s-2 .col-5 {
    padding-bottom: 20px;
    border-bottom: 0.5px solid black;
  }

  footer .s-2 ul.actif {
    display: inherit;
  }

  footer .s-1 {
    display: none;
  }

  footer .s-2 img {
    padding-bottom: 15px;
  }

  footer .s-2 {
    padding-bottom: 20px;
  }

  footer .s-2 .col-1 {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  footer .s-2 .col-2 {
    padding-right: 0px;
  }

  footer .s-2 .col-3,
  footer .s-2 .col-4,
  footer .s-2 .col-5 {
    width: 100%;
    text-align: left;
  }

  footer .s-2 .ctn {
    width: 86%;
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  footer .s-3 .ctn {
    width: 86%;
    flex-direction: column;
    padding-bottom: 20px;
    align-items: center;
  }

  footer .rs,
  footer .UE {
    width: 100%;
    text-align: center;
    padding: 10px 0px 20px 0px;
  }

  footer .icons-rs {
    justify-content: center;
  }

  footer .mentions-legales {
    width: 100%;
    order: 1;
  }

  footer .boutons a {
    margin-right: 0px;
    margin-bottom: 15px;
  }

  footer .icons-rs a#fb img,
  footer .icons-rs a#insta img {
    margin-right: 10%;
  }
  footer h3.footer-sous-menu::after {
    font-family: "ETmodules";
    content: url("/icons/Icon_Fleche-sous-menu_Noir.svg");
    padding-left: 5px;
    width: 10px;
    display: inline-block;
  }

  footer h3.footer-sous-menu.actif::after {
    transform: rotate(180deg);
    padding-right: 5px;
  }

  footer h3.footer-sous-menu:hover {
    cursor: pointer;
  }

  footer .s-2 ul {
    margin-bottom: 0px;
    display: none;
  }
}

@media screen and (min-width: 701px) and (max-width: 1000px) {
  footer .s-2 .col-2 {
    width: 78%;
  }
}

@media screen and (max-width: 700px) {
  footer .s-2 .col-2 {
    width: 100%;
  }
}