/*  Univers Auto — carte « Demander mon devis »
    Reprise du bloc qui était en <style> inline dans index.html, sorti ici pour
    être partagé par index.html, contact-1.html et contact-2.html.
    Les champs blancs sur fond rouge règlent le problème de lisibilité des
    anciens formulaires (bordures sombres sur section sombre). */

.ua-rdv {
    background: #E2061B;
    padding: 46px 42px 52px;
    position: relative;
}

.ua-rdv h3 {
    color: #fff;
    text-align: center;
    font-size: clamp(28px, 3vw, 36px);
    line-height: 1.1;
    margin: 0 0 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.ua-rdv .ua-sub {
    color: rgba(255, 255, 255, .92);
    text-align: center;
    margin: 0 0 30px;
    font-size: 15px;
}

.ua-rdv .ua-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.ua-rdv .ua-full {
    grid-column: 1 / -1;
}

.ua-rdv label {
    display: block;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 13px;
    margin-bottom: 9px;
}

.ua-rdv input,
.ua-rdv select,
.ua-rdv textarea {
    width: 100%;
    background: #fff;
    color: #333;
    border: 0;
    border-radius: 0;
    padding: 14px 15px;
    font-family: inherit;
    font-size: 15px;
    outline: none;
}

.ua-rdv textarea {
    min-height: 96px;
    resize: vertical;
}

.ua-rdv input::placeholder,
.ua-rdv textarea::placeholder {
    color: #9a9a9a;
}

.ua-rdv input:focus,
.ua-rdv select:focus,
.ua-rdv textarea:focus {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .18);
}

.ua-rdv select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23888'%3E%3Cpath d='M6 9L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
}

/*  theme.js applique $('select').niceSelect() : le <select> est remplacé au
    chargement par un <div class="nice-select">, qui récupère le champ sombre de
    global.css (.nice-select y est listé) — d'où un menu quasi invisible sur le
    fond rouge. On l'aligne sur les autres champs blancs. */
.ua-rdv .nice-select {
    width: 100%;
    float: none;
    height: auto;
    line-height: normal;
    background-color: #fff;
    color: #333;
    border: 0;
    border-radius: 0;
    padding: 14px 38px 14px 15px;
    font-family: inherit;
    font-size: 15px;
}

.ua-rdv .nice-select:after {
    border-bottom: 2px solid #888;
    border-right: 2px solid #888;
    width: 7px;
    height: 7px;
    right: 16px;
}

.ua-rdv .nice-select .list {
    width: 100%;
    min-width: 0;
    border-radius: 0;
    margin-top: 2px;
    max-height: 260px;
    overflow-y: auto;
}

.ua-rdv .nice-select .option {
    color: #333;
    line-height: 38px;
    min-height: 38px;
    font-size: 15px;
}

.ua-rdv .ua-submit {
    grid-column: 1 / -1;
    margin-top: 8px;
    width: 100%;
    background: #111;
    color: #fff;
    border: 0;
    padding: 17px;
    font-family: inherit;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 15px;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.ua-rdv .ua-submit:hover {
    background: #fff;
    color: #E2061B;
}

@media (max-width: 575px) {
    .ua-rdv {
        padding: 34px 24px 40px;
    }
    .ua-rdv .ua-grid {
        grid-template-columns: 1fr;
    }
}