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

body {
  font-family: "ABeeZee";
}

main {
  padding-top: 129px;
}

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

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

.grisclair {
  color: #acacac;
}

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

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

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

.position-secteur {
  position: absolute;
  top: 0px;
  left: 0px;
}

.bleubranding {
  color: #5a9fdf;
}

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

.l-h66px {
  line-height: 66px;
}

.ligne-texte{
  background-color: #5a9fdf;
  height: 100px;
  width:10px;
  position: absolute;
  top: 40px;
  left: -20px;
}

.bg-bleu-foncé {
  background-color: #0084ff;
  height: 100%;
  width: 25%;
  box-shadow: -4px 0px 5px rgba(0, 132, 255, 0.35);
}

#dimensions-search-bar {
  width: 280px;
  height: 66px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

#dimension-image-article {
  width: 100%;
  border-radius: 9px 9px 0px 0px;
}

.dimension-article {
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  transition: box-shadow ease 0.3s;
}

.dimension-article:hover {
  box-shadow: none;
}

.cta-bgbleu {
  background-color: inherit;
  color: white;
  width: fit-content;
  padding: 10px 20px;
  border-radius: 5px;
  border: white 2px solid;
  transition: color 0.3s ease, background-color 0.3s ease;
}

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

.w1236px {
  width: 1236px;
}

.cta-bgblanc {
  background-color: #5a9fdf;
  color: white;
  width: fit-content;
  padding: 10px 20px;
  border-radius: 5px;
  border: #5a9fdf 2px solid;
  scale: calc(1);
  transition: scale 0.08s ease;
}

.taille-image-étape-par-étape {
  width: 850px;
}

.style-étape {
  background-color: #5a9fdf;
  border-radius: 50%;
  padding: 5px;
  width: 30px;
  text-align: center;
  color: white;
  font-size: 25px;
  scale: calc(1);
  transition: scale 0.2s ease;
}

/* Effet de survol pour le numéro d'étape */
.déclencheur:hover .style-étape {
  transform: scale(1.3);
  transition: transform 0.3s ease; /* Ajoutez une transition pour un effet fluide */
}

/* Effet de survol pour les lignes verticales */
.déclencheur:hover .ligne-verticale1,
.déclencheur:hover .ligne-verticale2,
.déclencheur:hover .ligne-verticale3,
.déclencheur:hover .ligne-verticale4,
.déclencheur:hover .ligne-verticale5,
.déclencheur:hover .ligne-verticale6,
.déclencheur:hover .ligne-verticale7 {
  border-left: black 2px solid;
  transition: border-left 0.3s ease;
  opacity: 1;
  transition: opacity 0.3s ease; /* Ajoutez une transition pour un effet fluide */
}

/* Effet de survol pour le texte de l'étape */
.déclencheur:hover .style-étape-texte1,
.déclencheur:hover .style-étape-texte2,
.déclencheur:hover .style-étape-texte3,
.déclencheur:hover .style-étape-texte4,
.déclencheur:hover .style-étape-texte5,
.déclencheur:hover .style-étape-texte6,
.déclencheur:hover .style-étape-texte7 {
  color: black;
  font-weight: bold;
  font-size: 20px;
  transition: color 0.3s ease, font-size 0.3s ease; /* Ajoutez une transition pour un effet fluide */
}

.position1 {
  position: absolute;
  top: 34px;
  left: 98px;
}
.position2 {
  position: absolute;
  top: 49px;
  left: 269px;
}
.position3 {
  position: absolute;
  top: 181px;
  left: 367px;
}
.position4 {
  position: absolute;
  top: 34px;
  left: 516px;
}
.position5 {
  position: absolute;
  top: 166px;
  left: 618px;
}
.position6 {
  position: absolute;
  top: 73px;
  left: 747px;
}
.position7 {
  position: absolute;
  top: 34px;
  right: 48px;
}

.ligne-verticale1 {
  border-left: #cacaca 2px solid;
  height: 50px;
  position: absolute;
  top: -29px;
  left: 117px;
  transition: border-left 0.2s ease;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.ligne-verticale2 {
  border-left: #cacaca 2px solid;
  height: 30px;
  position: absolute;
  top: 5px;
  left: 289px;
  transition: border-left 0.2s ease;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.ligne-verticale3 {
  border-left: #cacaca 2px solid;
  height: 50px;
  position: absolute;
  top: 231px;
  left: 386px;
  transition: border-left 0.2s ease;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.ligne-verticale4 {
  border-left: #cacaca 2px solid;
  height: 50px;
  position: absolute;
  top: -24px;
  left: 534px;
  transition: border-left 0.2s ease;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.ligne-verticale5 {
  border-left: #cacaca 2px solid;
  height: 50px;
  position: absolute;
  top: 216px;
  left: 635px;
  transition: border-left 0.2s ease;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.ligne-verticale6 {
  border-left: #cacaca 2px solid;
  height: 50px;
  position: absolute;
  top: 10px;
  left: 763px;
  transition: border-left 0.2s ease;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.ligne-verticale7 {
  border-left: #cacaca 2px solid;
  height: 50px;
  position: absolute;
  top: -27px;
  left: 941px;
  transition: border-left 0.2s ease;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.style-étape-texte1 {
  font-size: 15px;
  position: absolute;
  top: -60px;
  left: 48px;
  color: #cacaca;
  transition: color 0.2s ease, font-size 0.2s ease;
}

.style-étape-texte2 {
  font-size: 15px;
  position: absolute;
  top: -23px;
  left: 198px;
  color: #cacaca;
  transition: color 0.2s ease, font-size 0.2s ease;
}

.style-étape-texte3 {
  font-size: 15px;
  position: absolute;
  top: 291px;
  left: 321px;
  color: #cacaca;
  transition: color 0.2s ease, font-size 0.2s ease;
}
.style-étape-texte4 {
  font-size: 15px;
  position: absolute;
  top: -48px;
  left: 471px;
  color: #cacaca;
  transition: color 0.2s ease, font-size 0.2s ease;
}
.style-étape-texte5 {
  font-size: 15px;
  position: absolute;
  top: 274px;
  left: 545px;
  color: #cacaca;
  transition: color 0.2s ease, font-size 0.2s ease;
}
.style-étape-texte6 {
  font-size: 15px;
  position: absolute;
  top: -22px;
  left: 691px;
  color: #cacaca;
  transition: color 0.2s ease, font-size 0.2s ease;
}
.style-étape-texte7 {
  font-size: 15px;
  position: absolute;
  top: -57px;
  left: 852px;
  color: #cacaca;
  transition: color 0.2s ease, font-size 0.2s ease;
}

.visible {
  overflow: visible;
  white-space: nowrap;
}

.cta-bgblanc:hover {
  scale: calc(0.97);
}

.taille-image-accueil {
  width: 60vw;
}

.style-lien {
  color: #0084ff;
  text-decoration: underline;
}

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

/* Base styles for the answer */
.reponse {
  transform: translateY(-15px); /* Commence légèrement plus haut */
  max-height: 0;
  overflow: hidden;
  transition: max-height 1.7s ease, opacity 0.4s ease, transform 0.3s ease; /* Ajout de transform à la transition */
  opacity: 0;
}

/* Styles when hovering over the question */
.faq-item .question:hover + .reponse {
  max-height: 500px; /* Ajustez en fonction de la hauteur de votre contenu */
  opacity: 1;
  transform: translateY(0px); /* Retour à la position originale */
}

/* Styles for the triangle */
.triangle-bleu {
  transition: transform 0.4s ease;
}

.faq-item .question:hover .triangle-bleu {
  transform: rotate(90deg);
}

/* Optionnel: pour un clic au lieu d'un survol, vous devrez utiliser JavaScript pour ajouter/retirer une classe active sur .question */

.dimension-article-marché {
  box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.3);

  transition: box-shadow ease 0.3s;
}

.dimension-article-marché:hover {
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
}

.radius-left {
  border-start-start-radius: 9px;
  border-bottom-left-radius: 9px;
}

.h-fit-content {
  height: fit-content;
}

.arrow {
  /* Assurez-vous que l'élément a une classe ou un id pour le cibler */
  transition: transform 0.5s ease; /* Animation sur 0.5 seconde */
  cursor: pointer; /* Change le curseur en main pour indiquer que c'est cliquable */
}

a:hover .arrow {
  transform: translateX(
    15px
  ); /* Déplace l'élément de 10 pixels vers la droite */
}

.mouvement-right {
  /* Assurez-vous que l'élément a une classe ou un id pour le cibler */
  transition: transform 0.5s ease; /* Animation sur 0.5 seconde */
  cursor: pointer; /* Change le curseur en main pour indiquer que c'est cliquable */
}

.mouvement-right:hover {
  transform: translateX(
    15px
  ); /* Déplace l'élément de 10 pixels vers la droite */
}

.effet-chiffre {
  background-color: white;
  color: #5a9fdf;
  border-radius: 100%;
  padding: 5px 12px;
}

.effet-chiffre2 {
  background-color: #5a9fdf;
  color: white;
  border-radius: 100%;
  padding: 5px 12px;
}

/* MEDIA QUERIES */

@media screen and (max-width: 800px) {
  #fd-column800 {
    flex-direction: column;
  }
  #fs-titre-accueil {
    font-size: 25px;
    line-height: 30px;
  }

  #padding-left0 {
    padding-top: 0px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 0px;
    text-align: center;
    width: 80%;
  }
  #image-ux {
    width: 30vw;
  }
  #fs14px {
    font-size: 14px;
    gap: 10px;
  }

  #w15px {
    width: 15px;
  }
  #image-comparatif {
    width: 80vw;
  }
  #fd-column-articles {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
  }
  #w-80 {
    width: 80%;
  }

  .cta-bgblanc {
    font-size: 12px;
    padding: 5px 10px;
    margin-left: -140px;
  }

  .cta-bgbleu {
    font-size: 15px;
    text-align: center;
    padding: 10px 10px;
  }

  #fs-titre {
    font-size: 25px;
    text-align: center;
  }

  #d-block {
    display: block;
  }

  #no-mb150px {
    margin-bottom: 50px;
  }

  #padding-top {
    padding-top: 0px;
  }

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

  .faq-item .question:hover + .reponse {
    max-height: 500px; /* Ajustez en fonction de la hauteur de votre contenu */
    opacity: 1;
    transform: translateY(0px); /* Retour à la position originale */
  }

  div p {
    text-align: center;
  }

  #vw-image {
    width: 30vw;
  }
}

@media screen and (max-width: 1000px) {
  #pt-main {
    padding-top: 80px;
  }

  #padding-bot0 {
    padding-bottom: 15px;
  }

  #pt14px {
    padding-top: 14px;
  }

  #fs-titre {
    font-size: 25px;
    text-align: center;
  }

  #fs-titre2 {
    font-size: 35px;
    text-align: center;
  }

  .fs30px {
    font-size: 15px;
  }

  #fs-navigation {
    font-size: 10px;
    text-align: center;
  }

  #pt-main {
    padding: 42px 0px 3px 0px;
  }

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

  #taille-image-article-resp {
    width: 25vw;
  }

  #ta-center {
    text-align: center;
    margin: auto;
    margin-bottom: 100px;
  }

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

@media screen and (max-width: 650px) {
  #resp-description {
    font-size: 10px;
    overflow: hidden;
  }

  #resp-titre-article {
    font-size: 14px;
  }
}

@media screen and (max-width: 500px) {
  #pt-main {
    padding: 32px 0px 3px 0px;
  }

  #font-size18px {
    font-size: 10px;
    text-align: center;
  }

  #fd-column500 {
    flex-direction: column;
    gap: 0px;
    font-size: 25px;
    text-align: center;
    margin-top: 50px;
  }

  #no-m-6 {
    margin: 0;
  }

  #fs15px {
    font-size: 15px;
  }

  #fs12px {
    font-size: 12px;
  }
}