/* =========================================================
DEMANDE DE DEVIS — MOBILE
========================================================= */
@media screen and (max-width: 768px) {

    /* ================= HERO + OVERLAY ================= */
    .hero-devis {
        padding: 40px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }

    .devis-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.35); /* overlay léger */
        z-index: 1;
    }

    .devis-wrapper {
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: 500px;
        display: flex;
        flex-direction: column;
        gap: 25px;
        background: rgba(255,255,255,0.05); /* optionnel, léger fond */
        padding: 20px;
        border-radius: 12px;
    }

    /* ================= HEADER HERO ================= */
    .devis-header h1 {
        font-size: 1.8rem;
        text-align: center;
        color: var(--white);
        margin-bottom: 10px;
    }

    .devis-header p {
        font-size: 1rem;
        text-align: center;
        color: var(--white);
    }

    /* ================= FORMULAIRE ================= */
    .devis-form {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .form-row {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .form-row input {
        width: 100%;
        padding: 12px 15px;
        font-size: 1rem;
        border-radius: 8px;
        border: 1px solid #ccc;
        outline: none;
        transition: border 0.3s ease;
    }

    .form-row input:focus {
        border-color: var(--red);
    }

    textarea {
        width: 100%;
        min-height: 120px;
        padding: 12px 15px;
        border-radius: 8px;
        border: 1px solid #ccc;
        font-size: 1rem;
        resize: vertical;
        outline: none;
    }

    textarea:focus {
        border-color: var(--red);
    }

    /* Upload */
    .form-upload {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .form-upload label {
        font-size: 0.95rem;
        color: var(--white);
    }

    .form-upload input[type="file"] {
        font-size: 0.9rem;
    }

    /* Bouton envoyer */
    .btn-primary {
        width: 100%;
        padding: 12px 0;
        font-size: 1.05rem;
        font-weight: 600;
        border-radius: 8px;
        border: none;
        cursor: pointer;
        background: var(--red);
        color: var(--white);
        transition: background 0.3s ease;
    }

    .btn-primary:hover {
        background: #ff4c4c;
    }

    /* ================= RESPONSIVE GENERALE ================= */
    .devis-wrapper, .devis-form, .form-row {
        box-sizing: border-box;
    }

    /* Si besoin d'espacement en bas pour mobile */
    body {
        padding-bottom: 40px;
    }
}