/* body { */
    /* width: 100%; */
    /* margin: 0; */
    /* padding: 0; */
    /* background-image: url("../rayures_grises.png"); */
    /* overflow-x: hidden; */

    /* --- LES 3 LIGNES MAGIQUES POUR TOUT CENTRER --- */
    /* display: flex; */
    /* flex-direction: column; */
    /* align-items: center;  */
/* }#page_index{ */
	/* width: 1200px; */
	/* background-image: url("fond_bleu.jpg");   */
	/* background-size: 100%; */
	/* margin: auto;  */
	/* font-family:'Arial'; */
	/* color: white;  */
/* } */
body {
	width: 100%;
	max-width: 1200px; /* <--- On aligne sur 1200px comme la page Bateaux */
	margin: 0 auto;
	background-image: url("../rayures_grises.png") ; 
	overflow-x: hidden;
}

#page_index {
	width: 1200px;
	background-image: url("fond_bleu.jpg");  
	background-size: 100% 100%; /* <--- On force le fond à couvrir exactement 1200px */
	margin: 0 auto; 
	font-family: 'Arial';
	color: white; 
	overflow: hidden;
}#bandeau{
	margin: auto;
	/* padding-top: 20px; */
	/* padding-bottom: 28px; */
	/* text-align: center; */
}
.bandeau{
	margin-left: 185px;
	/* padding-top: 20px; */
	padding-bottom: 28px;
	/* text-align: center; */
}
.logo{
	margin-left: 40px;
	padding-top: 20px;
	padding-bottom: 8px;
	text-align: left;	
}
#bloc_menu{
	width: 1200px;
	margin-bottom: 20px;
	line-height: 1.5em;
	color: white;
}
p{
	line-height: 80%;
}
.agenda_conteneur {
    width: 600px;
    display: block;
    position: relative; /* Permet de stabiliser le contenu à l'intérieur */
    margin-bottom: 40px; /* Crée un espace de sécurité automatique vers le bas */
}
.agenda_texte1{
	width: 600px;
	margin-left: 30px;
	text-align: left;
	margin-top: 60px;
	margin-bottom: 20px;
	font-family:'Arial';
	font-size: 20px;
	font-weight: bold;
	color: white; 
}
.agenda_texte2{
	width: 600px;
	margin-left: 60px;
	text-align: left;
	font-family:'Arial';
	font-size: 20px;
	line-height: 25px;
	color: white; 
}
.agenda_texte3{
	width: 400px;
    margin-left: 760px;
    text-align: left;
    margin-top: -40px; /* Ajuste cette valeur pour monter/descendre le titre */
    margin-bottom: 20px;
    font-family: 'Arial';
    font-size: 20px;
    font-weight: bold;
    color: white; 
}
.agenda_texte4{
	width: 400px;
	margin-left: 790px;
	margin-bottom: 40px;
	text-align: left;
	font-family:'Arial';
	font-size: 20px;
	line-height: 25px;
	color: white; 
}
.agenda_texte5{
	width: 600px;
	margin-left: 30px;
	text-align: left;
	margin-top: -100px;
	margin-bottom: 20px;
	font-family:'Arial';
	font-size: 20px;
	font-weight: bold;
	/* line-height: 40px; */
	color: white; 
}
.agenda_texte6{
	width: 600px;
	margin-left: 60px;
	margin-bottom: 40px;
	text-align: left;
	font-family:'Arial';
	font-size: 20px;
	line-height: 25px;
	color: white; 
}
.agenda_texte7{
	width: 600px;
	margin-left: 700px;
	text-align: left;
	margin-top: 80px;
	margin-bottom: 20px;
	font-family:'Arial';
	font-size: 20px;
	font-weight: bold;
	/* line-height: 40px; */
	color: white; 
}
.agenda_texte8{
	width: 600px;
	margin-left: 730px;
	/* margin-bottom: 40px; */
	text-align: left;
	font-family:'Arial';
	font-size: 20px;
	line-height: 25px;
	color: white; 
}
.affiche{
	transform: rotate(30deg);
    border: 5px solid white;
    margin-top: -120px; 
    margin-left: 450px;
    margin-bottom: 20px;}
.affiche2{
	transform: rotate(-20deg);
	border: 5px solid white;
	margin-top: -160px;
	margin-left: 550px;
	/* margin-bottom: 120px; */
}
.affiche3{
	transform: rotate(-20deg);
	border: 5px solid white;
	margin-top: -300px;
	margin-left: 600px;
	/* margin-bottom: 120px; */
}
.smiley{
	margin-top: -580px; /* Joue sur cette valeur (ex: -500px ou -450px) pour le positionner au pixel près */
    margin-left: 750px; /* Aligne-le horizontalement près des affiches */
    margin-bottom: 520px;}
.suliac{
	margin-top: -300px;
	margin-left: 80px;
	margin-bottom: 0px;	
}
#zoom-image{
	width: 440px;
	display: block;
	margin: auto;
}