/* =========================
📝 FORMULAIRES
========================= */


form {

    max-width: 500px;

    margin: auto;

    padding: 1rem;

    border:
        1px solid var(--dark-gray);

    background:
        var(--light-gray);

}



form input,
form textarea,
form button,
form select {

    width: 100%;

    padding:
        var(--form-input-padding);

    margin: .2rem 0;

    border:
        1px solid var(--dark-gray);

    border-radius:
        var(--border-radius);

    box-sizing: border-box;

}



form button {

    background:
        var(--primary-color);

    color: white;

    border: none;

    cursor: pointer;

}



form button:hover {

    background:
        var(--primary-dark);

}

.form-group {

    display: flex;

    flex-direction: column;

    gap: 5px;

}

.form-group label {

    font-weight: bold;

}

.card {

    background: var(--white);

    padding: var(--card-padding);

    margin: 1.5rem 0;

    border-radius: var(--border-radius);

    box-shadow: var(--shadow);

}

.card h2 {

    color: var(--primary-color);

    margin-top: 0;

    border-bottom:
        1px solid var(--medium-gray);

    padding-bottom: 10px;

}