@keyframes Fade {
    0%{background-position:0% 9%}
    50%{background-position:100% 92%}
    100%{background-position:0% 9%}
}

@keyframes Fade {
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 0%}
}

section {
    margin: 0px 50px 20px;
    background-clip: padding-box;
    border: 15px;
    padding: 10px;
    border-style: solid;
    border-color:  #00e4d55d;
    background-color: #ffffffbb;
    text-align: justify;
    width: 100%;
}

section:last-of-type{
    margin-top: 20px;
}


div.questions {
    display:flex;
    border-bottom: 0.15vw solid white;
}

div.reponse {
    margin: 1vw 0vw;
    display:flex;
    flex-direction: column;
}


div.encadre {
    margin-bottom: 7mm;
}

div.encadre article {
    border: 5px ridge black;
    background-color: rgba(255,255,255, 0.5);
    padding: 0.8vw 0.5vw 0.8vw 0.5vw;
    margin-top: 1.05px;
    display: flex;
}

div#Preface>p {
    text-align: center;
    font-style: italic;
    font-weight: bold;
    font-size: larger;
    color: white;
}

#souligne{
    text-decoration: underline;
}


/*-----Collapsible-----*/

.accordeon > input[name="collapse"] {
    display: none;
  }

.accordeon .reponse {
    overflow: hidden;
    height:auto;
    max-height:0;
    transition: 0.4s;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
}

.accordeon h2 {
    width:100%;  
}

.accordeon label {
    color:black;
    cursor: pointer;
    padding: 10px;
    border-color:#00e4d55d;
    border-style: solid;
    background: #00c0b35d;
    display:block;
}

.accordeon label:hover {
    background: linear-gradient(180deg, #bee6e6, #3942c6);
    background-size: 600% 600%;
    animation: Fade 3s ease infinite;
    border-color: black;
}

.accordeon .question label:before {
    font-family: "Exo-Regular";
    font-size: larger;
    content: "\21EF";
    display: inline-block;
    margin-right: 10px;
    font-size: 1em;
    font-style: normal;
    line-height: 1.556em;
    vertical-align: middle;
    transition: 0.4s;
}

.accordeon > input[name="collapse"]:checked ~ .question label:before {
    transform: rotate(180deg);
    transform-origin: center;
    transition: 0.4s;
}

.accordeon > input[name="collapse"]:checked ~ .question label{
    background: linear-gradient(180deg, #bee6e6, #3942c6);
    background-size: 600% 600%;
    animation: Fade 3s ease infinite;
    border: black;
    border-style: solid;
}

.accordeon > input[name="collapse"]:checked ~ .reponse {
    max-height: none;
    transition: max-height 0.3s;
    border: black;
    border-style: solid;
    border-top: 0;

}

.accordeon .question {
    margin-bottom: 0;
}

div.reponse {
    margin-top: 0;
    border: 0;
    background-color: #ffffffbb;
}

div.reponse>p {
    padding: 1vw 1vw 1vw 1vw;
    text-align: justify;
    
}

.accordeon:last-of-type label{
    filter: saturate(0);
    font-style: italic;
    border-color: rgb(75, 75, 75);
}

ul li:last-child{
    border-top: 1mm ridge black;
    padding-top: 1vw;
    font-size: larger;
    font-style: italic; 
}


@media(max-width:768px){
    section {
        background-clip: padding-box;
        border: 15px;
        padding: 10px;
        border-style: none;
        background-color: #ffffff00;
        text-align: justify;
        width: 100%;
        width: auto;
        margin:0px 0px 20px;
    }
}