/* font-family: policeA, policeB, policeC, DEFAULT(sans-serif, serif); serif = time new roman, sans-serif = arial*/

	/* font-family: "Sofia", sans-serif;        */ 
	/* font-family: "Trirong", serif;           */
	/* font-family: "Audiowide", sans-serif;    */

	/* <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins|Sofia|Trirong|Audiowide">

	h1.a {font-family: "Audiowide", sans-serif;}
	h1.b {font-family: "Sofia", sans-serif;}
	h1.c {font-family: "Trirong", serif;}

	*/

	/* <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins&effect=fire|neon|outline|emboss|shadow-multiple">  

	<h1 class="font-effect-neon">Neon Effect</h1>
	<h1 class="font-effect-outline">Outline Effect</h1>
	<h1 class="font-effect-emboss">Emboss Effect</h1>
	<h1 class="font-effect-shadow-multiple">Multiple Shadow Effect</h1>

	*/

	/*
		Positionnement absolu : 
		-->  mettre a n<importe quel endroit (mettre au dessus). Lors qu<on definit une POSITION ABSOLUE pour notre 
			barre de navigation <nav qui est par defaut un BLOCK>, il passe au dessus de tous les autres elements, peu importe les elements.
			Du coup, il n<est pas tout le temps utilise, a part dans ces cas particuliers.

		Poritionnement fixe :
		-->  mettre a un endroit FIXE SUR L<ECRAN EN TOUT LE TEMPS. Pratique pour les session d<entetes ET menus de navigation <nav></nav> qu<on veut garder devant son ECRAN.

		Positionnement relatif :
		-->  permet de d/caller l,/l/ment par rapport 'a sa position (par rapport 'a son parent).
	*/


/*   https://studiodivo.fr/portfolio_page/boutique-magasin-bio/  
*/

/*----------------------------------------------*/
/*           STYLE POUR MOBILE                  */
/*----------------------------------------------*/
/*
	body
	{
		font-family : Trirong, Poppins, Sans-cherif;
		font-size : 18px; 
		background-image : linear-gradient(yellow, rgba(0, 179, 255, 0.8));
	}

	header
	{
		display : inline-block;
		border : 1px solid red;
		width : 100%;
		margin-bottom : 10px;
	}
*/
	.boite_mot_de_passe
	{
		border : 1px black solid;
		border-radius : 10px;
		width : 700px;
		margin-top : 50px;
		margin-bottom : 150px;
		margin : auto; 
		font-size : 16px;
		padding : 20px;
		box-shadow : 4px 4px 4px rgba(180, 180, 180, 1);
		background-color: rgba(230, 230, 230, 1);
	}

	#messageWeb
	{
		width : 125px;
		height : 25px;
		margin : 10px;
	}

	#Soumettre
	{
		width : 125px;
		height : 25px;
		margin : 10px;
	}

	#messageErreur                           
	{
		color : red;
		font-weight : bold;
		font-size : 12px;
		margin : auto;
		margin-top : -5px;
		margin-bottom : 10px;
		display : inline-block;
		visibility : hidden;
	}

	#OK                                      
	{
		visibility : hidden;
	}

	*   /* selecteur universel */               /* ce truc sert à éviter les decallages de padding ou margin par defaut existant sur certaines balises */
	{
		box-sizing : border-box;
	}

	a:hover
	{
		color : green;
		font-weight : bold;
	}

	body
	{
		/*font-family : Trirong, Poppins, Sans-cherif;*/
		font-size : 14px; 
		background-color : rgb(202, 200, 200);
	}
	
	header
	{
		width : 100%;
		display : inline-block;
		margin-bottom : 10px;
		border : 3px solid rgb(134, 132, 132);
		border-radius : 20px;
	}

	iframe
	{
		width : 100%;
		height : 100%;
		margin-top: 10px;
		margin-bottom:10px;
		border-radius : 10px;
	}

	#formulaire1
	{
		width : 100px;
		height : 75px;
		right : 30px;
		top : 30px;
		border-radius: 50px;
		position : fixed;    
	}
	.oublie
	{
		text-align : center;
		width : 75%;
		margin : auto;
	}
	
	span
	{
		color : blue;
	}

	.limite-video
	{
		/*display : inline-block;*/
		/*margin-left : 20%;
		margin-right : 20%;*/
		/*overflow : auto;*/
		/*text-align : center;*/
	}

	.vos_impressions
	{
		text-align : center;
	}

	.sous_section
	{
		text-align : center;
		/*background-color: purple;*/
		margin : auto;
		font-family : Audiowide;
		width : 60%;
		margin : auto;
		text-shadow : 4px 4px 4px white;
	}

	.cadre_video
	{
		margin-bottom : 10px;
		width : 100%;
		height : 350px;
	}

	.text-service-aide
	{
		display : inline-block;
		border-radius : 10px;
		border : 1px solid rgb(216, 213, 213);
		width : 100%;
		/*margin-right : 40%;*/
		padding : 5%;
		background-color: white;
		white-space : initial;
	}

	h2
	{
		/*margin-bottom : 0;*/
		font-family : Audiowide;
		text-align : center;
		width : 80%;
		margin : auto;
		border-bottom : 1px black solid; 
		text-shadow : 4px 4px 4px green;
	}

	nav
	{
		text-align : center; 
		background : white;
		box-shadow : 4px 4px 20px grey;  /*Remarque : Je n<ai pas eu besoin de definir l<attribut BORDER*/
		border-radius : 10px;
		width : 80%;
		margin : auto;
	}

	ul
	{
		padding : 0;  /*Dans un ul, le padding des li est decalle par deffault. Donc je dois le mettre a 0 pour avoir le controle ABSOLU sur la position. */
	}

	nav ul li
	{
		/*font-size : 35px;*/
		list-style-type : none;
		margin-left : 20px;
		margin-right : 20px;
		/* display : block; */ /* par defaut, les li sont des display BLOCK. On les change donc pour les mettre INLINE */
		/* REMARQUE TRES IMPORTANTE : un composant BLOCK peut avoir une HEIGHT et une WIDTH 
										mais un composant INLINE n'a NI HEIGHT NI WIDTH 
										
										SOLUTION : INLINE-BLOCK rassemble le meilleur des 2 mondes : INLINE et BLOCK
										DISPLAY : none   (permet de faire DISPATRAITRE un éléments, pour faire un éffet JavaScript)
										
									*/
	}

	footer
	{
		position : fixed;
		/*margin-top : 20px;
		clear : both;*/
		left : 10px;    
		right : 10px;
		bottom : 10px;
		
		background : black;
		text-align : center;
		min-height : 50px;
		color : rgba(255, 255, 255, 0.5);

	}

	/* Cible 1 million d'utilisateur èa travers le monnde. */

	:root { --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

	body { font-family: var(--font); }

	.hero-img { max-height:60vh; object-fit:cover; }
	
	/*  Rendre la valeur « addictive » 
		Mode “Faible lumière / Réduire les animations”: */
	@media (prefers-reduced-motion: reduce){ *{ animation: none !important; transition: none !important; } }
	@media (prefers-color-scheme: dark){ body{ background:#0b1220; color:#e5e7eb; } }

	/*--------------------------------------------------------------------*/
	/*                          STYLE POUR ORDINATEUR PC                  */
	/*--------------------------------------------------------------------*/

	@media only screen and (min-width : 700px) {

		*   /* selecteur universel */  /* ce truc sert à éviter les decallages de padding ou margin par defaut existant sur certaines balises */
		{
			box-sizing : border-box;
		}

		a:hover
		{
			color : green;
			font-weight : bold;
		}

		body
		{
			font-family : Trirong, Poppins, Sans-cherif;
			font-size : 14px; 
			background-color: rgb(219, 217, 217);
		}

		iframe
		{
			width : 100%;
			height : 100%;
			border-radius: 20px;
		}

		.oublie
		{
			text-align : center;
			width : 75%;
			margin : auto;
		}

		.vos_impressions
		{
			text-align : center;
		}

		.sous_section
		{
			text-align : center;
			/*background-color: purple;*/
			margin : auto;
			width : 60%;
			margin-bottom: 10px;
			text-shadow: 4px 4px 4px white;
		}

		.cadre_video
		{
			margin : auto;
			margin-bottom : 20px;
			width : 60%;
			height : 500px;
		}

		.text-service-aide
		{
			/* : inline-block;
			width : 80%;
			height : 100%;		
			margin-left : 10%;
			margin-right : 10%;
			white-space : initial;*/

			display : inline-block;
			border-radius : 10px;
			/*border : 1px solid yellow;*/
			width : 50%;
			margin-left : 25%;
			margin-right : 20%;
			padding : 2%;
			background-color: white;
			white-space : initial;
		}

		h2
		{
			/*margin-bottom : 0;*/
			font-family : Audiowide;
			text-align : center;
			width : 80%;
			margin : auto;
			border-bottom : 1px black solid; 
			text-shadow : 4px 4px 4px green;
		}

		nav
		{
			text-align : center; 
			background : white;
			box-shadow : 4px 4px 20px grey;  /*Remarque : Je n<ai pas eu besoin de definir l<attribut BORDER*/
			border-radius : 10px;
			width : 80%;
			margin : auto;
		}

		ul
		{
			padding : 0;  /*Dans un ul, le padding des li est decalle par deffault. Donc je dois le mettre a 0 pour avoir le controle ABSOLU sur la position. */
		}

		nav ul li
		{
			/*font-size : 35px;*/
			list-style-type : none;
			margin-left : 20px;
			margin-right : 20px;
			display : inline;  /* par defaut, les li sont des display BLOCK. On les change donc pour les mettre INLINE */
							/* REMARQUE TRES IMPORTANTE : un composant BLOCK peut avoir une HEIGHT et une WIDTH 
															mais un composant INLINE n'a NI HEIGHT NI WIDTH 
															
															SOLUTION : INLINE-BLOCK rassemble le meilleur des 2 mondes : INLINE et BLOCK
															DISPLAY : none   (permet de faire DISPATRAITRE un éléments, pour faire un éffet JavaScript)
															
															*/
		}

		.boite_mot_de_passe
		{
			border : 1px black solid;
			border-radius : 10px;
			width : 700px;
			margin-top : 50px;
			margin-bottom : 150px;
			margin : auto; 
			font-size : 16px;
			padding : 20px;
			box-shadow : 4px 4px 4px rgba(180, 180, 180, 1);
			background-color: rgba(230, 230, 230, 1);
		}
	
		.presentation
		{
			width : 75%;
			text-decoration : bold;
			margin-top : 80px; /* POURQUOI EST-CE QUE mon MARGIN-TOP ici a une influence sur mon <header> lorsque le <header> est position FIXED ?? */
			margin-bottom : 80px; 
		}

      /*
		.contact
		{
			text-align : center;
			border : 1px black solid;
			border-radius : 10px;
			box-shadow : 4px 4px 4px purple;
			width : 25%;
			margin : auto;
			margin-top : 150px;
			margin-bottom : 150px;        
			background-color : rgb(211, 190, 211); 
		}
      */
		.conteneur
		{
			width : 75%;
			margin : auto;
			padding : 50px;
			display : flex;
			justify-content : space-around;
		}

		.element
		{
			font-size : 12px;
			padding-top : 20px;
			border : 1px black solid;
			border-radius : 10px;
			box-shadow : 4px 4px 4px rgba(180, 180, 180, 1);
			width : 200pX;
			background-color: rgba(230, 230, 230, 1);     /* margin-bottom : 150px;      */ /* Remarque : contrairement a la Balise P, la balise Section n'a PAS de margin par default. Sio on veut donc decaller une section, il faut definir une marge */
		}

		.background-cadre-contact
		{
			width : 50%;
			margin : auto;
			margin-bottom : 40px;
		}

		.cadre-contact
		{
			font-size : 12px;
			border : 1px black solid;
			border-radius : 10px;
			box-shadow : 4px 4px 4px purple;
			width : 200px;
			margin : 50px 50px 50px 50px ;   /* Comment je fais pour mieux centrer les cadre-contacts ? */
			display : inline-block;          /* la reunion du meilleur des 2 mondes */
			background-color: rgb(211, 190, 211);     /* margin-bottom : 150px;      */ /* Remarque : contrairement a la Balise P, la balise Section n'a PAS de margin par default. Sio on veut donc decaller une section, il faut definir une marge */
		}

		.cadre-contact h3, .cadre-contact span /* LES 2 SPAN NE SE CENTRENT PAS */
		{
			text-align : center;
		}
/*
		span  
		{
			text-align : center;
		}

		.image_4profils
		{
			height : 160px;
			width : 160px;
			margin-left : 20px;
			margin-right : 30px;
			margin-bottom : 10px;
			border-radius : 50%;
		}

		.image_4profils_carre
		{
			height : 160px;
			width : 160px;
			margin-left : 20px;
			margin-right : 30px;
			margin-bottom : 10px;
			border-radius : 10px 10px 0 0;
		}
*/
		footer
		{
			position : fixed;
			left : 10px;    
			right : 10px;
			bottom : 10px;
			background : black;
			text-align : center;
			height : 40px;
			color : rgba(255, 255, 255, 0.5);
		}
	}