#formulaire-modification input:disabled {
    cursor: not-allowed; }

/* Thème sombre pour le corps de la page */
body {
    background-color: #121212;
    color: #FFFFFF;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* En-tête (header) */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #000000;
    padding-top: 20px;
    padding-right: 50px; 
}
²
.site-name {
    width: 100%; /* Largeur de 100% pour occuper toute la largeur du header */
    margin-top: 10px; /* Espace en haut du texte */
}

.site-name h1 {
    font-size: 24px; /* Taille de la police */
    color: white; /* Couleur du texte */
    font-weight: bold; /* Épaisseur de la police en gras */
    margin-right: 350px;
}



.logo img {
    width: 12%; /* Ajustez la taille du logo selon vos besoins */
    height: auto;
    margin-left: 20px;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

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

nav ul li:last-child {
    margin-right: 0;
}

a {
    text-decoration: none;
    color: #FFFFFF;
    transition: color 0.3s ease; /* Transition de couleur en douceur */
}

a:hover {
    color: #6A0DAD; /* Couleur violette au survol */
}

/* Contenu principal (main) */
main {
    padding: 20px;
}

h1 {
    font-size: 24px;
    margin-bottom: 20px;
}

/* Formulaire de modification des informations personnelles */
#mes-informations {
    background-color: #1E1E1E;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 20px;
    padding-right: 1500px;
}

label {
    display: block;
    margin-bottom: 10px;
    color: #FFFFFF;
}

input[type="text"],
input[type="password"],
input[type="email"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #6A0DAD;
    border-radius: 5px;
    background-color: #242424;
    color: #FFFFFF;
}

button.submit {
    /* Utilisez la nouvelle classe "submit" pour cibler le bouton */
    background-color: #6A0DAD;
    color: #FFFFFF;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease; /* Transition de couleur en douceur */
}

button.submit:hover {
    background-color: #4C0B8E; /* Couleur violette au survol */
}


/* Section "Espace Utilisé" */
#espace-utilise {
    background-color: #1E1E1E;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 20px;
}

/* Bouton "Supprimer mon compte" */
#bouton-supprimer-compte {
    background-color: #FF3B3B; /* Couleur rouge */
    color: #FFFFFF;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease; /* Transition de couleur en douceur */
}

#bouton-supprimer-compte:hover {
    background-color: #FF0000; /* Couleur rouge intense au survol */
}



/* Bouton "Modifier mes informations" */
#bouton-modifier-compte {
    align-items: center;
    justify-content: center;
    background-color: #1739f8; /* Couleur rouge */
    color: #FFFFFF;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease; /* Transition de couleur en douceur */
}

#bouton-modifier-compte:hover {
    background-color: #143477; /* Couleur rouge intense au survol */
}

.material-symbols-outlined {
    vertical-align: middle; /* Centrer verticalement l'icône */
    margin-left: 5px; /* Ajouter une marge à gauche pour l'espace entre le texte et l'icône */
}





/* Pied de page (footer) */
footer {
    background-color: #000000;
    color: #FFFFFF;
    padding: 10px;
    text-align: center;
}

/* CSS pour cacher les contenus des sections */
.contenu-section {
    display: none;
}

/* CSS pour styliser les boutons */


/* Styles pour la zone d'image */
.image-container {
    overflow: hidden;
    width: 100%;
    max-width: 800px; /* Largeur maximale de la zone d'image */
    margin: 0 auto; /* Centre la zone d'image horizontalement */
    height: auto; /* Permet au conteneur de s'ajuster à la hauteur des images */
}

.image-container img {
    max-width: 100%; /* Ajuste la largeur de l'image pour qu'elle s'adapte à la zone d'image */
    height: auto; /* Permet à la hauteur de l'image de s'ajuster proportionnellement */
    display: block;
    transition: transform 0.5s ease-in-out;
}