/*SECTION ----------------------------*/
/*------------------------------------*/

section {
	display:flex;
	flex-direction: row;
	margin-top:6vh;
}

/* MAIN SECTION ----------------------*/
/*------------------------------------*/

section .main{
	width:78vw;
	height:94vh;
	overflow-y: scroll;
	overflow-x: hidden;

}

section .main::-webkit-scrollbar {
    width: 10px;
    background-color: var(--background-color-white);
    height:0px;
    border-left:1px solid black;
}

section .main::-webkit-scrollbar-thumb {
    width: 10px;
    background-color: var(--background-color-pink);
    border-radius: 0px;
    border:1px solid black;
    cursor:pointer;
}


.bloc-item{
	width:100%;
	border-top:var(--border);
	display:flex;
	flex-direction:column;
	justify-content: space-between;
	background-color:var(--background-color-white);
	margin-bottom:10px;
}

.section-item:nth-child(1){
	border-bottom:var(--border);
}

.section-item{
	display:flex;
	width:100%;
}

.section-item .colonne{
	border-right:var(--border);
}

/* MAIN SECTION ----------------------*/
/* COLONNE #1 ------------------------*/

.section-item .colonne:nth-child(1){
	width:cacl(46vw - 1px);
	min-width:cacl(46vw - 1px);
	display:flex;
	flex-direction:column;
}

.section-item .colonne:nth-child(1) .row-1, 
.section-item .colonne:nth-child(1) .row-2,
.section-item .colonne:nth-child(1) .row-3{
	display:flex;
	flex-direction:row;
	height:auto;
}

.section-item .colonne:nth-child(1) .row-1 .left,
.section-item .colonne:nth-child(1) .row-2 .left,
.section-item .colonne:nth-child(1) .row-3 .left{
	width:2vw;
	min-width:2vw;
}

.section-item .colonne:nth-child(1) .row-1 .middle{
	width:5vw;
	min-width:5vw;
	padding:1.5vh 1vw 1.5vh 0vw;
}

.section-item .colonne:nth-child(1) .row-1 .middle span:nth-child(2){
	display: -webkit-box;
  	-webkit-line-clamp: 1; 
  	-webkit-box-orient: vertical;
  	overflow: hidden;
}

.section-item .colonne:nth-child(1) .row-1 .right{
	width:calc(36.5vw - 1px);
	min-width:calc(36.5vw - 1px);
	padding:1.5vh 1vw 0 0.5vw;
	display:flex;
	flex-direction:column;
	justify-content: flex-end;
	display: -webkit-box;
  	-webkit-line-clamp: 1; 
  	-webkit-box-orient: vertical;
  	overflow: hidden;
}


.section-item .colonne:nth-child(1) .row-2 .right{
	width:calc(42.5vw - 1px);
	min-width:calc(42.5vw - 1px);
	padding:1.5vh 1vw 0.5vh 0.5vw;
}

.section-item .colonne:nth-child(1) .row-3 .left{
	border-top:var(--border);
	height:auto;
}

.section-item .colonne:nth-child(1) .row-3 .right{
	border-top:var(--border);
	width:calc(36.5vw - 1px);
	min-width:calc(36.5vw - 1px);
	padding:1.5vh 1vw 1vh 6.5vw;
	height:auto;
}

.section-item .colonne:nth-child(1) .row-3 .right div{
	display:flex;
}

.section-item .colonne:nth-child(1) .row-3 .right div p:nth-child(2):before{
	content:"\00a0 |";
}


/* MAIN SECTION ----------------------*/
/* COLONNE #2 ------------------------*/

.section-item .colonne:nth-child(2){
	width:calc(17.5vw - 1px);
	min-width:calc(17.5vw - 1px);
	max-width:calc(17.5vw - 1px);
	padding:1.5vh 1vw 0;
	height:auto;
}

.section-item .colonne:nth-child(2) ul{
	list-style:none;
	padding:0;
	margin:0;
	color:inherit;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
}

.section-item .colonne:nth-child(2) li{
	border:1px solid;
	padding:0.5vh 0.5vh 0.2vh 0.5vh;
	margin-bottom:1.5vh;
	margin-right:1vw;
	width:auto;
    float:left;
    cursor:pointer;
    clear:left;
}

/* MAIN SECTION ----------------------*/
/* COLONNE #3 ------------------------*/

.section-item .colonne:nth-child(3){
	width:12.5vw;
	min-width:12.5vw;
	display:flex;
	height:auto;
}

.section-item .colonne:nth-child(3) .left{
	width:5.5vw;
	min-width:5.5vw;
	padding:1.5vh 1vw;
}

.section-item .colonne:nth-child(3) .left img{
	max-width:100%;
}

.section-item .colonne:nth-child(3) .right{
	width:3vw;
	min-width:3vw;
	padding:1.5vh 1vw;
	display:flex;
	flex-direction:column;
	font-size:var(--font-size-big);
}

.section-item .colonne:nth-child(3) .right a{
	font-size:var(--font-size-big);
}


/* MAIN SECTION ----------------------*/
/* OPINION ---------------------------*/

.section-item .row-4{
	display:flex;
	width:78vw;
	border-bottom:var(--border);
}

.section-item .row-4 .left{
	width:2vw;
	min-width:2vw;
}

.section-item .row-4 .right{
	display: flex;
	flex-direction: column;
}

.section-item .row-4 .right .opinion{
	display:none;
	width:calc(58.5vw - 1px);
	min-width:calc(58.5 - 1px);
	padding:0.5vh 1vw 1.5vh 6.5vw;
}


.section-item .row-4 .right .buttonOpinion{
	width:calc(71vw - 1px);
	min-width:calc(71vw - 1px);
	padding:0.5vh 1vw 0.5vh 6.5vw;
	cursor:pointer;
}



/* MENU SECTION ----------------------*/
/*------------------------------------*/

.menu{
	width:22vw;
	border-top:var(--border);
	border-left:var(--border);
	display:flex;
	flex-direction:column;
	background-color:var(--background-color-white);
	position: absolute;
	top:6vh;
	right:0;
	height:94vh;
	overflow:scroll;
}

section .menu::-webkit-scrollbar {
    width: 10px;
    background-color: var(--background-color-white);
    height:0px;
    border-left:1px solid black;
}

section .menu::-webkit-scrollbar-thumb {
    width: 10px;
    background-color: var(--background-color-pink);
    border-radius: 0px;
    border:1px solid black;
    cursor:pointer;
}

.bloc-preview{
	border-bottom:var(--border);
	display:flex;
	flex-direction:row;
	justify-content: space-between;
}

.bloc-preview a{
	width:17.5vw;
	padding:1vh 1vw 0vh 0.5vw;
	display: -webkit-box;
  	-webkit-line-clamp: 1; 
  	-webkit-box-orient: vertical;
  	overflow: hidden;
}

.bloc-preview div{
	width:4vw;
}


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

	.main{
		width:100vw !important; 
		border: 1px solid red;
	}

	.section-item .colonne:nth-child(1){
		width:cacl(59vw - 1px);
		min-width:cacl(59vw - 1px);
	}

	.section-item .colonne:nth-child(2){
		width:calc(22.5vw - 1px);
		min-width:calc(22.5vw - 1px);
		max-width:calc(22.5vw - 1px);
	}

	.section-item .colonne:nth-child(3){
		width:16vw;
		min-width:16vw;
	}

	.section-item .row-4 .right .opinion{
		width:calc(85vw - 1px);
		min-width:calc(85vw - 1px);
	}

	.section-item .row-4 .right .buttonOpinion{
		width:calc(85vw - 1px);
		min-width:calc(85vw - 1px);
	}

	.menu{
		display: none;
	}
}