@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;500&family=Neucha&family=Thasadith:ital,wght@0,400;0,700;1,400&display=swap');

body {
	/* font-family: 'Montserrat', sans-serif; */
	display:grid;
	gap:30px;
	width: 1300px;
	grid-template-columns: 1100px 250px;
	grid-template-rows: 50px 1fr;
}

header {
	position:fixed;
	top: 0px;
	z-index: 11;
	grid-column: 1/3;
	grid-row: 1/2;
	display: grid;
	grid-template-columns: 1fr 3fr 1fr;
	align-items: center;
	margin-bottom: 16px;
	padding: 16px;
	background-color: #a1a1a1;
	width:100%;
	height : 40px;
	text-align: center;
	color: white;
	font-family: 'Neucha';
}

header img {
	position:relative;
	height: 50px;
	margin-left: 1rem;
	top: -5px;
}


header #recherche input {
	color: rgb(71, 70, 70);
	font-size: 20px;
	width : 30vw;
	font-family: 'Thasadith',cursive;
	position:relative;
	left:-15px;
	border-radius: 30px;
	border: solid 3px #78767e;
	text-align: center;
}
header #logo:hover{
	cursor:pointer;
	

}
nav{
	display: block;
	position: fixed;
	top: 162px;
	right:0%;
	grid-column: 2/3;
	grid-row: 2/3;
	z-index:12;

}

nav #menu{
	
	display:grid;
	grid-template-rows: 35px 35px 35px 0px 0px 0px;
	/* gap:10px; */
	font-size : 11px;
	/* font-family: 'Thasadith'; */
	color:white;
	width:16vw;
	z-index: -2;
}
nav h1 {
	font-family: 'Thasadith', cursive;
	font-weight: 100;
	text-align: center;
	position:relative;
	top:-8px;

}

nav h2 {
	display:grid;
	grid-template-columns: 3vw 13vw;
	grid-column: 2/3;
	font-family: 'Thasadith', cursive;
	font-weight: 700;
	font-size: 15px;
	text-align: left;
	position:relative;
	top:10px;
	right:-50px;

}

nav h2 img{
	grid-column: 1/2;
	position:relative;
	top:-6px;
	max-width:30px;
	max-height:0px;
	
}

nav h2 img:hover{
	box-shadow: -2px 2px 2px 1px rgb(126, 126, 126);
	cursor: pointer;
}


nav #menu #concept{
	
	background-color: #78767e;
	grid-row: 1/2;

}

nav #menu #concept #textConcept{

position:absolute;
left: -55vw;
top:-5vw;
width: 60vw;
z-index: 20;
}


nav #menu #concept:hover{
	
	background-color: #444347;

}

nav #menu #filtrer{
	
	background-color: #78767e;
	grid-row: 3/4;
	
	/* height:35px */
}

nav #menu #filtrer:hover{
	
	background-color: #444347;
	cursor: pointer;

}

nav #menu #sousFiltre{
	border: 0px solid #78767e ;
	background-color: rgb(255, 255, 255);
	opacity: 0;
	/* grid-row: 4/5; */
	z-index: 1;
	color:#302f3100;
	
	/* height:35px */
}

nav #menu #pairs{
	
	background-color: #78767e;
	grid-row: 2/3;
}

nav #menu #pairs:hover{
	
	background-color: #444347;

}

main {
	grid-column: 1/2;
	grid-row: 2/3;
	
}

#cache {
	background-color: rgb(255, 255, 255);
	opacity:0;
	position:fixed;
	top:70px;
	width:100%;
	height:100%;
	z-index: -5;
}

#boxConcept {
font-size: 10px;
background-color: #fffefe;
border:solid #78767e 2px;
width : 50vw;
min-height :  30.5vw;
padding:10px;
position: fixed;
top:8vw;
left: 11vw;
z-index: -10;
opacity: 0;
}

#boxConcept h1{
	padding:20px;
	font-family: 'Thasadith', cursive;
	font-style: bold;
	font-size: 22px;
	font-weight: 2000;
	color: rgb(102, 71, 158);
	
}

#boxConcept p{
	padding:20px;
	line-height: 30px;
	font-family: 'Thasadith', cursive;
	font-size: 16px;
	font-weight: 600;
}

#boxConcept p img{
	width: 20px}

#boxConcept p strong{

	font-style: bold;
	color:rgb(102, 71, 158)
}

#fenetreDossier {
	font-size: 10px;
	background-color: #fffefe;
	border:solid #78767e 2px;
	width : 50vw;
	min-height :  30.5vw;
	padding:10px;
	position: fixed;
	top:8vw;
	left: 11vw;
	z-index: -10;
	opacity: 0;
	}


#fenetreDossier h1{
	font-family: 'Thasadith', cursive;
	font-size: 24px;
	font-weight: 600;
}

#corpsDossier {
	font-family: 'Thasadith', cursive;
	font-size: 18px;
	font-weight: 600;
}

#corpsDossier ul li{
	list-style-type: square;
}


#corpsDossier strong{
color:rgb(121, 60, 3)
}

#boutonEchap {
	position:fixed;
	top:9vw;
	left:58.5vw;
	width:3vw
}

#boutonEchap:hover{
	cursor:pointer;
}

.fiches {
	
	margin-top: 12px;

}
.fiches article {
	display: grid;
	max-width: 80vw;
	min-width: 900px;
	grid-template-columns: 150px 10px 1fr 10px 140px;
	grid-template-rows: 10px 10px 10px 100px 10px 10px ;
	grid-gap: 0px;
	
	

}

.fiches article .icones{

	grid-row: 4/5;
	grid-column: 3/4;
	display:grid;
	grid-template-columns: 0.8fr 0.07fr 0.07fr 0.07fr 0.07fr;
	grid-template-rows: 60px 10px 30px ;
	grid-gap: 0px;
}




.fiches article .icones .ampoule {
	grid-row : 2/3;
	grid-column: 2/3;
	width: 20px;
	position:relative;
	top:10px;		
}

.fiches article .icones .ampoule:hover {
	cursor:  pointer;
}

.fiches article .icones .ampouleTxt {
	font-family: 'Thasadith', cursive;
	font-size: 13px;
	z-index: 5;
	position: relative;
	grid-row: 2;
	margin-left: -53px;
	margin-right: -100px;
	
	
}


.fiches article .icones .main {
	grid-row : 2/3;
	grid-column: 3/4;
	width: 20px;
	position:relative;
	top:15px
	
	
}

.fiches article .icones .main:hover {
	cursor:  pointer;
}

.fiches article .icones .mainTxt {
	font-family: 'Thasadith', cursive;
	font-size: 13px;
	z-index: 5;
	position: relative;
	grid-row: 3;
	
	}

.fiches article .icones .dossier {
	grid-row : 2/3;
	grid-column: 4/5;
	width: 20px;
	position:relative;
	top:15px;
	
}

.fiches article .icones .dossierTxt {
	font-family: 'Thasadith', cursive;
	font-size: 13px;
	z-index: 5;
	position: relative;
	grid-row: 4;
	/* margin-left: -53px; */
	/* margin-right: -100px; */
	
	
}

.fiches article .icones .dossier:hover {
	cursor:  pointer;
}

.fiches article .icones .commentaire {
	grid-row : 2/3;
	grid-column: 5/6;
	width: 20px;
	position:relative;
	top:20px;		
	
}



.fiches article .top{
	grid-row: 1/2;
	grid-column: 1/2;
	
	}
.fiches article .square{
	grid-row: 2;
	grid-column: 1;
	background-color: #008000;
	height: 140px;
	z-index: 0;
	}

.fiches article .square img{
	display: block;
	margin:auto;
	position:relative;
	top: 17px;
	z-index: 2;
	
}

.fiches article .underSquare{
	grid-row: 3/6;
	grid-column: 1/2;
	height: 0px;
	z-index: 0;
	}

.fiches article .squareNeighbor{
	grid-row: 1/7;
	grid-column: 2/3;
	background-color: rgb(255, 255, 255);
	z-index: 0;
	}

.fiches article .topLine{
	grid-row: 2;
	grid-column: 1/8;
	border-top: 7px solid #008000;
	border-right: 0px solid #008000;
	border-left: 0px solid #008000;
	/* width: 88%; */
	}	

.fiches article .mainBox{
	grid-row: 2/7;
	grid-column: 3/6;
	overflow:hidden;
	
}

.fiches article .mainBox:hover{
	
	cursor:url(images/boutonPlay.png), pointer;
	
	
}

.fiches article .mainBox h1{
	font-family: 'Thasadith';
	font-size: 34px;
	font-weight: 900;
	letter-spacing: -2px;
	padding-right: 10px;
	position: relative;
	top: -20px;
	left:10px;
	max-width: 3;
	
}

.fiches article .mainBox h2{
	font-family: 'Thasadith';
	font-size: 24px;
	font-weight: 900;
	letter-spacing: 2px;
	color:#302f31;
	padding-right: 10px;
	position: relative;
	top: -40px;
	left:10px
}

.fiches article .mainBox video{
	width:0%;
	height:0%;
	position:relative;
	/* margin:1%; */
	/* padding:1%; */
	top:-155.8px; 
	z-index: -1;

}

.fiches article .bottomLine{
	grid-row: 6/7;
	grid-column: 1/6;
	border-bottom: 10px solid rgb(9, 126, 9);
	border-right: 0px solid rgb(9, 126, 9);
	border-left: 0px solid #008000
	}

.fiches article .frameImage {
	grid-row: 6;
	grid-column:5/6;
	
	
	}

.fiches article .frameImage .compris{
		position:relative;
		top:-320px;
		/* z-index: -3; */
		}

.fiches article .frameImage .aime{
	position:relative;
	top:-320px;
	/* z-index: -3; */
	}

.fiches article .frameImage .plus{
	position:relative;
	top:-320px;
	/* z-index: -3; */
	}
		

.fiches article .frameImage img{
	position: relative;
	top: -160px;
	height: 160px;
	z-index: 2;
	
}

/*##################################################################################
####################################################################################
####################################################################################*/

@media (max-width: 500px) {
		
	html,body  
		{  
		overflow-x:hidden;  
		}  
	body {
		/* font-family: 'Montserrat', sans-serif; */
		display:grid;
		gap:5px;
		max-width: 400px;
		grid-template-rows: 20px 1fr;
	}
	
	header {
		position:fixed;
		top: 0px;
		left: 8px;
		z-index: 11;
		grid-column: 1/3;
		grid-row: 1/2;
		display: grid;
		grid-template-columns: 1fr 3fr 1fr;
		align-items: center;
		margin-bottom: 1px;
		padding: 5px;
		background-color: #a1a1a1;
		max-width:360px;
		height : 20px;
		text-align: center;
		color: white;
		font-family: 'Neucha';
	}
	
	header img {
		position:relative;
		height: 20px;
		margin-left: 1rem;
		top: -1px;
	}
	header #recherche input {
		color: rgb(71, 70, 70);
		font-size: 12px;
		width : 30vw;
		font-family: 'Thasadith',cursive;
		font-weight: 900;
		position:relative;
		left:-15px;
		border-radius: 30px;
		border: solid 1px #78767e;
		text-align: center;
	
	}	
	nav{
		display: block;
		position: fixed;
		top: 0px;
		right:0%;
		grid-column: 1;
		grid-row: 1;
		z-index:12;
	
	}
	
	nav #menu{
		
		display:grid;
		grid-template-rows: 0px 0px 0px 0px 0px 0px;
		/* gap:10px; */
		font-size : 11px;
		/* font-family: 'Thasadith'; */
		color:white;
		width:0vw;
		z-index: 2;
	}
	nav h1 {
		font-family: 'Thasadith', cursive;
		font-weight: 33;
		text-align: center;
		position:relative;
		top:-8px;
	
	}
	
	nav h2 {
		display:grid;
		grid-template-columns: 0vw 0vw;
		grid-column: 1;
		font-family: 'Thasadith', cursive;
		font-weight: 700;
		font-size: 15px;
		text-align: left;
		position:relative;
		top:10px;
		right:-50px;
	
	}
	
	nav h2 img{
		grid-column: 1;
		position:relative;
		top:-6px;
		max-width:0px;
		max-height:0px;
		
	}
	
	nav h2 img:hover{
		box-shadow: -2px 2px 2px 1px rgb(126, 126, 126);
		cursor: pointer;
	}
	
	
	nav #menu #concept{
		
		background-color: #78767e;
		grid-row: 1;
	
	}
	
	nav #menu #concept #textConcept{
	
	position:absolute;
	left: 0vw;
	top:0vw;
	width: 0vw;
	z-index: 20;
	}


	nav #menu #concept:hover{
		
		background-color: #444347;
	
	}
	
	nav #menu #filtrer{
		
		background-color: #78767e;
		grid-row: 1;
		/* height:35px */
	}
	
	nav #menu #filtrer:hover{
		
		background-color: #444347;
		cursor: pointer;
	
	}
	
	nav #menu #sousFiltre{
		border: 0px solid #78767e ;
		background-color: rgb(255, 255, 255);
		opacity: 0;
		grid-row: 1;
		z-index: 1;
		color:#302f3100;
		
		/* height:35px */
	}
	
	nav #menu #pairs{
		
		background-color: #78767e;
		grid-row: 1;
	}
	
	nav #menu #pairs:hover{
		
		background-color: #444347;
	
	}
	
	main {
		grid-row: 2/3;
		
	}
	
	.fiches {
		
		margin-top: 12px;
	
	}
	.fiches article {
		display: grid;
		max-width: 350px;
		grid-template-columns: 50px 3.3px 260px 3.3px 47px;
		grid-template-rows: 3.3px 3.3px 3.3px 33.3px 3px 3px ;
		grid-gap: 0px;
		
		
	
	}

	.fiches article .icones{

		grid-row: 4/5;
		grid-column: 3/4;
		display:grid;
		grid-template-columns: 0.8fr 0.07fr 0.07fr 0.07fr 0.07fr;
		grid-template-rows: 30px 5px 30px ;
		grid-gap: 0px;
	}
	
	
	
	
	.fiches article .icones .ampoule {
		grid-row : 2/3;
		grid-column: 2/3;
		width: 7px;
		position:relative;
		top:-6px;		
	}

	.fiches article .icones .ampoule:hover {
		cursor:  pointer;
	}
	
	.fiches article .icones .ampouleTxt {
		font-family: 'Thasadith', cursive;
		font-size: 5px;
		z-index: 5;
		position: relative;
		grid-row: 2;
		top:-10px;
		margin-left: -20px;
		margin-right: -100px;
		
		
	}
	.fiches article .icones .main {
		grid-row : 2/3;
		grid-column: 3/4;
		width: 7px;
		position:relative;
		top: -5px
		
		
	}
	
	
	.fiches article .icones .dossier {
		grid-row : 2/3;
		grid-column: 4/5;
		width: 6px;
		position:relative;
		top:-5px;
		
	}
	
	.fiches article .icones .commentaire {
		grid-row : 2/3;
		grid-column: 5/6;
		width: 6px;
		position:relative;
		top:-4px;		
		
	}
	
	
	
	.fiches article .top{
		grid-row: 1/2;
		grid-column: 1/2;
		
		}
	.fiches article .square{
		grid-row: 2;
		grid-column: 1;
		background-color: #008000;
		height: 47px;
		z-index: 0;
		}
	
	.fiches article .square img{
		display: block;
		margin:auto;
		position:relative;
		height:30px;
		top: 6px;
		z-index: 2;
		
	}
	
	.fiches article .underSquare{
		grid-row: 3/6;
		grid-column: 1/2;
		height: 0px;
		z-index: 0;
		}
	
	.fiches article .squareNeighbor{
		grid-row: 1/7;
		grid-column: 2/3;
		background-color: rgb(255, 255, 255);
		z-index: 0;
		}
	
	.fiches article .topLine{
		grid-row: 2;
		grid-column: 1/6;
		border-top: 2px solid #008000;
		border-right: 0px solid #008000;
		border-left: 0px solid #008000;
		
		}	
	
	.fiches article .mainBox{
		grid-row: 2/7;
		grid-column: 3/6;
		overflow:hidden;
		
	}
	
	.fiches article .mainBox h1{
		font-family: 'Thasadith';
		font-size: 12px;
		font-weight: 900;
		letter-spacing: -1px;
		padding-right: 5px;
		position: relative;
		top: -5px;
		left:10px;
		max-width: 3;
		
	}
	
	.fiches article .mainBox h2{
		font-family: 'Thasadith';
		font-size: 9px;
		font-weight: 900;
		letter-spacing: 1px;
		color:#302f31;
		padding-right: 5px;
		position: relative;
		top: -15px;
		left:10px
	}
	
	.fiches article .mainBox video{
		width:0%;
		height:0%;
		position:relative;
		/* margin:1%; */
		/* padding:1%; */
		top:-56.4px; 
		z-index: -1;
	
	}
	
	.fiches article .bottomLine{
		grid-row: 6/7;
		grid-column: 1/6;
		border-bottom: 3px solid rgb(9, 126, 9);
		border-right: 0px solid rgb(9, 126, 9);
		border-left: 0px solid #008000
		}
	
	.fiches article .frameImage {
		grid-row: 6;
		grid-column:5/6;
		
		
		}
	
	.fiches article .frameImage img{
		position: relative;
		top: -50px;
		height: 50px;
		z-index: 2;
		
	}

	.fiches article .frameImage .compris{
		position:relative;
		top:-110px;
		/* z-index: -3; */
		}
		

	.fiches article .frameImage .aime{
		position:relative;
		top:-110px;
		/* z-index: -3; */
		}
		
	
	.fiches article .frameImage .plus{
		position:relative;
		top:-110px;
		/* z-index: -3; */
		}
	}