.title-container {
    top: 60px;
}


/* --- Conteneur principal du formulaire --- */
.form-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 40px 20px; /* Augmenté pour plus d'espace */
    font-family: 'Cormorant Garamond', serif; /* Changer la police */
    background-color: #f5f0f0; /* Fond similaire à .menu-container */
    border-radius: 12px; /* Coins arrondis */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box; /* Inclure padding et bordure dans la largeur */
}

/* --- Style des titres du formulaire --- */
h2 {
    color: #844f6b; /* Couleur du titre principal */
    font-size: 2.5rem; /* Taille de la police */
    text-align: center; /* Centrer le texte */
}

/* --- Style des labels et des inputs --- */
label {
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
    color: #333;
}

input[type="text"], input[type="email"], input[type="number"], select {
    width: 100%;
    padding: 12px; /* Espacement plus important pour une meilleure lisibilité */
    margin-bottom: 15px;
    border-radius: 8px; /* Coins arrondis */
    border: 1px solid #ccc; /* Couleur de la bordure */
    font-size: 1rem;
    background-color: #fff; /* Fond blanc */
    color: #333; /* Couleur du texte */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); /* Légère ombre interne */
    transition: all 0.3s ease; /* Transition douce */
    box-sizing: border-box; /* Inclure padding et bordure dans la largeur */
}

input[type="text"]:focus, input[type="email"]:focus, input[type="number"]:focus, select:focus {
    border-color: #a8707d; /* Couleur de la bordure au focus */
    outline: none;
    box-shadow: 0 0 8px rgba(168, 112, 125, 0.3); /* Effet lumineux autour au focus */
}

/* --- Style des boutons radio et des cases à cocher --- */
input[type="radio"], input[type="checkbox"] {
    margin-right: 10px; /* Espacement avec le label */
    accent-color: #601467; /* Couleur des boutons radio et des cases */
    width: 20px; /* Taille des boutons radio */
    height: 20px; /* Taille des boutons radio */
}

/* --- Aligner horizontalement .confirmation et .nombre --- */
.confirmation {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 20px;
    width: 100%; /* Forcer .confirmation à prendre toute la largeur */
}

.confirmation div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nombre {
    flex-grow: 1;
}

input[type="radio"] {
    margin-left: 10px;
}

/* --- Pour que le conteneur des invités soit en dessous --- */
#guest-blocks-container {
    max-width: 100%; /* Prendre toute la largeur disponible */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 20px;
    clear: both; /* S'assurer qu'il apparaisse sous la confirmation et le nombre */
}

.guest-block {
    width: calc(25% - 30px); /* Réduire la largeur pour tenir à 4 sur une ligne */
    box-sizing: border-box; /* Inclure padding et bordure dans la largeur */
}

/* --- Style des blocs invités (fieldset) --- */
.guest-block fieldset {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 20px;
    width: 100%; /* Prendre toute la largeur du bloc invité */
    background-color: #fff; /* Couleur de fond blanche */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    box-sizing: border-box; /* Inclure padding et bordure dans la largeur */
}

.guest-block legend {
    font-size: 1.2rem;
    font-weight: bold;
    color: #844f6b; /* Couleur de la légende */
    margin-bottom: 10px;
}

.guest-block label {
    display: block;
    margin-bottom: 5px;
}

/* --- Aligner les boutons radio dans les blocs invités --- */
.radio-group {
    display: flex;
    align-items: center;
    gap: 15px;
}

.radio-group input {
    margin-left: 10px;
}

/* --- Style du bouton d'envoi --- */
button[type="submit"] {
    padding: 12px 30px; /* Espacement plus large */
    background-color: #601467; /* Couleur du bouton */
    color: white;
    border: none;
    border-radius: 8px; /* Coins plus arrondis */
    cursor: pointer;
    font-size: 1rem;
    margin-top: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Légère ombre pour le bouton */
    transition: background-color 0.3s ease; /* Transition douce au survol */
}

button[type="submit"]:hover {
    background-color: #a8707d; /* Couleur au survol */
}

/* --- Responsive Design : 2 invités par ligne sur tablettes --- */
@media (max-width: 1200px) {
    .guest-block {
        width: calc(50% - 15px); /* Ajuster pour 2 invités par ligne */
    }
}

/* --- Responsive Design : 1 invité par ligne sur mobiles --- */
@media (max-width: 700px) {
    .guest-block {
        width: 100%; /* Ajuster pour 1 invité par ligne */
    }

    .confirmation {
        flex-direction: column;
        align-items: flex-start;
    }

    .nombre {
        width: 100%;
    }
}