/* CSS de la page de la page index.html.twig du dossier tournées */

#comedien{
    display: flex;
    flex-wrap: wrap;
    margin-left: 5%;
}
#comediens{
    width: 22%;
    margin: 5%;
    overflow:hidden;
}
.titre_troupe{
    text-align: center;
    color : #b49761;
    font-size: 40px;
    font-family: sans-serif;
    background-image: url(../img/troupe.jpg);
    background-size: inherit;
    padding: 120px;
    background-color: black;
    background-repeat: no-repeat;
    background-position-x: center;
}
#comediens img{
    width: 95%;
    height: 253px;
    object-fit: cover;
}
#comediens:hover{

    border: 1px solid #b49761;
    border-radius: 16% 0%;
    overflow:hidden;
    filter: brightness(0.5);

/* border-bottom: 50px solid green;
   border-left  : 25px solid transparent; 
   border-right : 25px solid transparent;
   height : 0;
   width  : 50px

  */

}
#comediens img:hover{
    transform: scale(1.2);
    transition: .3s ease-in-out;
    border: 1px solid rgb(202, 30, 30);
    border-radius: 16% 0%;
    filter: none;
}
#comediens h2{
    padding: 10px 0 10px 0;
    text-align: center;
}
.photo-troupe{
    width: 100%;
    overflow: hidden;
}

.nom a{
    text-decoration: none;
}

.nom a h2{
    color: black;
}
.collaborateurs{
    width: 100%;
    margin: 10px auto 50px auto;
}
.collaborateurs h2{
    font-size: 30px;
    padding: 30px 0 50px 0;
    color: #b49761;
    text-align: center;
}
.collaborateurs span{
    font-size: 18px;
    font-weight: bold;
    padding-bottom: 5px;
}

.collaborateurs p {
    padding: 10px 0;
}
.collaborateurs .para{
    width: 100%;
    display: flex;
    margin: 0 auto;
    align-items: flex-start;
    justify-content: center;
}
.para .div-para{
    width: 30%;
    margin: 0 40px;
}
.block_resp{
    display: none;
}
@media all and (max-width: 860px){

    .header_logo{
        width: 60%;
    }
    #comedien{
        flex-direction: column;
    }
    #comediens{
        width: 86%;
    }

    #comediens img{
        height: auto;
        object-fit: cover;
        width: 82%;
    }

    #comediens:hover{
        border: none;
        border-radius: none;
        overflow: visible;   
    }

    #comediens img:hover{
        transform: none;
        transition: .3s ease-in-out;
        border: none;
        border-radius: 0;
        filter: none;
    }

    .titre_troupe{
        background-size: cover;
      }
    .photo-troupe{
        text-align: center;
    }

    .collaborateurs span{
        font-size: 15px;
    }

    .collaborateurs .para{
        width: 98%;
        font-size: 12px;
        margin: 0 0 0 2%;
        flex-wrap: wrap;
    }
    .para .div-para{
        width: 38%;
        margin: 0 0;
    }
    .none_resp{
        display: none;
    }
    .block_resp{
        display: block;
    }
}