/* form.css — base layout (toutes les tailles forcées en px + !important) */

/* ── Wrapper ── */
.vrslg-form-wrap {
    max-width: 720px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: Inter, Calibri, -apple-system, sans-serif !important;
}

/* ── Card ── */
.vrslg-card {
    background: #ffffff !important;
    border: 1.5px solid #E8DCC0 !important;
    border-radius: 12px !important;
    padding: 40px !important;
    box-shadow: 0 4px 28px rgba(30, 53, 99, 0.09) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* ── Rangées ── */
.vrslg-row {
    display: flex !important;
    gap: 16px !important;
    width: 100% !important;
}

.vrslg-row .vrslg-field {
    flex: 1 !important;
    min-width: 0 !important;
}

/* ── Champ masqué — ID+classe pour battre tout sélecteur de thème ── */
.vrslg-field.vrslg-hidden,
#vrslg-type-autre-wrap.vrslg-hidden {
    display: none !important;
}

/* ── Champ ── */
.vrslg-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.vrslg-field label {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
    color: #333333 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Inputs, textarea, select ── */
.vrslg-field input,
.vrslg-field textarea,
.vrslg-field select {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 14px !important;
    font-size: 15px !important;
    line-height: 22px !important;
    color: #333333 !important;
    background: #ffffff !important;
    border: 1.5px solid #cccccc !important;
    border-radius: 6px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    outline: none !important;
    margin: 0 !important;
    font-family: Inter, Calibri, -apple-system, sans-serif !important;
    transition: border-color 0.18s, box-shadow 0.18s !important;
}

.vrslg-field input[type="text"],
.vrslg-field input[type="email"],
.vrslg-field input[type="tel"],
.vrslg-field input[type="number"] {
    height: 44px !important;
}

.vrslg-field select {
    height: 44px !important;
    cursor: pointer !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    padding-right: 36px !important;
}

.vrslg-field textarea {
    height: auto !important;
    min-height: 100px !important;
    resize: vertical !important;
}

.vrslg-field input:focus,
.vrslg-field textarea:focus,
.vrslg-field select:focus {
    border-color: #1E3563 !important;
    box-shadow: 0 0 0 3px rgba(30, 53, 99, 0.13) !important;
    outline: none !important;
}

/* ── Bouton ── */
.vrslg-submit {
    height: 56px !important;
    width: 100% !important;
    padding: 0 32px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 56px !important;
    font-family: Inter, Calibri, -apple-system, sans-serif !important;
    background: #1E3563 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    text-align: center !important;
    letter-spacing: 0.3px !important;
    margin: 8px 0 0 0 !important;
    transition: background 0.18s, transform 0.12s !important;
    box-shadow: 0 4px 16px rgba(30, 53, 99, 0.22) !important;
}

.vrslg-submit::after {
    content: '→' !important;
    font-size: 18px !important;
    line-height: 1 !important;
    transition: transform 0.18s !important;
}

.vrslg-submit:hover {
    background: #162a4e !important;
    box-shadow: 0 6px 22px rgba(30, 53, 99, 0.30) !important;
}

.vrslg-submit:hover::after {
    transform: translateX(4px) !important;
}

.vrslg-submit:active {
    transform: scale(0.98) !important;
}

.vrslg-submit:disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
}

/* ── Autocomplete adresse ── */
.vrslg-address-wrap {
    position: relative !important;
    display: block !important;
    width: 100% !important;
}

.vrslg-autocomplete {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99999 !important;
    background: #ffffff !important;
    border: 1.5px solid #1E3563 !important;
    border-top: none !important;
    border-radius: 0 0 6px 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    box-shadow: 0 8px 24px rgba(30, 53, 99, 0.15) !important;
    max-height: 260px !important;
    overflow-y: auto !important;
}

.vrslg-autocomplete[style*="display: block"],
.vrslg-autocomplete[style*="display:block"] {
    display: block !important;
}

.vrslg-autocomplete li {
    padding: 10px 14px !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: #333333 !important;
    cursor: pointer !important;
    border-bottom: 1px solid #f0f0f0 !important;
    margin: 0 !important;
    list-style: none !important;
    font-family: Inter, Calibri, sans-serif !important;
}

.vrslg-autocomplete li:last-child {
    border-bottom: none !important;
}

.vrslg-autocomplete li:hover,
.vrslg-autocomplete li:focus,
.vrslg-autocomplete li.vrslg-ac-active {
    background: #edf2f9 !important;
    color: #1E3563 !important;
    outline: none !important;
}

/* ── Input file plan (simple) ── */
.vrslg-file-plan {
    width: 100% !important;
    box-sizing: border-box !important;
    font-family: Inter, Calibri, sans-serif !important;
    font-size: 14px !important;
    color: #333333 !important;
    padding: 9px 14px !important;
    background: #ffffff !important;
    border: 1.5px solid #cccccc !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    margin: 0 !important;
}

.vrslg-file-plan:focus {
    border-color: #1E3563 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(30, 53, 99, 0.13) !important;
}

/* ── Notices ── */
.vrslg-notice {
    padding: 12px 16px !important;
    border-radius: 6px !important;
    margin-top: 8px !important;
    font-size: 14px !important;
    line-height: 20px !important;
}

.vrslg-notice.vrslg-success {
    background: #d4edda !important;
    color: #155724 !important;
    border: 1px solid #c3e6cb !important;
}

.vrslg-notice.vrslg-error {
    background: #f8d7da !important;
    color: #721c24 !important;
    border: 1px solid #f5c6cb !important;
}

/* ── Responsive ── */
@media (max-width: 560px) {
    .vrslg-card {
        padding: 24px !important;
    }
    .vrslg-row {
        flex-direction: column !important;
        gap: 0 !important;
    }
}