/* FAQ */
#ctn_faq{
    width: 90%;
}
.avweb_faq::after{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .6;
    background: url(../img/bgbleufaq.svg) no-repeat bottom right;
    background-size: contain;
    background-attachment: fixed;
    z-index: -1;
}
/* .avweb_faq div:first-child{
   flex-grow: 1;
   width: 25%;
} */
.avweb_faq div:first-child h2{
   font-size: 2.5rem; 
}
/* .avweb_faq div:last-child{
   flex-grow: 2; 
} */
summary{
    font-size: 1.5rem;
    width: 100%;
    padding:15px;
    cursor: pointer;
    cursor: pointer;
    transition: 150ms ease-out;
}
/* details{
    background-color: #d9d9d956;
} */
details:hover{
 background-color: var(--color2);
}
details:hover summary{
 color: var(--color7);
}
details[open]{
    background-color: initial;
    padding-bottom: var(--pad-h);  
    background: var(--color7);
    /* box-shadow: 0 0 5px var(--color2); */
    animation: shadow 4s linear infinite;
}
details[open] summary {
    margin-bottom: 30px;
    color: var(--color1);
}
details[open]:hover summary {
    color: var(--color1);
}
details{
    
    margin: 10px 0;
}
summary::after,details[open] summary::after{
    padding:10px;
    opacity: 1;
    transition: all .3s;
    width: 45px;
}
summary::after,details[open] summary::after{
    content:'';
    background: url(../img/fleche_faq.webp) no-repeat center;
    background-size: 100%;
    transform: rotate(270deg);
    width: 50px;
}
details[open] summary::after {
    transform: rotate(90deg);
}
details[open] summary:hover::after,summary:hover::after {
    cursor: pointer;
}
details p{
    padding: 5px 5%;
}
.content_reponse{
    padding: 0 10px;
}

.reponse_img img.paysage{
    width: 450px; 
}
.reponse_img img.portrait{
    width: 280px; 
}
.reponse_img,.reponse_video{
    margin: 15px 0; 
}
.reponse_video iframe{
    width: 350px; 
    height: 300px;
}

.avweb_faq div[role="button"]{
    padding-top: 50px;
}

/* fin FAQ */