form {
    color: var(--color-text);
    display: flex;
    flex-wrap: wrap;
    gap: 5vw;
}

.form-main {
    padding: 20px 30px;
    border-radius: 5px;
    background-color: var(--color-bg-alt);
    flex: 7 1 550px;                                    /* Prend 70% de l'espace disponible */  
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 5vw;                                    /* Distance entre les colonnes */
    row-gap: 35px;                                      /* Distance entre les lignes */
    border: 1px solid var(--color-text);
}

.info {
    display: flex;                                      /* On utilise flexbox pour aligner les label/inputs en colonne */
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.form-sidebar {
    display: flex;
    flex-direction: column;
    gap: 35px;
    padding: 20px 30px;
    border-radius: 5px;
    background-color: var(--color-bg-alt);
    height: fit-content;
    flex: 3 1 300px;                                    /* Prend 30% de l'espace disponible, peu rétrécir et */
    border: 1px solid var(--color-text);
}

.complete-row {
    grid-column: 1/3;                                   /* Fait en sorte que cet élément prenne toute la largeur de la grille */
}

textarea {
    resize: none;
    height: 200px;
}

input, textarea, select {
    background-color: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-text);
    border-radius: 5px;
    padding: 10px;
    font-size: 1em;
    outline: none;
}

input[type="file"] {
    display: none;                                      /* On cache l'input natif */
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border: 1px solid var(--color-accent);
    box-shadow: none;
}

.btn-upload, button[type="submit"] {
    /* On leur donne l'apparence d'un input pour la hauteur et l'alignement */
    padding: 10px; 
    border-radius: 5px;
    border: 1px solid transparent;
    
    background-color: var(--color-primary);
    color: var(--color-text);
    
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    
    cursor: pointer;
    font-weight: 400;
    font-size: 1em;
    transition: background-color 0.3s;

}

/* C'est ce qui gère les "..." si le nom du fichier est trop long */
.btn-upload span {
    overflow: hidden;         /* Coupe le texte */
    text-overflow: ellipsis;  /* Met les "..." */
}

.btn-upload:hover, button[type="submit"]:hover {
    background-color: var(--color-accent);
}