/* ====== Formulaire - Mobile First ====== */
main {
    form {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        align-items: center;
        padding: 1rem;
    }

    /* ====== Fieldset ====== */
    fieldset {
        border: 1px solid #ccc;
        border-radius: 6px;
        padding: 1.5rem;
        width: 100%;
        max-width: 350px;
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
        background-color: #f9f9f9;
    }

    legend {
        font-weight: bold;
        padding: 0 0.5rem;
    }

    /* ====== Liste de champs ====== */
    fieldset ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    fieldset li {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        align-items: flex-start;
    }

    label {
        font-weight: 600;
        color: #333;
    }

    /* ====== Harmonisation des champs (Input, Select, Textarea) ====== */
    input[type="text"],
    input[type="file"],
    input[type="email"],
    input[type="password"],
    select,
    textarea {
        width: 100%;
        padding: 0.6rem;
        border: 1px solid #aaa;
        border-radius: 4px;
        font-size: 1rem;
        font-family: inherit;
        /* Aligne la police du textarea sur le reste */
        background-color: #fff;
        transition: border-color 0.2s;
    }

    /* Focus : contour bleu quand on clique dedans */
    input:focus,
    select:focus,
    textarea:focus {
        outline: none;
        border-color: #0066cc;
        box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1);
    }

    /* Spécifique au Textarea */
    textarea {
        min-height: 120px;
        resize: vertical;
        /* Empêche de casser la largeur sur desktop */
    }

    /* Spécifique au Select */
    select {
        cursor: pointer;
        appearance: none;
        /* Nettoie le style par défaut sur certains navigateurs */
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 0.7rem center;
        background-size: 1em;
        padding-right: 2.5rem;
    }

    /* ====== Boutons ====== */
    .form-buttons {
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
        width: 100%;
        max-width: 350px;
    }

    button[type="submit"],
    .btn-cancel {
        padding: 0.7rem 1.2rem;
        font-size: 1rem;
        font-weight: 600;
        border-radius: 4px;
        cursor: pointer;
        border: none;
        text-decoration: none;
        text-align: center;
        width: 100%;
        transition: background-color 0.2s;
    }

    button[type="submit"] {
        background-color: #0066cc;
        color: #fff;
    }

    button[type="submit"]:hover {
        background-color: #004999;
    }

    .btn-cancel {
        background-color: #e0e0e0;
        color: #333;
    }

    .btn-cancel:hover {
        background-color: #ccc;
    }

    /* ====== Desktop / Large Screens (min-width: 600px) ====== */
    @media (min-width: 600px) {
        fieldset {
            max-width: 600px;
        }

        fieldset li {
            flex-direction: row;
            align-items: flex-start;
            /* Aligné en haut pour les textareas */
        }

        label {
            width: 120px;
            padding-top: 0.5rem;
            /* Aligne le label avec le texte interne du champ */
            flex-shrink: 0;
        }

        input[type="text"],
        input[type="file"],
        select,
        textarea {
            flex: 1;
        }

        .form-buttons {
            flex-direction: row-reverse;
            /* Souvent le bouton valider est à droite sur desktop */
            max-width: 600px;
        }
    }
}