/* Change la couleur de fond de toute la page */
body {
    background: rgb(153,216,220); /* bleu clair */
}

/* Style de la barre de navigation */
nav {
    background-color: grey;       /* met la nav en gris */
    text-align: center;           /* centre le texte dedans */
}

/* Supprime les puces et marges par défaut de la liste */
nav ul {
    list-style: none;             /* enlève les points de la liste */
    margin: 0;                    /* enlève la marge autour */
    padding: 0;                   /* enlève le padding */
}

/* Les éléments de la liste dans la nav */
nav li {
    display: inline-block;        /* met les liens sur une ligne */
    margin: 0 20px;               /* espace entre les liens */
}

/* Style des liens */
nav a {
    color: white;                 /* couleur du texte en blanc */
    text-decoration: none;        /* enlève le souligné */
    font-size: 25px;              /* taille du texte */
}

/* Quand on passe la souris sur un lien */
nav a:hover {
    text-decoration: underline;   /* le texte devient souligné */
}

/* Style des titres h1 */
h1 {
    text-align: center;           /* centre le texte */
    margin-top: 20px;             /* espace au-dessus */
}

/* Page menu style */
.menu-page {
    width: 70%;                   /* largeur de 70% de la page */
    margin: 30px auto;            /* espace au-dessus et centre horizontalement */
    padding: 20px;                /* espace à l'intérieur */
    border: 2px solid black;      /* bordure noire autour */
    background-color: white;      /* fond blanc */
    text-align: center;           /* centre le texte */
}

/* Page CV style */
.cv-page {
    border: 4px solid black;      /* bordure noire plus épaisse */
    background-color: white;      /* fond blanc */
    width: 80%;                   /* largeur de 80% */
    margin: 30px auto;            /* espace au-dessus et centre horizontalement */
    padding: 20px;                /* espace à l'intérieur */
}

/* Page vidéo */
.video-page {
    display: grid;                /* utilise le mode grille */
    place-items: center;          /* centre tout dedans vertical et horizontal */
    height: 100vh;                /* prend toute la hauteur de la fenêtre */
    text-align: center;           /* centre le texte */
}

/* Rectangle générique */
.rectangle {
    width: 80%;                   /* largeur de 80% */
    margin: 30px auto;            /* espace au-dessus et centre horizontalement */
    padding: 20px;                /* espace à l'intérieur */
    border: 2px solid black;      /* bordure noire */
    text-align: center;           /* centre le texte */
}

/* Style spécifique aux films */
.film {
    background-color: #f8d7da;    /* fond rose clair */
}

/* Style spécifique aux mangas */
.manga {
    background-color: #fff9c4;    /* fond jaune clair */
}

/* Page ville */
.town-page {
    width: 80%;                   /* largeur de 80% */
    margin: 30px auto;            /* espace au-dessus et centre horizontalement */
    padding: 20px;                /* espace à l'intérieur */
    border: 2px solid black;      /* bordure noire */
    background-color: #e0f7fa;   /* fond bleu clair */
    text-align: center;           /* centre le texte */
}

/* Liste dans la page ville */
.town-page ul {
    text-align: center;           /* centre le texte de la liste */
    list-style-position: inside;  /* met les puces à l'intérieur */
}

/* Style pour les vidéos ou iframes */
iframe {
    display: block;               /* block pour centrer facilement */
    margin: 50px auto;            /* espace au-dessus et centré horizontalement */
}