/* Styles généraux */
main {
    margin: 0; /* Supprime les marges par défaut */
    font-family: 'Bebas Neue', sans-serif; /* Police cinématographique */
    color: #fff; /* Texte blanc pour le contraste */
    display: flex; /* Utilisation de Flexbox pour centrer le formulaire */
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
}

/* Formulaire central */
form {
    background-color: #1b1b1b; /* Fond sombre pour un look cinématographique */
    padding: 40px 30px; /* Espacement interne */
    margin-top: 25px; /* Marge supérieure */
    border-radius: 10px; /* Bords arrondis */
    box-shadow: 0 8px 30px rgba(0,0,0,0.6); /* Ombre portée pour la profondeur */
    width: 350px; /* Largeur fixe pour le formulaire */
}

/* Conteneur principal */
.InscriptionForm {
    display: flex; /* Utilisation de Flexbox */
    flex-direction: column; /* Disposition en colonne */
}

h2 {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 2px; /* espacement cinématographique */
    text-align: center; /* Centrer le titre */
    margin-bottom: 20px; /* Espace en dessous du titre */
    color: #fff; /* Texte blanc */
    padding: 0; /* Supprimer le padding par défaut */
}

/* Chaque champ du formulaire */
.form {
    display: flex; /* Utilisation de Flexbox */
    flex-direction: column; /* Disposition en colonne */
    margin-bottom: 20px; /* Espace entre les champs */
}

label {
    margin-bottom: 8px; /* Espace entre le label et le champ */
    font-size: 14px; /* Taille de police */
    color: #ccc; /* Couleur gris clair pour le texte */
}

input[type="text"],
input[type="email"],
input[type="password"] {
    padding: 12px; /* Espacement interne */
    border: none; /* Pas de bordure */
    border-radius: 6px; /* Bords arrondis */
    background-color: #2a2a2a; /* Fond sombre */
    color: #fff; /* Texte blanc */
    font-size: 14px; /* Taille de police */
    transition: all 0.3s ease; /* Transition douce pour les interactions */
}

input::placeholder {
    color: #888; /* Couleur des placeholders */
}

input:focus {
    outline: none; /* Supprime le contour par défaut */
    background-color: #3a3a3a; /* Change le fond au focus */
    box-shadow: 0 0 5px #e50914; /* Ombre rouge au focus */
}

/* Bouton principal */
button {
    background-color: #e50914;/* Rouge vif pour le bouton */
    color: #fff; /* Texte blanc */
    border: none;/* Pas de bordure */
    padding: 12px; /* Espacement interne */
    font-size: 16px; /* Taille de police */
    border-radius: 6px; /* Bords arrondis */
    cursor: pointer; /* Curseur pointeur */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transitions pour les interactions */
    margin-top: 10px; /* Marge supérieure */
}

button:hover {
    background-color: #f6121d;/* Change la couleur au survol */
    transform: scale(1.05);/* Légère augmentation de taille au survol */
}

/* Lien de connexion */
.ConnexionLink {
    text-align: center;/* Centre le texte */
    margin-top: 20px;/* Marge supérieure */
    font-size: 14px;/* Taille de police */
    color: #aaa;/* Couleur gris clair */
}

.ConnexionLink a {
    color: #e50914;/* Couleur rouge vif pour le lien */
    text-decoration: none;/* Pas de soulignement */
    transition: color 0.3s;/* Transition douce pour la couleur */
}

.ConnexionLink a:hover {
    color: #f6121d;/* Change la couleur au survol */
}