.sfa-root {
    --surface:        #ffffff;
    --surface-border: #e8eaf0;
    --card-radius:    14px;
    --text:           #0f1724;
    --text-muted:     #4a5568;
    --text-hint:      #9aa0b0;
    --muted-surface:  #f0f2f7;
    --instagram:      #e1306c;
    --facebook:       #1877f2;
    --linkedin:       #0077b5;

    box-sizing: border-box;
    color:       var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system,
                 BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size:   13px;
}

.sfa-root *, .sfa-root *::before, .sfa-root *::after {
    box-sizing: inherit;
    margin:  0;
    padding: 0;
}

body.sfa-root {
    background: transparent;
    margin:  0;
    padding: 0;
}

/* ── Layout ── */
.sfa-root .box {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    gap: 1rem;
}

.sfa-root .network-section { display: grid; }

/* ── Carrousel ── */
.sfa-root .cards-row {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 10px;
    border-radius: var(--card-radius);
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}

.sfa-root .cards-row::-webkit-scrollbar        { height: 4px; }
.sfa-root .cards-row::-webkit-scrollbar-track  { background: transparent; }
.sfa-root .cards-row::-webkit-scrollbar-thumb  { background: #d1d5e0; border-radius: 99px; }

/* ── Card ── */
.sfa-root .card {
    flex: 0 0 100%;
    max-width: 100%;
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: var(--card-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    transition: box-shadow .15s ease;
}

@media (min-width: 360px) {
    .sfa-root .card { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); }
}
@media (min-width: 600px) {
    .sfa-root .card { flex: 0 0 260px; max-width: 260px; }
}
@media (min-width: 768px) {
    .sfa-root .card { flex: 0 0 clamp(220px, 30%, 300px); max-width: 300px; }
}

.sfa-root .card:hover { box-shadow: 0 4px 20px rgba(15, 23, 36, .08); }

.sfa-root .card.instagram { border-top: 3px solid var(--instagram); }
.sfa-root .card.facebook  { border-top: 3px solid var(--facebook); }
.sfa-root .card.linkedin  { border-top: 3px solid var(--linkedin); }

/* ── Zone image ── */
.sfa-root .card-image {
    width: 100%;
    height: 150px;
    overflow: hidden;
    background: var(--muted-surface);
}

.sfa-root .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sfa-root .no-image {
    width: 100%;
    height: 100%;
    background: var(--muted-surface);
}

/* ── Corps ── */
.sfa-root .card-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.sfa-root .card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sfa-root .network-badge {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 99px;
}

.sfa-root .card.instagram .network-badge { background: #fff0f5; color: #c2185b; }
.sfa-root .card.facebook  .network-badge { background: #e8f0fe; color: #1a5fc8; }
.sfa-root .card.linkedin  .network-badge { background: #e4f2f9; color: #0a66c2; }

.sfa-root .card-date   { font-size: 11px; color: var(--text-hint); }

.sfa-root .card-author {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.sfa-root .card-text {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

/* ── Footer ── */
.sfa-root .card-footer {
    display: flex;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid var(--muted-surface);
    margin-top: auto;
}

.sfa-root .card-link {
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
    transition: opacity .12s;
}
.sfa-root .card-link:hover { opacity: .75; }

.sfa-root .card.instagram .card-link { color: #c2185b; }
.sfa-root .card.facebook  .card-link { color: #1a5fc8; }
.sfa-root .card.linkedin  .card-link { color: #0a66c2; }

/* ── Erreurs ── */
.sfa-root .errors {
    background: #fff5f5;
    border: 1px solid #fcc;
    border-radius: var(--card-radius);
    padding: 20px;
    margin-bottom: 24px;
}
.sfa-root .errors h1         { color: #c33; font-size: 1.1rem; margin-bottom: 10px; }
.sfa-root .errors ul         { list-style: none; padding: 0; }
.sfa-root .errors li         { color: #822; padding: 6px 0; border-bottom: 1px solid #fdd; font-size: 13px; }
.sfa-root .errors li:last-child { border-bottom: none; }

/* ── Message vide ── */
.sfa-root .empty-message {
    text-align: center;
    padding: 40px;
    color: var(--text-hint);
    font-size: 14px;
}