/*********** ÉVOLUTION ***********/
#evolution {
  margin-top: 120px;
  margin-bottom: 120px;
}

#evolution .ctn-77 {
  width: 50%;
}

#evolution h2 {
  text-align: center;
}

#evolution p {
  color: #0a2c7a;
}

.ctn-bouton {
  display: flex;
  justify-content: center;
}

#ctn-images-1 {
  width: 100%;
  position: relative;
}

#ctn-images-2 {
  display: flex;
  justify-content: space-between;
  position: absolute;
  width: 100%;
  transform: translateY(-60px);
}

#ctn-images-2 img {
  width: 100px;
}

/*********** ARTICLES ***********/
#articles {
  margin-top: 120px;
  margin-bottom: 120px;
}

#ancre-articles {
  transform: translateY(-120px);
}

#articles p {
  color: #0a2c7a;
}

#articles .ligne-1 {
  margin-bottom: 30px;
}

#articles h2 {
  margin-bottom: 20px;
}
#articles .ligne-1 > p {
  margin-bottom: 20px;
}

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

#articles .filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

#articles .contenu-article {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 30px;
}

@media (min-width: 1101px) and (max-width: 1250px) {
  #articles .contenu-article {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}

@media (min-width: 851px) and (max-width: 1100px) {
  #articles .contenu-article {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

@media (min-width: 501px) and (max-width: 850px) {
  #articles .contenu-article {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

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

.article h4 {
  font-size: 17px;
}

#articles .filtre.actif {
  border: 1px solid;
}

/*------- Couleur par thématique -------*/
#articles a#tout:hover,
#articles a#tout.actif {
  background-color: #0a5adb;
  border-color: #0a5adb;
  color: white;
}

#articles a#Orientation:hover,
#articles a#Orientation.actif {
  background-color: #52d59d;
  border-color: #52d59d;
  color: #12492b;
}

#articles .article.Orientation .couleur {
  color: #52d59d;
}

#articles a#Recherche:hover,
#articles a#Recherche.actif {
  background-color: #f77129;
  border-color: #f77129;
  color: #632503;
}

#articles .article.Recherche .couleur {
  color: #f77129;
}

#articles a#Alternance:hover,
#articles a#Alternance.actif {
  background-color: #f8cc46;
  border-color: #f8cc46;
  color: #775b09;
}

#articles .article.Alternance .couleur {
  color: #f8cc46;
}

#articles a#Decouverte:hover,
#articles a#Decouverte.actif {
  background-color: #5493f7;
  border-color: #5493f7;
  color: #051c54;
}

#articles .article.Decouverte .couleur {
  color: #5493f7;
}

#articles a#Droits:hover,
#articles a#Droits.actif {
  background-color: #f8cc46;
  border-color: #f8cc46;
  color: #a17800;
}

#articles .article.Droits .couleur {
  color: #f8cc46;
}

#articles a#Aides:hover,
#articles a#Aides.actif {
  background-color: #f8cc46;
  border-color: #f8cc46;
  color: #a17800;
}

#articles .article.Aides .couleur {
  color: #f8cc46;
}

#articles a#Handicap:hover,
#articles a#Handicap.actif {
  background-color: #5493f7;
  border-color: #5493f7;
  color: #0a2c7a;
}

#articles .article.Handicap .couleur {
  color: #5493f7;
}

/*********** SOS APPRENTI ***********/

#sos {
  padding: 160px 0px 60px 0px;
  background-color: #0a2c7a;
}

#sos,
#sos h1 {
  color: white;
  line-height: 1.2;
  font-weight: 700;
}

#sos p {
  font-size: 18px;
}

#sos .ctn {
  display: flex;
  gap: 100px;
}

#sos .col-1 {
  width: 72%;
}

#sos .col-1 img {
  position: absolute;
  width: 20px;
  transform: translate(200%, -50%);
}

#sos .col-2 {
  width: 45%;
}

#sos .col-2 img {
  max-width: 580px;
  position: absolute;
  top: 100px;
  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);
}

#sos .col-2 img:hover {
  transform: scale(1.05);
  cursor: pointer;
  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);
}

#sos .bulle {
  background-color: white;
  color: #0a5adb;
  padding: 28px;
  border-radius: 16px;
}

#sos .bulle p {
  margin-top: 0px;
}

@media (min-width: 901px) and (max-width: 1100px) {
  #sos .ctn {
    gap: 38px;
  }
  #sos .col-1 {
    width: 55%;
  }
  #sos .col-2 img:last-child {
    max-width: 36%;
  }
}

@media (min-width: 701px) and (max-width: 900px) {
  #sos .ctn {
    gap: 38px;
  }
  #sos .col-1 {
    width: 55%;
  }
  #sos .col-2 img:last-child {
    max-width: 100%;
    position: inherit;
  }
}

@media (max-width: 700px) {
  #sos .ctn {
    flex-direction: column;
  }
  #sos .col-2 img {
    display: none;
  }
  #sos .col {
    width: 100%;
  }
  #sos .col-2 {
    display: none;
  }
}

/*********** DÉLAI DE RÉPONSE ***********/
#delai {
  color: white;
}

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

#delai .ctn {
  display: flex;
  flex-direction: row;
  gap: 0px;
  width: 100% !important;
  max-width: 100%;
  --shrink-amount: 100px;
}

#delai .col-1 {
  width: 55%;
  padding: 60px 100px 60px 6rem;
  clip-path: polygon(
    0% 0%,
    100% 0%,
    calc(100% - var(--shrink-amount)) 100%,
    0% 100%
  );
  --tw-bg-opacity: 1;
  background-color: rgb(10 44 122 / var(--tw-bg-opacity));
}

#delai .col-2 {
  width: 30%;
  background-image: url("https://anaf.fr/images/photos/services/Photo-FTJ.webp");
  min-height: 250px;
  background-color: #d9d9d9;
  background-repeat: no-repeat;
  background-size: cover;
  clip-path: polygon(var(--shrink-amount) 0%, 100% 0%, 100% 100%, 0% 100%);
}

#delai .onglets {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  align-items: center;
  flex-wrap: wrap;
}

#delai .btn h2 {
  margin-bottom: 0px;
  color: white;
}
#delai .btn.actif h2,
#delai .btn:hover h2 {
  color: #0a2c7a;
}

#delai .contenus {
  display: grid;
  grid-template-rows: min-content 1fr;
}

#delai .onglet-contenu {
  display: grid;
  grid-template-columns: 1fr;
  grid-area: 2/1/3/2;
  visibility: hidden;
  opacity: 0;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}

#delai .onglet-contenu.actif {
  visibility: visible;
  opacity: 1;
  -webkit-transition: all 0.4s ease-in-out 0.4s;
  transition: all 0.4s ease-in-out 0.4s;
}

@media (max-width: 700px) {
  #delai .ctn {
    flex-direction: column-reverse;
  }
  #delai .col-1,
  #delai .col-2 {
    width: 100%;
    clip-path: none;
  }
  #delai .col-1 {
    padding: 60px 20px;
  }
}

/*********** TCHAT ***********/
#tchat {
  margin-top: 120px;
  margin-bottom: 120px;
}

#ancre-tchat {
  transform: translateY(-20px);
}

#tchat iframe {
  width: 100%;
  height: 900px;
  border-radius: 14px;
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),
    0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/*********** FAQ ***********/
#faq {
  margin-top: 120px;
  margin-bottom: 120px;
}
#ancre-FAQ {
  transform: translateY(-150px);
}