summary {
    display: none;
}

caption {
    background-color: #a96036;
    color: #e8edd6;
    font-weight: bold;
    font-size: large;
    border-radius: 10px;
    text-transform: uppercase;

}


table {
    width: 90%;
    margin: 5em auto;
    border-collapse: collapse;
    background-color: rgba(255, 255, 255, 0.199);
    border-radius: 1em;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

th,
td {
    padding: 1em;
    text-align: left;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    color: #000;
    /* Garde tes couleurs si modifiées ailleurs */
}

th {
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.3);
}

tr:last-child td {
    border-bottom: none;
}


input:focus,
button:focus {
    outline: 2px solid blue;
}

.groupRadio {
    display: flex;
}

form {
    margin: 3% auto;
    padding: 2em;

    border-radius: 1em;

    font-family: "Raleway", sans-serif;
}

fieldset {
    background-color: rgba(255, 255, 255, 0.199);
    margin: 2em;
    border: none;
    padding: 1em;
    border-radius: 1em;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}

.textForm {
    text-align: center;
}

main div {
    margin: 1em;
}

.boutton {
    display: flex;
    justify-content: center;
    align-content: center;
    width: 100%;
}

button {
    margin: 5%;
    border: #e8edd6;
    background-color: #a96036;
    color: #e8edd6;
    font-size: larger;
    text-transform: uppercase;
    border-radius: 27px;
    padding: 10px;
}



input {

    padding: 0.5em;
    margin: 0.5em;
    background-color: #ffffff;
    border: #e8edd6;
    border-radius: 10px;
}

.fieldset-principal {
    background-color: #a96036;
    color: #e8edd6;
    font-weight: bold;
    text-transform: uppercase;
    padding: 0.8em 1em;
    border-radius: 0.8em;
    font-size: 1.2em;
    margin-bottom: 1em;
    text-align: center;
}

fieldset fieldset legend {
    border: solid 2px #d09064;
    background-color: #d09064;
    color: #e8edd6;
    font-weight: bold;
    font-size: 1.1em;
    border-radius: 8px;
    padding: 0.5em 1em;
    margin-bottom: 1em;
}

form label {
    display: inline-block;
    width: 15em;
    margin-bottom: 0.3em;
    font-weight: 500;
    color: #333;
}

input,
select,
textarea {
    width: calc(100% - 190px);
    max-width: 400px;
    padding: 0.6em;
    margin: 0.3em 0 1em 0;
    background-color: #ffffff;
    border: 1px solid #e8edd6;
    border-radius: 10px;
    font-size: 1em;
}

textarea {
    resize: vertical;
}

form div {
    display: flex;
    /* flex-wrap: wrap; */
    align-items: center;
    margin-bottom: 1em;
}

input[type="radio"] {
    width: auto;
    margin-right: 0.5em;
}



.boutton {
    display: flex;
    justify-content: center;
    gap: 2em;
    margin-top: 2em;
}

button {
    background-color: #a96036;
    color: #e8edd6;
    font-size: 1em;
    text-transform: uppercase;
    border: none;
    border-radius: 2em;
    padding: 0.8em 2em;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #8a4e2b;
}

.radio-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
    margin-bottom: 1em;
}

.radio-group input[type="text"],
.radio-group input[list] {
    flex: 1;
    min-width: 200px;
}



@media screen and (max-width: 700px) {
    table {
        width: 90%;
        font-size: 0.9em;
    }

    form {
        padding: 0%;
    }

    fieldset {
        margin: 0.5em;
    }

    input {
        width: 100%
    }

    th,
    td {
        padding: 0.8em;
    }

    form div {
        flex-wrap: wrap;
    }

    main div {
        margin: 0;
    }
}