/* ========================================
   Salon : style local, sans modifier le thème
   ======================================== */
#salon {
    max-width: 920px;
    margin: 0 auto;
}

/* Conversation défilante : messages en bulles, sans apparence de livre d’or. */
#salon-feed {
    height: min(56vh, 520px);
    min-height: 290px;
    overflow-y: auto;
    overflow-wrap: anywhere;
    padding: 16px;
    margin: 22px 0 8px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #FFFDFC;
}
#salon-feed article {
    width: fit-content;
    max-width: min(86%, 690px);
    margin: 0 0 12px;
    padding: 11px 15px;
    border: 1px solid var(--line);
    border-radius: 16px 16px 16px 4px;
    background: #F6F1EB;
}
#salon-feed article:last-child { margin-bottom: 0; }
#salon-feed article p { margin: 0; }
#salon-feed article p + p { margin-top: 5px; white-space: pre-wrap; }
#salon-feed article strong { color: var(--text); }
#salon-feed time { color: var(--text-soft); font-size: .83rem; }
#salon-status { min-height: 25px; color: var(--text-soft); }

/* Formulaire et clavier mobile. */
#salon-form label { display: block; font-weight: 700; margin: 14px 0 7px; }
#salon-form input:not([type="hidden"]),
#salon-form textarea,
#salon-admin input[type="password"] {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: var(--text);
    font: inherit;
}
#salon-form textarea { resize: vertical; min-height: 102px; }
#salon-form input:focus-visible, #salon-form textarea:focus-visible {
    outline: 2px solid var(--orange-dark);
    outline-offset: 2px;
}
#salon-actions { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-top: 16px; }
#salon-actions span, #salon-rules, #salon-moderation { color: var(--text-soft); font-size: .9rem; }
#salon-rules { margin-top: 22px; }
#salon-moderation { text-align: right; margin-bottom: 0; }
#salon-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Administration compacte, sans nouvel habillage général. */
#salon-admin { max-width: 900px; margin: auto; }
#salon-admin .search-result-card { margin: 15px 0; }
#salon-admin .search-form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Mobile : actions empilées pour garder les boutons lisibles. */
@media (max-width: 640px) {
    #salon-actions { flex-direction: column; align-items: stretch; }
    #salon-actions .btn { justify-content: center; }
    #salon-admin .search-form-row { grid-template-columns: 1fr; }
}