/*Par Pierrot Davy pour le site de Balades et Découverte de Trégastel*/
/*Par Pierrot Davy pour le site de Balades et Découverte de Trégastel*/

/* CSS Reset */
	*{
	margin: 0;
	padding: 0;
	}

	img{
		border:none
	}
	a:link 
	{ 
	 text-decoration:none; 
	}
/*end reset*/

	html {
		font-size:100%;
	/*	background:#b4c0bc url(../img/bgplage.jpg) top center repeat; /* on répète l'image verticalement */
		background-attachment:fixed;
		margin:0;
		padding:0
	}

	body {
		color:#000;
		font-size:.9em;
		font-family:Arial, Helvetica, sans-serif;
		height:1500px;
		display: flex;
		justify-content: center; /* centre horizontalement */
/*		align-items: center;  */   /* centre verticalement */
		background-color: #f0f0f0;
/*		border:3px solid red; */
	}
/* ----conteneur/positionnement---- */
	#conteneur_principal{
		margin-top:150px;  /* pour afficher le mlenu aores le bandeau */
		margin-left:1px;
		width:100%;
		text-align:left;
/*		border:3px solid green; */
	}
	     /* Menu principal */
	 .menu {
	  list-style: none;
	  margin: 0;
	  padding: 0;
	  background-color: #333;
	  display: flex;
	}
    ul.menu {
      list-style: none;
      padding: 0;
      margin-top: -22px;
	  margin-left: 5px;
      background:white;
      display: flex;
	 font-size: 16px; /* Définit la taille de la police à 30 pixels */
	 font-weight: bold;
    }

    ul.menu > li {
      position: relative;
    }

    ul.menu > li > a {
      display: block;
      padding: 15px 20px;
      color: black;
      text-decoration: none;
    }

    ul.menu > li > a:hover {
      background: #888;
    }

    /* Sous-menu */
    ul.sous-menu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      background: #888; 
      list-style: none;
      margin: 0;
      padding: 0;
      min-width: 150px;
    }

    ul.sous-menu li a {
      display: block;
      padding: 10px;
      color: white;
	  width:250px;
      text-decoration: none;
    }

    ul.sous-menu li a:hover {
      background: #222;
    }

    /* Affichage du sous-menu au survol */
    ul.menu > li:hover > ul.sous-menu {
      display: block;
    }

	/*  POUR l'image  */
	.image-container {
	  width: 400px;
	  height: 300px;
	  overflow: hidden;
	  border:30px solid blue;
	}
	/*--- pour l'image de la page d'accueil  */
	.fullscreen-bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: url('../img/kenadot.jpg');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		z-index: -1; /* envoie l'image en arrière-plan */
	}
	.texte-sur-image {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: white;
		font-size: 34px;
		font-weight: bold;
/*		background-color: rgba(0, 0, 0, 0.5);  *//* fond semi-transparent */
		padding: 10px 20px;
		border-radius: 5px;
    }
	/*++++++++++++++++++++++++++++++++++++++++++++++++++ */
/*	.image-container img {
	  width: 100%;
	  height: 100%;
	  object-fit: cover; // ou contain selon ton besoin //
	  display: block;
	  border:30px solid blue;
	}
		.background-image {
	  width: 1423px;
	  height: 800px;
	  background-image: url('img/kenadot_cr.jpg');
	  background-size: cover;
	  background-position: center;
	  background-repeat: no-repeat;
	} */
	/*++++++++++++++++++++++++++++++++++++++++++++++++++ */
	.submenu {
      display: none;
      position: absolute;
      top: 0;
      left: 100%;
      background: #fff;
      border: 1px solid #ccc;
      min-width: 200px;
      z-index: 10;
    }

    .menu li:hover > .submenu {
      display: block;
    }
	
	
.submenu {
      display: none;
      position: absolute;
      top: 0;
      left: 100%;
      background: #fff;
      border: 1px solid #ccc;
      min-width: 200px;
      z-index: 10;
    }

    .menu li:hover > .submenu {
      display: block;
    }

    .has-submenu > a::after {
      content: "▶";
      float: right;
      font-size: 0.8em;
      margin-left: 5px;
    }

    .submenu li {
      border-bottom: 1px solid #eee;
    }

    .submenu a {
      padding: 10px;
      white-space: nowrap;
    }	
	.bandeau {
	  background-color: #6CA6CD;
	  color: white;
	  padding: 10px 20px;
	  text-align: center;
	  font-size: 40px;
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  margin:0 auto;
	  padding-top:25px;
/*	  z-index: 1000; */
	  height:100px
	}