body { font-family: 'Georgia'; background-color: rgb(252, 208, 216); color: #880e4f; display: flex; /*cette ligne et la suivante sont pour faire en sorte que le bouton du retour vers le haut et le texte ne se superpose pas*/ flex-direction: column; } header { background-color: rgb(255, 79, 167); text-align: center; } .centragedansleheader{ display: flex; flex-direction: row; } .centragedansleheader a{ display: flex; justify-content: center; align-items: center; flex: 1 1; } .imageenbloc{ display: block; } .loginbutton { display: block; } .phrasedaccroche { font-style: italic; } .menu { font-style: italic; position: sticky; top: 0; bottom: 0; background-color: #880e4f; } .menu > ul{ /*la mini fleche c'est pour signifier que ca s'applique que sur les parents et pas les enfants*/ display: flex; list-style: none; } .menu li { width: 50%; display: block; padding: 6px; } .menu li:hover{ background-color: #880e4f; } .personnage { position: relative; } .perso{ list-style: none; display: none; position: absolute; top: 50px; left: 0px; background-color: #880e4f; width: max-content; } .perso li a:hover{ background-color: #67093b; } .personnage:hover .perso{ display: block; } .menu li a{ color: rgb(252, 208, 216); text-decoration: none; padding: 10px 60px; display: block; /* margin: 10px; border: 3px solid pink; text-align: center;*/ } h2 { font-style: italic; text-align: center; } h3 { font-style: italic; } .container { /*le but est d'arrondir les bords de l'image */ display: inline-block; /* S'assurer que le conteneur s'adapte à l'image */ overflow: hidden; /* Cache tout ce qui dépasse du conteneur arrondi */ border-radius: 50px; text-align: center; } .Partie1 { font-size: 90%; /*la taille du texte*/ flex: 1; /* prend tout l'espace restant */ } footer { font-style: italic; background-color: rgb(255, 79, 167); color: #880e4f; text-align: center; bottom: 0; position: fixed; width: 100%; }