.carteblanche2_real {
    margin-top: 0px;
    margin-right: 6%;
    margin-bottom: 0px;
    margin-left: 6%;
    border-radius: 0px 0px 0px 0px;
	}
		
		
		.bouton-menu-ensreal a {
		display:block;
		width:350px;
		line-height:25px;
		text-align:center;
		vertical-align:middle;
		background:linear-gradient(#014a7f, #014a7f);
		color:white;
		text-decoration:none;
		margin-right: auto;
		margin-left: auto;
		border-radius: 15px 15px 15px 15px;
		}
		.bouton-menu-ensreal a:hover {
		background:linear-gradient(#5fcbf2, #5fcbf2);
		margin-right: auto;
		margin-left: auto;
		}


		.bouton-menu-ensreal-next a {
		display:block;
		width:350px;
		line-height:25px;
		text-align:center;
		vertical-align:middle;
		background:linear-gradient(#001554, #001554);
		color:white;
		text-decoration:none;
		margin-right: auto;
		margin-left: auto;
		border-radius: 15px 15px 15px 15px;
		}
		.bouton-menu-ensreal-next a:hover {
		background:linear-gradient(#5fcbf2, #5fcbf2);
		margin-right: auto;
		margin-left: auto;
		}

        #gallery-container_real {
			padding: 0px;
            max-width: 600px;
			max-height: 100%; /* Ajustez la hauteur selon vos besoins, ici nous utilisons 50% de la hauteur de la vue (viewport) */
            overflow: hidden;
            position: relative;
			margin: 0 auto; /* Centrez horizontalement le conteneur */
   			border: 1px solid #2ab2e6; /* Ajoutez un cadre autour du conteneur */
        }

        .gallery_real {
            display: flex;
            transition: transform 0.5s ease-in-out;
			background-color:#2ab2e6;
			border: 0px solid #2ab2e6; /* Ajoutez un cadre autour de chaque image */
        }

        .gallery-image_real {
            max-width: 100%; /* Les images ne dépasseront jamais la largeur du conteneur parent */
            max-height: 100%; /* Les images ne dépasseront jamais la hauteur du conteneur parent */
            object-fit: contain;
			box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); /* Ajoutez une ombre aux images */
    		border-radius: 0px; /* Ajoutez des coins arrondis de 10 pixels */
			background-color:#2ab2e6;
        }

        #explication_real {
			max-width: 700px;
			align-content: center;
			padding-top: 20px;
			margin: 0 auto;
			}
			
		#explication_mentions {
			max-width: 900px;
			align-content: center;
			padding-top: 20px;
			margin: 0 auto;
        }

        #controls_real {
            margin-top: 20px;
        }

        .button_real { /* Changez "button_real" en ".button_real" pour définir correctement le style des boutons */
            font-size: 18px;
            padding: 10px 20px;
            margin: 0 10px;
            cursor: pointer;
            background-color: #3498db;
            color: #fff;
            border: none;
            border-radius: 5px;
        }

.about_real {
	font-family: source-sans-pro;
	padding-left: 0x;
	padding-right: 0px;
	padding-top: 10px;
	padding-bottom: 0px;
	background-image:
    linear-gradient(to bottom, rgba(212, 242, 255), rgba(212, 242, 255, 0.50), rgba(212, 242, 255)),
	url("../images/Home/brique-bleue-clear.webp");
	display: inline-block;
	margin-top: 0px;
	margin-bottom: 0px;
	width: 100%;
	text-align: center;
}


.about_real_min {
	font-family: source-sans-pro;
	padding-left: 0x;
	padding-right: 0px;
	padding-top: 60px;
	padding-bottom: 0px;
	background-image:
    linear-gradient(to bottom, rgba(212, 242, 255), rgba(212, 242, 255, 0.50), rgba(212, 242, 255)),
	url("../images/Home/brique-bleue-clear.webp");
	display: inline-block;
	margin-top: 0px;
	margin-bottom: 0px;
	width: 100%;
	text-align: center;
}


.about_real_white {
border: 0px solid #3498db; 
background-color: white; 
display: inline-block; 
padding: 0.5%; 
border-radius: 15px 15px 15px 15px;
max-width: 85%;
}


.hero_header10_real {
	color: #014a7f;
	margin-top: 30px;
	margin-bottom: 10px;
	margin-right: 0;
	margin-bottom: 0px;
	margin-left: 0;
	text-align: center;
	letter-spacing: 1px;
	font-size: 24px;
	text-decoration: none;
	}
	
	
.hero_header10_real_texte {
	text-align: center;
	font-size: 19px;
	}

.hero_header11_real {
	color: #014a7f;
	margin-top: 60px;
	margin-right: 0;
	margin-bottom: 0px;
	margin-left: 0;
	text-align: center;
	letter-spacing: 1px;
	font-size: 24px;
	text-decoration: none;
	}


.hero_titre_real1 {
	color: #ffffff;
	text-align: center;
	margin-top: 60px;
	margin-bottom: 0px;
	letter-spacing: 1px;
	font-size: 13px;
	background-color: #014a7f;
	border-radius: 15px 15px 15px 15px;      
            margin: 0 auto; /* Centre l'en-tête horizontalement */
	max-width: 70%;
	padding-left: 20px;
	padding-right: 20px;
	}

        .container_real1 {
            max-width: 70%;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: row;
        }

  .container_real2 {
            max-width: 70%;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: row-reverse;
        }


        .image_real {
            flex: 1;
            padding: 20px;
        }

        .image_real img {
            max-width: 100%;
            height: auto;
            display: block;
        }

        .text_real1 {
            flex: 1;
            padding: 2px;
            text-align: center;
        }

 .text_real2 {
            flex: 1;
            padding: 2px;
            text-align: left;
	 
	 font-size: 20px;
        }














/* Mobile */
@media (max-width: 320px) {
	
		.carteblanche2_real {
	margin-right: 1%;
	margin-left: 1%;
	}
	
	#gallery-container_real {
                max-width: 95%;
                max-height: 100%; /* Ajustez la hauteur selon vos besoins, ici nous utilisons 100% de la hauteur de la vue (viewport) */
            }
		    #explication_real {
			max-width: 95%;
  }
  		#explication_mentions {
			max-width: 95%;
        }
		
		
.text_real1 {
     flex: 1;
     padding: 1px;
  
        }

 .text_real2 {
            flex: 1;
            padding: 1px;
         
	 font-size: 2px;
        }
	


        .container_real1 {
			max-width: 95%;
		      padding: 1px;
                flex-direction: column;
            }
			
 .container_real2 {
	    max-width: 95%;
		      padding: 1px;
                flex-direction: column;
            }
	
            .image_real, .text_real {
                flex: auto;
                padding: 5px;
            }
		.hero_titre_real1 {	       
		max-width: 95%;
	padding-right: 1px;
	padding-left: 1px;
	}
	
	}
	
	
	
 
/* Small Tablets */
@media (min-width: 321px) and (max-width: 767px) {
	#gallery-container_real {
                max-width: 95%;
                max-height: 100%; /* Ajustez la hauteur selon vos besoins, ici nous utilisons 100% de la hauteur de la vue (viewport) */
            }
	    #explication_real {
			max-width: 95%;
  }
  		#explication_mentions {
			max-width: 95%;
        }
		
		
	.text_real1 {
     flex: 1;
     padding: 1px;
   
        }

 .text_real2 {
            flex: 1;
            padding: 1px;
      
	 font-size: 20px;
        }

	


		  .container_real1 {
			   max-width: 90%;
			       padding: 5px;
                flex-direction: column;
            }
	  .container_real2 {
		   max-width: 90%;
		      padding: 5px;
                flex-direction: column;
            }

            .image_real, .text_real {
                flex: auto;
                padding: 5px;
            }
		.hero_titre_real1 {	 
			max-width: 90%;
	padding-right: 5px;
	padding-left: 5px;
	}	
		
 }
	
	
	
	
	
	
/* Small Desktops */
@media (min-width: 768px) and (max-width: 1096px) {
	
		#gallery-container_real {
                max-width: 600px;
                max-height: 100%; /* Ajustez la hauteur selon vos besoins, ici nous utilisons 100% de la hauteur de la vue (viewport) */
            }
	    #explication_real {
			max-width: 900px;
		 }
		#explication_mentions {
			max-width: 900px;
        }
  
  
  
  
  	
		.text_real1 {
     flex: 1;
     padding: 1px;
 
        }

 .text_real2 {
            flex: 1;
            padding: 1px;
   
	 font-size: 20px;
        }
	
	

		  .container_real1 {
			   padding: 5px;
                flex-direction: column;
            }
	  .container_real2 {
		    padding: 5px;
                flex-direction: column;
            }
	

            .image_real, .text_real {
                flex: auto;
                padding: 5px;
            }
	
	
	.hero_titre_real1 {	       
	padding-right: 5px;
	padding-left: 5px;
	}
	
 }
  
  
  
  
  
  
  
  
  
  }
        }