/* Profil public — Figma V2, proposition 04 (Relations / Aimer / Groupes / Événements). */
.fl-pro-social {
  --social-surface: #fff;
  --social-ink: #17212b;
  --social-muted: #657687;
  --social-border: #dce7eb;
  --social-accent: var(--fl-profile-entity-action-hover, #1582c0);
  --social-button-border: var(--fl-profile-entity-action, #198fd8);
  --social-subtle: color-mix(in srgb, var(--fl-profile-entity-action) 5%, #fff);
  --social-soft: var(--fl-profile-entity-soft);
  background: var(--social-surface);
  border-radius: var(--fl-radius-16, 16px);
  color: var(--social-ink);
  font-family: var(--fl-font-family-body, Poppins, sans-serif);
  min-width: 0;
  overflow: hidden;
}

.night-mode .fl-pro-social {
  --social-surface: #262d34;
  --social-ink: #e7eff5;
  --social-muted: #adbfce;
  --social-border: #3b4c59;
  --social-accent: var(--fl-color-entity-particulierpro-fonce, #7acbff);
  --social-button-border: var(--social-accent);
  --social-subtle: #2b3843;
  --social-soft: color-mix(in srgb, var(--fl-profile-entity-action) 22%, #262d34);
}

.fl-pro-social__header {
  align-items: center;
  display: flex;
  gap: 8px;
  padding: 16px;
}

.fl-pro-social__header h2 {
  color: inherit;
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  margin: 0;
  min-width: 0;
}

.fl-pro-social a { color: inherit; text-decoration: none; }
.fl-pro-social a:hover { color: var(--social-accent); }
.fl-pro-social a:focus-visible {
  border-radius: 8px;
  outline: 2px solid var(--social-accent);
  outline-offset: 3px;
}

.fl-pro-social__count {
  background: var(--social-soft);
  border-radius: 999px;
  color: var(--social-accent);
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  padding: 2px 8px;
}

/* Les glyphes sont ceux déjà utilisés sur la page, recolorés avec l'entité. */
.fl-pro-social__icon {
  background: currentColor;
  color: var(--social-accent);
  display: inline-block;
  flex: 0 0 20px;
  height: 20px;
  width: 20px;
  -webkit-mask: var(--social-icon) center / contain no-repeat;
  mask: var(--social-icon) center / contain no-repeat;
}
.fl-pro-social__icon--friends { --social-icon: url('../images/svg/friends.svg'); }
.fl-pro-social__icon--pages { --social-icon: url('../images/svg/pages.svg'); }
.fl-pro-social__icon--groups { --social-icon: url('../images/svg/groups.svg'); }
.fl-pro-social__icon--events { --social-icon: url('../images/svg/events.svg'); }

.fl-pro-social__body {
  border-top: 1px solid var(--social-border);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
}
.fl-pro-social__meta {
  color: var(--social-muted);
  display: block;
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  margin: 0;
  overflow-wrap: anywhere;
}
.fl-pro-social__portraits,
.fl-pro-social__groups { list-style: none; margin: 0; padding: 0; }
.fl-pro-social__portraits { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fl-pro-social__portraits li { min-width: 0; }
.fl-pro-social__portrait { align-items: center; display: flex; flex-direction: column; gap: 6px; }
.fl-pro-social__portrait img,
.fl-pro-social__person img { border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.fl-pro-social__portrait img { height: 64px; max-width: 100%; width: 64px; }
.fl-pro-social__portrait span { font-size: 11px; line-height: 16px; min-height: 32px; overflow-wrap: anywhere; text-align: center; width: 100%; }
.fl-pro-social__divider { background: var(--social-border); height: 1px; }
.fl-pro-social__person { align-items: center; display: flex; gap: 10px; }
.fl-pro-social__person img { height: 36px; width: 36px; }
.fl-pro-social__person > span,
.fl-pro-social__group > span:not(.fl-pro-social__tile) { flex: 1; font-size: 12px; font-weight: 600; line-height: 18px; min-width: 0; overflow-wrap: anywhere; }
.fl-pro-social__arrow { color: var(--social-accent); flex-shrink: 0; font-size: 12px; }

.fl-pro-social__tile {
  align-items: center;
  background: var(--social-soft);
  border-radius: 12px;
  display: flex;
  flex: 0 0 36px;
  height: 36px;
  justify-content: center;
  width: 36px;
}
.fl-pro-social__tile .fl-pro-social__icon { flex-basis: 18px; height: 18px; width: 18px; }
.fl-pro-social__tile--page { flex-basis: 48px; height: 48px; width: 48px; }
.fl-pro-social__tile--page .fl-pro-social__icon { flex-basis: 24px; height: 24px; width: 24px; }
.fl-pro-social__page { align-items: center; background: var(--social-subtle); border-radius: 12px; display: flex; flex-direction: column; gap: 10px; padding: 16px; text-align: center; }
.fl-pro-social__page > strong,
.fl-pro-social__event-copy > strong { display: block; font-size: 16px; font-weight: 600; line-height: 24px; overflow-wrap: anywhere; }
.fl-pro-social__groups { display: grid; gap: 16px; }
.fl-pro-social__group { align-items: center; background: var(--social-subtle); border-radius: 12px; display: flex; gap: 10px; padding: 10px; }
.fl-pro-social__event { align-items: center; display: flex; gap: 14px; }
.fl-pro-social__event-copy { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; }
.fl-pro-social__date { align-items: stretch; background: var(--social-subtle); border-radius: 12px; display: flex; flex: 0 0 66px; flex-direction: column; overflow: hidden; text-align: center; transform-origin: center; }
.fl-pro-social__date > span { background: var(--fl-profile-entity-action); color: #fff; font-size: 10px; font-weight: 600; line-height: 16px; padding: 4px; text-transform: uppercase; }
.fl-pro-social__date > strong { color: var(--social-accent); font-size: 32px; font-weight: 700; line-height: 42px; }

.fl-pro-social .fl-pro-social__action {
  background: var(--social-surface);
  border-color: var(--social-button-border);
  border-radius: 999px;
  color: var(--social-accent);
  line-height: 20px;
  width: 100%;
}
.fl-pro-social .fl-pro-social__action:hover,
.fl-pro-social .fl-pro-social__action:focus-visible { background: var(--social-subtle); border-radius: 999px; color: var(--social-accent); }
.fl-pro-social__action-icon { align-items: center; border-radius: 14px; display: flex; font-size: 16px; justify-content: center; }

/* Valeurs des keyframes Figma, factorisées : une entrée unique et un repos stable.
   La boucle par défaut de l'export est désactivée conformément à la planche. */
[data-social-motion] { --social-delay: .08s; --social-duration: .28s; --social-y: 4px; }
[data-social-motion='intro'] { --social-delay: .16s; --social-duration: .30s; }
[data-social-motion='portrait'] { --social-delay: calc(.22s + var(--social-index) * .10s); --social-duration: .36s; --social-y: 6px; }
[data-social-motion='person'] { --social-delay: .52s; --social-duration: .34s; }
[data-social-motion='page'] { --social-delay: .18s; --social-duration: .34s; }
[data-social-motion='page-icon'] { --social-delay: .22s; --social-duration: .34s; }
[data-social-motion='page-title'] { --social-delay: .30s; --social-duration: .34s; }
[data-social-motion='page-caption'] { --social-delay: .38s; --social-duration: .34s; }
[data-social-motion='group'] { --social-delay: calc(.20s + var(--social-index) * .12s); --social-duration: .36s; --social-y: 6px; }
[data-social-motion='calendar'] { --social-delay: .18s; --social-duration: .40s; --social-y: 6px; }
[data-social-motion='event-title'] { --social-delay: .26s; --social-duration: .34s; }
[data-social-motion='event-meta'] { --social-delay: .36s; --social-duration: .34s; }
[data-social-motion='organizer'] { --social-delay: .46s; --social-duration: .34s; }
[data-social-motion='action'] { --social-delay: .62s; --social-duration: .34s; }

@media (prefers-reduced-motion: no-preference) {
  .fl-pro-social.is-revealing [data-social-motion] {
    animation: fl-pro-social-reveal var(--social-duration) ease-out var(--social-delay) both;
  }
  .fl-pro-social.is-revealing [data-social-motion='calendar'] {
    animation-name: fl-pro-social-calendar;
  }
}
@keyframes fl-pro-social-reveal {
  from { opacity: 0; translate: 0 var(--social-y); }
  to { opacity: 1; translate: 0 0; }
}
@keyframes fl-pro-social-calendar {
  from { opacity: 0; translate: 0 6px; scale: .96; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .fl-pro-social [data-social-motion] { animation: none; }
  .fl-pro-social .fl-pro-social__action { transition: none; }
}