/*-------------------------------------------------------MEDIA-------------------------------------------------------*/
@media(max-width:480px) {
    main {flex-direction: column;}
    header nav {display: none;}
    article ul.plan {flex-direction : column;}
    article ul li {margin-top : 10px; margin-right : 10%; justify-content : center ;}
	h1 {font-size : 300%;}
    
}
@media(min-width:480px) {
    header div.burger {display: none;}
	h1 {font-size : 600%;}
}

/*-------------------------------------------------------FONTS-------------------------------------------------------*/
/*@font-face {
    font-family: 'Baskerville';
    src: url('./fonts/LibreBaskerville-Regular.ttf') format('truetype');

}*/

/*-------------------------------------------------------HTML-------------------------------------------------------*/
html{
    scroll-behavior : smooth ;
	text-align: justify;
}
/*-------------------------------------------------------HEADER-------------------------------------------------------*/
header { 
    font-family: Arial, serif;
    justify-content: center;
    align-items: center;
    padding: 20px;
    display: flex;
	color : black ;
	flex-direction : column;
}
h1{
	font-family: monospace;
	color : white; 
	text-align : center;
	padding : 7%;
	margin : 0px;
	text-shadow: 2px 2px 2px #212121 , 0 0 1em #000, 0 0 0.2em black;
}
h2{
	color : white;
	text-align : center;
	font-weight : lighter ;
	font-size : 250%;
}
h3{
	color : black; 
	font-size : 250%;
	text-align : center;
	padding-top : 2%;
	text-shadow: 2px 2px 2px  #5d6d7e , 0 0 1em black, 0 0 0.2em black;
}
warning{
	color : white;
	text-align : center;
	font-weight : lighter ;
	font-size : 500%;
}
nav{
    display: flex;
    text-align: center;
    flex-direction : row ;
    align-items : center ;
    font-size : 240%;
    border-bottom : solid black;
	border-width : 5px;
    padding : 10px 100% 0px 100%; 
    position : fixed ;
    top : 0px;
	background-image: linear-gradient(135deg, rgb(17, 108, 77) 0%, rgb(17, 108, 77) 14%,rgb(55, 126, 72) 14%, rgb(55, 126, 72) 65%,rgb(94, 145, 68) 65%, rgb(94, 145, 68) 77%,rgb(132, 163, 63) 77%, rgb(132, 163, 63) 95%,rgb(170, 181, 58) 95%, rgb(170, 181, 58) 100%);
}
nav>div{
	padding-right : 10%;
}
nav div a{
	text-decoration:none;
	color : black;
	
}
/*-------------------------------------------------------LIEN-------------------------------------------------------*/
a:hover{
    color : #444939;
	text-decoration : underline;
}
li>a:hover{
    text-decoration : none;
}
a{
	color : black;
	text-decoration : none;
}
.current{
    color : #444939;
}
.current:hover{
    text-decoration : none;
    color : #444939;
}
/*-------------------------------------------------------BURGER-------------------------------------------------------*/
.burger{
    height : 50px;
    z-index: 289;
    position : fixed;
    top : 1%;
    left : 1%;
}
#menu2{
    display : none;
}
div.burger:hover>#menu2{
    display:flex;
    position : fixed ;
    top : 70px;
    flex-direction : column;
    font-size : 200%; 
    background-image: linear-gradient(135deg, rgb(17, 108, 77, 0.8) 0%, rgb(17, 108, 77, 0.8) 14%,rgb(55, 126, 72, 0.8) 14%, rgb(55, 126, 72, 0.8) 65%,rgb(94, 145, 68, 0.8) 65%, rgb(94, 145, 68, 0.8) 77%,rgb(132, 163, 63, 0.8) 77%, rgb(132, 163, 63, 0.8) 95%,rgb(170, 181, 58, 0.8) 95%, rgb(170, 181, 58, 0.8) 100%);
	border-radius : 10px;

}
#sous-menu2{
	display : none;
}
div#pages2:hover>div#sous-menu2 {
    display: flex;
	position : relative ;
	flex-direction : column;
	font-size : 70%;	
}
/*---------------------------------------------------MENU-DEROULANT---------------------------------------------------*/
.sous-menu {
    display: none;
	
}
div:hover div.sous-menu {
    display: flex;
	position : fixed ;
	top : 60px;
	left : 0px;;
	width : 100%;
	flex-direction : row;
	font-size : 80%;
	justify-content : space-evenly;
	border-bottom : solid black;	
	background-image: linear-gradient(135deg, rgb(17, 108, 77, 0.8) 0%, rgb(17, 108, 77, 0.8) 14%,rgb(55, 126, 72, 0.8) 14%, rgb(55, 126, 72, 0.8) 65%,rgb(94, 145, 68, 0.8) 65%, rgb(94, 145, 68, 0.8) 77%,rgb(132, 163, 63, 0.8) 77%, rgb(132, 163, 63, 0.8) 95%,rgb(170, 181, 58, 0.8) 95%, rgb(170, 181, 58, 0.8) 100%);
}
div.sous-menu div{
	padding : 2%;
	
	}
/*--------------------------------------------------------BODY--------------------------------------------------------*/
body {
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    color : white ;
    background-image: url("../images/tracteurs.jpg");
    background-size : cover;
    background-attachment: fixed;
	
}
ul.plan{
	display : flex;
	flex-direction : row;
	justify-content : space-around;
}
ul.plan>li{
	display : flex;
	border-radius : 20px;
	padding : 2%;
	padding-left : 5%;
	padding-right : 5%;
	background: rgba(255, 255, 255, 0.8);
	font-size: 170%;
	text-align : center;


}
ul.plan>li:hover{
	box-shadow:  rgb(91, 99, 73) 0px 5px 15px;
}
#texte{
	background-image: linear-gradient(216deg, rgba(77, 77, 77,0.05) 0%, rgba(77, 77, 77,0.05) 25%,rgba(42, 42, 42,0.05) 25%, rgba(42, 42, 42,0.05) 38%,rgba(223, 223, 223,0.05) 38%, rgba(223, 223, 223,0.05) 75%,rgba(36, 36, 36,0.05) 75%, rgba(36, 36, 36,0.05) 100%),linear-gradient(44deg, rgba(128, 128, 128,0.05) 0%, rgba(128, 128, 128,0.05) 34%,rgba(212, 212, 212,0.05) 34%, rgba(212, 212, 212,0.05) 57%,rgba(25, 25, 25,0.05) 57%, rgba(25, 25, 25,0.05) 89%,rgba(135, 135, 135,0.05) 89%, rgba(135, 135, 135,0.05) 100%),linear-gradient(241deg, rgba(55, 55, 55,0.05) 0%, rgba(55, 55, 55,0.05) 14%,rgba(209, 209, 209,0.05) 14%, rgba(209, 209, 209,0.05) 60%,rgba(245, 245, 245,0.05) 60%, rgba(245, 245, 245,0.05) 69%,rgba(164, 164, 164,0.05) 69%, rgba(164, 164, 164,0.05) 100%),linear-gradient(249deg, rgba(248, 248, 248,0.05) 0%, rgba(248, 248, 248,0.05) 32%,rgba(148, 148, 148,0.05) 32%, rgba(148, 148, 148,0.05) 35%,rgba(202, 202, 202,0.05) 35%, rgba(202, 202, 202,0.05) 51%,rgba(181, 181, 181,0.05) 51%, rgba(181, 181, 181,0.05) 100%),linear-gradient(92deg, hsl(134.6, 69.5%, 23.1%),hsl(47.5, 65.5%, 27.3%));
    padding: 5px;
	padding-bottom: 10%;
	font-size: 150%
}

article#texte {
	border-top : solid black;
   border-width : 5px;
}

article#texte p {
   margin: 10px 10% 0 10% ;
}
article#texte ul {
   margin: 10px 10% 0 10% ;
}
#pages{
	height : 100%;
}
form {
	margin: 0px 40px 100px 40px;
}
fieldset {
	text-align : start;
	padding: 10px 15px 10px 15px;
}
textarea {
	width : 90%;
}
/*-------------------------------------------------------IMAGES-------------------------------------------------------*/
.remplacer{
	display: block;
    margin-left: auto;
    margin-right: auto;
	width : 100%;
	max-width : 800px;

}
.remplacer2{
	display: block;
    margin-left: auto;
    margin-right: auto;
	width : 100%;
	max-width : 650px;

}
/*-------------------------------------------------------FOOTER-------------------------------------------------------*/
footer {
    background-color: black;
	padding-bottom : 30px;
	padding-top : 10px;
    width:100%;S
    height: 5px;
    position : relative;
    top :100%;
}
#fleche-haut {
	width : 50px;
	height : 50px;
	transform : rotate(-90deg);
	opacity : 0.9;
	position : fixed ;
	bottom : 10px;
	right : 10px;
}
#validation{
	border:0;
	width:88px;
	height:31px;	
}
/*-------------------------------------------------------FORMULAIRE-------------------------------------------------------*/
fieldset{
	background: white;
}