/* Champs — underline only */
.ff-el-input--content input,
.ff-el-input--content textarea {
    border: none !important;
    border-bottom: 1.5px solid #ccc !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    font-size: 15px;
    font-weight: 300;
    padding: 8px 0 10px !important;
    color: #1B6842;
}

/* Placeholder transparent (trick pour le :not(:placeholder-shown)) */
.ff-el-input--content input::placeholder,
.ff-el-input--content textarea::placeholder {
    color: transparent !important;
}

/* Textarea */
.ff-el-input--content textarea {
    resize: none;
    height: 140px;
}

/* Focus — underline noire */
.ff-el-input--content input:focus,
.ff-el-input--content textarea:focus {
    border-bottom-color: #1B6842 !important;
}

/* Underline animée au focus */
.ff-el-group {
    position: relative;
    padding-top: 28px !important; /* espace pour le label flottant */
}

.ff-el-group::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1.5px;
    background: #1B6842;
    transition: width 0.4s ease;
}

.ff-el-group:focus-within::after {
    width: 100%;
}

/* Label flottant */
.ff-el-input--label label {
    display: flex !important;
    align-items: center !important;
    gap: 4px;
    position: absolute;
    top: 28px;
    left: 0;
    font-size: 15px;
    font-weight: 300;
    color: #999;
    pointer-events: none;
    white-space: nowrap;
    transition: top 0.25s ease, font-size 0.25s ease, color 0.25s ease;
    z-index: 1;
}

/* Float up quand focus ou rempli */
.ff-el-group:focus-within .ff-el-input--label label,
.ff-el-group.ff_has_value .ff-el-input--label label {
    top: 0;
    font-size: 12px;
    color: #555;
}

/* Astérisque en corail */
.ff-el-input--label label .ff-el-is-required {
    color: #e07a6a;
}

/* Bouton */
.ff-btn-submit {
    background: #1B6842 !important;
    color: #fff !important;
    border: 1px solid #1B6842 !important;
    border-radius: 0 !important;
    padding: 20px 48px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    float: right;
    transition: background 0.3s ease !important;
}

.ff-btn-submit:hover {
    background: #fff !important;
    color: #1B6842 !important;
    border: 1px solid #1B6842 !important;
    /*background: #333 !important;*/
}


/* Select — underline only */
.ff-el-input--content select {
    border: none !important;
    border-bottom: 1.5px solid #ccc !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    font-size: 15px;
    font-weight: 300;
    color: #111 !important;
    padding: 8px 0 10px !important;
    cursor: pointer;
    width: 100%;
    outline: none !important;
}

/* Flèche custom */
.ff-el-input--content .ff-select-input {
    position: relative;
}

.ff-el-input--content .ff-select-input::after {
    content: '↓';
    position: absolute;
    right: 0;
    bottom: 12px;
    font-size: 13px;
    color: #111;
    pointer-events: none;
    transition: transform 0.3s ease;
}

.ff-el-input--content .ff-select-input:focus-within::after {
    transform: rotate(180deg);
}

/* Label select — toujours en haut, pas de float */
.ff-el-group:has(select) .ff-el-input--label label {
    top: 0 !important;
    font-size: 12px !important;
    color: #555 !important;
}

select.ff-el-form-control:not([size]):not([multiple]) {
    font-size: 14px;
    margin-top: 10px;
}

.ff-el-group {
    padding-top: 36px !important; /* plus d'espace au-dessus */
}

.ff-el-input--label label {
    top: 16px; /* le label descend au niveau du champ */
}