/* Styles généraux */
main {
    margin: 0; /* Supprimer 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 à l'intérieur du main */
    justify-content: center; /* Centrer horizontalement */
    align-items: center; /* Centrer verticalement */
}

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

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

h2 {
    font-family: 'Bebas Neue', sans-serif; /* Police cinématographique */
    letter-spacing: 2px; /* Espacement entre les lettres */
    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 en dessous du label */
    font-size: 14px; /* Taille de police */
    color: #ccc; /* Couleur gris clair pour le texte */
}

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 pour les champs */
    color: #fff; /* Texte blanc */
    font-size: 14px; /* Taille de police */
    transition: all 0.3s ease; /* Transition douce pour les interactions */
}

input[type="email"]::placeholder,
input[type="password"]::placeholder {
    color: #888; /* Couleur gris moyen pour les placeholders */
}

input[type="email"]:focus,
input[type="password"]:focus {
    outline: none; /* Supprimer le contour par défaut */
    background-color: #3a3a3a; /* Changer 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 au survol */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transitions pour les interactions */
    margin-top: 10px; /* Marge au-dessus du bouton */
}

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

/* Lien d'inscription */
.Inscription {
    text-align: center; /* Centrer le texte */
    margin-top: 20px; /* Marge au-dessus */
    font-size: 14px; /* Taille de police */
    color: #aaa; /* Couleur gris clair pour le texte */
}

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

.Inscription a:hover {
    color: #f6121d; /* Changement de couleur au survol */
}