@charset "UTF-8";
/**********************************************************************************************************************
Pour toutes les tailles d'écran
**********************************************************************************************************************/
.card_rencontrez {
  background-color: #F1951C;
  /*transform: matrix(0, -1, 1, 0, 0, 0);*/
}

.card_accompagnez {
  background-color: #F06250;
}

.rencontrez {
  font-family: "amboy-black", sans-serif;
  color: #fff;
}

.bouton_filtre {
  width: initial;
}

.illu_prototypage {
  width: 100vw;
  padding-right: 47px;
}

.illu_rectrutement {
  width: 100vw;
  padding-right: 47px;
}

.surMesure {
  overflow: hidden;
  background-color: #F06250;
  min-height: 25em;
  position: relative;
}

.surMesure h2 {
  color: #BBD8D9;
}

.catalogue {
  overflow: hidden;
  background-color: #F1951C;
  min-height: 25em;
  position: relative;
}

.catalogue h2 {
  color: #0C3C56;
}

#carouselTR {
  height: 40em;
  margin-bottom: 0.5em;
}
#carouselTR > .carousel-inner {
  height: 34em;
}

.surMesure > div > img {
  width: 10em;
  position: absolute;
  right: 0;
  bottom: 0;
}

.catalogue > div > img {
  width: 10em;
  position: absolute;
  left: 0;
  bottom: 0;
}

.illu_validation {
  width: 100vw;
  padding-right: 47px;
}

@media (min-width: 576px) {
  .surMesure > div > img, .catalogue > div > img {
    width: 10em;
  }
}
@media (max-width: 575.99px) {
  .surMesure > div:nth-child(2) {
    text-align: right;
  }
}
/**********************************************************************************************************************
Pour tout les écrans de plus de 576px (mobile)
**********************************************************************************************************************/
@media (min-width: 576px) {
  .surMesure > div > img {
    width: 10em;
  }
}
/**********************************************************************************************************************
Pour tout les écrans de plus de 768px (tablette)
**********************************************************************************************************************/
@media (min-width: 768px) {
  #carouselTR > .carousel-inner {
    height: 32em;
  }
}
/**********************************************************************************************************************
Pour tout les écrans de plus de 992px (ordinateur)
**********************************************************************************************************************/
@media (min-width: 992px) {
  .illu_validation {
    float: right;
    max-width: 1080px;
    width: 100%;
    padding: 0;
  }

  .illu_prototypage {
    float: right;
    max-width: 950px;
    width: 100%;
    padding: 0;
  }

  .illu_recrutement {
    float: right;
    max-width: 1080px;
    width: 100%;
    padding: 0;
  }
}
/**********************************************************************************************************************
Pour tout les écrans de plus de 1200px (grand écrans)
**********************************************************************************************************************/
@media (min-width: 1200px) {
  .image_page {
    min-height: 541px;
  }

  #carouselTR {
    height: 100%;
  }
  #carouselTR > .carousel-inner {
    height: 50em;
  }

  .surMesure, .catalogue {
    min-height: 30em;
  }

  .surMesure > div > img, .catalogue > div > img {
    width: 15em;
  }

  .surMesureNotHover > div > img {
    margin-right: -10em;
  }

  .catalogueNotHover > div > img {
    margin-left: -10em;
  }

  @keyframes backgroundSurMesure {
    100% {
      margin-right: -10em;
    }
  }
  @keyframes backgroundCatalogue {
    100% {
      margin-left: -10em;
    }
  }
  .surMesureHover > div > img {
    animation: backgroundSurMesure 1s;
    animation-delay: 550ms;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    margin-right: 0;
  }

  .catalogueHover > div > img {
    animation: backgroundCatalogue 1s;
    animation-delay: 550ms;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    margin-left: 0;
  }

  .surMesureHover .textSurMesure {
    animation: textSurMesure 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    margin-left: -50vw;
    opacity: 0;
  }

  .catalogueHover .textCatalogue {
    animation: textCatalogue 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    margin-left: 50vw;
    opacity: 0;
  }

  @keyframes textSurMesure {
    100% {
      margin-left: 0;
      opacity: 1;
    }
  }
  @keyframes textCatalogue {
    100% {
      margin-left: 0;
      opacity: 1;
    }
  }
  .surMesureNotHover > div > img {
    animation: backgroundSurMesureNotHover 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
  }

  .catalogueNotHover > div > img {
    animation: backgroundCatalogueNotHover 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
  }

  @keyframes backgroundSurMesureNotHover {
    100% {
      margin-right: 0;
    }
  }
  @keyframes backgroundCatalogueNotHover {
    100% {
      margin-left: 0;
    }
  }
  .surMesureNotHover .textSurMesure {
    animation: textSurMesureNotHover 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    margin-left: 0;
    opacity: 1;
  }

  .catalogueNotHover .textCatalogue {
    animation: textCatalogueNotHover 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    margin-left: 0;
    opacity: 1;
  }

  @keyframes textSurMesureNotHover {
    100% {
      margin-left: -70vw;
      opacity: 0;
    }
  }
  @keyframes textCatalogueNotHover {
    100% {
      margin-left: 50vw;
      opacity: 0;
    }
  }
}
/**********************************************************************************************************************
Pour tout les écrans de plus de 1900px (grand écrans)
**********************************************************************************************************************/
@media (min-width: 1900px) {
  .surMesure > div > img, .catalogue > div > img {
    width: 20em;
  }

  .surMesure, .catalogue {
    min-height: 25em;
  }

  #carouselTR > .carousel-inner {
    height: 40em;
  }
}

/*# sourceMappingURL=entreprise.css.map */