:root
{
--newsBack: rgba(255, 255, 255, 0.9);
--newsBack2: #ffffff;
}

#middle
{
display: flex;
flex-wrap: wrap;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--color1-rgba) var(--color4-rgba);
}

.artList
{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
background-color: var(--color5-rgba);
}

#artListLeft
{
display: flex;
align-items: center;
justify-content: center;
}

#artListRight
{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}

.artListTitle
{
display: block;
color: var(--color4);
}

.artListSumm
{
display: block;
font-family: "Font2";
box-sizing: border-box;
}

/*La news pleine page*/
#artHidden
{
position: absolute;
top: 3vh;
left: 3vw;
display: flex;
width: 92vw;
height: 92vh;
visibility: hidden;
z-index: 2;
background-color: var(--newsBack2);
border: 1px solid var(--color1);
}

.artTitle
{
display: block;
color: var(--color4);
}

.artText
{
display: block;
font-family: "Font2";
box-sizing: border-box;
}

#artHiddenL
{
display: flex;
align-items: center;
justify-content: center;
}

#artHiddenR
{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}

.artLink
{
display: block;
font-family: "Font2";
color: var(--color4);
text-align: right;
margin-right: 5vw;
box-sizing: border-box;
}

		

	/*vertical*/
	@media screen and (orientation: portrait)
	{
		#middle
		{
		width: 98vw;
		height: 76vh;
		justify-content: center;
		}
		
		.artList
		{
		width: 96vw;
		height: 20vh;
		box-sizing: border-box;
		border: 1px solid var(--color1);
		margin-top: 1vh;
		}
		
		#artListLeft
		{
		width: 47vw;
		height: 20vh;
		}
		
		#artListRight
		{
		width: 47vw;
		height: 20vh;
		}
		
		.artListImg
		{
		max-width: 45vw;
		max-height: 18vh;
		}
		
		.artListTitle
		{
		height: 5vh;
		width: 47vw;
		font-size: 1.5vh;
		text-align: center;
		}
		
		.artImg
		{
		float: left;
		max-width: 50vw;
		max-height: 40vh;
		}
		
		
		
		.artTitle
		{
		width: 94vw;
		height: 5vh;
		font-size: 5vw;
		text-align: center;
		}
		
		.artText
		{
		display: block;
		text-align: justify;
		box-sizing: border-box;
		padding: 1vh;
		width: 96vw;
		height: 76vh;
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: var(--color1-rgba) var(--color4-rgba);
		}
	
	}
	
	/*horizontal*/
	@media screen and (orientation: landscape)
	{
		header
		{
		height: 96vh;
		}
		
		#middle
		{
		width: 78vw;
		height: 96vh;
		justify-content: space-around;
		align-items: center;
		}
		
		.artList
		{
		width: 78vw;
		height: 45vh;
		box-sizing: border-box;
		border: 1px solid var(--color1);
		margin-top: 1vh;
		}
		
		#artListLeft
		{
		width: 35vw;
		height: 43vh;
		}
		
		#artListRight
		{
		width: 41vw;
		height: 43vh;
		}
		
		.artListImg
		{
		max-width: 41vw;
		max-height: 43vh;
		}
		
		.artListTitle
		{
		height: 8vh;
		width: 24vw;
		font-size: 1.5vw;
		text-align: center;
		}
				
		.artImg
		{
		float: left;
		max-width: 30vw;
		max-height: 88vh;
		text-align: center;
		}
				
		.artTitle
		{
		display: block;
		width: 74vw;
		height: 5vh;
		font-size: 5vh;
		text-align: center;
		}
		
		.artText
		{
		display: block;
		text-align: justify;
		box-sizing: border-box;
		padding: 1vh;
		width: 76vw;
		height: 94vh;
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: var(--color1-rgba) var(--color4-rgba);
		}
		
	}