/* GENERALITES*/



html 
{
  scroll-behavior: smooth; /* utile pour fleche pour scroll up*/
}

header
{
	border: 0px black solid;
}

body
{
	border: 0px purple solid;
	margin:0px;
	background-color: #FFFFFF; /* couleur beige => F4EDE4 / 244, 237, 228*/
	font-family: 'Roboto',Arial,sans-serif;
}

h1
{
		font-size:1.1em;
}

img 
{ 
	max-width: 100%; 
}

#scrollUp /* utile pour fleche pour scroll up*/
{
	position: fixed;
	bottom : 10px;
	right: -200px;
	opacity: 0.5;
}








																	/* navigation */



.navibleu /* DIV qui contient la DIV .navigationrouge*/
{
	border: 0px blue solid;
	position: fixed; 
	top:0px;
	left:0px;
	margin:0;
	padding:0px;
	background-color: white;
	width:100%;
	height:37px; /* doit etre identique à navirouge! */
	filter:drop-shadow(0 0 0.5rem silver)
}

label, #toggle
{
    display: none;
}


nav .navigationrouge /* DIV qui contient la nav*/
{
	border: 0px red solid;							
	padding-left:70px;
	display: flex;
    justify-content: space-around;
	height:37px; /* doit etre identique à navibleu! */
	font-size:1em;
	font-family:'Roboto',Arial,sans-serif;
	/* background-color:#0D0751;*/
    /*align-items: center;*/
	/*flex-direction: column;*/
}

nav a:link
{
	font-weight:bold;
	color:black;
	text-decoration:none;
	display:inline-block;
	margin:7px;
}

nav a:visited
{
	color:black;
}

nav a:hover
{
	text-decoration: overline;
	color:green;

}



																/* Bannière */



.banniere
{
	border: 1px #F4EDE4 solid; /* maintenir bordure 1px // beige: #F4EDE4  */
	background-image: url("IMAGES/foret150.jpg");
	background-size: 100%;
	background-repeat: no-repeat;
	text-align: center;	
	margin-top:37px;	/* identique à hauteur de navibleu! */

}

.supertitre
{
	border: 0px orange solid;
	color:white;
	font-size:70px;
}






															/* Corps de la page */



.titrecorps
{
	border: 0px black solid;
	text-align: center;
	font-size:2.3em;
	color:#24421D;  /* #24421D;====> vert foncé */
}

.imagecorps
{
	border: 0px red solid;
	width: 100%;
	display: block;
	margin: auto;
	position: center;
	/* filter:drop-shadow(0 0 0.75rem DimGray);  ====> pour ombre */
}

.imagecorpsfloat
{
	border: 0px red solid;
	margin-right:30px;
	margin-bottom:15px;
	margin-top:0px;
	display: block;
	float: left; 
}

.corps
{   
	border: 0px green solid;
	color: black;
	font-size: 1.1em;
	text-align: justify;
	width: 50%;
	min-width: 50px;
	margin: auto;
}

.corps a
{
    text-decoration: none;
	color: black;
	font-size: 1em;
}


.encart
{
	order: 2px #E2BC74 solid;
	border-radius: 5px;  /*coins arrondis*/
	background-color: whitesmoke;
	padding: 10px;
	argin: 20px;
	color:#F4661B; /*orange foncé*/
	font-weight:bold;
}
	

.envaleur
{
	color:green;
	font-weight:bold;
}


.envaleur a
{
	color:green;
	font-weight:bold;
}

.nota
{
	font-family: Arial;
	font-size:0.9em;
	color:#5F9EA0;					/* bleu sinon: 4682B4 */
	display:block ; 				/* pour le padding */
	margin-left:50px;
	padding-left:10px;
	border-left: 1px #5F9EA0 solid;
}

.citations
{
	font-size: 0.9em;
	font-style:italic;
	letter-spacing:+0.02em;
}


.citations a:link
{   
	color: black;
	text-decoration:none;
}


.citations a:hover
{   
	text-decoration:underline;
}


.citations a:visited
{   
	color: gray;
}

.citations li
{
	list-style-type: '→  ';
}


.reponse
{
	font-size: 1em;
}

.reponse li
{
	list-style-type: '→  ';
}

.boutonCTA
{
	border: 0px red solid;
	border-radius: 5px;
	background-color:#AE8147; /*  couleur beige-marron */
	text-align:center;
	margin-left: 15%;
	margin-right: 15%;
	padding: 1%;
}

.boutonCTA a
{
	color: white;
}


.boutonCTA:hover
{
	font-weight: bold;	
    cursor: pointer;
	filter:drop-shadow(0 0 0.75rem silver);
}

.questions
{
	background-color:#ede5dd; /*  couleur marron claire, sinon celle de index c'est #cdc2b6 */
	padding:30px;
	margin-left:10px;
	margin-right:10px;
}

address
{
	text-align:left;
	font-style:normal;
}

address a:link
{
	color:green;
	text-decoration:none;
}

address a:hover
{
	color:#24421D;
	font-weight:bold;
}	

address a:visited
{
	color:green;
}

address ul
{
		list-style: none;
}

address li::before
{
		content: "\2022"; 
		color: green;
		display: inline-block;
		width: 1.1em; 
		margin-left: -1em; 
}


.video
{   
	border: 0px red solid;
	text-align: center;
	margin: auto;
}

video 
{
	border:1px gray solid;
	width: 600px;
	height: auto;
}


.form-submit-button:hover 
{
	cursor: pointer;
}







													/* ARTICLES */






.article
{   
	border-radius: 5px;  /*coins arrondis*/
	border: 1px gainsboro solid;
	color: black;
	font-size: 0.9em;
	text-align: justify;
	width: 80%;
	min-width: 50px;
	margin: auto;
	padding:20px;
	padding-left:80px;
	padding-right:80px;
	/*box-shadow: 6px 6px 6px 6px gainsboro;*/
}

.article:hover
{  
	background-color:white;
	filter:drop-shadow(0 0 0.75rem gainsboro);
}

.details
{
		list-style: none;
}

.titrearticle:hover
{
		cursor: pointer;
}


.titrearticle
{
	font-family: 'Amatic SC',Arial,sans-serif;
	color:green;
	/*font-weight:bold;*/
	font-size:1.9em;
}

.datearticle
{
	color:grey;
	font-style:italic;	
	font-size:0.9em;
}

.sourcesarticle
{
	color:grey;	
	font-size:0.7em;
	text-align:left;
}

													 /*			BAS DE PAGE    		*/

.basdepage
{
	border: 1px #F5F2EF solid; /* à maintenir  */
	background-color:#F5F2EF; /*beige de fond*/
	margin-top:10px;
}

.textebasdepage
{
	border: 0px green solid; 
	margin-left:180px;
	margin-right:100px;
	padding-left:20px;
	padding-right:20px;
}


.troisdiv0
{
	border: 0px green solid; 
	text-align: center;
	margin-left: 180px;
	margin-right: 180px;
}
	
.troisdiv1
{
	border: 0px blue solid; 
	width:180px;
	height:350px;
	background-color:#cdc2b6; /*  couleur marron  */
	display: inline-block;
	vertical-align: middle;
	float: none;
	padding-left:25px;
	padding-right:25px;
	padding-top:5px;
	padding-bottom:5px;
	margin-left:10px;
	margin-right:10px;
	margin-top:10px;
	margin-bottom:10px;
}

.troisdiv1 a
{
	text-decoration:none;
	color:none;
}



.troisdiv1 a:visited
{
	text-decoration:none;
	font-size:0.5em;
	color:none;
}


.troisdiv1:hover
{
    cursor: pointer;
	filter:drop-shadow(0 0 0.75rem silver);
}

.titrediv1
{
	font-size:1.8em;
	font-family: 'Amatic SC',Arial,sans-serif;
	ont-weight:bold;
	text-transform: uppercase;
	letter-spacing:0.05em;
}

.corpsdiv1
{
	font-size:0.9em;
	letter-spacing:0.02em;
}















	




												/* Footer */


footer
{
	
	background:#27352A;/* nouveau vert (ancien: 24421D) */
	border:1px gray solid;
	padding: 30px;
	font-weight:normal;
}


.footer1
{
	border: 0px red solid;
	font-family:arial;
	font-size:0.8em;
	color:white;
}

.footer2
{
	font-family:arial;
	border: 0px red solid;
	color:white;
	font-size:0.7em;
	text-align:right;
}

footer a
{
	text-decoration:none;
	color:white;
	font-weight:normal;
}

footer a:link
{
	text-decoration:none;
	color:white;
	font-weight:normal;
}

footer a:hover
{
	font-weight:bold;
	color:white;
}

footer a:visited
{
	text-decoration:none;
	color:white;
	font-weight:normal;
}


.imgcentree
{
	border: 0px red solid;
	text-align:center;
	display: flex;
	justify-content: center;
	align-items: center;
}

.imgcentree img
{
	margin-left:20px;
	margin-right:20px;
}

/* ======================================================================================================























																SMARTPHONES*/


/* ======================================================================================================

Pour tous les appareils équipés d'écrans et dont la taille est inférieure à 800px*/


@media only screen and (max-width: 1000px) 
{
   /* 24421D vert foncé  */

	.navibleu
	{
			position: fixed;
			top:0px;
			left:0px;
			margin:0;
			padding:0px;
			background-color:white; 
			height:50px; /* en lien avec margin de banniere */
			width:100%;
			color:black;
			text-align: left;
			filter:drop-shadow(0 0 0.75rem DimGray)
	}

	
	
	nav .navigationrouge
	{
			margin-top:10px;
			display: none;
			flex-direction: column;
			background: rgba(244, 237, 228, 0.9);  /* couleur beige du fond du menu => 244, 237, 228*/
			height: 290px; /*ajouter 50px par nouvelle ligne de menu supplémentaire en plus */
			padding-left:40px;
	}
	
    nav .navigationrouge a 
	{
        width: 50%;
    }
 
	
	#toggle:checked + .navigationrouge
	{
        display: flex;
    }
	
	
	    
	label 
    {
        border:0px orange solid;
		width: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        font-size: 30px;
        color: #24421D;  /*vert foncé*/ 
        cursor: pointer;
    }
	

	nav a:link 
	{
			color:black;
			font-family: 'Roboto',Arial,sans-serif;
	}


	nav a:visited
	{
			color:gray;
	}
	
	nav a:hover
	{
			text-decoration: overline;
			text-decoration-color:#24421D;/*vert*/
			color:#24421D;/*vert*/
	}




	
	
	.banniere
	{
			width:100%;
			margin-top:50px; /* en lien avec le height de navibleu*/
	}
	
	.supertitre
	{
			font-size:45px;
	}

    .corps
	{
        	width: 80%;
			font-size: 20px;
	}

	
	
	
	.titrecorps
	{
		font-size: 25px;
	}
	
	
	.article
	{   
	width: 90%;
	border-radius: 10px;
	font-size: 15px;
	padding:50px;
	}
	
	
	.questions
	{
		font-size:15px;
		padding:30px;
		margin-left:5px;
		margin-right:5px;
	
	}

.textebasdepage
{ 
	margin-left:20px;
	margin-right:20px;
}	
	
.troisdiv0
{
	margin-left: 0px;
	margin-right: 0px;
}

	
	.titrediv1
	{
		font-size:20px;
		font-weight:none;
	
	}	
	
	video 
	{
		width: 100%;
		height: auto;
	}

	
/*	.footer1
	{
		font-size:0.5em;
	}

	.footer2
	{
		font-sizz:0.5em;
	}
*/



}