/* je met le backgound image et defini son placement  */
footer {
  width: 100%;
  height: 200px;
  background-image: url(../img/footer_epe_bureau_7.webp);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
/* je touche à la boite qui regroupe les elements du footer */
footer div {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding-top: 130px;
  align-items: center;
}
/* je touche au logo faire un don */
.don {
  width: 140px;
  height: auto;
  border-radius: 10px;
}
/* je touche au numero vert */
.numeroVert {
  width: 140px;
  height: auto;
  border-radius: 13px;
}
/* je touche au lien aggrego-tech et mentions legales */
footer div a {
  text-decoration: none;
  color: beige;
}
/* je met un hover sur les liens de couleur orange */
footer div a:hover {
  color: var(--color-orange);
}
/*:::::::::::::::::::::::::: Responsive:::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::: max 767 ::::::::::::::::::::::::::::::*/

@media (max-width: 767px) {
  /* je met un background-image pour le mobile specifiquement */
  footer {
    background-image: url(../img/footer_epe_mobile5.webp);
    position: relative;
    height: 260px;
  }
  /* je touche specifiquement le lien aggrego-tech */
  footer div a:nth-child(1) {
    position: absolute;
    bottom: 10px;
    right: 50px;
    font-size: 14px;
  }
  /* je touche specifiquement le lien des mentions legales */
  footer div a:nth-child(2) {
    position: absolute;
    bottom: 11px;
    left: 40px;
    font-size: 14px;
  }
  /* je touche specifiquement au logo facebook */
  footer div a:nth-child(3) {
    position: absolute;
    margin: auto;
    top: 75px;
  }
  /* je touche à la boite du logo faire un don */
  footer div a:nth-child(4) {
    position: absolute;
    height: 61px;
    width: 133px;
    top: 111px;
    left: 23px;
  }
  /* je touche specifiquement au logo de allo parents en crise */
  footer .don {
    position: absolute;
    left: 1px;
    top: 24px;
    border-radius: 10px;
  }
  /* je touche specifiquement au logo faire un don */
  img.numeroVert {
    position: absolute;
    width: 140px;
    top: 136px;
    right: 30px;
    border-radius: 10px;
  }
  /* je touche au numero vert */
  .numeroVert {
    width: 140px;
  }
}
@media (max-width: 365px) {
  footer .don {
    position: absolute;
    left: 1px;
    top: 24px;
    width: 120px;
  }
  footer .numeroVert {
    position: absolute;
    width: 120px;
    top: 136px;
    right: 30px;
  }
  
}