/* =====================================================
   PAGE EQUIPE - SQE SERVICES
===================================================== */


/* ================================
   CONTENEUR EQUIPE
================================ */


.equipe-section{

    width:78%;
    margin:0 auto 55px auto;

}



.equipe-card{

    background:white;
    border-radius:18px;
    padding:35px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);

}



.equipe-card p{

    font-size:17px;
    line-height:1.8;
    margin-bottom:20px;

}



/* ================================
   CONTENEUR DES PHOTOS
================================ */

.prem{

    width:78%;
    max-width:78%;

    margin:0 auto;

    overflow:hidden;

}


/* ================================
   GRILLE EQUIPE
================================ */


.equipe-grid{

    width:78%;
    max-width:1200px;

    margin:0 auto;

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:40px;

}



/* ================================
   CARTE COLLABORATEUR
================================ */


.box {

    width:100%;
    max-width:100%;
    min-width:0;

    background:white;

    border:1px solid #ccc;

    border-radius:8px;

    overflow:hidden;

    position:relative;
	
	transition:
    transform .3s ease,
    box-shadow .3s ease;

}

.equipe-grid,
.equipe-grid > .box {

    min-width:0;

}

.box:hover{

    transform:translateY(-5px);

    box-shadow:0 5px 15px rgba(0,0,0,.1);

}

.box:hover img{

    transform:scale(1.05);

}

/* ================================
   PHOTO
================================ */

.box img {

    width:100%;
    height:320px;
    object-fit:cover;
    display:block;
	transition:transform .35s ease;
}



/* ================================
   SURVOL
================================ */


.info{

    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    padding:25px;

    text-align:center;
    color:white;

    background:rgba(25,35,45,.38);

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

    border:1px solid rgba(255,255,255,.18);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18);

    opacity:0;

    transition:
        opacity .35s ease,
        backdrop-filter .35s ease;

}



.box:hover .info{

    opacity:1;

}



.info h3{

    font-size:22px;
    margin-bottom:12px;
    color:#fff;

}



.info p{

    font-family:Palatino, "URW Palladio L", serif;

    font-size:17px;

	color:rgba(255,255,255,.95);

    line-height:1.7;

    overflow-wrap:break-word;

}



/* ================================
   NOM
================================ */


.nom{

    background:#f0f0f0;

    text-align:center;

    padding:15px;

    font-size:18px;

    border-radius:0 0 8px 8px;

    overflow-wrap:break-word;

}



/* ================================
   RESPONSIVE
================================ */


@media(max-width:1000px){

    .prem{

        width:92%;
        max-width:92%;

    }


    .equipe-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

        gap:30px;

    }

}



@media(max-width:768px){

    .prem{

        width:92%;
        max-width:92%;

    }


    .equipe-grid{

        grid-template-columns:1fr;

        gap:25px;

    }


    .box{

        max-width:350px;
        margin:auto;

    }


    .box img{

        height:280px;
        aspect-ratio:auto;
        object-fit:cover;

    }


}