@font-face {
  font-family: "ABeeZee";
  src: url(../../../fonts/ABeeZee/ABeeZee-Regular.ttf);
}

body {
  font-family: "ABeeZee";
}

main {
  padding-top: 129px;
}

p,
div ul li {
  font-size: 20px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-weight: inherit;
  line-height: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  border: 0;
}

nav ul {
  list-style-type: none; /* Supprime les puces */
  padding-left: 0; /* Annule le décalage vers la droite */
}

.grisclair {
  color: #acacac;
}

.grisclair2 {
  color: #7a7a7a;
}
.bg-bleu-clair {
  background-color: #eff6fc;
}

.bg-bleu-branding {
  background-color: #5a9fdf;
}

.bleu-foncé {
  color: #005cb1;
}

.bleubranding {
  color: #5a9fdf;
}

.bg-bleu {
  background-color: #5a9fdf;
}

#image-article-complet {
  width: 99vw;
  height: 65vh;
}

.position-introduction {
  position: absolute;
  bottom: -90px;
  left: 50%; /* Positionne le point de départ à 50% de l'élément parent */
  transform: translateX(-50%);
}

.box-shadow2 {
  box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.2);
}

.position-introduction-fiche-métier {
  position: absolute;
  bottom: -33px;
  left: 50%; /* Positionne le point de départ à 50% de l'élément parent */
  transform: translateX(-50%);
}

.titre-avec-bordure {
  padding-left: 20px;
  padding-top: 10px;
  padding-bottom: 10px; /* Ajustez la valeur pour obtenir l'espacement désiré */
  border-left: 8px solid #5a9fdf; /* Ajustez la couleur (ici, un bleu) et la largeur de la bordure */
  margin-top: 20px; /* Ajustez selon l'espace nécessaire au-dessus du titre */
  margin-bottom: 20px; /* Ajustez selon l'espace nécessaire en dessous du titre */
  border-top-left-radius: 6px; /* Arrondit le coin supérieur gauche */
  border-bottom-left-radius: 6px;
  background-color: #eef3f8;
}

.bordure {
  border: 2px dashed black;
  border-radius: 15px;
}

.hoversurlignage:hover {
  text-decoration: underline;
}

.cta-bdc {
  border: 2px solid white;
  border-radius: 60px;
  width: fit-content;
  padding: 15px 30px 15px 30px;
  font-size: 25px;
  white-space: nowrap;
  height: fit-content;
  background-color: inherit;
  color: inherit;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.cta-bdc:hover {
  color: #5a9fdf;
  background-color: white;
}

.sticky-sommaire {
  position: sticky;
  top: 127px;
  z-index: 1000;
  height: 100vh;
}

#barre-indicatrice {
  position: absolute;
  top: 4px; /* Position initiale */
  left: 24px;
  width: 5px;
  height: 20px;
  background-color: #0056b3; /* Couleur de la barre */
  transition: top 0.3s, height 0.3s; /* Animation douce */
  z-index: 10; /* Assurez-vous qu'elle est bien visible */
}

.no-wrap {
  white-space: nowrap;
}

@media screen and (max-width: 1000px) {
  .resptitre {
    font-size: 25px;
  }
  #fs20px {
    font-size: 20px;
    text-align: center;
  }

  #fs25px {
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    padding-bottom: 20px;
  }

  #fs25px2 {
    font-size: 25px;
  }

  #fs15px {
    font-size: 15px;
  }

  #fs15px-center {
    font-size: 15px;
    text-align: center;
  }

  #fs11px {
    font-size: 12px;
  }

  #pt80px {
    padding-top: 80px;
  }

  #w-70 {
    width: 70%;
  }

  #w-90 {
    width: 90%;
    margin: auto;
  }

  #w-100-padding {
    width: 100%;
    padding: 20px 0px;
  }

  #m-2 {
    margin: 2%;
  }

  #ta-center {
    text-align: center;
  }

  .sticky-sommaire {
    position: relative;
    height: fit-content;
  }

  #fd-column {
    flex-direction: column;
  }

  #pl-left {
    padding-left: 15%;
  }

  #barre-indicatrice {
    position: absolute;
    top: 6px; /* Position initiale */
    left: 34px;
    width: 5px;
    height: 20px;
    background-color: #0056b3; /* Couleur de la barre */
    transition: top 0.3s, height 0.3s; /* Animation douce */
    z-index: 10; /* Assurez-vous qu'elle est bien visible */
  }

  #mt200px {
    margin-top: 200px;
  }

  #fs25px3 {
    font-size: 25px;
  }

  #fs20px3 {
    font-size: 20px;
  }
}