/*********** ANCRE ***********/

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

/*********** 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;
}

/*********** CARTES OFFRES ***********/

.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;
}

/*********** RESPONSIVE ***********/

@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;
  }
}