/******************************************SECTION 1***************************************/
.section1{
    margin-top: 20vh;
    width: 100vw;
    display: flex;
    gap: 4vw;
}

.section1 .choix{
    width: 25vw;
    height: 80vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

.section1 .choix button{
    position: relative;
    overflow: visible;
    padding: 10px; box-sizing: border-box;
    width: 100%;
    height: calc(80vh / 9);
    border-radius: 0;
    background-color: rgb(14, 93, 167);
    cursor: pointer;
    text-align: start;
    border: 1px solid white; border-left: none;
    font-size: 1.4vw; color: white; text-shadow: 0 0 5px rgba(0,0,0,0.5); font-family: "Montserrat", "sans-serif";
    transition: all .5s ease-in-out;
}

.section1 .choix button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background-color: #0073e6;
  transition: width 0.4s ease;
  z-index: -1; /* en dessous du texte */
}

.section1 .choix button:hover{
    z-index: 2;
    background-color: rgb(111, 186, 255);
}

.section1 .affichages{
    width: 70vw;
    border: 2px solid #f0f0f0; border-radius: 4px;
    box-sizing: border-box;
    padding: 10px;
    position: relative;
    margin-bottom: 10vh;
}

.section1 .affichages .affichage{
    display: none;
    flex-direction: column;
    width: 100%;
    opacity: 0;
    transition: all .5s ease-in-out;
}

.section1 .affichages .affichage h1{
    text-decoration: underline;
    text-decoration-color: linear-gradient(to right, #00c6ff, #3a7bd5, #7b42f6);
    text-underline-offset: 2vh;
    text-decoration-thickness: 2px;
}



.section1 .affichages .affichage p{
   color: #222;
    margin-top: 7vh;
    font-size:1.2vw;
}

.section1 .affichages .affichage p span{
   font-weight: 700;
}

.section1 .affichages .affichage h2{
    margin-top: 7vh;
    margin-bottom: 7vh;
}

.section1 .affichages .affichage div{
    display: flex;
    gap: 4vw;
    flex-wrap: wrap;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
}

.section1 .affichages .affichage div p{
    margin-top: 0;
     background: linear-gradient(to right, #00c6ff, #3a7bd5, #7b42f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.4vw;
  font-weight: 700;
}

.section1 .affichages .affichage div p span{
  font-weight: 400;
}
.affichage_active{
    display: flex !important;
    opacity: 1 !important;
    transition: all .5s ease-in-out !important;
}

.button_active{
    z-index: 2 !important;
    background-color: rgb(111, 186, 255) !important;
}

.button_active::before{
    width: 28vw !important;
  border-top-right-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
}

.section1 .affichages .affichage h3{
    margin-top: 7vh;
     background: linear-gradient(to right, #00c6ff, #3a7bd5, #7b42f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.8vw;
  font-weight: 700;
}