body {
    /* Je mets un dégradé bleu en fond (du clair vers le plus foncé) */
    background: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
    
    /* La police d'écriture pour tout le site */
    font-family: 'Verdana', sans-serif;
    
    /* J'enlève les marges par défaut du navigateur */
    margin: 0;
    padding: 0;
    
    /* Couleur du texte en gris foncé (c'est mieux que le noir total) */
    color: #333;
    
    /* Je centre tout le texte de la page par défaut */
    text-align: center; 
}

header {
    background: transparent; 
    padding: 20px;
    text-align: left; /* Je remets le titre à gauche */
}

h1 {
    font-size: 1.8em; /* La taille du gros titre */
    margin: 0;
}

nav {
    /* Je mets une image derrière le menu */
    background-image: url('menu.jpg'); 
    
    /* L'image doit couvrir toute la zone */
    background-size: cover;
    background-position: center;
    
    /* De l'espace à l'intérieur du menu */
    padding: 30px 20px;
    
    /* Je mets les liens à gauche */
    text-align: left; 
    padding-left: 30px;
    margin-bottom: 30px;
}

/* J'enlève les points noirs moches de la liste à puces */
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* IMPORTANT : Pour mettre les boutons côte à côte (sinon ils sont l'un sous l'autre) */
nav ul li {
    display: inline-block;
    margin-right: 20px; /* Un peu d'espace entre chaque bouton */
}

/* Le style des liens (ce qui est écrit dans les boutons) */
nav ul li a {
    color: white;
    text-decoration: none; /* J'enlève le trait sous le lien */
    font-weight: bold; /* Texte en gras */
    font-size: 1.1em;
    
    /* Je mets un fond noir pour qu'on voie bien le texte sur l'image */
    background-color: black;
    padding: 8px 12px; /* De l'espace autour du texte */
    border: 1px solid white; /* Un petit cadre blanc autour */
}

/* Ce qui se passe quand je passe la souris sur le bouton */
nav ul li a:hover {
    background-color: white; /* Le fond devient blanc */
    color: black;            /* Le texte devient noir */
    cursor: pointer;         /* La souris devient une petite main */
}

main {
    width: 85%; /* Je prends pas toute la largeur de l'écran */
    margin: 0 auto; /* L'astuce pour centrer la boite au milieu de la page ! */
    padding: 20px;
    min-height: 400px; /* Pour que la boite ait une taille mini même si elle est vide */
    text-align: left; /* Pour lire de gauche à droite */
    background-color: transparent; 
}

h2, h3 {
    color: #2c3e50;
    border-bottom: 1px solid black; /* Je souligne les titres */
    display: inline-block; /* Le soulignement s'arrête à la fin du mot */
    margin-top: 30px;
}

p {
    line-height: 1.5; /* Pour aérer les lignes du texte */
    margin-bottom: 15px;
    text-align: justify; /* Pour faire des blocs de texte bien droits */
}

img {
    max-width: 100%; /* Important : l'image ne doit jamais dépasser de l'écran */
    height: auto;
    border: 1px solid #ccc; /* Un petit bord gris */
    padding: 3px;
    margin-top: 10px;
}

/* Le bloc qui contient mes images en bas */
.gallery {
    margin-top: 20px;
    text-align: center;
}

/* Mes images dans la galerie */
.gallery img {
    width: 300px; /* J'ai corrigé le "300x" en "300px" */
    height: 200px;
    object-fit: cover; /* Pour que l'image ne soit pas écrasée si elle n'a pas la bonne taille */
    margin: 10px;
    display: inline-block;
}

iframe {
    text-align: center;
}