.slider-regles {
    width: 100%;
    
    border-radius: 20px;
    padding-bottom: 20px;
    
    align-items: center;
    display: flex;
    flex-direction: column;
    background-image: url('/img/motif_fond.svg');
  background-repeat: repeat;
  background-position: top;
  background-size: auto 400px;
}


.question-box {
    display: block;
    cursor: pointer;
    background-color: var(--alternate-color);
    padding: 10px 20px;
    border-radius: 7px;
    margin-top: 20px;
    width:80%;
    max-width:800px;
}

.question-box h1 {
    color: white;
    font-size: 1.3rem;
    position: relative;
    padding-left: 30px;
   
    align-items: center;
}

.question-box h1::before {
    content: " ";
    display: inline-block;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid currentColor;
    vertical-align: middle;
    
   /* top: 5px;*/
    left: 5px;
    position: absolute;
    transition: transform 0.3s ease-out;
}

.question-box.open h1::before {
    transform: rotate(90deg) translateX(3px);
}

.question-box.open {
    border-radius: 7px 7px 0 0;
    background-color: var(--alternate-color);
}

.question-box-developped {
    position: relative;
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s ease-out;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 0 0 7px 7px;
    font-size: 18px;
    font-weight: 500;
    padding: 0px;
    background-color: var(--main-color);
    width:80%;
    max-width:800px;

}

.question-box-developped p {
    padding: 10px;
    margin: 0;
    line-height: 26px;
}

.question-box-developped a {
    font-weight: bold;
    color: var(--alternate-color);
    text-decoration: underline;
}
.question-box-developped.open {
    max-height: max-content;
  
    padding: 20px;
    color: var(--secondary-color);
}



@media only screen and (max-width: 768px) {
    .topPage {
        height: 20vh;
    }

    .topPage .logo {
        bottom: 5px;
        left: 20px;
        width: 50%;
    }
    .question-box-developped{
        font-size: 0.85rem;
        line-height: 0.85rem;
    }
    .question-box h1::before {
        content: " ";
        display: inline-block;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-left: 8px solid currentColor;
        vertical-align: middle;
        
       /* top: 5px;*/
        left: 5px;
        position: absolute;
        transition: transform 0.3s ease-out;
    }
    .question-box.open h1::before {
        transform: rotate(90deg) translateX(1px);
    }
    .question-box h1{
        font-size: 0.90rem;
        padding-left: 25px;
    }
    .logo img {
        max-width: 100%;
    }

    .page {
        top: 20vh;
    }

    .slider-content img {
        max-width: 100%;
    }

    .titles {
        margin: 20px;
    }

    .headline h1 {
        font-size: 1.5em;
    }

    .menu-slider-option {
        font-size: 0.8rem;
        padding: 2px 5px;
    }

    .slider-regles {
        width: 100%;
        margin: auto;
    }

    .bouton {
        bottom: -15px;
    }

    .boutonclick {
        font-size: 12px;
        padding: 5px 10px;
    }
}