/* color palette IP blue https://www.color-hex.com/color-palette/108077 */

:root{
 --text-primary-color: #000000;
 --main-color : #ff9f05;
 /*--secondary-color: #3575A6;*/
 --secondary-color: #ebb160;
 --background-grey: #d7d7d7;
 --light-grey: #d7d7d7;
 --lighter-grey:#e7e9ee;
 --font-size_1: 2.8em; 
 --font-size_2: 1.2em;
 --font-size_3: 1em;
 --font-size_icons: 3em; 
 --max-width: 1400px;

}

*
{
	font-family: helvetica, serif;
	font-weight: 500;
	padding: 0;
	margin: 0;
	color: var(--text-primary-color);
	text-align: left;
}

html {
  height: 100vh;
  overflow-y: scroll;
	scroll-behavior: smooth;
	scroll-snap-type: mandatory;
}

body
{
	
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 70px auto 70px;
	grid-template-areas: 
		"header"
		"content"
		"footer";

	grid-row-gap: 30px;	
	background-color: var(--background-grey);
}

li
{
	list-style: none;

}

a
{
	text-decoration: none;
}

/*------------------------------Header-----------------------------------*/

header
{
	position: sticky;
  	top: 0;
  	grid-area: header;
	color: white;
	display: flex;
	justify-content: center;
	border: 1px solid var(--main-color);
	background-color:var(--main-color);
}

#boxHeader
{
	display: flex;
	align-items: center;
	max-width: var(--max-width); /* à modifier avec les media queries */
	height: 100%;

	flex-grow:1;
	padding-left: 25px;
	padding-right: 25px;
	
}

nav
{
	height: 100%;
	display: flex;

}

#brand
{	
	color:white;
	text-transform: uppercase;
	flex-grow:1;
	font-family: 'Roboto',sans-serif;
	font-weight: 900;
	font-size: var(--font-size_1);

}

#nav-items
{
	display: flex;
	height: 100%;
}

.nav-links
{
	font-weight: 700;
	box-sizing: border-box;
}

.nav-links
{
	color: white;
	display: flex;
	align-items: center;
	height: 100%;
	text-decoration: none;
	padding-left: 20px;
	padding-right: 20px; 
	font-family: 'Roboto', sans-serif;
	box-sizing: border-box;
}

.nav-links:hover
{
	background-color: var(--secondary-color);
	transition: background-color 0.3s ease-in-out;
}

.active
{
	border-bottom: 5px solid white;
}
/*-----------------------------content---------------------------------*/

content
{
	justify-self: center;
	background-color: white;
	max-width: var(--max-width);
	padding-left: 25px;
	padding-right: 25px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: auto auto auto auto;
	grid-template-areas: 
		/*"titreEnvoyer titreEnvoyer titreEnvoyer titreEnvoyer titreEnvoyer titreEnvoyer"
		"envoyerG envoyerG envoyerC envoyerC envoyerD envoyerD"*/
		"envoyer envoyer envoyer envoyer envoyer envoyer "
		"normes normes normes normes normes normes"
		"faq faq faq faq faq faq"
		"contact contact contact contact contact contact"
		"ftp ftp ftp ftp ftp ftp ";
		/*"titreContact titreContact titreContact titreContact titreContact titreContact"
		"contact1G contact1G contact1C contact1C contact1D contact1D"
		"contact2 contact2 contact2 contact2 contact2 contact2";*/
	
	column-gap: 3em;
	
	
}

@media (max-width: 1200px){

#contact_box
{
	display: flex;
	flex-direction: column;
	/*justify-content: center;*/
	align-items: center;
	padding-bottom: 30px;
}

.contact_card
{
	display: flex;
	align-content: center;
	border: solid 2px var(--main-color);
	margin-bottom: 30px;
	
}

.contact_title
{
	
	width: 200px;
	height: 100%;
	box-sizing: border-box;
	background-color: red;
	
}

.contact_content
{
	
	width: 250px;
	
}

.normesContainer
{
	display: flex;
	flex-direction: column;


}

/*.normesTabRaw:nth-child(even)
{
	background-color: var(--lighter-grey);
}

.normesTabRaw:nth-child(odd)
{
	background-color: white;
}*/

.normesTabRaw
{
	border-left: 0px solid var(--main-color);
	border-bottom: 0px solid var(--main-color);
}

}

@media (max-width: 850px){



#boxHeader
{
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

#brand
{
	font-size: var(--font-size_2);
}

#mail-pref-box
{
	display: flex;
	flex-direction: column;

}


}

@media (max-width: 500px){

.contact_title
{
	
	width: 30%;
	
	
}

.contact_content
{
	width: 65%;
}

.nav-links:hover
{
	background-color: var(--main-color);
}

body
{
	padding: 0px;
	margin: 0px;
	width:100%;
}

content
{
	padding-left: 3px;
	padding-right: 3px;
	box-sizing: border-box;
	width: 100%;
}


header
{
	width:100%;
}

#boxHeader
{
	
	padding-left: 2px;
	padding-right: 2px;
}

.nav-links
{
	/*font-weight: 700;*/
	font-size: 0.5em;
	/*padding-left: 50px;
	padding-right: 50px; */
	
}

#nav-items
{
	/*display: none;*/
}

.contact_card
{
	width: 100%;	
}






#mail-warning
{
	width: 100%;
}

#mail-pref-box
{
	width: 100%;
}

#mail-form-box
{
	width: 100%;
}





} 
/*---------------------------end media 500------------------------------*/



.content-box
{
	padding-top: 60px;	
}

.item
{
	min-height: 300px;
}

/*---------------------------------- GLOBAL -----------------------------*/


.titre
{
	display: flex;
	/*justify-content: center;*/
	margin-bottom: 40px;
	margin-top: 30px;
	border-bottom: 2px solid var(--main-color);
	padding-bottom: 10px;

}



.titre h2 
{
	align-self: center;
	/*color: var(--secondary-color);*/
	font-family: sans-serif;
	font-size: 30px;
	font-weight: 550;
	letter-spacing: .67px;
	line-height: 24px;
	text-transform: uppercase;
	/*text-decoration: underline;
	text-decoration-color: var(--main-color);*/
}

.titre span
{
	font-size: var(--font-size_icons);
	margin-right: 10px;
}

.subTitle
{
	display: flex;
	justify-content: flex-start;
	color:  var(--main-color);
	/*background-color: #e7e9ee;*/
	border-bottom: 1px solid var(--main-color);
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	font-size: var(--font-size_2);	
	padding: 10px;
	margin: 10px;
	
}

.bigSubTitle
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	color:  var(--main-color);
	/*background-color: var(--main-color); */
	border: 2px solid var(--light-grey);
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	font-size: var(--font-size_2);	
	padding: 5px;
	margin-bottom: 20px;
	height: 50px;

}

.material-icons
{
	color: var(--secondary-color);
	align-self: center;
}
/*-------------------------Envoyer--------------------*/

#envoyer
{

	grid-area: envoyer;
	display: flex;
	flex-direction: column;
	
}

.envoyerCard
{
	display: flex;
	flex-direction: column;
	border: solid 2px var(--light-grey);
	margin-bottom: 40px;
}

.envoyerCardContent
{
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}


.envoyerCardContent li
{
	display: flex;
	padding: 10px;
	margin-bottom: 5px;
	
}



/*------------------------------------Normes-----------------------*/




#normes
{
	grid-area: normes;

}

#normes-title
{
	
}

.normesContainer
{
	display: flex;
	/*border: 2px solid var(--light-grey);*/
}

.normesTab
{
	width: 100%;
	margin-right: 10px;
	display: flex;
	flex-direction: column;
	/*justify-content: space-between;*/
	border: 2px solid var(--light-grey);
	margin-bottom: 40px;

}

.normesTabRaw
{
	display: flex;
	align-items: center;
	/*background-color: var(--light-grey);*/

	box-sizing: border-box;
	
	padding: 10px;
	margin-bottom: 15px;

}

.normesTabRawHead 
{
	width: 40%;
	padding-right: 10px;
	
	
}

.normesTabRawHead > h4 
{
	font-weight: bold;
}

.normesTabRawContent
{
	width: 60%;
	padding-left: 10px;
	border-left: 2px solid var(--main-color);
}

.center {
	display: auto ;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
  }



/*-----------------------------FAQ---------------------------------*/



.hidden
{
	display: none;
}

#faq
{
	grid-area: faq;
}

#faqCol1
{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	
}


.faqRaw
{
	display: flex;
	flex-direction: column;
	width: 330px;
	border:2px solid var(--light-grey);
	padding: 10px;
	margin-bottom: 20px;
	height: 30px;
}

.maxH
{
	max-height: 30px;
}

.faqRaw:hover
{
	cursor: pointer;
}

.faqSubtitle
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--main-color);
	background-color: white;
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	font-size: var(--font-size_3);
	height: 30px;	

}

.faqRawContent
{
	padding-top: 15px;
	margin-bottom: 10px;
}

.expand
{


	
}

/*-------------------------Contact---------------------------------*/

.bold
{
	font-weight: bold;
	margin-bottom: 3px;

}

#contact
{
	grid-area: contact;
	display: flex;
	flex-direction: column;
	padding-bottom: 50px;
	
}


#titreContact
{
	
}

#contact_box
{
	display: flex;
	justify-content: space-between;
	padding-top:0px;
	padding-bottom: 30px;
}


.contact_card
{
	display: flex;
	/*align-items: center;*/
	border: solid 2px var(--main-color);
	/*box-sizing: border-box;*/


}

.contact_card:nth-child(2), .contact_card:nth-child(3) {
	margin-left: 5px;
}

.contact_title
{
	font-family: sans-serif;
	font-weight: 700;
	font-size: var(--font-size_2);
	color: white;
	background-color: var(--main-color);
	
	max-width: 250px;
	padding-right: 8px;
	padding-left: 8px;
	box-sizing: border-box;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	
	
}

.contact_content
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-grow: 1;
	padding: 8px;
	
}

/*--------------------------------mail pref-------------------------------------*/

#mail-pref
{
	
	margin-top: 30px;
	margin-bottom: 30px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;

}

#mail-warning
{
	font-size: var(--font-size_2);
	margin-top: 40px;
	margin-bottom: 55px;
	border-bottom: 1px solid var(--main-color)
}

#mail-pref-box
{
	display: flex;
	

}
#mail-pref-text
{
	margin-right: 25px;
	
}

#mail-pref-text li
{
	display: flex;
	justify-content: start;
	margin-top:10px;
}

#mail-pref-text span
{
	align-self: center;
}

#mail-form-box
{
	
	/*width: 400px;*/
	/*background-color: red;*/
}

#mail-type
{
	border-color: var(--main-color);
	background-color: var(--main-color);
	color: white;
	padding: 5px;
	

}


.form
{
	display: none;

	border-left: 3px solid var(--main-color);
	padding: 5px;
}

.input-box
{
	display: flex;
	flex-direction: column;
	margin: 5px;
	
}

.select_items
{
	color: white;
	font-family: sans-serif;
}

.form-input
{
	border:1px solid var(--light-grey);
	border-radius: 5px;

	/*background-color: var(--background-grey);*/
	width: 100%;
	height: 30px;
	
}

.form-label
{
	 
	/*background-color: var(--main-color);*/
	align-self: start;
	
}

.form-button
{
	background-color: var(--main-color);
	color: white;
	padding: 10px;
	border:none;
	/*padding-top: 5px;*/
	/*height: 30px;*/
	width: 300px;
	text-align: center;
}


/*----------------------------------FTP---------------------------------*/
.clicable:hover
{
	cursor: pointer;
}

#ftp
{
	grid-area: ftp;
	
}

#titreTele
{
	
}

#titreFtp:hover
{
cursor: pointer;
}

#boxFtp
{
	display: none;
	border-left: 2px solid var(--main-color);
	padding-left: 10px;
	margin-bottom: 30px;
}

#boxSlingshot
{
	display: none;
	border-left: 2px solid var(--main-color);
	padding-left: 10px;
	margin-bottom: 30px;
}


#ftpWarning
{
	font-size: var(--font-size_2);
	margin-top: 30px;
	margin-bottom: 30px;
	border-bottom: 1px solid var(--main-color)
}

#infoConnexion
{
	
}

#connexionTab
{
	
}

.connexionRaw:nth-child(odd)
{
	background-color: var(--lighter-grey);
}

.connexionRaw
{
	display: flex;
	box-sizing: border-box;
	padding: 5px;
	margin-top: 5px;
	
}

.connexionHead
{
	width: 40%;
	border-right: 2px solid var(--main-color);
}

.connexionContent
{
	width: 60%;
	padding-left: 10px;
}

.lien
{
	color: var(--main-color);
	font-weight: bold;
}


#listesEtapesFtp > li
{
	padding-top: 5px;
	display: flex;
	margin-bottom: 10px;

}

#listesEtapesSlingshot > li
{
	padding-top: 5px;
	display: flex;

	margin-bottom: 10px;
}


.ftpIcon
{
	align-self: start;
	margin-right: 10px;
}

/*-----------------------------------footer-----------------------------*/

footer
{
	background-color: var(--main-color);
	color: white;
	grid-area: footer;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-left: 30px;
}

#footer-items
{
	display: flex;
	align-items: center;
	color: white;
}

.white
{
	color: white;
}

#credits
{
	display: flex;
}