/* Inscription (inscription.php) : ce qui lui est propre, la saisie du code de vérification (une case par chiffre) et
   la date de naissance. Le reste de son allure est celle des pages d'accès (static/css/acces.css).
   Version du lien : INSCRIPTION_V (static/php/inscription_fonctions.php). */

.inscription_code {
    display: flex;
    justify-content: center;
    gap: .5rem;
}

/* Les cases rétrécissent ensemble sur un petit écran : les six tiennent toujours sur une ligne */
.inscription_chiffre {
    flex: 0 1 3.25rem;
    min-width: 0;
    height: 3.75rem;
    padding: 0;
    font-size: 1.75rem;
    font-weight: 600;
    text-align: center;
}

/* Le code se lit en deux groupes de trois */
.inscription_chiffre:nth-child(4) {
    margin-left: .75rem;
}

/* Date de naissance : trois listes côte à côte, de la taille des autres champs. Le jour et l'année ont la largeur de
   leur texte, le mois prend ce qui reste. La flèche est serrée à droite et le texte ne passe pas dessous, pour que
   « Jour », « Septembre » et « Année » se lisent en entier dans une colonne étroite */
.inscription_naissance {
    display: flex;
    gap: .5rem;
}

.inscription_naissance .form-select {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding-right: 1.5rem;
    padding-left: .5rem;
    background-position: right .35rem center;
}

.inscription_naissance .form-select:first-child {
    flex: 0 0 4.5rem;
}

.inscription_naissance .form-select:last-child {
    flex: 0 0 5.5rem;
}

/* Téléphone étroit : le texte des trois listes est un peu plus petit, leur hauteur ne change pas */
@media (max-width: 399.98px) {
    .inscription_naissance {
        gap: .25rem;
    }

    .inscription_naissance .form-select {
        min-height: 2.25rem;
        font-size: .875rem;
    }

    .inscription_naissance .form-select:first-child {
        flex-basis: 4.125rem;
    }

    .inscription_naissance .form-select:last-child {
        flex-basis: 5rem;
    }
}