/* grid flex */

/* 
 * Box home
 */ 

 .autre-projet{
    width: 100%;
}

 .box-container {
	display:grid;
	grid-template-columns: repeat(2, 3fr);
	grid-gap: 40px;
    padding: 0px 40px 0px 40px;
	margin-bottom: 40px;
}

.box-container .box {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 5px;
}

.box-container .box:before {
    content: '';
    display: block;
    height: 0;
    padding-bottom: 70%;
}

.box-container a {

}

    .box-container .box .box__logo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-height: 200px;
        text-align: center;
        color: #fff;
        max-width: 200px;
        }

.box__logo {
-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;

}

.box__logo:hover {
-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

.box-shop {
    position: absolute;
    z-index: 1;
    margin: 35px;
    border: 0px solid #000;
    right: 0px;
    height: 62px;
    width: 62px;
    display: table;
    border-radius: 100px;

    /* Dégradé Pétrole Subtile - Tons Nacre et Champagne */
    background: linear-gradient(
        135deg, 
        #f5efef 0%,   /* Blanc poudré */
        #e0eafc 25%,  /* Bleu givré très léger */
        #fff9f2 50%,  /* Champagne nacré */
        #f3e7ff 75%,  /* Lavande évanescente */
        #f5efef 100%
    );
    background-size: 200% 200%;
    
    /* Animation fluide du reflet */
    animation: pastelOil 18s ease-in-out infinite; /* Ralenti pour plus de douceur */
}

/* Animation douce pour le mouvement des couleurs */
@keyframes pastelOil {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.box-shop p {
color: #111;
text-align: center;
vertical-align: middle;
display: table-cell;
font-weight: 800;
font-size: 13px;
line-height: 15px;
}

/* 
 * Box photo
 */ 

 .box-container-photo {
    display: grid;
    grid-template-columns: repeat(2, 3fr);
    grid-gap: 40px;
    padding: 0px;
    margin-bottom: 40px;
    margin-left: 40px;
    margin-right: 40px;
}

.box-container-photo a {

}

.box-gallery-content{
    position: relative;
    height: calc(33vw);
}

.box-content-photo {
    width: 100%;
    transition: opacity 1s ease-in-out;
    opacity: 0;
    position: relative;
}

.box-gallery{
    position: relative;
    height: calc(36vw);
    width: 100%;

}

.box-titre {

}

.box-titre p {
margin: 0;
padding-top: 13px;
padding-bottom: 0px;
padding-left: 0px;
font-size: 14px;
line-height: 20px;
color: #111;
}

.box-titre span {  
    font-weight: 500;
}