.app-form h1,
.app-form h2,
.app-form h3,
.app-form h4 {
    color: #0056b3;
    border-bottom: 2px solid #0056b3;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.section {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #ccc;
}

.section:last-child {
    border-bottom: none;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    /* Permet aux éléments de passer à la ligne si l'espace est insuffisant */
    gap: 20px;
    /* Espace entre les colonnes */
    margin-bottom: 15px;
}

.form-group {
    flex: 1 1 calc(50% - 10px);
    /* 2 champs par ligne par défaut, avec 10px de gap de chaque côté */
    display: flex;
    flex-direction: row;
    /* Label au-dessus du champ */
    min-width: 250px;
    /* Largeur minimale pour éviter des champs trop petits */
    align-items: baseline;
    /* Aligne les éléments à la base */
    flex: 1 1 auto;
    /* Permet aux champs de prendre la place nécessaire */
    min-width: auto;
}

/* Pour 3 champs par ligne */
.form-group.third-width {
    flex: 1 1 calc(33.333% - 14px);
    /* (20px gap / 3 segments) */
}

/* Pour 4 champs par ligne */
.form-group.quarter-width {
    flex: 1 1 calc(25% - 15px);
    /* (20px gap / 4 segments) */
}

.form-group label {
    margin-bottom: 8px;
    font-weight: bold;
    color: #555;
    font-size: 0.95em;
    /* Légèrement plus petit pour gagner de l'espace */
    white-space: nowrap;
    margin-right: 20px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="date"],
.form-group input[type="number"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    /* Important pour inclure le padding dans la largeur */
    font-size: 1em;
}

.form-group textarea {
    resize: vertical;
    min-height: 60px;
    /* Réduit la hauteur par défaut */
}

.form-group .checkbox-group,
.form-group .radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 5px;
}

.form-group .checkbox-group label,
.form-group .radio-group label {
    font-weight: normal;
    margin-bottom: 0;
    display: flex;
    align-items: center;
}

.form-group input[type="checkbox"],
.form-group input[type="radio"] {
    margin-right: 5px;
    width: auto;
    /* Supprime le 100% de largeur pour les radios/checkbox */
}

.form-actions {
    text-align: right;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px dashed #ccc;
}

.form-actions button {
    /*background-color: #007bff;*/
    /*color: white;*/
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.form-actions button:hover {
    background-color: #0056b3;
}

/* Styles pour l'impression A4 */
@page {
    size: A4;
    margin: 20mm;
    /* Marges standard pour A4 */
}

@media print {
    body {
        background-color: #fff;
        margin: 0;
        padding: 0;
    }

    .container {
        box-shadow: none;
        border: none;
        /* Cache les bordures extérieures */
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    h1,
    h2 {
        color: #000;
        /* Texte noir pour l'impression */
        border-color: #000;
        print-color-adjust: exact;
        /* Force la couleur pour l'impression */
    }

    .section {
        border-bottom: 1px dashed #eee;
        /* Bordures plus légères pour l'impression */
        margin-bottom: 15px;
        padding-bottom: 10px;
    }

    .form-actions {
        display: none;
        /* Cache les boutons d'action à l'impression */
    }

    .form-row {
        gap: 10px;
        /* Moins d'espace entre les champs à l'impression */
        margin-bottom: 5px;
    }

    .form-group {
        flex-direction: row;
        /* Met label et champ côte à côte à l'impression */
        align-items: baseline;
        /* Aligne les éléments à la base */
        flex: 1 1 auto;
        /* Permet aux champs de prendre la place nécessaire */
        min-width: auto;
    }

    .form-group label {
        flex-shrink: 0;
        /* Empêche le label de rétrécir */
        width: 120px;
        /* Largeur fixe pour les labels pour l'alignement */
        margin-bottom: 0;
        margin-right: 10px;
        font-size: 0.85em;
        /* Encore plus petit pour les labels à l'impression */
        font-size: 0.7em;
    }

    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="tel"],
    .form-group input[type="date"],
    .form-group input[type="number"],
    .form-group textarea,
    .form-group select {
        border: 1px solid #ddd;
        /* Bordure légère pour les champs imprimés */
        background-color: #f9f9f9;
        /* Légère couleur de fond pour distinguer les champs */
        padding: 5px 8px;
        /* Padding réduit pour l'impression */
        font-size: 0.9em;
    }

    .form-group textarea {
        min-height: 40px;
        /* Réduit encore la hauteur des textareas */
    }

    .form-group .checkbox-group,
    .form-group .radio-group {
        gap: 8px;
    }

    .form-group label {
        width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #0056b3;
    }
}