/*---------------------------------------------------*/
/*--Import du fichier de parametres                --*/
/*---------------------------------------------------*/
@import "_parametre.css";
@import "_animation.css";


@font-face {
  font-family: Fira;
  src: url("./_font/FiraMono-Regular.ttf") format('ttf'),
       url('./_font/FiraMono-Regular.woff2') format('woff2'),
       url('./_font/FiraMono-Regular.woff') format('woff');  
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: FiraBold;
  src: url("./_font/FiraMono-Bold.ttf") format('ttf'),
       url('./_font/FiraMono-Bold.woff2') format('woff2'),
       url('./_font/FiraMono-Bold.woff') format('woff');  
  font-style: normal;
  font-display: swap;
}

.gras{
	font-family: FiraBold;
}

@font-face {
    font-family: paladins;
    src: url(./_font/paladins3d.ttf);
}
/*---------------------------------------------------*/
/*--------------Structure ---------------------------*/
/*---------------------------------------------------*/

body{
	background-color:var(--Var_Arr_plan);
	max-width:1080px;
	height:auto;
	margin:auto;
	padding:10px;
	color:var(--Var_Text);
	text-align:center;
	font-family: Fira, verdana;
	font-size : 1em;
}

/*---------------------------*/
/*----------header -*/
/*----------------------------*/
header{
	margin-bottom: 10px;
}

nav{
	width:100%;
	font-size:1.1em;
}

nav a{
	color: var(--Var_Second);
	text-decoration: none;
	padding:8px;
	text-transform: capitalize;
	opacity:0.8;

}

nav a:hover{
	color: var(--Var_Arr_plan);
	background-color: var(--Var_Acc);
/*	animation-name: Anim_Nav;
	animation-duration: 1.5s;*/
	transition: 1.2s ease;
}

/*
nav a:first-child::before{
	content:"";
}
nav a::before{
	content:" .:. ";
}
*/



main{
	border:1px dotted #ffffff;
	padding:10px;
}


/*---------------------------------------------------*/
/*--------------Commun Index & Portrait--------------*/
/*---------------------------------------------------*/

/*-- Filtre --*/
div#filtre{
	width:100%;
	background-color: var(--Var_Second);
	color:var(--Var_Arr_plan);
	margin-bottom: 10px;
}

#filtre ul{
color:var(--Var_Arr_plan);
	list-style-type: none;
	margin:0;
	padding:5px;
}

#filtre ul li{
	display: inline-block;
		margin-bottom:2px;
}

#filtre ul li #Btn_filtre{
	background-color: var(--Var_Arr_plan);
	color: var(--Var_Second);
	padding-right:5px;
	padding-left:5px;
}
#filtre ul li #Btn_filtre:hover{
	background-color: var(--Var_Second);
	color: var(--Var_Arr_plan);
		transition: 0.8s ease;
}


/*---------------------------------------------------*/
/*------------------------------Page Index ----------*/
/*---------------------------------------------------*/


/*--------------------*/
/*-- Liste portrait --*/
/*--------------------*/
ul#Liste_Portrait{
	list-style-type: none;
	margin:0;
	padding:0;

	}
	
ul#Liste_Portrait li{
	background-color: var(--Var_Second);
	height:200px;
	width:150px;
	padding:0;	
	display: inline-block;
	margin-right:2px;
	marfin-bottom:2px;
	opacity:0.8;
	border:solid 1px var(--Var_Acc);
	position:relative;
	}

ul#Liste_Portrait li a img{
	width: 100%;
 	height: 100%;
  	object-fit: cover;
 	object-position: center;
	}

ul#Liste_Portrait li:hover {
	opacity:1;
	transition: 1s ease;
	}

ul#Liste_Portrait li:hover h3 {
	opacity:1;
	transition: 1.1s ease;
	}


ul#Liste_Portrait li h3{	
	border:solid 2px var(--Var_Acc);
	background-color:var(--Var_Second);
	position: absolute;
	bottom:10px; 
	left: 10px;
	margin:0px;
	width:130px;
	overflow: hidden;
	color:var(--Var_Arr_plan);
	opacity: 0;
	font-size:0.9em;
	}

/*---------------------------------------------------*/
/*------------------------------Page Portrait--------*/
/*---------------------------------------------------*/

.ligne {
display:flex;
text-align: left;
}

.colonne1{
flex:70%;
}

.colonne2{
flex:25%;
max-width:350px;
}

.colonne1 h2{
font-family: paladins;	
font-size:2.5em;
margin-top:1%;


}
.colonne1 ul{
	/*background-color: var(--Var_Second);*/
	color:var(--Var_Second);

}
.colonne1 ul li a{
	text-decoration: none;
	color:var(--Var_Second);
	/*color:var(--Var_Arr_plan);*/

}
.colonne1 ul li a:hover{
	font-weight: bold;
	text-decoration: underline;
}

.colonne2  img{
	width:90%;
	margin:5%;
	border:solid 2px var(--Var_Acc);
}

.edit form input{
	background-color: var(--Var_Second);
	color: var(--Var_Arr_plan);
	padding-right:5px;
	padding-left:5px;
}

.edit form input:hover{
	cursor: pointer;
	background-color: var(--Var_Arr_plan);
	color: var(--Var_Second);
	transition: 0.8s ease;
}

.podcast{
	background-color: var(--Var_Arr_plan_no_podcast);
}

/*---------------------------------------------------*/
/*------------------------------Page Animation-------*/
/*---------------------------------------------------*/

div ul li{
	list-style: none;
}

div ul li a{
	text-decoration: none;
	color:var(--Var_Second);
}

div ul li a:hover{
	font-weight: bold;
	text-decoration: underline;
}