@import '../page-structure.css';

h1 {
    font-family: "Montserrat", sans-serif;
    text-align: center;
}

.poignee{
    display: flex;
    flex-grow:1;  
    background-color: rgb(0,0,0,0.5);
    margin:0% 0; 
    flex-direction: column;
    border-top: 5px solid var(--main-color);  
    border-bottom: 5px solid var(--main-color); 
}

.poignee>img{
    text-align: center;    
    margin:auto; 
    width:50vw;
}

.metier{
    padding: 15px;
    margin: 1.5% 3% 1% 3%;
    font-family: "Montserrat", sans-serif;
    background-color: rgb(0,0,0,0.5);
    border-radius: 5px;
    border-top: 5px solid var(--main-color);
    transition: 0.5s;
    position: relative;
    text-align: center;
    font-size: 3.7vh;
}

.infometier{
    font-family: "Montserrat", sans-serif;
    background: var(--main-color-secondary);
    padding: 0px 15px;
    margin: 0 3.5%;
    max-height: 0;
    font-size:3vh ;
    overflow: hidden;
    z-index: 10;
    position: relative;
    opacity: 0;
    transition: .7s ease;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px; 
}

.metier:hover ~ .infometier{
    max-height: 500px;
    opacity: 1;
    padding: 15px;
}

@media only screen and (max-width:992px){

    div.poignee > img{
        width:100% 
    }

    .metier ~ .infometier{
        max-height: 500px;
        opacity: 1;
        padding: 15px;
    }
}