/* ==========================================================================
   2SM — article d'actualité, contenu riche et commentaires
   Partagé par l'espace membre (layouts/dashboard) et le site public
   (layouts/site). Les variables --sm-* viennent du thème chargé avant ;
   chaque usage a une valeur de repli.
   ========================================================================== */

.sm-back {
  display: inline-flex; align-items: center; gap: .4em; margin-bottom: 1rem; font-size: .8rem; font-weight: 600;
  color: var(--sm-muted, #7C8AA5); text-decoration: none; transition: color .2s ease, transform .2s ease;
}
.sm-back:hover { color: var(--sm-primary, #4F46E5); transform: translateX(-3px); }

/* ---- Avatars ---- */
.sm-ava { border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: #EEF1F8; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(99, 72, 235, .18); }
.sm-ava-md { width: 52px; height: 52px; }
.sm-ava-sm { width: 40px; height: 40px; }

/* ---- Article ---- */
.sm-article { overflow: hidden; border-radius: 24px !important; }
.sm-article:hover { transform: none !important; }
.sm-article-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 1.4rem 1.75rem;
  border-bottom: 1px solid var(--sm-line, #E6EAF4);
}
.sm-article-author { margin: 0 0 2px; font-family: var(--sm-display, inherit); font-weight: 700; font-size: 1rem !important; color: var(--sm-ink, #0F172A); letter-spacing: -.01em; line-height: 1.3; }
.sm-article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .78rem; color: var(--sm-muted, #7C8AA5); }
.sm-article-meta .sm-date { font-size: 1em; }
.sm-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; display: inline-block; }
.sm-icon-btn {
  width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
  color: var(--sm-primary, #4F46E5); background: rgba(79, 70, 229, .08); text-decoration: none; transition: all .2s ease;
}
.sm-icon-btn:hover { color: #fff; background: var(--sm-grad, #4F46E5); transform: translateY(-2px); }

.sm-article-foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: .9rem 1.4rem; border-top: 1px solid var(--sm-line, #E6EAF4);
  background: linear-gradient(180deg, rgba(79, 70, 229, .025), transparent);
}
.sm-reaction {
  display: inline-flex; align-items: center; gap: .45em; padding: .5rem .9rem; border-radius: 999px; border: 0; background: transparent;
  font-family: var(--sm-font, inherit); font-size: .8rem; font-weight: 500; color: var(--sm-muted, #7C8AA5); text-decoration: none; line-height: 1.2;
}
.sm-reaction i { font-size: 1.15rem; line-height: 1; }
.sm-reaction strong { color: var(--sm-ink, #0F172A); font-weight: 700; font-variant-numeric: tabular-nums; }
.sm-reaction-btn { cursor: pointer; transition: background .2s ease, color .2s ease, transform .15s ease; }
.sm-reaction-btn:hover { background: rgba(79, 70, 229, .08); color: var(--sm-primary, #4F46E5); }
.sm-reaction-btn:active { transform: scale(.96); }
.sm-reaction-btn.is-active { background: rgba(244, 63, 94, .1); color: #E11D48; }
.sm-reaction-btn.is-active strong { color: #E11D48; }
.sm-reaction-btn.is-active i { animation: sm-pop .35s ease; }
@keyframes sm-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* ---- Contenu riche (HTML de l'éditeur, nettoyé côté serveur) ---- */
.sm-richtext { padding: 1.75rem 1.75rem 2rem !important; color: var(--sm-text, #334155); font-size: 1rem; line-height: 1.8; overflow-wrap: anywhere; }
.sm-richtext > :first-child { margin-top: 0; }
.sm-richtext > :last-child { margin-bottom: 0; }
.sm-richtext h1, .sm-richtext h2, .sm-richtext h3, .sm-richtext h4, .sm-richtext h5, .sm-richtext h6 {
  font-family: var(--sm-display, inherit); color: var(--sm-ink, #0F172A); letter-spacing: -.025em; line-height: 1.25; margin: 1.6em 0 .6em;
}
.sm-richtext h1 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; margin-bottom: .7em; }
.sm-richtext h1:first-child::after { content: ""; display: block; width: 64px; height: 4px; border-radius: 4px; margin-top: .55em; background: linear-gradient(90deg, #22D3EE, #7C3AED); }
.sm-richtext h2 { font-size: 1.4rem; font-weight: 700; }
.sm-richtext h3 { font-size: 1.2rem; font-weight: 700; }
.sm-richtext h4, .sm-richtext h5, .sm-richtext h6 { font-size: 1.05rem; font-weight: 600; }
.sm-richtext p, .home-tab .sm-richtext p { font-size: 1rem; line-height: 1.8; margin: 0 0 1.1em; }
.sm-richtext li, .home-tab .sm-richtext li { font-size: 1rem; line-height: 1.7; margin-bottom: .35em; }
.sm-richtext ul, .sm-richtext ol { padding-left: 1.4em; margin: 0 0 1.1em; }
.sm-richtext ul li::marker { color: var(--sm-primary, #4F46E5); }
.sm-richtext a { color: var(--sm-primary, #4F46E5); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(79, 70, 229, .35); text-underline-offset: 3px; }
.sm-richtext a:hover { text-decoration-color: currentColor; }
.sm-richtext img { max-width: 100%; height: auto; border-radius: 16px; margin: .6em 0 1.2em; box-shadow: 0 12px 32px -12px rgba(15, 23, 42, .25); }
.sm-richtext blockquote {
  margin: 1.4em 0; padding: 1em 1.3em; border-left: 4px solid var(--sm-primary, #4F46E5); border-radius: 0 14px 14px 0;
  background: rgba(79, 70, 229, .05); color: var(--sm-ink, #0F172A); font-style: italic;
}
.sm-richtext blockquote p:last-child { margin-bottom: 0; }
.sm-richtext pre, .sm-richtext code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; background: #F1F4FB; border-radius: 8px; }
.sm-richtext code { padding: .15em .4em; }
.sm-richtext pre { padding: 1em 1.2em; overflow-x: auto; }
.sm-richtext pre code { padding: 0; background: transparent; }
.sm-richtext hr { border: 0; border-top: 1px solid var(--sm-line, #E6EAF4); margin: 2em 0; }
.sm-richtext table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: .92rem; display: block; overflow-x: auto; }
.sm-richtext th, .sm-richtext td { border: 1px solid var(--sm-line, #E6EAF4); padding: .6em .8em; text-align: left; white-space: normal; }
.sm-richtext th { background: #F6F8FD; font-weight: 700; color: var(--sm-ink, #0F172A); }

/* ---- Commentaires ---- */
.sm-comments { margin-top: 2rem; }
.sm-comments-title { display: flex; align-items: center; gap: 10px; margin-bottom: 1.1rem; }
.sm-comments-title h3 { margin: 0; font-family: var(--sm-display, inherit); font-size: 1.25rem; font-weight: 700; color: var(--sm-ink, #0F172A); letter-spacing: -.02em; }
.sm-count {
  min-width: 28px; height: 24px; padding: 0 9px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  font-size: .74rem; font-weight: 700; color: #4338CA; background: rgba(79, 70, 229, .12); font-variant-numeric: tabular-nums;
}

.sm-composer {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px; margin-bottom: 1.5rem; background: var(--sm-surface, #fff);
  border: 1px solid transparent; border-radius: 22px; box-shadow: var(--sm-shadow, 0 8px 24px -6px rgba(15, 23, 42, .08));
  transition: border-color .2s ease, box-shadow .2s ease;
}
.sm-composer:focus-within { border-color: rgba(79, 70, 229, .45); box-shadow: 0 2px 10px -4px rgba(79, 70, 229, .25); }
.sm-composer-field { flex: 1; min-width: 0; }
.sm-composer textarea {
  width: 100%; border: 0; outline: 0; resize: none; background: transparent; padding: 9px 4px 4px; min-height: 40px; max-height: 220px;
  font-family: var(--sm-font, inherit); font-size: .92rem; line-height: 1.55; color: var(--sm-ink, #0F172A); box-shadow: none;
}
.sm-composer textarea::placeholder { color: #A3AEC6; }
.sm-composer-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.sm-composer-hint { font-size: .7rem; font-weight: 500; color: #A3AEC6; font-variant-numeric: tabular-nums; }
.sm-send {
  width: 42px; height: 42px; border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  color: #fff; font-size: 19px; background: var(--sm-grad, #4F46E5); box-shadow: var(--sm-glow, 0 10px 24px -8px rgba(99, 72, 235, .65));
  transition: transform .2s ease, filter .2s ease;
}
.sm-send:hover { transform: translateY(-2px) rotate(-8deg); filter: brightness(1.08); }
.sm-send i { line-height: 1; margin-left: 2px; }

.sm-comment-login {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px; margin-bottom: 1.5rem; border-radius: 16px; font-size: .88rem;
  color: var(--sm-text, #334155); background: rgba(79, 70, 229, .05); border: 1px dashed rgba(79, 70, 229, .3);
}
.sm-comment-login i { font-size: 1.2rem; color: var(--sm-primary, #4F46E5); }
.sm-comment-login a { font-weight: 700; }

.sm-comment-list { position: relative; }
.sm-comment { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 1.1rem; animation: sm-comment-in .4s ease both; }
@keyframes sm-comment-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sm-comment-main { flex: 1; min-width: 0; }
.sm-comment-bubble {
  display: inline-block; max-width: 100%; padding: 12px 16px; background: var(--sm-surface, #fff); border: 1px solid var(--sm-line, #E6EAF4);
  border-radius: 6px 18px 18px 18px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: border-color .2s ease, box-shadow .2s ease;
}
.sm-comment:hover .sm-comment-bubble { border-color: rgba(79, 70, 229, .3); box-shadow: 0 8px 20px -10px rgba(49, 46, 129, .25); }
.sm-comment-head { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.sm-comment-head h6 { margin: 0; font-family: var(--sm-font, inherit); font-size: .84rem; font-weight: 700; color: var(--sm-ink, #0F172A); letter-spacing: 0; }
.sm-tag { padding: 2px 8px; border-radius: 999px; font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--sm-grad, #4F46E5); }
.sm-comment-bubble p, .home-tab .sm-comment-bubble p { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--sm-text, #334155); overflow-wrap: anywhere; }
.sm-comment-actions { display: flex; align-items: center; gap: 14px; padding: 5px 6px 0; font-size: .74rem; }
.sm-comment-actions .sm-date { font-size: 1em; }
.sm-reply {
  display: inline-flex; align-items: center; gap: .3em; border: 0; background: transparent; padding: 2px 4px; border-radius: 6px; cursor: pointer;
  font-family: var(--sm-font, inherit); font-size: 1em; font-weight: 700; color: var(--sm-muted, #7C8AA5); transition: color .2s ease;
}
.sm-reply:hover { color: var(--sm-primary, #4F46E5); }
.sm-reply i { font-size: 1.1em; line-height: 1; }

.sm-comment-empty { text-align: center; padding: 2.2rem 1rem; border: 1px dashed var(--sm-line, #E6EAF4); border-radius: 20px; color: var(--sm-muted, #7C8AA5); }
.sm-comment-empty i { font-size: 2.4rem; color: var(--sm-primary, #4F46E5); opacity: .4; display: block; line-height: 1; margin-bottom: .5rem; }
.sm-comment-empty p { margin: 0; font-size: .88rem; }

@media (max-width: 575px) {
  .sm-article-head, .sm-richtext { padding-left: 1.15rem !important; padding-right: 1.15rem !important; }
  .sm-reaction span { display: none; }
  .sm-ava-sm { width: 34px; height: 34px; }
  .sm-composer { padding: 10px; border-radius: 18px; }
}