main{
  background-color: rgb(36,36,36);
  color: rgba(255,255,255,.79);
  padding-bottom: 100px;
  padding-left: 40px;
  padding-right: 40px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;  
}
h1.titre{
  padding-top: 40px;
  font-weight: 600;
  font-size: 36px;
}
.track{
  padding-top: 40px;
  display: flex;
  justify-content: center;
  gap: 20px;
}
.slide{
  background-color: rgb(48,48,48);
  box-shadow: 1px 1px 10px rgb(61, 61, 61);
  border: 1px solid #eeeeee28;
  border-radius: 8px;
  padding: 30px;
  filter: brightness(.5);
  transition: all ease .3s;
  flex-basis: 25%;
  display: flex;
  flex-direction: column;
}
.slide.active{
  filter: brightness(1);
}
.slide:hover:not(.active),.slide:focus:not(.active){
  filter: brightness(.75);
}

.slide__titre{
  padding-bottom: 20px;
  font-weight: 600;
  font-size: 26px;
}

.description{
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 16px;
  line-height: 1.6;

}
.description p{
  line-height: 1.6;
}
.description p:first-child{
  font-weight: 700;
  font-size: 18px;
  color: var(--couleur-surMesure);
}
.cta-diagnostic{
  /* margin-top: 30px;
  margin-bottom: 30px; */
  display:flex;
  justify-content: center;
  align-items: end;
  height: 100%;
}
.cta-diagnostic .ctaDebrief{
  font-size: 1.8rem;
  font-weight: 600;
  text-align: center;
  color: #000;
  background-color: #eee;
  box-shadow: 0px 1px 3px #000;
  border-radius: 30px;
  padding: 8px 16px;
}
.cta-diagnostic .ctaDebrief:hover{
  filter:brightness(.9)
}

@media screen and (max-width:1280px) {
  main{
    padding-left: 20px;
    padding-right: 20px;
  }
  .slide{
    flex-basis: unset;
  }
  .slide:not(.active){
    display:none;
  }
  .slide__titre{
    font-size: 2.2rem;
  }
  .description{
        color: rgba(255,255,255,.9);
  }

}



@media screen and (max-width: 1300px)  {
  .track{
    flex-wrap: wrap;
  }
  .slide{
    flex-basis: 44%;
  }
}

@media screen and (max-width: 950px){
  h1.titre{
    font-size: 30px;
  }
  .track{
    flex-direction:column;
  }
  .slide{
    flex-basis: 90%;
  }
}

@media screen and (max-width: 950px) and (orientation: portrait){
  .slide{
    display: none;
  }
  .slide.active{
    display: flex;
  }
}


@media screen and (max-width: 450px){
  h1.titre{
    font-size: 24px;
  }
  .slide__titre{
    font-size: 2rem;
  }
  .description p:first-child{

    font-size: 1.8rem;
  }
}