body
	{
	margin: 10px 0 ;
	padding: 0 ;
	text-align: justify ;
	font: 20px arial, helvetica, sans-serif ;
	background: #fff ;
	}

	header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999;
		background-color: #fff;
	}

	#contenu {
		margin-top: 60px; /* Ajoutez une marge supérieure pour éviter que le contenu se chevauche avec le menu */
	}

	div#conteneur
	{
	width: auto ;
	margin: 0 auto ;
	text-align: left ;
	border: none ;
	background: #fff ;
	}

	h1#header {
	height: 500px; /* Hauteur de l'en-tête */
	position: relative; /* Position relative par rapport à l'en-tête */
    background: url('../PHOTO-2-PROJET-BOURGUEIL.jpg') no-repeat center center ;
	}

	h1#header a {
	width: 600px ;
	height: 200px ;
	display: block ;
	position: relative ;
	top: 50%; /* Positionne le texte à 50% de la hauteur de l'en-tête */
    left: 50%; /* Positionne le texte à 50% de la largeur de l'en-tête */
    transform: translate(-50%, -50%); /* Centre le texte verticalement et horizontalement */
    color: #fff; /* Couleur du texte */
    font-size: 80px; /* Taille de police du texte */
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Ombre du texte pour améliorer la lisibilité */ -->
	text-indent: -5000px ;
	animation-duration: 3s;
	animation-name: glissement;
	animation-iteration-count: 1;
	}
	
	@keyframes glissement {
		from {margin-left: 100%; width: 300%; }
		to {margin-left: 0%; width: 100%;}
	}
	
/* Parametrage du menu */
	ul#menu
	{
	height: 50px ;
	margin-left: 100px ;
	padding: 5 ;
	display: flex;
	align-items: center;
	background: none;
	list-style-type: none ;
	}
		
	ul#menu li
	{
	float: left ;
	text-align: center ;
	}

	ul#menu li a
	{
	width: 130px ;
	line-height: 25px ;
	font-size: 1em ;
	letter-spacing: 1px ;
	display: block ;
	vertical-align: center;
	text-decoration: none ;
	}

	ul#menu li a:hover
	{
	background-color: #88ba14 ;
	font-weight: bold ;
	color: #000 ;
	}

/* Download du bulletin d'inscription */
	#button-dwl{
	width: 200px;
	height: 50px;
	padding: 5,5,5,5 ;
	background-color: #fff ;
	border: 1px solid #000080;
	border-radius: 20px;
	box-shadow: 5px 5px 5px #eee;
	font-size: 16px ;
	font-weight: bold ;
	font-family: Arial;
	color: #000080 ;
	}

	#button-dwl:hover{
	width: 200px;
	height: 50px;
	padding: 5,5,5,5 ;
	background-color: #000080 ;
	border: 1px solid #eee;
	border-radius: 20px;
	box-shadow: 5px 5px 5px #eee;
	font-size: 16px ;
	font-weight: bold ;
	font-family: Arial;
	color: #fff ;
	}


/* Pramétrage du contenu */
	div#contenu
	{
	max-width: 1140px ;
	margin: 0 auto;
	background: none;
	color: #031451 ;
	text-align: justify ;
	}
 
	div#contenu h2
	{
	padding-left: 25px ;
	margin-top: 50 px ;
	line-height: 25px ;
	font-size: 2em ;
	text-align: center ;
	background: none ;
	}

	div#contenu h3
	{
	margin-top: 50px ;
	margin-bottom: 50px ;
	}

	div#contenu p
	{
	text-align: justify ;
	line-height: 1.7em ;
	}

	.flotte_gauche{
	float:left;
	margin-right: 120px;
	margin-left: 15px;
	margin-top: 200px;
	}

	.flotte_droite{
	float:right;
	}
	
	.float-content:before,
	.float-content:after{content:""; display:block; clear:both;}

	hr {
	width: 20%;
	height: 1px ;
	background-color: #808080;
	margin-right: auto;
	margin-left: auto;
	margin-top: 30px;
	margin-bottom: 30px;
	}

/* Parametrage de la section intervenants */

	@media (min-width: 500px) {
    /* clearfix*/
    .media:after {
        content: "";
        display: table;
        clear: both;
    }
    
    .media {
        display: grid;
        grid-template-columns: fit-content(200px) 1fr;
        grid-template-rows: 1fr auto;
        grid-template-areas:
        "image content"
        "image footer";
        grid-gap: 20px;
        margin-bottom: 4em;
    }
    
    .media-flip {
        grid-template-columns: 1fr fit-content(200px);
        grid-template-areas:
        "content image"
        "footer image";
    }
    
    .img {
        float: left;
        margin-right: 20px;
        max-width: 200px;
        grid-area: image;
    }
    
    .media-flip .img {
        float: right;
        margin: 0 0 0 20px;
    }
    
    .content { text-align: justify; grid-area: content;}
    
    .footer { font-weight: bold; font-size:22px ; font-family: Futura PT; grid-area: footer; }
    
    @supports(display: grid) {
        .media:after {
        content: none;
        }   
        .img,
        .media-flip .img{
        max-width: 100%;
        margin: 0; 
		}
		}
	}

	div#footer
	{
	margin: 0 auto ;
	line-height: 30px ;
	font-size: 0.9em ;
	text-align: center;
	color: #C0C0C0;
	}

/* Fenêtre Popup */
    .popup {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
	  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Ajoutez cette ligne pour l'ombre */
      z-index: 9999;
    }

	.popup.hidden {
		display: none;
	}
	
    .popup-content {
      background-color: #fff;
      width: 700px;
      max-height: 60vh;
	  margin-top: 60 px;
      padding: 20px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      border-radius: 5px;
      overflow-y: scroll;
      overflow-x: hidden;
	  scrollbar-width: 10px;
	  scrollbar-color: #888888 #dddddd; /* Couleurs de la barre de défilement */
    }

    .popup-banner {
	position: fixed;
	top: 0;
	left: 0;
     background-color: #031451;
     color: #fff;
     padding: 10px;
     margin-bottom: 10px;
     border-radius: 5px;
     width: 100%;
	 text-align: center;
    }

    .popup-title {
      font-size: 18px;
      font-weight: bold;
      margin: 0;
    }

    .popup-text {
	  margin-top: 25px;
	  margin-bottom: 20px;
	  font-size: 16px ;
    }

    .popup-image {
		float: left;
		width:170px;
		height: auto;
		shape-outside: square();
		clip-path: square(); /* Permet au texte de s'enrouler autour de la forme définie */		
		margin-right: 30px;
		margin-bottom: 30px;
    }

	.popup-description {
		margin-top: 25px;
	}


	.popup-description ul {	
		list-style-type: square;
	}

    .popup-button {
      padding: 10px 20px;
      background-color: #fff ;
      border: 1px solid #000080;
	  border-radius: 5px;
      color: #000080;
      cursor: pointer;
	  box-shadow: 5px 5px 5px #eee;
	 }

	.popup-button:hover {
      padding: 10px 20px;
      background-color: #000080;
	  border: 1px solid #000080;
      border-radius: 5px;
      color: #fff;    
	  cursor: pointer;
	  box-shadow: 5px 5px 5px #eee;
    }

	ul#popup li {
	margin-bottom: 10px;
	}
	
    #openPopup {}

    #closePopup {
      margin-top: 20px;
    }

/* Retour Haut de page */
	#back-to-top {
      display: none;
      position: fixed;
	  white-space: normal;
      bottom: 40px;
      right: 40px;
      width: 80px;
      height: auto;
      background-color: #000;
      color: #fff;
      border-radius: 5%;
      text-align: center;
      line-height: 15px;
      cursor: pointer;
      z-index: 999;
    }

	#back-to-top:hover {
	background-color: #555;
	}
	.button-line {
	display: block;
	white-space: pre;
	}