/* 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 decaller l element par rapport 'a sa position (par rapport 'a son parent).
	*/


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

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



/*====================================================================*/
/*                       STYLE POUR ORDINATEUR PC                                     */
/*====================================================================*/
	
	body
	{
		font-family : Trirong, Poppins, sans-serif;
		font-size : 12px; 
		/*background-image: url("../img/background_image/background_image_4.jpg");
		background-repeat: no-repeat;
		background-size: cover;*/
		background-color: #f1f1f1;
	}

	header
	{
		display : inline-block;
		margin-top : 10px;
		margin-bottom : 25px;
		width : 100%;
		height : 500px;
		border-radius : 10px;
		background-image: url('../img/background_image/10.jpg');
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		border : 2px solid rgb(216, 214, 214);
	}

	.oublie
	{
		text-align : center;
		width : 60%;
		margin : auto;
		font-size : 18px;
	}

	#formulaire1
	{
		width : 75px;
		height : 50px;
		border-radius: 50px;
		border: 2px solid rgb(216, 214, 214);
		position : static;    
		margin-left : 47%;
		margin-top : 5px;	
		margin-bottom: 10px;
	}

	.vos_impressions
	{
		text-align : center;
	}

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

	.sous_sous_section
	{
		color:green;
	}

	.cadre_video
	{
		margin : auto;
		margin-top : 40px;
		margin-bottom : 40px;
		width : 60%;
		height : 600px;
	}

	.cadre_video_interieur-text-service-aide   /* Video youtube intégrée */
	{
		margin : auto;
		margin-top : 10px;
		margin-bottom : 10px;
		width : 100%;
		height : 600px;
		border-radius : 10px;
	}
    
	.flex_cadre_photo_interieur-text-service-aide 
	{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		background-color: #f1f1f1;
		border-radius : 10px;
	}

	/*====================    Photos 3 par ligne    ======================*/

	.flex_cadre_photo_interieur-text-service-aide .cadre_photo_3
	{
		width: 30%;
		height : 200px;
		margin: 10px;
		border-radius : 10px;
	}

	/* --- Desktop/tablette : uniformiser la taille des images dans .cadre_photo_3 --- */
	.flex_cadre_photo_interieur-text-service-aide .cadre_photo_3{
		overflow: hidden;            /* cache le débordement quand on "crop" l'image */
	}

	.flex_cadre_photo_interieur-text-service-aide .cadre_photo_3 img{
		width: 100%;
		height: 100%;
		object-fit: cover;          /* garde une belle proportion, "crop" si nécessaire */
		display: block;             /* enlève l'espace blanc sous les images */
	}

	/*====================   FIN de Photos 3 par ligne    ======================*/

	/*====================    Photos 2 par ligne    ============================*/

	.flex_cadre_photo_interieur-text-service-aide .cadre_photo_2
	{
		width: 45%;
		height : 300px;
		margin: 10px;
		border-radius : 10px;
	}

	/* --- Desktop/tablette : uniformiser la taille des images dans .cadre_photo_3 --- */
	.flex_cadre_photo_interieur-text-service-aide .cadre_photo_2 {
		overflow: hidden;            /* cache le débordement quand on "crop" l'image */
	}

	.flex_cadre_photo_interieur-text-service-aide .cadre_photo_2 img {
		width: 100%;
		height: 100%;
		object-fit: cover;          /* garde une belle proportion, "crop" si nécessaire */
		display: block;             /* enlève l'espace blanc sous les images */
	}

	/*====================   FIN de Photos 2 par ligne    ======================*/

	/*====================    Photos 4 par ligne    ============================*/

	.flex_cadre_photo_interieur-text-service-aide .cadre_photo_4
	{
		width: 22%;
		height : 200px;
		margin: 10px;
		border-radius : 10px;
	}

	/* --- Desktop/tablette : uniformiser la taille des images dans .cadre_photo_3 --- */
	.flex_cadre_photo_interieur-text-service-aide .cadre_photo_4 {
		overflow: hidden;            /* cache le débordement quand on "crop" l'image */
	}

	.flex_cadre_photo_interieur-text-service-aide .cadre_photo_4 img {
		width: 100%;
		height: 100%;
		object-fit: cover;          /* garde une belle proportion, "crop" si nécessaire */
		display: block;             /* enlève l'espace blanc sous les images */
	}

	/*====================   FIN de Photos 4 par ligne    ======================*/

	

	.flex_cadre_video_interieur-text-service-aide
	{
		background-color: #f1f1f1;
		flex-direction: row;
		justify-content: space-between;
	}

	iframe, img
	{
		width : 100%;
		height : 100%;
		border-radius: 10px;
	}

	.text-service-aide
	{	
		display : inline-block;
		background-color:white;
		margin : auto;
		width : 60%;
		min-height : 10%;
		margin-left: 20%;
		margin-right : 20%;
		padding : 2%;
		border : 2px solid rgb(216, 214, 214);
		border-radius: 10px;
		white-space : initial;
		text-align: justify;
		text-justify : auto /*inter-word*/
	}

	h2
	{
		font-family : Audiowide; 
		text-align : center;
		color : blue;
		width : 60%;
		margin : auto;
		border-bottom : 1px black solid; 
		/*background-color: yellow;*/
	}

	nav ul li
	{
		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)
														
														*/
	}

	.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; 
	}

	.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;
	}

	footer
	{
		position : static;
		margin-top : 70px;
		padding : 10px;
		width : 100%; 
		bottom: 10px;
		background : black;
		text-align : center;
		min-height : 70px;
		color : white;
		border-radius: 10px;
	}


	/*========   Menu M. Fredy   ============*/

	.navbar
	{
		overflow: visible;
		position: relative;
		z-index: 2000;
		background-color: rgb(84, 172, 245);
		display : inline-block;
		width : 60%;
		margin-left : 20%;
		margin-top: 85px;
		margin-bottom : 10px;
		border-radius: 10px;
	}
			
	.navbar a
	{
		float: left;
		font-size: 16px;
		background: linear-gradient(90deg, #FFD700 0%, #FF4500 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		color: #FFD700;
		text-align: center;
		padding: 14px 16px;
		text-decoration: none;
	}
			
	.dropdown 
	{
		float: left;
		overflow: hidden;
		margin-left : 2%;
		margin-right : 2%;
	}
		
	.dropdown .dropbtn
	{
		font-size: 16px;
		border: none;
		outline: none;
		background: linear-gradient(90deg, #FFD700 0%, #FF4500 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		color: #FFD700;
		padding: 14px 16px;
		font-family: inherit;
		margin: 0;
	}

	.navbar a:hover, .dropdown:hover .dropbtn
	{
		background: blue;
		-webkit-background-clip: unset;
		background-clip: unset;
		-webkit-text-fill-color: #FFD700;
		color: #FFD700;
		border-radius:10px;
	}
		
	.dropdown-content 
	{
		display: none;
		position: absolute;
		background-color: #f9f9f9;
		min-width: 160px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 3000;
	}
		
	.dropdown-content a 
	{
		float: none;
		color: black;
		padding: 12px 16px;
		text-decoration: none;
		display: block;
		text-align: left;
	}
		
	.dropdown-content a:hover 
	{
		background-color: #ddd;
	}
		
	.dropdown:hover .dropdown-content 
	{
		display: block;
	}

	table 
	{
		border-collapse: collapse;
		width: 100%;
	}
	
	th, td 
	{
		padding: 8px;
		text-align: left;
		border-bottom: 1px solid #DDD;
	}

	tr:hover 
	{
		background-color: #D6EEEE;
	}
	
	/* autorise les clics / swipe sur le carousel */
	#myCarousel { pointer-events: auto; }

	/* hauteur stable et images propres (aucun effet visuel en plus) */
	#myCarousel, #myCarousel .carousel-inner, #myCarousel .item { height: 60vh; max-height: 800px; }
	#myCarousel .item img { width: 100%; height: 100%; object-fit: cover; }

	#er_Filtre, #e_Filtre, #charabia 
	{
		display : inline-block;
		background-color:white;
		margin : auto;
		width : 80%;
		min-height : 10%;
		margin-left: 10%;
		margin-right : 10%;
		font-size : 20px;
		padding : 2%;
		border : 1px solid rgb(135, 135, 197);
		border-radius: 10px;
		white-space : initial;
		text-align : justify;
		text-justify : auto; /*inter-word*/
	}

	#vision_et_mission 
	{
		width: 100%; 
		height: 60%; 
		border-radius:10px; 
		object-fit: cover;
	}














/*============================================================*/
/*                STYLE POUR MOBILE                           */
/*============================================================*/

@media only screen and (max-width : 780px) {
	
	body
	{
		font-size : 16px; 
	}

	#formulaire1
	{
		width : 75px;
		height : 50px;
		border-radius: 50px;
		border: 2px solid rgb(216, 214, 214);
		position : static;    
		margin-left : 40%;
		margin-top : 10px;
	}

	#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;
	}
 
	a
	{
		text-decoration : none;
	}

	a:hover
	{
		color : green;
		font-weight : bold;
	}
	
	header
	{
		display : inline-block;
		width : 90%;
		margin-left: 5%;
		margin-bottom : 25px;
		margin-top : 10px;
		border : 2px solid rgb(216, 214, 214);
		border-radius : 10px;
	}

	.oublie
	{
		text-align : center;
		width : 75%;
		margin : auto;
		font-size : 18px;
	}

	.vos_impressions
	{
		text-align : center;
	}

	.sous_section
	{
		text-align : center;
		/*background-color: purple;*/
		margin : auto;
		font-family : Audiowide;
		width : 90%;
		margin : auto;
	}

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

	.cadre_video_interieur-text-service-aide   /* Video youtube intégrée */
	{
		margin : auto;
		margin-top : 10px;
		margin-bottom : 10px;
		width : 100%;
		height : 300px;
		border-radius : 10px;
	}

	.flex_cadre_photo_interieur-text-service-aide 
	{
		flex-direction: column;
		justify-content: space-between;
	}

	.flex_cadre_photo_interieur-text-service-aide .cadre_photo_3
	{
		width: 70%;
		margin-left: 15%;
		margin-right: 15%;
		border-radius : 10px;
	}

	.flex_cadre_photo_interieur-text-service-aide .cadre_photo_2,
	.flex_cadre_photo_interieur-text-service-aide .cadre_photo_4
	{
		width: 95%;
		height: 60%;
		border-radius : 10px;
	}

	.flex_cadre_video_interieur-text-service-aide 
	{
		flex-direction: column;
		justify-content: space-between;
	}

	.cadre_photo_1
	{
		width : 100%;
		height : auto;
	}

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

	img
	{
		width : 100%;
		height : 100%;
		border-radius: 5px;
	}

	.text-service-aide
	{
		display : inline-block;
		background-color:white;
		margin : auto;
		width : 90%;
		height: 50%;   
		margin-left : 5%;
		margin-bottom: 10px;
		padding : 2%;
		border : 2px solid rgb(216, 214, 214);
		border-radius: 10px;
		white-space : initial;
		text-align: justify;
		text-justify : auto; /*inter-word*/
	}

	h2
	{
		font-family : Audiowide;
		text-align : center;
		width : 80%;
		margin : auto;
		border-bottom : 1px black solid; 
	}

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

	footer
	{
		display: inline-block;
		width : 90%;
		margin-left : 5%;    
		margin-bottom : 10px;
		background : black;
		text-align : center;
		min-height : 70px;
		color : white;
		border-radius: 10px;
	}

	/*=====================   Menu M. Fredy   ===========================================*/

	.navbar
	{
		width : 95%;
		height : 50px;
		margin-left: 2.5%;
		z-index : 2000;
		margin-top: 20px;
		overflow : visible;
		position : relative;
		display : inline-block;
		border-radius: 10px;
	}
	  
	.navbar a
	{
		font-size: 16px;
		background: linear-gradient(90deg, #FFD700 0%, #FF4500 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		color: #FFD700;
		text-align: center;
		padding: 14px 16px;
		text-decoration: none;
		width : 100%;
	}

	.dropdown 
	{
		float: left;
		overflow: hidden;
		margin-left : 2%;
		margin-right : 2%;
		display : block;
	}
	
	.dropdown .dropbtn
	{
		font-size: 16px;
		border: none;
		outline: none;
		background: linear-gradient(90deg, #FFD700 0%, #FF4500 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		color: #FFD700;
		padding: 14px 16px;
		font-family: inherit;
		margin: 0;
		text-align: left;
	}

	.navbar a:hover, .dropdown:hover .dropbtn
	{
		background: blue;
		-webkit-background-clip: unset;
		background-clip: unset;
		-webkit-text-fill-color: #FFD700;
		color: #FFD700;
		border-radius:10px;
	}
	
	.dropdown-content 
	{
		display: none;
		position: absolute;
		background-color: #f9f9f9;
		min-width: 160px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1000; /* Plus élevé pour passer au-dessus du carousel */
	}
	
	.dropdown-content a 
	{
		float: none;
		color: black;
		padding: 12px 16px;
		text-decoration: none;
		display: block;
		text-align: left;
	}
	
	.dropdown-content a:hover 
	{
		background-color: #ddd;
	}
	
	.dropdown:hover .dropdown-content 
	{
		display: block;
	}

	/* ------------------- Responsive -----------------------*/

	.navbar.responsive { position: relative;}

	.navbar.responsive .icon 
	{
		position: absolute;
		right: 0;
		top: 0;
	}

	.navbar.responsive a 
	{
		float: none;
		display: block;
		text-align: left;
	}

	.navbar.responsive .dropdown 
	{
		float: none;
	}

	.navbar.responsive .dropdown-content 
	{
		position: relative;
	}

	.navbar.responsive .dropdown .dropbtn 
	{
		display: block;
		width: 100%;
		text-align: left;
  	}

	.dropdown-content 
	{
		position: absolute;
		z-index: 1050; /* Testez une valeur très élevée */
		display: none;
	}

	.dropdown:hover .dropdown-content {
		display: block;
	}

	table
	{
		border-collapse: collapse;
		width: 100%;
		table-layout: fixed;
	}

	th, td
	{
		padding: 8px;
		text-align: left;
		border-bottom: 1px solid #DDD;
		word-break: break-all;
		overflow-wrap: break-word;
	}

	tr:hover
	{
		background-color: #D6EEEE;
	}

	.carousel-inner > .item > img, .carousel-inner > .item > a > img 
	{
		width : 100%;
		height : 100%;
		margin : auto;
	}

	#myCarousel
	{
		pointer-events: auto;
	}

	#vision_et_mission 
	{
		width: 100%; 
		height: 60%; 
		border-radius:10px;
		object-fit: cover;
	}

}

/* ===== Footer : boutons de partage & texte doré ===== */

.partage-cta {
	color: #FFD700;
	font-weight: bold;
	font-size: 1.05em;
}

.footer-share {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 16px;
	margin-bottom: 8px;
}

.share-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: 20px;
	font-weight: 600;
	font-size: 0.9em;
	text-decoration: none;
	color: white;
	transition: opacity 0.2s, transform 0.15s;
}

.share-btn:hover {
	opacity: 0.85;
	transform: translateY(-2px);
	color: white;
	text-decoration: none;
}

.share-wa { background: #4FCB7A; }
.share-fb { background: #5B9BD5; }
.share-tw { background: #8A9BA8; }
.share-li { background: #4A90C4; }
.share-ig { background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.share-tg { background: #0088CC; }
.share-tt { background: #2D2D2D; }
.share-sc { background: #FFFC00; color: #111; }
.share-sc:hover { color: #111; }