* {
	box-sizing: border-box;
	margin:0;
	padding:0;}

html, body{
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 15px;
	color:#333;
	text-align:justify;}

body a{
	transition:0.5s all;
	-webkit-transition:0.5s all;
	-moz-transition:0.5s all;
	-o-transition:0.5s all;
	-ms-transition:0.5s all;}

.flex-container {
	display:flex;
	flex-direction:row;
	flex-wrap: nowrap;
	justify-content: space-between;
	width:90%;
	margin:0 auto;
	max-width:1140px;}

.container {
	display:block;
	margin:0 auto;
	width:90%;
	max-width:1140px;}

h1, h2, h3, h4, h5, h6{
	text-align:center;}

h2 {
	margin:1em 0;
	font-size:1.7em;
	color:#2B6EC5;}

h3 {
	font-size:1.4em;
}

ul{
	margin:0;
	padding:0;
	list-style-position: inside;
	list-style-type: disc;}
	
p {
	padding-top:0.5em;
	padding-bottom:0.5em;}

a {
	color:#643200;
}

a:hover, a:focus {
	text-decoration: none;
	color:#fc9732;}
	
section {
	margin-top: 1em;
	padding:1em 0 2em 0;}
	
.light-bg {
	background-color: rgba(214, 212, 212, 0.3);}	
	
span {
	font-weight: bold;
	color: #006;
}



/* ////// <HEADER> ////// */
header {
	background-image: url(../images/ashes-sitoula-UfEyDdXlRp8-unsplash.jpg);
	background-attachment: scroll;
	background-position: center center;
	-webkit-background-size: cover;
	background-size: cover;
	display:flex;
    flex-direction:column;
    justify-content: space-between;}

header .flex-container {
	display:flex;
    flex-direction:row;
	flex-wrap: nowrap;
    justify-content: space-between;
    align-items:center;
	margin: 0 3%;}

#logo {
	display:flex;
    max-width:100px;
    max-height:100px;
	padding-left:15px;}

#logo img{
	width:100%;
	height:auto;
    object-fit: cover;}

	/* MENU */
nav ul {
	display:flex;
	width:100%;}
nav li {
	border-top : 1px solid transparent;
	list-style-type: none;
	font-size:1.1em;}
nav li a  {
	padding: 5px 10px;
	margin: 0 1em;
	color:#fc7e00;}
header nav a:hover {
	border-top:1px solid #2B6EC5;
	color: #2B6EC5}
	/* FIN MENU */

	/* TITRE */
.intro-lead-in {
    font-size: 4em;
    margin: 3em auto;
	color:rgb(207, 251, 233);
	text-shadow: 1px 1px 2px #2B6EC5, 0 0 1em #fc7e00, 0 0 0.2em #fc7e00;}
/* ////// FIN </HEADER> ////// */

/* INTRO */
.intro-text {
    padding: 2em 0;
	font-size:1.8em;
	color:#333;}
/* ////// FIN INTRO ////// */

/* /////// <FOOTER> ////// */
footer {
    padding: 10px;
    background:rgb(228, 245, 241);}

footer h2 {
	text-align:left;
	margin-left:1%;}

footer p {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1.2px;}

footer hr {
	margin:10px;}
	
.contact {
	width:38%;}

.contact p {
	text-transform: none;
	letter-spacing: 1px;
	text-align:left;}

.partenaires {
	width:60%}

.logos {
	display :flex;
	flex-direction: row;
	justify-content: space-evenly;
	flex-wrap: wrap;}

.logos img {
	margin:2% auto;
    object-fit: cover;
    max-width:200px;
    height:auto;}

.copyright{
	text-align:center;}
	
/* ////// fin </FOOTER> ////// */



/* ////// INDEX ////// */
.actu {
	display:flex;
	flex-direction:row;
	flex-wrap: nowrap;
    justify-content: space-between;
	width:90%;
	margin: 0 auto;}

.news {
	width:60%;}

.telechargement {
	width:35%;
	padding:5px;
	border:rgb(81, 145, 135) 1px solid;
	border-radius:10px;
	-webkit-border-radius:10px;
	margin:1em auto;
	background-color: rgba(228, 245, 241, 0.5);}

.telechargement li {
	margin: 1em 0;}

.telechargement img {
	display:block;
    object-fit: cover;
    max-width:350px;
    width:100%;
    height:auto;
	margin:2% auto 0 auto;}
/* ////// fin INDEX ////// */


/* ////// Projet 1 & 2 & Qui sommes-nous ////// */
.histoire_item, .projet_item {
	margin: 5% auto;
	align-items: center;}

.histoire_item img, .projet_item img {
	object-fit: cover;
	max-width:400px;
	height:auto;
	margin:0 1%}

.trombi {
	display:flex;
	flex-direction: column;}

.trombi_item {
	margin-bottom: 1.5em;}
	
.trombi_item .column {
	float:left;
	position:relative;
   	width: 12%;
	margin:3% 2%;}

.trombi_item img {
	width: 100%;
	height: auto;
	margin: 0;
	padding:0;
	object-fit: cover;}

.trombi_item .text-block{
	position: absolute;
	bottom: 0px;
	background-color: black;
	color: white;
	padding: 2px;
	width:100%;}

.trombi_item p {
	font-size:0.8em;
	color: #f1f1f1;
	text-align:center;}

.projet2 {
	display:flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	width:100%;}

.projet2_item {
	width:60%;
	display:flex;
	flex-direction: column;}

.projet2_img {
	width:38%;
	display:flex;
	flex-direction: column;}

.projet2_img img {
	margin: 2% auto;}

.projet2_text {
	width:48%;
	margin:3% auto;
}
/* ////// fin Projet 1 & 2 & qui-sommes-nous ////// */


/* ////// Mentions légales ////// */
.mentions {
	margin:5% auto;
	align-items:stretch;}

.mentions_item {
	width:30%;
	margin:auto;
	border:rgb(81, 145, 135) 1px solid;
	border-radius:10px;
	-webkit-border-radius:10px;
	padding:5px;}

.mentions_item h4 {
	margin:4% auto;}

	


/* ////// RESPONSIVE ///////////*/
/* TABLET */
@media (max-width: 992px) {
	.container, .flex-container {
		width:95%;
		max-width: 960px;}
	header .flex-container {
		margin: 0 0;}
	#logo img{
		width:100%;
		height:auto;
		padding-left:10px;}
	nav li {
		font-size:1.3em;}
	footer .flex-container {
		flex-direction: column;}
	footer h2 {
		text-align:center;}
	.contact {
		width:100%;}
		footer h2 {
		text-align:center;}
	.contact p {
		text-align:center;}
	.partenaires{
		width:100%;}
	.intro-lead-in {
		font-size: 3em;
		margin: 2em auto;}
	.intro-text {
		font-size:1.9em;}
	.actu {
		width:95%;}
	.telechargement {
		width:38%;}
	.histoire_item img, .projet_item img {
		width:40%;}
	.trombi .column {
		width: 25%;
		margin:5% 4%;}	
	.projet2 {
		flex-direction: column;}
	.projet2_item {
		width:100%;}
	.projet2_img {
		width:100%;
		display:flex;
		flex-direction: row;
		justify-content: space-between;}
	.projet2_img img {
		margin: 2% auto;
		width:48%;}
	.mentions_item {
		width:70%;
		margin:5% auto;}
}
/* FIN TABLET */

/* MOBILE */
@media (max-width: 768px) {
	.container, .flex-container {
		width:98%;
		max-width: 540px;
		padding:2%;}
	.flex-container {
		flex-direction:column;}
	#logo img{
		width:75%;
		height:auto;
		padding-left:5px;}
	nav li {
		font-size:1em;}
	.contact p {
		text-align:center;}
	.intro-lead-in {
		font-size: 2em;
		margin: 1em auto;}
	.intro-text {
		font-size:1.5em;}
	.actu {
		width:98%;
		flex-direction:column;}
	.news {
		width:95%;
		margin:auto;}
	.telechargement {
		width:95%;
		margin:1em auto;}
	.histoire_item, .projet_item {
		flex-direction: column;}
	.histoire_item img, .projet_item img {
		width:100%;}
	.trombi .column {
		width: 23%;
		margin:5% 4%;}
	.trombi h5 {
		font-size:0.8em;}
	.projet2_img {
		flex-direction: column;}
	.projet2_img img {
		margin: 2% auto;
		width:95%;}
	.projet2_text {
		width:100%;}
	.mentions_item {
		width:90%;}
}
/* FIN MOBILE */