@charset "utf-8";



/*Reset Code*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
	text-decoration: none;
	
 }
 /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
 }
  ol, ul {
	list-style-type: inherit;
 }
  blockquote, q {
	quotes: none;
 }
  blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
 }
  table {
	border-collapse: collapse;
	border-spacing: 0;
 }

/********général******/

html, body {
  
  background-color: #ffffff;
}
header {
  
  
  height: auto;
   display: grid;
    grid-template-columns: 150px minmax(500px, 8fr); 
	/*position: fixed;*/
  z-index: 10;
	margin: 1em 1em 3em 1em;
	overflow: visible;
		
	


	

}

.tete {
	 width: 80%;
    height: auto;
	grid-area: image;
	
	
}

.logo {
	grid-area: logo;
	
}



#logo {
  width: 100%;
  padding: 15px;
	
	
}

.titre {
	
	padding-left:3em;
	padding-right:3em;
	
	display:flex;
	justify-content: center;
	flex-direction:column;
	
	margin-top:20px;
	
	

}



#principal-grid {
  display: grid;
  grid-template-columns: 1fr 7fr;
  grid-auto-rows: 100%;
  padding-top: 20px;
	
	
	position: inherit;
	
	
}


h1 {
  
  
	font-family: 'Montserrat', sans-serif;
  /*font-size: calc(20px + 1vw);*/
	font-size: calc(30px + 1.5vw);
    padding-top: 0px;
	text-transform:uppercase;
	font-weight: lighter;
    color:#045777;
	text-align: center;
	padding: 0 4em 0 4em;
	/*line-height: calc(32px + 1vw);*/
	line-height: calc(50px + 1vw);
	
	
	
	
  
}
h2 {
  
  font-family: 'Montserrat', sans-serif;
   font-size: calc(15px + 1vw);
	text-align: left;
  color: #045777;
	padding-bottom:60px;
	padding-top:1em;
	text-transform: uppercase;
	
  
}

h3 {
  
  font-family: 'Source Serif Pro', serif;
   font-size: calc(12px + 1vw);
	text-align: left;
  color: #f5a743;
	padding-bottom:60px;
	padding-top:1em;
	
  
}
 footer {
	 margin-top: 100px;
	 padding-top:20px;
	 padding-bottom:20px;
	 display: grid;
  grid-template-columns: 1fr 7fr;
	
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #045777;
  color: white;
  text-align: left;
	 font-family: 'Montserrat', 'Arial', sans-serif;
}


.grid-container {
  display: grid;
  grid-template-columns: auto;
  grid-auto-rows: auto;
	
	
	
}
.grid-container > div {
  text-align: left;
  font-family: Montserrat, sans-serif;
  font-size: calc(14px + 0.5vw);
line-height: calc(19px + 0.8vw);
  color: black;
}

.colonne-gauche,  .colonne-droite {}

.colonne-droite {}
.bloc {
  /*display: grid;
  grid-auto-rows: 1fr auto;*/
	width:70%;
	padding-left:5em;
	
  /*height:100%;*/
}


/***texte en haut et image centrée en-dessous***/
.sous-bloc-texte-image {
  display: grid;
  grid-auto-rows: minmax(100px, auto);
		/*repeat(auto-fit, minmax(100px, 1fr));*/
	/*background-color:#0d1d2c;
		border-radius:15px;
	padding: 15px;*/
}
.sous-bloc-gauche > div {
	
}
.sous-bloc-droite {
  display: grid;
  grid-template-rows: 1fr;
}

.sous-bloc-juste-texte {
  display: flex;
	justify-content: center;
	align-items: center;
}

.sous-bloc-en-haut {
  display: flex;
align-items: center;
  justify-content: left;
	
	/*align-items:flex-start;*/
	
}

.ligne-verticale {
  height: 100%;
}
.picto {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height:  auto;
	color: white;
	/*padding-top:30px;
	padding-bottom:30px;*/
	margin-top:40px;
	margin-bottom: 30px;
	
	
  /*text-align: center;
  vertical-align: middle;*/
}
.bloc1, .bloc2, .bloc3, .bloc4 {
 /* height: auto;
  width: 100%;*/
	
	/*min-height: 100vh;*/
    /*max-height: auto;*/
	
	
}
.bloc-int-1, .bloc-int-2, .bloc-int-3, .bloc-int-4 {
  
  /*width: 100%;*/
  display: grid;
  grid-template-columns: 13fr 30fr 4fr 30fr 13fr;
	
	
  	
	
}



.colonne-droite, .colonne-gauche{
  
  
	
}


.verticalline {
	width: 20px; 
	size:500px ;
	background-color:#f5a743;
	color:#f5a743;
	
}



					

.chevron {
	display: flex;
	justify-content: center;
	align-items: center;
	
}
.chevron-titre {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top:1em;
	
	
}



.sous-bloc-juste-image {
	display: flex;
	justify-content: center;
	align-items: center;
	
	min-height:  250px;
	color: white;
  /*text-align: center;
  vertical-align: middle;*/
}


.texte {
	
}


.maligne {
	width:1px;
	border-right: solid #f5a743;
	margin-left:2em;
	margin-right:2em;
	height:inherit;
}




/********************media query***********************/

/*******titre***************************/
@media screen and (max-width: 1260px) {
  .titre {
    padding-left:1em;
	padding-right:1em;
	  
  }
}

@media screen and (max-width: 1060px) {
  .titre {
    padding-left:0em;
	padding-right:0em;
	 
	  
	  
  }
}


@media screen and (max-width: 900px) {
  .titre {

					padding:0;
	  margin:auto;
	  display:flex;
	justify-content: center;
	flex-direction:column;
	
	  
	  
	  				}


.grid-container > div {
  
  font-size: 17px;
line-height: 25px;
  
}
	
	.encadre {
		
		font-size: 17px;
line-height: 23px;
		
		
		
	
}
	
}



/********media queries pour les h1***************/
@media screen and (max-width:1060px) {
  h1 { 
	  font-size: calc(28px + 1vw)
		  text-align: center;
    
  }
}

@media screen and (max-width:900px) {
  h1 {
  
  
	font-family: 'Montserrat', sans-serif;
/*  font-size: calc(22px + 1vw);*/
	font-size:22px;
	   /*font-size: 2em;*/
	 max-width: 25ch;
    padding-top: 0px;
	text-transform:uppercase;
	font-weight: lighter;
    color: #045777;
	text-align: center;
	padding: 0;
	/*line-height: calc(40px + 1vw);*/
	  line-height: 40px;
	/* padding-left:1.5em;
	padding-right:1.5em;*/
	  display:flex;
	justify-content: center;
	 
  
}
}


/*
@media screen and (max-width: 1100px){
	
	.bloc-int-1, .bloc-int-2, .bloc-int-3, .bloc-int-4 {
  
  
  display: grid;
  grid-template-columns: 1fr 30fr 4fr 30fr 1r;
	
	
  	
}
	.colonne-droite {
		background-color: beige;
	
}
}
*/




@media screen and (max-width: 900px) {

					header {

				 /* height: auto;*/  
				  display: grid;  
				  grid-template-columns: 1fr;
					  grid-template-rows: minmax(1fr, 100px) 1fr;
						min-height:100vh;

				}

					#logo {


				 width: 30vw;

				  display: block;
				  margin-left: auto;
				  margin-right: auto;
						margin-bottom:0;
						height:auto;


				}	

				


				#principal-grid {
				  display: grid;
				  grid-template-columns: 1fr;
				  grid-auto-rows: 100%;
				  padding-top: 10px;
				position: inherit;

				}
					
					.aside { 
						display: none; 
					}
					
					
					/*hr { 
						display: none; 
					}*/
					
					
		.bloc-int-1, .bloc-int-2, .bloc-int-3, .bloc-int-4 {  
				  width:90%;
				  display: grid;
				  grid-template-columns: 1fr;
				/*padding-left: 50px;
				padding-right: 50px;*/
			justify-self: center;
			
			
	
}
					
					.colonne-gauche,  .colonne-droite {display: none;}
					
					
					.bloc {
  display: grid;
  grid-auto-rows: auto auto;
	grid-template-columns: 1fr;
						padding-left:2em;
						width:85%;
					
						
  /*height:100%;*/
}
					
					
					

	
	h2 {
  
  
	padding-bottom:10px;
	padding-top:1em;

  
}
					

					
			
	

					
					.maligne {
						display:none;

}
	
	
	
	
	
	
	
	
}





/********************fin du media query***********************/



.sous-bloc-gauche {
	
	
	
}


#haut {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 70px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #f5a743; /* Set a background color */
  color: #000000; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 5px; /* Rounded corners */
  font-size: 14px; /* Increase font size */
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}



.encadre {
	background-color: #f7c482;
	padding:1em;
	margin-bottom: 1em;
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
	font-family: 'Montserrat', sans-serif;
	font-weight:bolder;
	text-transform:uppercase;
	text-transform:uppercase;
}

.active, .accordion:hover {
  background-color: #ccc; 
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
	padding-left:2em;
	margin-top:1em;
}

p {
	margin-bottom:1em;
}

strong {
	font-weight:600;
}

.sous-titre {
	
	
	font-family: 'Montserrat', sans-serif;
  /*font-size: calc(20px + 1vw);*/
	font-size: calc(16px + 1vw);
  padding-top: 10px;
	
	
		
  color: #f5a743;
	text-align: center;
	font-weight:600;
	/*line-height: calc(32px + 1vw);*/
	line-height: calc(25px + 1vw);
}

.auteurs {
	font-size:smaller;
	padding-bottom: 0;
	font-style: italic;
}

.lien {
	color: #045777;
	
}
.lien:hover {
	color:#43819a;
}






@media print {
	
	
	/*Reset Code*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
	text-decoration: none;
	
 }
 /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
 }
  ol, ul {
	list-style-type: inherit;
 }
  blockquote, q {
	quotes: none;
 }
  blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
 }
  table {
	border-collapse: collapse;
	border-spacing: 0;
 }
	
	
	/**Fin du reset****/
	
	
	
	header {
	
	
	background-color:#ffffff;
}
	
	
	h1 {
	
	
	color: black; 
		font-family: 'Montserrat', sans-serif;
		font-size:18px;
}
	
	
	.logo {
	
	
	width:150px;
		
	
}
	
}







li {
	padding-left:10px;
}