h1 {
color: rgb(225,221,221);

}

body {
color: black;
background-color: #FFD700;
}

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

header {
    background-color: #333;
    color: #fff;
    padding: 0px;
    text-align: center;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

nav {
	display: flex;  
	position: fixed;  
  	background-color: #444;
    padding: 0.5%;
    margin-top: 0px; 
	  width: 100%;
}


nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-around;
	width: 100%;
}

nav ul li {
    position: relative;
}

nav ul li a {
    text-decoration: none;
    color: #fff;
    padding: 10px;
    display: block;
}

nav ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #555;
}

nav ul li:hover > ul {
    display: inherit;
}

nav ul ul li {
    width: 100%;
    float: none;
}

main {
    padding: 20px;
    margin-top: 20%; /* Ajustez la marge pour éviter que le contenu ne soit caché derrière l'en-tête fixe */
}

nav ul li a:hover {
    color: #fff;
}



div { 
top: 5%;
}

footer {
position: fixed;
top: 95%;
background-color: #FFD700;
width: 100%;
left: 0;
}

.photo {
text-decoration: none;
color: black;
}

.photo:hover {
text-decoration: none;
color: #1CBD00;
}

.videoWrapper {
border-width: 10px;
border-color: red;
border-style: outset;
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}

.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

h2
{
line-height: 50%;
}

p
{
font-size: 170%;
}
@media only screen and (min-width: 768px)
.large-block-grid-4>li
{
    width: 25%;
    padding: 0 0.625em 1.25em;
}
.small-block-grid-2>li {
    width: 50%;
    padding: 0 0.625em 1.25em;
}
   
.conteneur{
   display: flex;
}
.flex{
   flex-grow: 1;
}

.conteneur { text-align: center; }


    // Fonction pour ajouter un événement clic à chaque image de la galerie
function ajouterEvenementsClic() {
    var images = document.getElementsByTagName("img");

    for (var i = 0; i < images.length; i++) {
        images[i].addEventListener("click", function() {
            // Code à exécuter lors du clic sur l'image
            alert("Vous avez cliqué sur l'image " + this.alt);
        });
    }
}

// Appel de la fonction au chargement de la page
window.onload = function() {
    ajouterEvenementsClic();
};

a {
text-decoration : underline;
color : green;
}

a:hover {
color : red;
}

.coords-email {
color : blue;
}