/* Fond de la page */
body {
    font-family: sans-serif;
    padding: 20px;
    max-width: 700px;
    margin: auto;
    background-color: #c6ede3; /* Fond vert clair */
}

/* Page de résultat spécifique */
body.page-resultat {
    max-width: 1200px;
}

/* Titres */
h1 {
    text-align: center;
    color: #0033a0; /* Bleu foncé */
}

h2 {
    text-align: center;
    color: black; /* Noir */
}

/* Bouton */
button, input[type="submit"] {
    background-color: #0033a0; /* Bleu foncé */
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
}

button:hover, input[type="submit"]:hover {
    background-color: #0055cc; /* Bleu légèrement plus clair */
}

/* Bouton "Ajouter un héritier" */
button[type="button"] {
    background-color: #0fd3a0; /* Vert vif */
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    margin-top: 10px;
    margin-left: 2%; /* Décaler le bouton pour alignement avec les champs */
}

button[type="button"]:hover {
    background-color: #3ce4b7; /* Vert légèrement plus foncé */
}

/* Bouton "Calculer" sur toute la largeur */
input[type="submit"] {
    background-color: #0033a0; /* Bleu foncé */
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    width: 97%; /* Largeur complète */
    text-align: center; /* Centrer le texte */
    display: block; /* Afficher comme un bloc pour occuper toute la largeur */
    margin: 0 auto; /* Centrer le bouton */
}

input[type="submit"]:hover {
    background-color: #0055cc; /* Bleu légèrement plus clair */
}

/* Encadrement des héritiers */
.heritier {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}

/* Tableau encadré avec bords arrondis */
.tableau-encadre {
    border: 2px solid #0fd3a0; /* Vert vif */
    padding: 20px;
    border-radius: 10px;
    background-color: white; /* Optionnel : fond blanc pour le tableau */
    margin: 20px auto; /* Centrer horizontalement */
    width: 90%; /* Largeur relative pour un meilleur rendu */
    display: block; /* Assurez que l'élément est un bloc */
    margin-left: auto;
    margin-right: auto;
}

/* Champs de formulaire */
input[type="text"], input[type="number"], select {
    width: 100%; /* Largeur complète */
    padding: 5px; /* Ajout d'espace intérieur */
    box-sizing: border-box; /* Inclure le padding et la bordure dans la largeur */
    margin-bottom: 10px; /* Espacement entre les champs */
}

/* Champs des noms */
input[type="text"][name="noms[]"] {
    width: 100%; /* Largeur complète */
    padding: 10px; /* Ajout d'espace intérieur similaire au bouton */
    box-sizing: border-box; /* Inclure le padding et la bordure dans la largeur */
    margin-bottom: 10px; /* Espacement uniforme */
}

/* Champs des enfants */
select[name="liens[]"] {
    width: 100%; /* Largeur complète */
    padding: 10px; /* Ajout d'espace intérieur similaire au bouton */
    box-sizing: border-box; /* Inclure le padding et la bordure dans la largeur */
    margin-bottom: 10px; /* Espacement uniforme */
}

/* Champs du montant */
input[type="number"][name="montant"] {
    width: 97%; /* Largeur réduite à 97% */
    padding: 10px; /* Ajout d'espace intérieur similaire au bouton */
    box-sizing: border-box; /* Inclure le padding et la bordure dans la largeur */
    margin: 0 auto 10px; /* Centrer horizontalement et ajouter un espacement en bas */
    display: block; /* Afficher comme un bloc pour permettre le centrage */
}

/* Label du montant */
label[for="montant"] {
    display: block; /* Assurer que le label occupe toute la largeur */
    padding-left: 10px; /* Décaler le texte d'une lettre sur la droite */
    margin-bottom: 5px; /* Espacement avec le champ */
}


.btn-retour {
    display: inline-block;
    padding: 10px 20px;
    background-color: #0033a0;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}
.btn-retour:hover {
    background-color: #0055cc;
}


.tableau-encadre {
    max-width: 90%;
    margin: 40px auto;
    padding: 30px;
    border: 3px solid #0fd3a0;
    border-radius: 12px;
    background-color: #f9f9f9;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
}

/* Ajustement spécifique pour la page de résultat */
body.page-resultat .tableau-encadre {
    max-width: 100%;
    width: 100%;
    padding: 20px 30px;
}

.tableau-encadre table {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
    margin-top: 20px;
}

.tableau-encadre th,
.tableau-encadre td {
    padding: 12px;
    text-align: center;
    border: 1px solid #ccc;
    white-space: nowrap;
}

.tableau-encadre h1 {
    text-align: center;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .tableau-encadre {
        padding: 15px;
    }

    .btn-retour {
        width: 100%;
        box-sizing: border-box;
    }

    .tableau-scroll {
        overflow-x: auto;
    }

    .tableau-scroll table {
        width: 100%;
        min-width: 600px;
        display: block;
        overflow-x: auto;
    }
}


/* Élargissement et centrage de l'encadré de résultats */
.tableau-encadre {
    max-width: 1200px;
    width: 95%;
    margin: 50px auto;
    padding: 30px 40px;
    border: 3px solid #0fd3a0;
    border-radius: 12px;
    background-color: #f9f9f9;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
}

/* Centrer les boutons, titres, et autres éléments */
.tableau-encadre h1,
.tableau-encadre .btn-retour-container {
    text-align: center;
    margin-top: 20px;
}

/* Défilement horizontal amélioré */
.tableau-scroll {
    overflow-x: auto;
    max-width: 100%;
}

.tableau-scroll table {
    min-width: 900px; /* Largeur minimale pour éviter l'écrasement */
    width: 100%;
}

/* Ajustement des colonnes */
.tableau-encadre th, 
.tableau-encadre td {
    padding: 10px 12px;
    white-space: nowrap;
}

/* Centrage amélioré du bouton Retour */
.btn-retour-container {
    text-align: center;
    margin-top: 25px;
}