/* ========== STRUCTURE GLOBALE DE LA PAGE ========== */

body {
    /* Mise en page en colonne avec centrage horizontal */
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 3rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-color: var(--color-background); /* Couleur de fond via variable CSS */
}

form {
    /* Formulaire centré avec aspect "carte" */
    width: 40%;
    background-color: white;
    border-radius: 1.5rem;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* Espacement spécifique pour le formulaire de connexion */
#form-connexion {
    padding-top: 3rem;
    padding-bottom: 3rem;   
}

/* ========== FIELDSETS ET LÉGENDES ========== */

fieldset {
    /* Conteneur logique des groupes de champs */
    width: 80%;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Alignement spécifique pour le formulaire d'inscription */
#form-inscription fieldset {
    justify-content: flex-start;
    align-items: flex-start;
}

/* Forcer l'alignement à gauche des éléments internes */
#form-inscription fieldset div {
    justify-content: flex-start;
}

/* Spécificités du fieldset pour la connexion */
#form-connexion fieldset {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}

/* Style des légendes de sections */
fieldset legend {
    margin-bottom: 1rem;
    margin-top: 1rem;
    color: var(--color-principal);
    font-weight: 600;
    font-size: 1.2rem;
}

/* ========== FLOATING LABELS ========== */

.form-group {
    /* Conteneur de champ + label flottant */
    position: relative;
    width: 100%;
    margin-bottom: 1rem;
}

.form-group input {
    /* Style des champs de formulaire */
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
    border: 1px solid #ccc;
    border-radius: 1rem;
    transition: all 0.2s ease-in-out;
    box-shadow: inset 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05);
    height: fit-content;
}

.form-group input:focus {
    /* Effet visuel au focus */
    outline: none;
    background-color: #ffffff;
    box-shadow: 0 0 0 0.3rem var(--color-background);
}

.form-group label {
    /* Label placé à l’intérieur du champ */
    position: absolute;
    top: 1.1rem;
    left: 0.8rem;
    color: #696969;
    font-size: 1.1rem;
    pointer-events: none;
    transition: 0.2s ease all;
}

/* Effet "floating" du label lors du focus ou si champ rempli */
.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label {
    top: -0.5rem;
    left: 0.6rem;
    font-size: 0.85rem;
    color: var(--color-principal);
    background-color: white;
    padding: 0.2rem 1rem;
    border-radius: 1.5rem;
}

/* ========== BOUTONS ========== */

#btn-connexion,
#btn-inscription {
    /* Style des boutons principaux */
    background-color: var(--color-principal);
    color: var(--color-text-light);
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 1rem;
    cursor: pointer;
    font-size: 1.1rem;
}

#btn-connexion:hover,
#btn-inscription:hover {
    /* Inversion de couleurs au survol */
    background-color: var(--color-text-light);
    color: var(--color-principal);
}

/* ========== MESSAGES ET LIENS ========== */

#message-erreur {
    font-size: 1rem;
    color: var(--color-rouge);
    text-align: center;
    width: 90%;
}

#message-reussite {
    color: #266808;
    font-size: 1rem;
    font-weight: 500;
}

/* Liens secondaires (inscription/connexion) */
#link-inscription,
.link-connexion {
    color: var(--color-principal-admin);
    text-decoration: underline;
}

/* Changement de couleur au survol */
#link-inscription:hover,
.link-connexion:hover {
    color: var(--color-principal);
}

/* Texte centré en bas de page */
body > p {
    text-align: center;
    width: 80%;
}

/* ========== RESPONSIVE DESIGN (≤ 767px) ========== */

@media (max-width: 767px) {
    form {
        width: 90%;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    fieldset {
        width: 80%;
    }

    legend {
        margin-bottom: 1.5rem;
    }

    fieldset div {
        flex-direction: column;
    }

    .form-group input {
        font-size: 1rem;
    }

    .form-group label {
        font-size: 1rem;
    }

    .form-group input:focus + label,
    .form-group input:not(:placeholder-shown) + label {
        font-size: 0.85rem;
    }

    #btn-connexion,
    #btn-inscription {
        font-size: 1.1rem;
    }
}