.content-logiciels{
    max-width:1200px;
    margin:0 auto;
}

.content-logiciels ul{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.content-logiciels ul li{
    flex: 0 0 46%;
    margin:0 2%;
    margin-bottom:80px;
}


.content-logiciels ul li a{
    height:500px;
    display:flex;
    flex-direction:column;
    color:#36413E;
    font-size:1.5em;
}

.content-logiciels ul li a figure{
    height:600px;
    display:flex;
    justify-content: center;
    align-items:center;
    overflow:hidden;
}

.content-logiciels ul li a figure img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.content-logiciels ul li a h3{
    height:80px;
    display:flex;
    justify-content: center;
    align-items:center;
    padding: 0px 20px;
    text-align: center;
    margin-top:40px;
    font-weight: 700;
    font-family: 'Avenir LT Pro Black';
    color:#28A8D9;
    font-size:1em;
    text-transform:uppercase;
}

.content-logiciels ul li a span{
    margin:0px;
    font-size:0.65em;
    font-weight:400;
    text-align:center;
    padding: 0px 20px;
    color:#000;
}



/* ====================================================== */
/* ======== MEDIAQUERIES ================================ */
/* ====================================================== */

@media screen and (min-width: 1160px) and (max-width: 1440px) {
    .content-logiciels{width:90%;margin:0 auto;}
 }
 
 @media screen and (min-width: 900px) and (max-width: 1159px) {
    .page-main-container h1{max-width:80%;}
    .page-main-container p{max-width:70%;font-size:0.9em;}

    .content-logiciels{width:96%;margin:0 auto;}
 }
 
 @media screen and (min-width: 769px) and (max-width: 899px) {
    .page-main-container h1{max-width:80%;}
    .page-main-container p{max-width:70%;font-size:0.9em;}

    .content-logiciels{width:90%;margin:0 auto;grid-template-columns: repeat(2, 1fr);grid-gap: 50px;}
    .content-logiciels ul li a{height:400px;font-size: 1.25em;}
    .content-logiciels ul li a figure{height:300px;}
}
 
 @media screen and (min-width: 600px) and (max-width: 768px) {
    .page-main-container h1{max-width:92%;}
    .page-main-container p{max-width:80%;font-size:0.9em;}

    .content-logiciels{width:70%;margin:0 auto;grid-template-columns: repeat(2, 1fr);grid-gap: 50px;}
    .content-logiciels ul li{flex: 0 0 100%;margin:0 auto;margin-bottom:70px;}
 }
 
 @media screen and (min-width: 480px) and (max-width: 599px) {
    .page-main-container h1{max-width:80%;font-size:1.75em;}
    .page-main-container p{max-width:70%;font-size:0.8em;}

    .content-logiciels{width:90%;margin:0 auto;grid-template-columns: repeat(2, 1fr);grid-gap: 30px;}
    .content-logiciels ul li{flex: 0 0 100%;margin:0 auto;margin-bottom:70px;}
 }
 
 @media screen and (min-width: 320px) and (max-width: 479px) {
    .page-main-container h1{max-width:92%;font-size:1.5em;}
    .page-main-container p{max-width:80%;font-size:0.8em;}

    .content-logiciels{width:80%;margin:0 auto;grid-template-columns: repeat(1, 1fr);grid-gap: 50px;}
    .content-logiciels ul li{flex: 0 0 100%;margin:0 auto;margin-bottom:70px;}
    .content-logiciels ul li a{height:400px;font-size: 1.25em;}
    .content-logiciels ul li a figure{height:300px;}
 }
 
 @media screen and (max-width: 319px) {
    .page-main-container h1{max-width:92%;font-size:1.5em;}
    .page-main-container p{max-width:80%;font-size:0.8em;}

    .content-logiciels{width:80%;margin:0 auto;grid-template-columns: repeat(1, 1fr);grid-gap: 50px;}
    .content-logiciels ul li{flex: 0 0 100%;margin:0 auto;margin-bottom:70px;}
    .content-logiciels ul li a{height:350px;font-size: 1.1em;}
    .content-logiciels ul li a figure{height:250px;}
 }