css
body {
    font-family: 'Brush Script MT', cursive;
    background-color: #e7a4c3; /* Misty Rose */
    font-size: 16px; /* Taille de police par défaut */
}
header {
    background-color: #e7a4c3; /* Couleur pour le header */
    padding: 20px;
    text-align: center;
    font-family: 'Brush Script MT', cursive;
    margin: 0;
    font-size: 24px;
    font-weight: bold;
}
/* ... autres styles ... */
button {
    background-color: #e7a4c3; /* Couleur pour les boutons */
    /* ... autres styles pour les boutons ... */
}
header h1 {
    color: #000000; /* Ton nouveau rose */
}
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav li {
    display: inline;
    margin-right: 20px;

}
/* ... autres styles ... */
/* Styles pour les tablettes (max-width: 768px) */
@media (max-width: 768px) {
    body {
        font-size: 14px; /* Réduit la taille de la police */
    }
    nav li {
        margin-right: 10px; /* Réduit l'espacement entre les éléments du menu */
    }
    #formulaire-mdp input[type="password"] {
        width: 200px; /* Réduit la largeur du champ de mot de passe */
    }
}
/* Styles pour les smartphones (max-width: 480px) */
@media (max-width: 480px) {
    body {
        font-size: 12px; /* Réduit encore la taille de la police */
    }
    nav li {
        display: block; /* Affiche les éléments du menu sur des lignes séparées */
        margin-bottom: 10px; /* Ajoute un espacement vertical entre les éléments du menu */
        margin-right: 0; /* Supprime la marge droite */
    }
    #formulaire-mdp input[type="password"] {
        width: 90%; /* Ajuste la largeur du champ de mot de passe à 90% de la largeur de l'écran */
    }
}
@media (max-width: 480px) {
    /* ... autres règles ... */
    header {
        margin-left: auto;
        margin-right: auto;
    }
}


main {
    background-color: #e7a4c3;
    color: #000000; 
    padding: 20px;
    font-family: 'Brush Script MT', cursive;
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
}
main ul {
    list-style: none;
}

section {
    margin-bottom: 20px;
}

h1, h2 {
    font-family: 'Brush Script MT', cursive; /* Une police élégante pour les titres */
    font-size: 2em; /* Une taille de police plus grande */
    text-align: center; /* Centrer le titre */
    margin-bottom: 20px;
}

a {
    color: #000000; /* Un brun plus foncé pour les liens */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}
.poeme {
    text-align: center; /* Centre le texte horizontalement */
    margin: 0 auto;   /* Centre le bloc horizontalement */
    width: 80%; /* Ajuste la largeur du poème si nécessaire */
}
/* Style pour la page Lever de soleil */
.lever-de-soleil {
    background-color: #f5953c; /* Un rose pâle pour évoquer l'aube */
}
.lever-de-soleil h2 {
    margin: 0;
    padding: 0;
    font-family: 'Brush Script MT', cursive;
    margin: 0;
    font-size: 2em; /* Une taille de police plus grande */
    text-align: center; /* Centrer le titre */
    margin-bottom: 20px;
    color: #f5953c; /* Un rose plus soutenu pour le titre */
}
.lever-de-soleil pre {
    font-family: 'Brush Script MT', cursive;
    margin: 0;
    font-size: 1.1em; /* Une taille de police légèrement plus grande */
    line-height: 1.5; /* Un interlignage plus aéré */
    text-align: center; /* Centrer le texte du poème */
    padding: 20px; /* Ajouter un padding autour du poème */
    margin: 0;
    padding: 0;
}
/* Style pour la page Ciel étoilé */
.ciel-etoile {
    background-color: #283593; /* Un bleu nuit profond et doux */
    color: #e8eaf6; 
}

.ciel-etoile h2 {
    margin: 0;
    padding: 0;
    font-family: 'Brush Script MT', cursive;
    margin: 0;
    font-size: 2em; /* Une taille de police plus grande */
    text-align: center; /* Centrer le titre */
    margin-bottom: 20px;
    color: #baa4e4; /* Un violet clair pour le titre */

}

.ciel-etoile pre {
    font-family: 'Brush Script MT', cursive;
    margin: 0;
    font-size: 1.1em; /* Une taille de police légèrement plus grande */
    line-height: 1.5; /* Un interlignage plus aéré */
    text-align: center; /* Centrer le texte du poème */
    padding: 20px; /* Ajouter un padding autour du poème */
    margin: 0;
    padding: 0;
}
.ton-invincible-eclat {
    background-color: #bd83d8; /* Un rose pâle pour évoquer l'aube */
}
.ton-invincible-eclat h2 {
    margin: 0;
    padding: 0;
    font-family: 'Brush Script MT', cursive;
    margin: 0;
    font-size: 2em; /* Une taille de police plus grande */
    text-align: center; /* Centrer le titre */
    margin-bottom: 20px;
    color: #bd83d8; /* Un rose plus soutenu pour le titre */
}
.ton-invincible-eclat pre {
    font-family: 'Brush Script MT', cursive;
    margin: 0;
    font-size: 1.1em; /* Une taille de police légèrement plus grande */
    line-height: 1.5; /* Un interlignage plus aéré */
    text-align: center; /* Centrer le texte du poème */
    padding: 20px; /* Ajouter un padding autour du poème */
    margin: 0;
    padding: 0;
}
.flambee-passionnelle {
    background-color: #ffe6e6; /* Un rose pâle pour évoquer l'aube */
}
.flambee-passionnelle h2 {
    margin: 0;
    padding: 0;
    font-family: 'Brush Script MT', cursive;
    margin: 0;
    font-size: 2em; /* Une taille de police plus grande */
    text-align: center; /* Centrer le titre */
    margin-bottom: 20px;
    color: #ffb3b3; /* Un rose plus soutenu pour le titre */
}
.flambee-passionnelle pre {
    font-family: 'Brush Script MT', cursive;
    font-size: 1.1em; 
    line-height: 1.5; 
    text-align: center;
    margin: 0 auto;
    overflow-wrap: break-word; /* Ajoute cette propriété */
    padding: 20px; /* Ajuste le padding si nécessaire */
}
#formulaire-mdp button {
    background-color: #baa4e4; /* Un violet clair */
    color: #fff; /* Texte blanc */
    border: none; /* Supprime la bordure par défaut */
    padding: 10px 20px; /* Ajoute du padding */
    border-radius: 5px; /* Arrondit les coins */
    cursor: pointer; /* Change le curseur de la souris au survol */
    font-family: 'Brush Script MT', cursive;
}
#formulaire-mdp button:hover {
    background-color: #9c88d9; /* Un violet plus foncé au survol */
}
#formulaire-mdp label {
    font-family: 'Brush Script MT', cursive; /* Utilise la même police que le reste du site */
    font-size: 1.2em; /* Augmente légèrement la taille de la police */
    color: #000; /* Couleur noire */
    margin-bottom: 10px; /* Ajoute une marge en bas */
}
#formulaire-mdp input[type="password"] {
    width: 250px; /* Ajuste la largeur du champ */
    padding: 10px; /* Ajoute du padding */
    border: 1px solid #ccc; /* Modifie la bordure */
    border-radius: 5px; /* Arrondit les coins */
    font-size: 1em; /* Ajuste la taille du texte */
    color: #333; /* Change la couleur du texte */
}
#a-propos {
    background-color: #e7a4c3; /* Un gris très clair */
}
/* Exemple de style pour une section avec fond pastel */
.section-pastel {
    background-color: #bae9f5; /* Couleur pour le fond de certaines sections */
    /* ... autres styles pour la section ... */
}
/* Exemple de style pour un effet de survol */
.element:hover {
    background-color: #bae9f5; /* Couleur pour les effets de survol */
    /* ... autres styles pour l'effet de survol ... */
}
/* ... autres styles ... */
.icon {
    color: #eec4e8; /* Couleur pour les icônes */
    /* ... autres styles pour les icônes ... */
}