@import '../components/cart.css';

header .nav-links a:nth-child(2){
    position:relative;
}

header .nav-links a:nth-child(2)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background-color: var(--color-main);
}

header .nav-links a:nth-child(2):hover::after {
    background-color: var(--color-second);
}

section{
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
	height:76vh;
	gap:var(--spacing-medium-w);
}

/*GAUCHE -----------------------------*/
/*------------------------------------*/

section .left-top-colmun {
	width:40%;
	height:100%;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
}

section .left-top-colmun .carousel{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    height:100%;
    width:100%;
    align-items: center;
    overflow: hidden;
    cursor: pointer;  
}

section .left-top-colmun .bloc-image{
	min-width:100%;
	min-height:100%;
	position:relative;
	overflow: hidden;
	display: flex;
  	flex-direction: row;
  	transform: translate(0, 0);
  	transition: transform 0.4s ease;
}

section .left-top-colmun .bloc-image img{
	min-width:100%;
	min-height:100%;
	object-fit: cover;
	position:relative;
}


.carousel-button {
    position: absolute;
    top: 50%;
    height:100%;
    transform: translateY(-50%);
    font-size: var(--text-big-d);
    padding: 0.5rem 1rem;
    z-index: 3;
    border: none;
    background-color: transparent;
    color:var(--color-main);
    cursor: pointer;
}

.carousel-button.next {
    right: 0px;
}

section .left-top-colmun .bloc-credit {
	margin-top:1vh;
}

/*DROITE -----------------------------*/
/*------------------------------------*/

section .right-bottom-colmun {
	width:66%;
	height:98%;
}

.multi-colonnes{
 	column-count: 4;
  	column-gap: var(--spacing-medium-w);
  	column-fill: auto; 
}

.multi-colonnes div{
  	margin-bottom:var(--spacing-big-h);
   /*break-inside: avoid;*/
}

.multi-colonnes div p, .multi-colonnes div ul{
    orphans: 4;
  	widows: 3;
  	margin-bottom:var(--spacing-small-h);
}

.multi-colonnes div ul li{
	list-style: inside;
  	margin-bottom:var(--spacing-small-h);
}



@media screen and (min-width: 1350px) {


	.multi-colonnes div{
	   break-inside: avoid;
	}

	.multi-colonnes div:nth-child(4){
	  	height:100%;
	   break-inside: avoid;

	}	
}


@media (min-width: 1081px) and (max-width: 1349px) {

    .multi-colonnes{
      column-count: 2;
    }

}


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

	button:active, button:focus{
        outline:none;
        border:none;
        -webkit-tap-highlight-color: transparent; 
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
        -webkit-touch-callout: none; 
    }

    .content {
        height: auto;
        min-height: calc(var(--real-vh, 1vh) * 100);
    }

}

@media screen and (max-width: 768px) {
	header .nav-links a:nth-child(2)::after {
	    height: 0px;
	}

	header .nav-links a:nth-child(2) {
	    color:var(--color-second);
	}

	section{
    	width:calc(100vw - 5vw);
    	padding: 4vh 2.5vw;
    	overflow: hidden;
    	display:flex;
		flex-direction:column;
		justify-content:space-between;
		height:auto;
    	font-family: 'Akkurat-Normal', sans-serif;
    }

    section .left-top-colmun {
    	width:100%;
    	height: calc(var(--real-vh, 1vh) * 60);
    }

    section .left-top-colmun .carousel {
    	height:100%;
	    width:100%;
	    position: relative;
    }

    section .left-top-colmun .carousel .bloc-image{
		width:100%;
		min-height:100%;
		object-fit: cover;
	}

	section .left-top-colmun .carousel .bloc-image img{
		width:100%;
		min-height:100%;
		object-fit: cover;
	}

	section .right-bottom-colmun {
		width:100%;
		margin-top:var(--spacing-big-h);
		margin-bottom:var(--spacing-big-h);
	}

    .multi-colonnes{
      column-count: 1;
      height:auto;
      width:calc(100vw - 5vw);
      column-gap: 0;
    }

}

@media (min-width: 769px) and (max-width: 1080px) {

	section{
    	width:calc(100vw - 5vw);
    	padding: 4vh 2.5vw;
    	overflow: hidden;
    	display:flex;
		flex-direction:row;
		justify-content:flex-start;
		height:auto;
    	font-family: 'Akkurat-Light', sans-serif;
    }

    .multi-colonnes{
      column-count: 2;
      height:auto;
      column-fill: balance;
      width:calc(100vw - 5vw);
      column-gap: var(--spacing-medium-w);
    }

}