css
/* Mise en page générale */
html, body {
    background-color: antiquewhite;
    font-family: century gothic, arial, calibri;
    font-size: 1.2em;
    margin: 0;
    padding: 0;
    height: 100%;
}

/* Ajoute un padding global pour le corps de la page */
body {
    padding-left: 5%; /* Décale tout le contenu de la page de 5% à gauche */
    padding-right: 5%; /* Ajoute une marge à droite de 5% pour équilibre */
}

/* Centrage spécifique des titres */
h1 {
    text-align: center; /* Centre uniquement le titre */
    margin: 0 auto; /* Assure un centrage horizontal parfait */
}

/* Paragraphe de description */
p {
    text-align: left; /* Texte aligné à gauche */
    margin-left: 0; /* Aligne le paragraphe avec la marge du body */
}

/* Alignement de la liste pour l'aligner avec le paragraphe */
ul {
    list-style-type: disc; /* Rétablit les puces de la liste */
    padding-left: 0; /* Annule le padding par défaut pour avoir un alignement exact */
    margin-left: 0; /* Assure que la liste est alignée exactement en dessous du paragraphe */
}

/* Style des liens dans la liste */
a {
    text-decoration: none;
    color: blue;
}

a:visited {
    color: blue;
}

a:hover {
    color: red;
}

h2 {
    font-size: 1.5em;
    font-weight: bold;
}

button {
    background-color: blue;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    border-radius: 5px;
    margin-top: 20px;
}

button:hover {
    background-color: darkblue;
}

.Retour {
    background-color: #D3D3D3;
    font-weight: bold;
    color: black;
    padding: 10px;
    border-radius: 5px;
    text-decoration: none;
    margin-top: 20px;
}

.Retour:hover {
    background-color: #696969;
    color: white;
}

/* Ajustement de la taille et du centrage des images */
img {
    max-width: 100vw;  /* L'image prend toute la largeur de l'écran, sans dépasser */
    max-height: 100vh; /* L'image prend toute la hauteur de l'écran, sans dépasser */
    width: auto;       /* Ajustement automatique pour conserver les proportions */
    height: auto;
    object-fit: contain;  /* Conserver les proportions sans rogner l'image */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centre l'image horizontalement et verticalement */
    transition: transform 0.3s ease-in-out; /* Ajoute une transition douce pour l'effet d'agrandissement */
}

img:hover {
    transform: translate(-50%, -50%) scale(1.05); /* Agrandit légèrement l'image au survol */
    cursor: pointer; /* Change le curseur en une main pour indiquer un élément cliquable */
}

/* Responsive pour tablettes et mobiles */
@media (max-width: 768px) {
    body {
        padding-left: 3%; /* Réduit la marge sur mobile pour une meilleure utilisation de l'espace */
        padding-right: 3%;
    }
    p, ul {
        margin-left: 0; /* Assure un alignement cohérent sur les petits écrans */
    }
}