body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* Hauteur de l'écran */
    margin: 0;
    background-color: #f7f7f7; /* Couleur de fond douce */
    font-family: 'Arial', sans-serif; /* Police de caractères */
}

.container {
    text-align: center; /* Centrer le texte */
    padding: 30px; /* Espacement interne */
    background-color: #ffffff; /* Couleur de fond de la fenêtre */
    border-radius: 10px; /* Coins arrondis */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Ombre */
    width: 80%; /* Largeur de la fenêtre */
    max-width: 600px; /* Largeur maximale */
    display: flex;
    flex-direction: column; /* Aligner les éléments en colonne */
    height: auto; /* Hauteur automatique */
    margin-bottom: 20px; /* Marge en bas */
}

.checkbox {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-align: left; 

    margin: 0 auto;
    justify-content: center;
}


h1 {
    font-size: 2.0em; /* Taille de la police du titre */
    color: #007bff; /* Couleur du titre */
    margin: 0; /* Éliminer les marges */
    font-weight: bold; /* Gras */
}

h2 {
    font-size: 1.3em; /* Taille de la police du sous-titre */
    margin-top: 10px; /* Espacement au-dessus du sous-titre */
    color: #555; /* Couleur du sous-titre */
}

.flag {
    width: 50px; /* Largeur du drapeau */
    vertical-align: middle; /* Alignement vertical avec le texte */
    margin-right: 10px; /* Espace entre le drapeau et le titre */
}

.button {
    margin-top: 20px; /* Espacement au-dessus du bouton */
    padding: 12px 20px; /* Espacement interne du bouton */
    background-color: #007bff; /* Couleur de fond du bouton */
    color: white; /* Couleur du texte du bouton */
    border: none; /* Pas de bordure */
    border-radius: 5px; /* Coins arrondis */
    cursor: pointer; /* Curseur en main */
    font-size: 16px; /* Taille de la police du bouton */
    transition: background-color 0.3s, transform 0.3s; /* Transition pour le survol */
    width: 100%; /* Largeur des boutons pour occuper tout l'espace disponible */
}

.button:hover {
    background-color: #0056b3; /* Couleur au survol */
    transform: translateY(-2px); /* Effet d'élévation au survol */
}

input {
    margin: 10px 0; /* Espacement autour des champs de saisie */
    padding: 12px; /* Espacement interne des champs de saisie */
    width: 80%; /* Largeur des champs */
    border: 1px solid #ccc; /* Bordure des champs */
    border-radius: 5px; /* Coins arrondis */
    font-size: 14px; /* Taille de la police des champs */
}

.recap-container {
    text-align: left; /* Alignement du texte à gauche pour le récapitulatif */
    padding-top: 20px; /* Espacement au-dessus du récapitulatif */
    flex-grow: 1; /* Pousser les éléments vers le bas */
}

.recap-title {
    font-size: 1.5em; /* Taille de la police du titre dans le récapitulatif */
    color: #007bff; /* Couleur du titre */
    margin: 0; /* Éliminer les marges */
    margin-bottom: 10px; /* Espacement au-dessous du titre */
}

.recap-item {
    margin: 8px 0; /* Espacement entre les items du récapitulatif */
    padding: 10px; /* Espacement intérieur des items */
    border: 1px solid #e0e0e0; /* Bordure pour chaque item */
    border-radius: 5px; /* Coins arrondis */
    background-color: #fafafa; /* Couleur de fond des items */
}

.info-message {
    margin-top: 20px; /* Espacement au-dessus du message */
    font-size: 1em; /* Taille de la police du message */
    color: #333; /* Couleur du message */
}