/* Commentaires publics — Les Échos du Mumtaz */
.em-comments {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 55px 0 0;
    padding: 42px 24px 48px;
    border-top: 2px solid rgba(244, 153, 26, .75);
    border-radius: 0 0 9px 9px;
    background: rgba(255, 248, 240, .72);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.em-comments-heading { text-align: center; margin-bottom: 28px; }
.em-comments-eyebrow { color: #56705c; font-size: 12px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.em-comments h2 { margin: 7px 0 0; color: #321313; font-family: "Cormorant Garamond", Georgia, serif; font-size: 34px; }
.em-comments h2::after { content: ""; display: block; width: 90px; height: 2px; margin: 13px auto 0; background: #f4991a; }

.em-comments-list { display: grid; gap: 14px; margin-bottom: 34px; }
.em-comment { padding: 17px 19px; border: 1px solid rgba(50, 19, 19, .12); border-left: 4px solid #f4991a; border-radius: 8px; background: #fffaf5; box-shadow: 0 5px 18px rgba(50, 19, 19, .06); }
.em-comment-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: #321313; }
.em-comment-head time { color: #786a60; font-size: 12px; }
.em-comment > p { margin: 11px 0 0 !important; white-space: pre-wrap; text-align: left !important; font-family: Georgia, serif !important; font-size: 14px !important; line-height: 1.65 !important; }
.em-comments-empty, .em-comments-loading { color: #6b5c52; text-align: center; font-style: italic; }

.em-comment-form { padding: 24px; border: 1px solid rgba(50, 19, 19, .15); border-radius: 10px; background: #fcdabf; }
.em-comment-form h3 { margin: 0; color: #321313; font-family: "Cormorant Garamond", Georgia, serif; font-size: 27px; }
.em-comment-note { margin: 5px 0 20px; color: #6b5c52; font-size: 13px; }
.em-comment-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.em-comment-field { display: grid; gap: 7px; margin-bottom: 16px; color: #321313; font-size: 13px; font-weight: 700; }
.em-comment-field input, .em-comment-field textarea { box-sizing: border-box; width: 100%; max-width: 100%; padding: 11px 12px; border: 1px solid rgba(50, 19, 19, .27); border-radius: 7px; background: #fffdf9; color: #2d2520; font: 15px/1.4 system-ui, sans-serif; }
.em-comment-field textarea { min-height: 130px; resize: vertical; }
.em-comment-field input:focus, .em-comment-field textarea:focus { outline: 3px solid rgba(244, 153, 26, .25); border-color: #f4991a; }
.em-comment-trap { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.em-comment-submit { padding: 11px 18px; border: 0; border-radius: 7px; background: #321313; color: #fff; font-weight: 800; cursor: pointer; transition: transform .18s ease, background .18s ease; }
.em-comment-submit:hover { transform: translateY(-1px); background: #56705c; }
.em-comment-submit:disabled { opacity: .6; cursor: wait; }
.em-comment-feedback { min-height: 20px; margin: 12px 0 0; font-size: 13px; font-weight: 700; }
.em-comment-feedback.is-success { color: #325b46; }
.em-comment-feedback.is-error { color: #8a2d2d; }

@media (max-width: 700px) {
    .em-comments { margin: 40px 0 0; padding: 34px 18px 38px; }
    .em-comment-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .em-comment-head { align-items: flex-start; flex-direction: column; gap: 3px; }
    .em-comment-form { padding: 18px; }
}

@media (max-width: 420px) {
    .em-comments { padding-right: 14px; padding-left: 14px; }
    .em-comments h2 { font-size: 30px; }
}