/* MPA styles minimal */
.mpa-form, .mpa-dashboard, .mpa-latest { max-width: 860px; margin: 1rem auto; padding: 1rem; border: 1px solid #e5e7eb; border-radius: 12px; }
.mpa-form h3, .mpa-dashboard h3 { margin-top: 0; }
.mpa-form p { display: grid; gap: .4rem; }
.mpa-errors { background: #fee2e2; padding: .6rem .8rem; border-radius: 8px; }
.mpa-success { background: #dcfce7; padding: .6rem .8rem; border-radius: 8px; margin-bottom: .8rem; }
.mpa-dashboard { display: grid; grid-template-columns: 220px 1fr; gap: 1rem; }
.mpa-menu { display: grid; align-content: start; gap: .4rem; }
.mpa-menu a { display:block; padding:.5rem .7rem; border:1px solid #e5e7eb; border-radius: 8px; text-decoration:none; }
.mpa-content .mpa-publish form p { display:grid; gap:.4rem; }
.mpa-latest { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem; }
.mpa-card { border:1px solid #e5e7eb; border-radius: 10px; padding:.6rem .8rem; }
.mpa-pro-field { position: relative; }
.mpa-pro-badge { position:absolute; right:10px; top:36px; padding:2px 6px; border-radius:6px; font-size:.8rem; border:1px dashed #6b7280; }
.mpa-modal { position:fixed; inset:0; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; z-index:9999; }
.mpa-modal-content { background:white; padding:1rem; border-radius:12px; max-width:420px; width:92%; }
.mpa-button, .mpa-btn-go { display:inline-block; padding:.6rem .9rem; border:1px solid #111; border-radius:8px; text-decoration:none; }


/* Dashboard wrapper */
.mpa-dashboard {
    display: flex;
    gap: 20px;
    max-width: 1200px;
    margin: 20px auto;
    padding: 10px;
    flex-wrap: wrap;
}

/* Menu à gauche */
.mpa-menu {
    flex: 0 0 220px;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px;
    background: #fff;
    height: fit-content;
}

.mpa-menu a {
    display: block;
    margin-bottom: 10px;
    color: #333;
    text-decoration: none;
    padding: 6px 8px;
    border-radius: 4px;
    transition: 0.2s;
}

.mpa-menu a:hover {
    background: #f0f0f0;
}

.mpa-user {
    font-weight: bold;
    margin-bottom: 15px;
}

/* Contenu à droite */
.mpa-content {
    flex: 1 1 700px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    background: #fff;
}

/* Mes annonces list */
.mpa-list {
    list-style: none;
    padding-left: 0;
}

.mpa-list li {
    margin-bottom: 8px;
}

/* Publier annonce */
.mpa-publish form p {
    margin-bottom: 12px;
}

.mpa-publish input[type="text"],
.mpa-publish input[type="file"],
.mpa-publish textarea {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Badge Pro */
.mpa-pro-badge {
    display: inline-block;
    background: #ffc107;
    color: #fff;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    margin-left: 5px;
}

/* Boutons */
.mpa-button, .mpa-publish button {
    background: #0073aa;
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    margin-top: 10px;
    transition: 0.2s;
}

.mpa-button:hover, .mpa-publish button:hover {
    background: #005177;
}

/* Success message */
.mpa-success {
    padding:10px; 
    margin-bottom:15px; 
    background:#d4edda; 
    color:#155724; 
    border:1px solid #c3e6cb; 
    border-radius:5px;
}

/* Responsive */
@media (max-width: 992px) {
    .mpa-dashboard {
        flex-direction: column;
    }

    .mpa-menu {
        flex: 1 1 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        margin-bottom: 20px;
    }

    .mpa-menu a {
        margin: 5px;
        flex: 1 1 45%;
        text-align: center;
    }

    .mpa-content {
        flex: 1 1 100%;
        padding: 15px;
    }

    .mpa-publish input[type="text"],
    .mpa-publish input[type="file"],
    .mpa-publish textarea {
        width: 100%;
    }
}

.mpa-form .pro-field, .mpa-dashboard .pro-field {
    border: 2px solid #ffcc00; /* Une bordure jaune pour attirer l'attention */
    background-color: #fff8e1; /* Un fond de couleur claire */
    padding: 10px; /* Un peu d'espacement */
    border-radius: 5px; /* Coins arrondis */
    margin-bottom: 15px; /* Espacement en dessous du champ */
}

.pro-field .pro-tag {
    font-weight: bold;
    color: #c7900a; /* Une couleur forte pour le texte */
    background-color: #fff59d;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 5px;
}