<style>
    /* Styles généraux */
    body {
        font-family: Sans-serif, "Trebuchet MS", Tahoma, Arial;
        font-size: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
    }
#masthead {
    display: flex;
    align-items: center;
    padding: 10px 0;
}
#masthead h1{
	font-size:italic;
	letter-spacing: 0.2rem;
}
#masthead img {
    max-width: 200px;
    height: auto;
    margin-right: 15px;
}
    #wrap {
        width: 95%;
        margin: 0 auto;
    }

    /* Navigation */
	
    #mainnav ul {
        display: flex;
        flex-wrap: wrap; /* Permet d'adapter les liens */
        justify-content: space-around;
        list-style-type: none;
        margin: 0;
        padding: 0;
        background-color: #669999; /* Couleur de fond du menu */
    }

    #mainnav li {
        flex: 1; /* Les éléments prennent une largeur égale */
    }

    #mainnav ul li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    li a:hover {
        background-color: #006600;
        border-radius: 5px;
    }

    /* Sidebar et contenu principal */
    #innerwrap {
        display: flex;
        flex-wrap: wrap; /* Permet d'empiler les éléments sur petits écrans */
    }
/*_______________________________________________________*/

    #sidebar {
        flex-basis: 100%; /* Occupe toute la largeur sur mobile */
    }

    .photo-texte {
        display: flex;
        align-items: center; /* Alignement vertical au centre */
        gap: 20px; /* Marge de 20px entre la photo et le texte */
    }

    .photo-texte img {
        max-width: 300px; /* Ajustez la largeur de la photo */
        height: auto; /* Maintient le ratio de l'image */
        border-radius: 10px; /* Optionnel : ajoute des coins arrondis */
    }

    .p1 {
        font-size: 70%;
        color: #999;
        font-style: italic;
    }

    #main {
        flex-basis: 100%; /* Occupe toute la largeur sur mobile */
    }

    #main h1, #main h2, #main h3 {
        color: #669999;
    }

    p, h1, h2, h3, h4 {
        margin-bottom: 20px;
    }

    button {
        padding: 10px 15px;
        font-size: 16px;
        background-color:#669999;/* #004d1a;*/
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        margin-top: 20px; /* Ajout d'un espace au-dessus du bouton */
    }

    button:hover {
        background-color: #005e24;
    }

    /* Footer */
    #footer {
        text-align: center;
        background-color:#669999;
        width: 100%;
        padding: 10px 0;
        color:white;
    }

    #footer p {
	    font-size:70%;
	    margin:10px 0;
	    color:white
	}
	#footer p a{
	    font-size90%;
	    color:white
	}

	/* Media Queries pour différentes tailles d'écrans */
	@media (min-width: 768px) {
	    #innerwrap {
	        flex-wrap: nowrap; /* Les éléments sont côte à côte sur tablette et plus grand */
	        justify-content: space-between;
	    }

	    #sidebar {
	        flex-basis: 30%; /* Sidebar occupe 30% de l'espace */
	        padding: 20px;
	    }

	    #main {
	        flex-basis: 70%; /* Main occupe 70% de l'espace */
	        padding: 20px;
	    }
	}

	@media (min-width: 992px) {
	    #wrap {
	        width: 80%;
	        margin:auto
	    }
	}
</style>
