/**************
* CAS CLIENTS *
**************/

.main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 1rem;
    padding: 4rem 10%;
    padding-bottom: 0;
}
/* Reponsive desktop */
@media screen and ( min-width:1280px ) {
    .main{
        margin-top: 15vh;
        position: relative;
        padding: 4rem 15%;
    }
	.main p{
		max-width: 600px;
		position: relative;
    	left: 50%;
    	transform: translateX(-50%);
	}
}


/* Références */
.references {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
    position: relative;
    gap: 2rem;
}
.reference {
	position:relative;
	width: 100%;
}
.reference__photo {
    height: 500px;
    transition: opacity 0.3s;
	object-fit: cover;
	width: 100%;
	max-height: initial;
}
.reference__titre{
	color: var(--primaire);
}
.reference__infos {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    width: 100%;
    gap: 1rem;
}
.reference__logo{
    max-height: 4rem;
    max-width: 6rem;
}
.reference:hover .reference__photo {
    opacity: 0.2; 
}
.reference:hover .reference__infos {
    opacity: 1;
}
/* Reponsive tablettes */
@media screen and ( min-width:750px ) {
    .reference{
        width: 45%;
        display: flex;
        justify-content: flex-end;
    }
	.reference__photo {
		width: 400px;
        height: 600px;
	}
	.reference__infos { 
		padding: 2rem;
	}
    .references .reference:nth-child(even){
        justify-content: flex-start;
    }
    .reference:nth-child(odd) .reference__infos{
        max-width: 400px;
        max-height: 600px;
        top: 50%;
        left: initial;
        right: 0;
        transform: translate(0%, -50%);
    }
    .reference:nth-child(even) .reference__infos{
        max-width: 400px;
        max-height: 600px;
        top: 50%;
        right: initial;
        left: 0;
        transform: translate(0%, -60%);
    }
	.reference__logo{
		max-height: 5rem;
		max-width: 8rem;
	}
}
/* Reponsive desktop */
@media screen and ( min-width:1200px ) {
    .references{
        position: relative;
    }
    .references::before{
        position: absolute;
        content: url(../images/design/elements-graphiques/flat-lay-uncooked-spaghetti-penne-parmesan-with-copy-space.png);
        left: 0;
        top: -15rem;
        transform: scale(.7);
    }
    .references {
        gap: 4rem;
    }
    .references > .btn{
        position: absolute;
        left: calc(50% + 8rem);
        transform: translateX(-50%);
        bottom: 0;
    }
}
@media screen and ( min-width:1400px ) {
    .references::before{
        transform: scale(1);
    }
}



/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 4rem;
}
.pagination .page-numbers:not(.next, .prev) {
    padding: 0.5rem .75rem;
    margin: 0 0.25rem;
    color: var(--primaire);
    text-decoration: none;
    border-radius: 3px;
    border: 1px solid var(--primaire);
	min-width: 2.5rem;
	text-align: center;
}
.pagination .page-numbers:not(.next, .prev):hover {
    background-color: var(--primaire);
    color: var(--blanc);
}
.pagination .page-numbers:not(.next, .prev).current{
    background-color: var(--primaire);
    color: var(--blanc);
}
.pagination .prev,
.pagination .next {
    color: var(--primaire);
    margin: 0 0.5rem;
}
/* Responsive desktop */
@media screen and ( min-width:1000px ) {
    .pagination .page-numbers:not(.next, .prev)  {
        margin: 0 0.5rem;
    }
    .pagination .prev,
    .pagination .next {
        margin: 0 1rem;
    }
}