body {
		margin: 0;
		padding: 0;
		font-family: Arial, sans-serif;
		/* background-color: transparent;*/
		background-color: rgb(0, 0, 0);	
}
/*------------------------- BLOC BANNIERE HAUT DE PAGE -------------------------            */
/* contient BANNIERE HAUT DE PAGE */	
	.banner {
			position: sticky;
			top: 0;
			width: 100%;
			background-color: rgba(0, 128, 0, 0.9); /* Vert Greendac avec légère transparence */
			color: white;
			padding: 10px 20px;
			font-size: 22px;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: space-between;
			z-index: 1000; /* Assure que la bannière reste au-dessus du contenu */
	}
					
	.banner img {
			height: 45px; /* Augmente la taille du logo */
			margin-left: 30px;
			margin-right:30px;
	}
	.banner .logo {
		display: flex;
		align-items: center;
	}
	.banner .text {
		flex-grow: 1;
		text-align: center;
		font-size: 36px;
	}
/*__________________________________________________________________*/	



/*------------------------- BLOC PRINCIPAL : CONTENT -------------------------            */
/* contient tous le site web */
	.content {
			text-align: center;
			padding: 10px 1%;
			background-color: transparent;
			/*background-color: rgb(0, 0, 0);	*/		
	}
	/* ✅ S'assure que la page est assez longue pour voir l'effet sticky */
	.long-content {
		height: 200vh; /* Simule du contenu long pour voir l'effet sticky */
	}

	.container_intro {
		width: 100%;
		display: grid;
		grid-template-columns: 1fr 3fr; /* Une seule colonne par défaut */
		height: 100%; /* Remplir toute la hauteur de la fenêtre */
		overflow: hidden; /* Permet à la vidéo d'apparaître même en dehors de la zone visible */
		position: relative; /* Nécessaire pour positionner la vidéo correctement */


	}
	.container_intro-text {
		text-align: justify;
		/*border: 2px solid #008000;  Bor"dure verte Greendac */
		padding: 25px; /* Espace intérieur pour aérer */
		color: #FFFFFF;
		/*background-color: rgb(0, 0, 0);*/
		font-size: 20px; /* Définit la taille du texte en pixels */
	}
	.container_intro-video {
		position: relative;
		width: 100%; /* La vidéo prend toute la largeur du conteneur */
		height: 100%; /* La vidéo prend toute la hauteur du conteneur */
		display: flex;
		justify-content: center; /* Centre la vidéo horizontalement */
		align-items: center; /* Centre la vidéo verticalement */
		overflow: hidden; /* Cache les parties de la vidéo qui dépassent */
}
	.container_intro-background-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: auto;
            object-fit: cover;
			object-position: center center; /* Centre la vidéo à la fois horizontalement et verticalement */
            z-index: -1; /* Assure que la vidéo reste derrière le contenu */
        }

/*__________________________________________________________________*/	



/*------------------------- N EST PLUS UTILISER-------------------------            */

	/* A EFFACER
		CENTRER la première box 
		 .box:first-child {
			justify-self: center;  Centre la première boîte
			width: 50%; Ajuste la largeur pour qu'elle ne soit pas trop grande 
		}
	*/

	/* ✅ Première box centrée */

	.first-box {
		display: flex;
		align-items: center;
		gap: 20px;
		justify-content: center;
		text-align: left;
		max-width: 100%; /* Empêche de dépasser la largeur du parent */
		box-sizing: border-box; /* Inclut le padding et la bordure dans la taille */
		width: 90%;
		background-color: transparent; /*lightblue*/
		padding: 20px;
		margin: auto; /* Centre horizontalement */
		border: 0px; /*10px solid #008000*/
		border-radius: 10px;
	}
	.first-box-text {
		text-align: justify;
	}

/*__________________________________________________________________*/	









/* ________________________ SOUS BLOC DE DONNES:  PRESENTATION DES ASSOCIES ________________________  */	

.contenair_associe {
	display: flex;
    flex-direction: column; /* Organise les enfants en colonne */
    height: 100vh; /* Ajuste la hauteur selon ton besoin */
	max-width: 100%;
	max-height: 100%;
    position: relative; /* Permet de positionner les enfants */
    padding: 20px;
	overflow: hidden; /* Permet à la vidéo d'apparaître même en dehors de la zone visible */
}
.contenair_associe_gauche {
	position: absolute;
    top: 0; /* Place en haut */
    left: 0; /* Aligne à gauche */
    padding: 10px;
	z-index: 1;  /* Assure que ces éléments sont au-dessus de la vidéo */
}

.contenair_associe_droite {
	position: absolute;
    bottom: 0; /* Place en bas */
    right: 0; /* Aligne à droite */
    padding: 10px;
	z-index: 1;  /* Assure que ces éléments sont au-dessus de la vidéo */
}

.contenair_associe-img img {
	width: auto;
	height: 80%;
	max-height: 300px;
	max-with:auto;
	border-radius: 50%;
	object-fit: cover;
	margin-right: 20px;

	
}

/* STYLE DU TEXTE DANS LES BOXES */
.contenair_associe-text {
    text-align: left;
    max-width: 600px;
	font-size:20px;
}
/* TITRES */
.contenair_associe-text h3 {
    margin: 0 0 10px;
    color: #FF0000; /* rouge */
	text-transform: uppercase; /* Optionnel : Met le texte en majuscules */
}
/* LISTES */
.contenair_associe-text ul {
    list-style: none;
    padding: 0;
	color: #FFFFFF; /* blanc */
	/*font-weight: bold;*/
}

.contenair_associe-text ul li {
    padding-left: 20px;
    position: relative;
}

.contenair_associe-text ul li::before {
    content: "+";
    color: #008000;
    font-weight: bold;
    position: absolute;
    left: 0;
}
/*__________________________________________________________________*/	






/* ------------------------- BLOC DE DONNES DE DELIMITATION GENERAL -------------------------*/	
/* un ".container_bloc" contiendra un ou plusieurs  ".container_domaine", servant à formater l'afffichage et sectoriser l'affichege */	
.container_bloc {
	/* background-color: rgb(206, 255, 211); Fond clair pour bien voir la bordure rgb(255, 255, 128) */
	padding: 20px; /* Espace intérieur pour aérer */
	margin: auto;
	width: 100%;
	margin-bottom: 40px; /* Ajoute un espace de 40px entre chaque container */
}
/*__________________________________________________________________*/	







/* ________________________  SOUS BLOC DE DONNES DE SECTORISATION ________________________  */

/* un ".container_domaine" contiendra un ".article_container", ceux sont les secteurs d'activités de la sociétés* */
	.container_domaine {
		display: grid;
		grid-template-columns: 1fr; /* Une seule colonne par défaut */
		gap: 20px;
		/*border: 2px solid #008000;  Bordure verte  */
		background-color: #f9f9f9;
		padding: 20px;
		margin: auto;
		margin-bottom: 40px;
	}

	/* Style des titres des contenaires "contenair"*/
	.container_domaine-titre {
		margin-bottom: 25px; /* Plus d'espace sous le titre */
		color: #008700; /* Vert Greendac */
		font-size: 24px; /* Taille plus grande pour bien ressortir */
		font-weight: bold; /* Met le titre en gras */
		text-transform: uppercase; /* Optionnel : Met le texte en majuscules */
		letter-spacing: 1px; /* Ajoute un léger espacement entre les lettres */
		text-align:  center;
		max-width: 90%;
	}
/*__________________________________________________________________*/	










/* ________________________ BLOC DE DONNES : ARTICLE ________________________  */	
/* Bloc qui contiendra chaque article du site web Text + photo */

	.container_article {
		background-color: lightgreen; /*transparent*/
		display: grid;
		grid-template-columns: 1fr 2fr;
		gap: 20px;
		width: 100%;
		min-height: 400px;
		max-width: 97%;  /*Ajuste la largeur selon tes besoins */
		max-height: 90vh;
		margin: auto;
		padding: 20px; /* Ajoute de l’espace autour du texte */
		margin-bottom: 40px;
		/* display: flex;  Permet d’ajuster le contenu */
		/*align-items: center;  Centrage vertical */
		/*justify-content: center;  Centrage horizontal */
		box-sizing: border-box;
		align-items: stretch; /* aligne les enfants sur même hauteur */
		opacity: 1;

	}

	.article-text {
		background-color: lightblue; /*transparent*/
		text-align:  justify;
		text-align: left;
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-position: center;
		max-height: 100%;
		max-width: 100%;
		font-size: 12px; /* Définit la taille du texte en pixels */
	}

	.article-image {
		/*background-color: lightblue; transparent*/
		width: auto;
		height:100%
		/*max-width: 100%; 
		max-height: 100%; */
		position: relative; 
		display: grid;
		grid-template-columns: 1fr ;
		align-items: center;
		justify-content: center;
	}
 	.article-image img {
		
	}
/*		.article-image img {
		width: 100%;
		height: auto;
		object-fit: cover; 
		/*position: absolute;
		top: 0;
		left: 0;
		opacity: 1;
		transition: opacity 0.5s ease-in-out;
	}*/
	/* Partie image */
	.slider-container {
		width: 100%;
		max-width: 100%; /* Ajuste la largeur selon tes besoins */
		margin: auto;
		display: grid;
		grid-template-columns: 1fr ;
		align-items: center;
		justify-content: center;
	}
	.image-scroll {
		display: flex;
		overflow-x: auto; /* Active le scroll horizontal */
		gap: 10px;
		max-width: 100%;
		width: 100%; /* Prend toute la largeur disponible */
		padding: 10px;
	}
	.image-scroll img {
		/* width: 300px;*/
		width: 100%; /* Prend toute la largeur de .image-scroll */
		height: auto;
		max-height:700px; /*800px;  Pour éviter que l'image ne devienne trop grande */
		object-fit: cover;
		border-radius: 5px;
	}	

	 .article-image img.active {
		display: block;
	}
	/* Style pour les boutons */
	button {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		background-color: rgba(0, 0, 0, 0.5);
		color: white;
		border: none;
		padding: 10px;
		cursor: pointer;
		z-index: 10;
	}	
	
 /*	.picture-fond_ecran {
		width: 465px;
		height: 621px;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;	
		}	
	.picture-fond_ecran img {
		width: 100%;
		height: 100%;
		object-fit: cover; 
	}
 */	
	 /* Boutons de navigation 
	#prev, #next {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		background: rgba(0, 0, 0, 0.5);
		color: white;
		border: none;
		padding: 10px;
		cursor: pointer;
		font-size: 20px;
		z-index: 10;
	}

	#prev { left: 10px; }
	#next { right: 10px; }

	#prev:hover, #next:hover {
		background-color: rgba(0, 0, 0, 0.8);
	}
*/
	/* STYLE DU TEXTE DANS LES BOXES */
	.article-text {
		text-align: left;
		padding: 10px;
		border: none;
		max-width: 600px;
		/*background-color: rgba(0, 0, 0, 0.8);*/
	}
	/* TITRES */
	.article-text h3 {
		margin: 0 0 10px;
		color: #008000; /* Vert Greendac */
	}
	.article-text h4 {
		margin: 0 0 10px;
		/*text-decoration: underline;*/
		font-weight: bold;
	}
	/* LISTES */
	.article-text ul {
		list-style: none;
		padding: 0;
		padding-left: 20px;
	}

	.article-text ul li {
		padding-left: 20px;
		position: relative;
	}

	.article-text ul li::before {
		content: "✔";
		color: #008000;
		font-weight: bold;
		position: absolute;
		left: 0;
		
	}	
/*__________________________________________________________________*/	
		
		
		
		
		
		
		
		
		
		
		
		
		
		
/* ________________________ BLOC : STYLE ________________________  */	


.container-img img {
	width: auto;
	height: 100%;
	max-height: 300px;
	border-radius: 50%;
	object-fit: cover;
	margin-right: 20px;
}


/* STYLE DES BOXES */
.container_bloc-titre {
	margin-bottom: 20px; /* Plus d'espace sous le titre */
	color: #0074D9; /* Bleu électrique */
	font-size: 30px; /* Taille plus grande pour bien ressortir */
	font-weight: bold; /* Met le titre en gras */
	text-transform: uppercase; /* Optionnel : Met le texte en majuscules */
	letter-spacing: 1px; /* Ajoute un léger espacement entre les lettres */
	text-align:  center;
	max-width: 100%;

}




/* en cours de modif 
.carousel {
    overflow: hidden;
    width: 100%;
    max-width: 300px;
}
*/


/* Appliquer un style spécial quand le carousel est en plein écran 
.carousel:fullscreen, 
.carousel:-webkit-full-screen,
.carousel:-moz-full-screen,
.carousel:-ms-fullscreen {
    width: 100vw; 
    height: 100vh; 
    display: flex;
    align-items: center;
    justify-content: center;
    background: black; 
}


.fullscreen-btn {
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #008000; 
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}
.fullscreen-btn:hover {
    background-color: #006600;
}
*/	
/* Mode plein écran : centrer correctement l'image 
#gallery:fullscreen .carousel-images,
#gallery:-webkit-full-screen .carousel-images {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
*/
/* Agrandir et centrer correctement l'image en plein écran 
#gallery:fullscreen .carousel-images img:first-child,
#gallery:-webkit-full-screen .carousel-images img:first-child {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    width: auto; 
    height: 90vh; 
    max-width: 100vw;
    object-fit: contain;
}
	*/
		



			
/* ________________________ BLOC FIN  ________________________  */	

.bloc_fin {
	/*background-color: red; */ 
	display: flex;
	flex-direction: column;  /* Une seule colonne par défaut */

	background-image: url('/image/fond-01.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    min-height: 50vh; 
    width: 100%;
}
/*__________________________________________________________________*/	





/* ________________________ BLOC : WHY-GREENDAC ________________________  */	
	
/* Style pour chaque domaine d'expertise */

.why-greendac {
	text-align: center;
	margin-top: 40px;
	padding: 30px; /* Espace intérieur pour aérer */
	/* background-color: rgba(0, 128, 0, 0.1);*/
	background-color: transparence;
	border-radius: 10px;
	margin-bottom: 40px;
	color: #FFFFFF;
}
	why-greendac h2 {
		color: #008000;
		margin-bottom: 20px;
	}

	.why-greendac ul {
		list-style: none;
		padding: 0;
		text-align: left;
		display: inline-block;
	}

	.why-greendac ul li {
		font-size: 18px;
		padding: 8px 0;
		position: relative;
		padding-left: 30px;
	}

	.why-greendac ul li::before {
		content: "✔";
		color: #008000;
		font-weight: bold;
		position: absolute;
		left: 0;
		font-size: 22px;
	}

	.contact-text {
		font-size: 20px;
		font-weight: bold;
		margin-top: 20px;
		color: #FFFFFF;
		
	}
	
	/* STYLE DU TEXTE DANS LES BOXES */
.box-text {
    text-align: left;
    max-width: 600px;
}
/* TITRES */
.box-text h3 {
    margin: 0 0 10px;
    color: #008000; /* Vert Greendac */
}
/* LISTES */
.box-text ul {
    list-style: none;
    padding: 0;
}

.box-text ul li {
    padding-left: 20px;
    position: relative;
}

.box-text ul li::before {
    content: "✔";
    color: #008000;
    font-weight: bold;
    position: absolute;
    left: 0;
}

	
/* ________________________ BLOC : CERTIFICATION ________________________  */	
.container-certif {
    /*background-image: url('/logo/logo.png'); */ /* Chemin de ton image */
    background-size: cover; /* Ajuste l'image pour couvrir tout le container */
    background-position: center; /* Centre l'image */
    background-repeat: no-repeat; /* Empêche la répétition */
	display: flex; /* Active Flexbox */
    justify-content: space-between; /* Espacement entre les blocs */
    align-items: center; /* Aligne verticalement */
    gap: 40px; /* Espacement entre les blocs */
    /* border: 10px solid #FF0000; Bordure noire */
     /*background-color: #f9f9f9;*/ /* Fond clair */
    padding: 20px;
    margin: auto; /* Centre le container */
    max-width: 100%; /* Largeur du container */
    margin-bottom: 40px; /* Espacement en bas */
	color: #FFFFFF;
}

.container-certif-box {
    display: flex;
    align-items: center; /* Centre les éléments dans chaque bloc */
    gap: 20px; /* Espacement entre logo et texte */
    flex: 1; /* Chaque bloc prend la moitié de l'espace */
}

.container-certif-img img {
    width: 100px; /* Taille des logos */
    height: 100px;
    border-radius: 90%;
    /*object-fit: cover;*/
	object-fit: contain; /* Assure que l'image entière est visible */
	background-color: white; /* Ajoute un fond blanc pour éviter des coupures */
	 padding: 5px; /* Ajoute un petit espace autour */
}			
.container-certif-title	{
	text-align: center; /* Centre le texte */
    width: 100%; /* Prend toute la largeur */
    font-size: 24px; /* Augmente la taille du titre */
    font-weight: bold; /* Met en gras */
    margin-bottom: 20px; /* Ajoute un espace sous le titre */
}	
/*__________________________________________________________________*/	
			
/*		

@media (min-width: 600px) {
	.container_bloc {
		width: 95%; 
        padding: 15px; 
	}
    .container {
        grid-template-columns: 1fr 1fr; # Deux colonnes après la première ligne 
    }

    .container .box:first-child {
        grid-column: span 2; # Fait que la première box prenne toute la largeur 
        text-align: center;
    }
}
*/