/* Stegui Social Feed — styles de base (hérite des couleurs / polices du thème et du kit Elementor) */
.stg-feed {
    --stg-cols: 3;
    --stg-gap: 20px;
    --stg-radius: 10px;
    --stg-ratio: 1/1;
    --stg-muted: color-mix(in srgb, currentColor 60%, transparent);
    --stg-line: color-mix(in srgb, currentColor 12%, transparent);
    width: 100%;
}
.stg-feed *, .stg-feed *::before, .stg-feed *::after { box-sizing: border-box; }

/* En-tête du compte */
.stg-header { display: flex; align-items: center; gap: 12px; margin-bottom: var(--stg-gap); }
.stg-avatar { border-radius: 50%; object-fit: cover; flex: none; }
.stg-account { font-weight: 600; }

/* Grille */
.stg-layout-grid .stg-items {
    display: grid;
    grid-template-columns: repeat(var(--stg-cols), minmax(0, 1fr));
    gap: var(--stg-gap);
}

/* Liste */
.stg-layout-list .stg-items { display: flex; flex-direction: column; gap: var(--stg-gap); }
.stg-layout-list .stg-post { display: grid; grid-template-columns: minmax(120px, 30%) 1fr; align-items: start; }

/* Carte */
.stg-item {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--stg-radius);
    background: var(--e-global-color-background, transparent);
    border: 1px solid var(--stg-line);
    min-width: 0;
}

.stg-media { position: relative; display: block; aspect-ratio: var(--stg-ratio); overflow: hidden; background: var(--stg-line); }
.stg-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.stg-media:hover img { transform: scale(1.04); }
.elementor-widget-stg_social_feed:not(.stg-zoom-yes) .stg-media:hover img { transform: none; }

.stg-badge {
    position: absolute; top: 10px; right: 10px;
    display: grid; place-items: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(0, 0, 0, .55); color: #fff;
}
.stg-icon { display: block; }

.stg-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.stg-meta { display: flex; align-items: center; gap: 8px; font-size: .8em; color: var(--stg-muted); }
.stg-net-label { font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: .9em; }
.stg-meta .stg-net + time::before { content: "·"; margin-right: 8px; }
.stg-text { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }

/* Avis */
.stg-review { padding: 18px; gap: 12px; }
.stg-stars { font-size: 1.15em; letter-spacing: 2px; color: var(--stg-line); line-height: 1; }
.stg-stars .on { color: #f5b301; }
.stg-author { display: flex; align-items: center; gap: 10px; margin-top: auto; font-size: .9em; }
.stg-author > div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.stg-author time { font-size: .85em; color: var(--stg-muted); }
.stg-author .stg-net { font-size: .75em; color: var(--stg-muted); }

/* Carrousel (défilement natif + flèches) */
.stg-carousel { position: relative; }
.stg-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--stg-cols) - 1) * var(--stg-gap)) / var(--stg-cols));
    gap: var(--stg-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.stg-track::-webkit-scrollbar { display: none; }
.stg-track > .stg-item { scroll-snap-align: start; }
.stg-nav {
    position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0;
    display: grid; place-items: center;
    font-size: 26px; line-height: 1; cursor: pointer;
    background: rgba(255, 255, 255, .9); color: #111;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
    transition: opacity .2s;
}
.stg-prev { left: 8px; }
.stg-next { right: 8px; }
.stg-nav[disabled] { opacity: 0; pointer-events: none; }

/* Messages */
.stg-feed-notice { padding: 10px 14px; margin-bottom: 12px; border-left: 4px solid #d63638; background: #fcf0f1; color: #50575e; font-size: 14px; }

/* Responsive du shortcode (le widget Elementor gère ses colonnes lui-même) */
.stg-feed[data-cols-t] { --stg-cols: var(--stg-cols-d); }
@media (max-width: 1024px) {
    .stg-feed[data-cols-t] { --stg-cols: var(--stg-cols-t); }
}
@media (max-width: 767px) {
    .stg-feed[data-cols-m] { --stg-cols: var(--stg-cols-m); }
    .stg-layout-list .stg-post { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .stg-media img { transition: none; }
    .stg-track { scroll-behavior: auto; }
}