/* ==========================================================================
   Vitrine sociale Mur'Mures — section "Suivez Mur'Mures".
   Langage exact du site : bordures fines, radius, degrisaillement + hover
   rouge + elevation (impact-cards), carrousel tactile mobile (scroll-snap,
   mecanique de la page Medias), .scroll-hover pour le tactile.
   Zero requete tierce avant le clic du visiteur.
   ========================================================================== */

.mm-showcase-intro { max-width: 560px; margin: 0 auto; color: var(--text-2); font-size: 14.5px; font-weight: 300; line-height: 1.7; }

.mm-showcase-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 30px; }

.mm-showcase-card { display: flex; flex-direction: column; overflow: hidden; background: var(--surface, var(--bg-2)); border: 1px solid var(--border); border-radius: 24px; transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; }
.mm-showcase-card:hover, .mm-showcase-card.scroll-hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 18px 40px var(--shadow, rgba(0, 0, 0, 0.18)); }

.mm-showcase-play, .mm-showcase-link { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.mm-showcase-media { display: block; aspect-ratio: 9 / 16; overflow: hidden; background: #000; }
.mm-showcase-media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(60%); transition: filter 0.5s ease, transform 0.5s ease; }
.mm-showcase-card:hover .mm-showcase-media img, .mm-showcase-card.scroll-hover .mm-showcase-media img { filter: grayscale(0%); transform: scale(1.04); }
.mm-showcase-noimg { display: grid; place-items: center; width: 100%; height: 100%; color: var(--text-2); font-size: 34px; }
.mm-showcase-noimg svg { width: 42px; height: 42px; opacity: 0.4; }

.mm-showcase-play-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 17px; backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, 0.3); transition: background 0.25s ease, transform 0.25s ease; }
.mm-showcase-card:hover .mm-showcase-play-badge { background: var(--accent); transform: translate(-50%, -50%) scale(1.08); }
.mm-showcase-play:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 24px 24px 0 0; }

.mm-showcase-card-body { display: grid; gap: 8px; padding: 14px 16px 16px; }
.mm-showcase-net { display: inline-flex; align-items: center; gap: 7px; color: var(--accent-text, var(--accent)); font-size: 10px; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; }
.mm-showcase-net svg { width: 14px; height: 14px; }
.mm-showcase-card-body p { margin: 0; color: var(--text-1); font-size: 13px; font-weight: 600; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mm-showcase-out { color: var(--text-2); font-size: 11px; font-weight: 700; text-decoration: none; }
.mm-showcase-out:hover { color: var(--accent-text, var(--accent)); }

/* Lecteur TikTok charge AU CLIC : le lecteur officiel player/v1 remplit
   exactement la zone media — meme ratio 9/16, aucune barre de defilement,
   aucune variation de hauteur de carte. */
.mm-showcase-card iframe { width: 100%; height: 100%; border: 0; display: block; overflow: hidden; }
.mm-showcase-card.is-playing .mm-showcase-media { overflow: hidden; }

/* Fallback video indisponible : la carte reste propre. */
.mm-showcase-unavailable { display: grid; place-items: center; align-content: center; gap: 8px; width: 100%; height: 100%; padding: 18px; text-align: center; text-decoration: none; background: var(--surface-2, var(--bg-3)); }
.mm-showcase-unavailable strong { color: var(--text-1); font-size: 13px; }
.mm-showcase-unavailable span { color: var(--accent-text, var(--accent)); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }

/* ── Boutons de suivi ── */
.mm-showcase-follow { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.mm-showcase-follow-btn { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 20px; border: 1px solid var(--border); border-radius: 12px; color: var(--text-1); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, color 0.25s ease; }
.mm-showcase-follow-btn svg { width: 17px; height: 17px; }
.mm-showcase-follow-btn:hover, .mm-showcase-follow-btn.scroll-hover { border-color: var(--accent); color: var(--accent-text, var(--accent)); transform: translateY(-2px); box-shadow: 0 10px 26px var(--shadow, rgba(0, 0, 0, 0.15)); }

/* ── Mobile / tablette : carrousel tactile scroll-snap ── */
@media (max-width: 1023px) {
    .mm-showcase-grid { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 14px; padding-bottom: 10px; }
    .mm-showcase-grid > * { flex: 0 0 62%; scroll-snap-align: start; min-width: 0; }
    .mm-showcase-grid::-webkit-scrollbar { height: 5px; }
    .mm-showcase-grid::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 99px; }
}
@media (max-width: 560px) {
    .mm-showcase-grid > * { flex-basis: 78%; }
}

@media (prefers-reduced-motion: reduce) {
    .mm-showcase-card, .mm-showcase-card:hover, .mm-showcase-follow-btn, .mm-showcase-follow-btn:hover { transform: none !important; transition: none; }
    .mm-showcase-media img { transition: none; }
}

/* Fallback embed/v2 (bascule auto si le lecteur officiel echoue) : la page
   TikTok complete est plus grande que la carte — on masque tout debordement
   et on centre le lecteur, jamais d'ascenseur. */
.mm-showcase-card.is-playing .mm-showcase-media { position: relative; }
.mm-showcase-card.is-playing .mm-showcase-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ══ Option B validee : deux rangees distinctes ══════════════════════════ */
/* Titres de rangee "Nos videos" / "Nos publications" — langage du site. */
.mm-showcase-row-title { margin: 44px 0 0; color: var(--text-1); font-size: 15px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; }
.mm-showcase-row-title + .mm-showcase-grid { margin-top: 18px; }

/* Publications Facebook / LinkedIn : format naturel (pas 9:16). */
.mm-showcase-posts .mm-showcase-media { aspect-ratio: 4 / 3; }
.mm-showcase-open { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.mm-showcase-open:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 24px 24px 0 0; }
.mm-showcase-open-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px 16px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, 0.3); transition: background 0.25s ease; }
.mm-showcase-card:hover .mm-showcase-open-badge, .mm-showcase-card.scroll-hover .mm-showcase-open-badge { background: var(--accent); }

/* Publication ouverte : le cadre prend une hauteur lisible et le post
   defile A L'INTERIEUR de la carte s'il est long (comportement valide). */
.mm-showcase-card.is-embed-open .mm-showcase-media { aspect-ratio: auto; height: 560px; background: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.mm-showcase-card.is-embed-open .mm-showcase-media iframe { width: 100%; height: 100%; min-height: 100%; border: 0; overflow: auto; }

/* Icone LinkedIn dans le badge reseau et le bouton de suivi. */
.mm-showcase-net.is-linkedin svg { width: 13px; height: 13px; }

/* Carte SANS photo d'apercu : facade propre aux couleurs du reseau
   (fini le rectangle noir brut) — l'icone respire sur un degrade doux. */
.mm-showcase-posts .mm-showcase-noimg { background: linear-gradient(150deg, #1f2126, #101114); }
.mm-showcase-card.is-net-facebook .mm-showcase-noimg svg { color: #7ba7f0; opacity: .8; width: 52px; height: 52px; }
.mm-showcase-card.is-net-linkedin .mm-showcase-noimg svg { color: #6fb2e8; opacity: .8; width: 48px; height: 48px; }

@media (max-width: 760px) {
    .mm-showcase-card.is-embed-open .mm-showcase-media { height: 480px; }
}

/* ── Carrousel tactile pour LES DEUX rangees (videos ET publications) :
      des qu'il y a plusieurs cartes, on glisse horizontalement au lieu
      d'empiler — fini le defilement vertical interminable (valide client).
      Une carte seule occupe naturellement sa place, sans carrousel. ── */
@media (max-width: 1023px) {
    .mm-showcase-posts { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 14px; padding-bottom: 10px; }
    .mm-showcase-posts > * { flex: 0 0 72%; scroll-snap-align: start; min-width: 0; }
    .mm-showcase-posts::-webkit-scrollbar { height: 5px; }
    .mm-showcase-posts::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 99px; }
    /* Publication deja ouverte dans une carte du carrousel : hauteur bornee,
       le defilement interne du post reste possible. */
    .mm-showcase-posts .mm-showcase-card.is-embed-open .mm-showcase-media { height: 500px; }
}
@media (max-width: 560px) {
    .mm-showcase-posts > * { flex-basis: 86%; }
    .mm-showcase-posts .mm-showcase-card.is-embed-open .mm-showcase-media { height: 460px; }
}