/*********** VALEURS ***********/
#valeurs {
  background-color: #0a2c7a;
  color: white;
  background-image: url("/images/backgrounds/background_grand-parcours-G_Bleu-50.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}

#valeurs h2,
#valeurs h5 {
  color: white;
}

#valeurs .container-boutons {
  display: flex;
  gap: 10px;
}

#ancre-offres {
  transform: translateY(-80px);
}

#valeurs .container {
  padding: 160px 0px 60px 0px;
}

#valeurs .texte {
  z-index: 2;
  /*position: absolute;*/
  max-width: 600px;
}

#valeurs .blocs {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  flex-wrap: wrap;
}

#valeurs .bloc {
  padding: 20px;
  background-color: #0a5adb;
  border-radius: 6px;
  width: 250px;
}

#valeurs .bloc h3,
#valeurs .bloc p {
  color: white;
}

#valeurs .bloc p {
  margin-bottom: 0px;
}

#valeurs .graphique {
  width: 100%;
  position: relative;
  text-align: center;
  z-index: 1;
}

#valeurs img#bulles-1 {
  position: relative;
  z-index: -1;
  width: 100%;
}

#valeurs img#bulles-2 {
  width: 100%;
  position: absolute;
  z-index: -2;
  left: 6%;
  transform: translateY(10%);
}

#valeurs .bouton#antennes {
  transform: translate(-25%, -220%);
  position: absolute;
}

@media (max-width: 600px) {
  #valeurs .texte {
    position: inherit;
  }
  #valeurs .container {
    width: 90%;
  }
  #valeurs p {
    max-width: 100%;
  }
  #valeurs .graphique {
    display: none;
  }
}

/*********** OFFRES D'EMPLOI ***********/

#offres {
  padding-top: 60px;
  padding-bottom: 120px;
}

#offres #container-filtres {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#offres h2 {
  margin-bottom: 0px;
}

#offres .filtre:hover {
  cursor: pointer;
}

#offres .filtre-V2 .filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#offres .filtre-V2 .bouton.filtre {
  border-radius: 6px;
}

#offres .filtre-V2 .filtre.actif {
  background-color: #0a5adb;
  border: 1px solid #0a5adb;
  color: white;
}

#offres .filtre-V2 p {
  margin-top: 0px;
}

#offres .filtre-V1 {
  display: none;
}

#offres .contenu-offres {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  margin-top: 40px;
}

#offres .searchbar {
  width: 40%;
  min-width: 300px;
}

.offre_emploi {
  box-shadow: 4px 6px 8px rgba(0, 0, 0, 0.1) !important;
  border-radius: 20px;
}

.offre_emploi .ligne-1,
.offre_emploi .ligne-4 {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.offre_emploi .texte .ligne-2 {
  display: flex;
  gap: 10px;
}

.offre_emploi #type,
.offre_emploi #secteur {
  font-weight: 500;
}
.offre_emploi #type {
  color: #0a2c7a;
}

.offre_emploi .image {
  min-height: 194px;
  background-color: #d9d9d9;
  border-radius: 20px 20px 0px 0px;
  background-size: 35%;
  background-position: center;
  background-repeat: no-repeat;
}

.offre_emploi.Informatique .image {
  background-image: url("/icons/offres-emploi/Icon_Informatique.svg");
  background-color: #5493f7;
}

.offre_emploi.Informatique #secteur {
  color: #5493f7;
}

.offre_emploi.Gestion .image {
  background-image: url("/icons/offres-emploi/Icon_Gestion.svg");
  background-color: #52d59d;
}

.offre_emploi.Gestion #secteur {
  color: #3bab6f;
}

.offre_emploi.Enseignement .image {
  background-image: url("/icons/offres-emploi/Icon_Enseignement.svg");
  background-color: #f8cc46;
}

.offre_emploi.Enseignement #secteur {
  color: #d3a008;
}

.offre_emploi.Graphisme .image {
  background-image: url("/icons/offres-emploi/Icon_Graphisme.svg");
}

.offre_emploi.Communication .image {
  background-image: url("/icons/offres-emploi/Icon_Communication.svg");
  background-size: 44%;
}

.offre_emploi.Audiovisuel .image {
  background-image: url("/icons/offres-emploi/Icon_Audiovisuel.svg");
}

.offre_emploi.Graphisme .image,
.offre_emploi.Communication .image,
.offre_emploi.Audiovisuel .image {
  background-color: #f77129;
}

.offre_emploi.Graphisme #secteur,
.offre_emploi.Communication #secteur,
.offre_emploi.Audiovisuel #secteur {
  color: #f77129;
}

.offre_emploi .texte p {
  margin: 0px;
}

.offre_emploi .texte {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: white;
  padding: 25px 25px 30px 25px;
  border-radius: 0px 0px 20px 20px;
}

.offre_emploi .texte .ligne-01 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.offre_emploi h3 {
  margin-bottom: 0px;
}

.offre_emploi .icon {
  margin-right: 9px;
  position: relative;
  top: 2px;
}

.offre_emploi .ligne-1 p {
  display: inline-block;
  margin-top: 0px;
  margin-bottom: 0px;
  color: #0a5adb;
}

.offre_emploi #description {
  margin-top: 0px;
  color: #0a2c7a;
}

#vide {
  text-align: center;
  margin-top: 100px;
}

@media (max-width: 600px) {
  .offre_emploi .image {
    min-height: 172px;
  }
  .offre_emploi .texte {
    padding: 15px;
  }
  #offres .filtre-V1 {
    display: initial;
  }
  #offres .filtre-V2 {
    display: none;
  }
}

@media (min-width: 451px) and (max-width: 900px) {
  #offres .contenu-offres {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 450px) {
  #offres .contenu-offres {
    grid-template-columns: 1fr;
  }
}

/*********** VIDÉOS ÉQUIPE ***********/
#videos-equipe {
  margin-top: 120px;
  padding-bottom: 120px;
  background-image: url("/images/backgrounds/background_petits-parcours-couleurs.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 0% 150px;
}

#videos-equipe .video-equipe {
  min-height: 400px;
  background-color: gray;
  margin-right: 10px;
  margin-left: 10px;
  border-radius: 10px;
}
#videos-equipe .slick-prev {
  transform: translateX(-65px);
}
#videos-equipe .slick-arrow {
  right: 0%;
  top: -18%;
}

@media (max-width: 600px) {
  #videos-equipe .video-equipe {
    min-height: 300px;
  }
}