* {
  margin: 0;
  padding: 0;
}
html {
  font-size: 14px;
}

.sectionAbout {
  display: block;
  padding: 4rem 1em;
  background-color: #ffffff;
}
.img_about {
  width: 100%;
}
.img_about img {
  width: 100%;
}
.aPropos {
  padding: 1em 0em;
}
.aPropos h1 {
  color: #17518f;
  margin-bottom: 0.5em;
  font-size:clamp(0.3rem, 10vw, 2rem);
}
.aPropos p {
  font-size: clamp(0.1rem, 3.8vw, 1.5rem);
  margin-bottom: 0.5em;
}
.hidden{
  display:none;
}

.btn_text_about {
  background-color: transparent;
  border: none;
  outline: none;
  font-size: clamp(0.1rem, 3.4vw, 1.3rem);
  color: #000000;
  font-weight: bold;
  cursor: pointer;
}
.nousChoisir h2 {
  margin-bottom: 0.7em;
  
  color: #d80202;
  font-size:clamp(0.3rem, 10vw, 2rem);
}
.cards {
  display:flex;
  flex-direction: column;
  gap: 20px;
}
.card {
  border-bottom: 2px solid #17518f;
  transition: 0.3s;
  backdrop-filter: blur(10px);
}
.card h3 {
  margin-bottom: 10px;
  color: #0d1b2a;
  font-size: clamp(0.3rem, 6vw, 1.5rem);
}
.card p {
  font-size: clamp(0.1rem, 4vw, 1.3rem);
  color: #272727;
}
.svg svg {
  width: 3rem;
  color: #4da3ff;
}

@media screen and (min-width : 800px) {
  .sectionAbout {
    display: flex;
    gap: 5px;
    padding: 10rem 1em;
  }
  .img_about {
    flex: 1 0 50%;
  }
  .img_about img {
    width: 100%;
  }
  .aPropos {
    padding: 0 1rem;
  }
  .aPropos h1 {
    margin-bottom: 0.5em;
  }
  .nousChoisir {
    padding: 4rem 1em;
  }
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
  }
  .card {
    padding: 0.5em;
  }

  .card h3 {
    margin-bottom: 10px;
    color: #0d1b2a;
  }
  .card p {
    color: #272727;
  }
}