/* ========================================================================
   BPM 217 — Raffinement de l'accueil existant
   ------------------------------------------------------------------------
   Couche limitée à .page-index. Elle améliore l'organisation du hub social
   sans remplacer le design BPM et sans intervenir dans les contrôles radio.
   ======================================================================== */

body.page-index.bpm-ui-polish-v216 {
  --bpm217-line: rgba(255,255,255,.085);
  --bpm217-blue: #0b9cff;
  --bpm217-soft-blue: rgba(11,156,255,.10);
  --bpm217-muted: #8f9db3;
}

/* Les colonnes latérales restent accessibles, même si elles dépassent l'écran. */
@media (min-width:1361px) {
  body.page-index.bpm-ui-polish-v216 .bpm183-sticky-col {
    max-height: calc(100dvh - 102px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(115,173,231,.30) transparent;
    padding-right: 4px;
  }
  body.page-index.bpm-ui-polish-v216 .bpm183-sticky-col::-webkit-scrollbar { width: 5px; }
  body.page-index.bpm-ui-polish-v216 .bpm183-sticky-col::-webkit-scrollbar-thumb {
    background: rgba(115,173,231,.28);
    border-radius: 999px;
  }
}

/* En-tête du fil : meilleure séparation sans changer l'identité. */
body.page-index.bpm-ui-polish-v216 .bpm185-feed-head {
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid rgba(255,255,255,.035);
}
body.page-index.bpm-ui-polish-v216 .bpm185-feed-head > div { min-width: 0; }
body.page-index.bpm-ui-polish-v216 .bpm185-feed-head h2 { margin-bottom: 2px !important; }
body.page-index.bpm-ui-polish-v216 .bpm185-feed-head .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Formulaire de publication : même structure, mieux organisée. */
body.page-index.bpm-ui-polish-v216 .bpm185-composer {
  position: relative;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
body.page-index.bpm-ui-polish-v216 .bpm185-composer:focus-within,
body.page-index.bpm-ui-polish-v216 .bpm185-composer.is-expanded {
  border-color: rgba(11,156,255,.36);
  background: linear-gradient(180deg,rgba(11,156,255,.075),rgba(255,255,255,.028));
  box-shadow: 0 14px 34px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.045);
}
body.page-index.bpm-ui-polish-v216 .bpm185-composer textarea {
  overflow-y: hidden;
  transition: min-height .16s ease, border-color .16s ease, box-shadow .16s ease;
}
body.page-index.bpm-ui-polish-v216 .bpm217-composer-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 0 62px;
  color: var(--bpm217-muted);
  font-size: 11px;
  line-height: 1.35;
}
body.page-index.bpm-ui-polish-v216 .bpm217-composer-status span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body.page-index.bpm-ui-polish-v216 .bpm217-composer-status i { color: #45c995; }
body.page-index.bpm-ui-polish-v216 .bpm217-composer-status small {
  min-width: 72px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
body.page-index.bpm-ui-polish-v216 .bpm185-composer-actions {
  display: grid;
  grid-template-columns: auto auto auto minmax(170px,1fr) auto auto auto;
  align-items: center;
}
body.page-index.bpm-ui-polish-v216 .bpm185-title-input { min-width: 0; width: 100%; }
body.page-index.bpm-ui-polish-v216 .bpm185-rights-confirm { white-space: nowrap; }
body.page-index.bpm-ui-polish-v216 .bpm185-publish { white-space: nowrap; }

/* Onglets : lisibles sur toutes les largeurs, avec icônes discrètes. */
body.page-index.bpm-ui-polish-v216 .bpm183-feed-tabs {
  display: flex !important;
  grid-template-columns: none !important;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
body.page-index.bpm-ui-polish-v216 .bpm183-feed-tabs::-webkit-scrollbar { display: none; }
body.page-index.bpm-ui-polish-v216 .bpm183-feed-tabs button {
  flex: 1 0 max-content;
  min-width: 112px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding-inline: 13px;
  scroll-snap-align: start;
}
body.page-index.bpm-ui-polish-v216 .bpm183-feed-tabs button i {
  font-size: 16px;
  color: #91a5c4;
}
body.page-index.bpm-ui-polish-v216 .bpm183-feed-tabs button.active i { color: #fff; }

/* Publications : séparation et actions plus nettes. */
body.page-index.bpm-ui-polish-v216 .bpm183-feed-list { min-height: 120px; }
body.page-index.bpm-ui-polish-v216 .bpm183-post {
  content-visibility: auto;
  contain-intrinsic-size: 520px;
}
body.page-index.bpm-ui-polish-v216 .bpm183-post + .bpm183-post {
  border-top-color: rgba(255,255,255,.075) !important;
}
body.page-index.bpm-ui-polish-v216 .bpm183-post-author {
  min-width: 0;
  border-radius: 12px;
}
body.page-index.bpm-ui-polish-v216 .bpm183-post-author > span:last-child { min-width: 0; }
body.page-index.bpm-ui-polish-v216 .bpm183-post-author strong,
body.page-index.bpm-ui-polish-v216 .bpm183-post-author small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.page-index.bpm-ui-polish-v216 .bpm183-more {
  flex: 0 0 auto;
  min-width: 40px;
  min-height: 40px;
  border-radius: 12px;
}
body.page-index.bpm-ui-polish-v216 .bpm183-post-actions {
  align-items: center;
  gap: 5px;
}
body.page-index.bpm-ui-polish-v216 .bpm183-post-actions > span {
  flex: 0 0 auto;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #93a3bb;
  font-size: 12px;
}
body.page-index.bpm-ui-polish-v216 .bpm183-post-actions > button {
  border-radius: 11px;
  white-space: nowrap;
}
body.page-index.bpm-ui-polish-v216 .bpm185-comment-form input { min-width: 0; }
body.page-index.bpm-ui-polish-v216 .bpm185-comment-form button {
  min-width: 42px;
  min-height: 42px;
}

/* Colonnes de découverte : titres et éléments plus cohérents. */
body.page-index.bpm-ui-polish-v216 .bpm183-card-title {
  min-height: 52px;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.045);
}
body.page-index.bpm-ui-polish-v216 .bpm183-card-title a,
body.page-index.bpm-ui-polish-v216 .bpm184-see-more {
  text-underline-offset: 4px;
}
body.page-index.bpm-ui-polish-v216 .bpm183-card-title a:hover,
body.page-index.bpm-ui-polish-v216 .bpm184-see-more:hover { text-decoration: underline; }
body.page-index.bpm-ui-polish-v216 :where(.bpm184-suggest-row,.bpm183-rank-row,.bpm183-track-mini,.bpm183-event-mini,.bpm183-video-mini) {
  transition: background .16s ease, transform .16s ease;
}
@media (hover:hover) and (pointer:fine) {
  body.page-index.bpm-ui-polish-v216 :where(.bpm184-suggest-row,.bpm183-rank-row,.bpm183-track-mini,.bpm183-event-mini,.bpm183-video-mini):hover {
    background: rgba(11,156,255,.065);
  }
}
body.page-index.bpm-ui-polish-v216 .bpm183-video-mini > span {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
body.page-index.bpm-ui-polish-v216 .bpm183-video-mini video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.page-index.bpm-ui-polish-v216 .bpm183-muted,
body.page-index.bpm-ui-polish-v216 .bpm183-empty {
  line-height: 1.5;
}

/* Tablettes : les colonnes secondaires restent aérées. */
@media (max-width:1360px) and (min-width:1041px) {
  body.page-index.bpm-ui-polish-v216 .bpm183-right {
    gap: 14px !important;
  }
  body.page-index.bpm-ui-polish-v216 .bpm183-right > .bpm183-card { min-height: 100%; }
}

@media (max-width:1040px) {
  body.page-index.bpm-ui-polish-v216 .bpm184-middle,
  body.page-index.bpm-ui-polish-v216 .bpm183-right { gap: 12px !important; }
  body.page-index.bpm-ui-polish-v216 .bpm184-stories-row {
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }
  body.page-index.bpm-ui-polish-v216 .bpm184-stories-row::-webkit-scrollbar { display: none; }
  body.page-index.bpm-ui-polish-v216 .bpm184-story { flex: 0 0 72px; }
  body.page-index.bpm-ui-polish-v216 .bpm185-composer-actions {
    grid-template-columns: repeat(3,auto) minmax(150px,1fr) auto;
  }
  body.page-index.bpm-ui-polish-v216 .bpm185-rights-confirm { grid-column: 1 / span 3; }
  body.page-index.bpm-ui-polish-v216 .bpm185-publish { grid-column: 5; grid-row: 1 / span 2; align-self: stretch; }
}

@media (max-width:700px) {
  body.page-index.bpm-ui-polish-v216 .bpm185-feed-head {
    align-items: flex-start;
  }
  body.page-index.bpm-ui-polish-v216 .bpm185-feed-head .btn {
    width: 42px;
    min-width: 42px;
    padding: 0 !important;
    font-size: 0;
  }
  body.page-index.bpm-ui-polish-v216 .bpm185-feed-head .btn i { font-size: 19px; }
  body.page-index.bpm-ui-polish-v216 .bpm185-composer-actions {
    grid-template-columns: repeat(3,minmax(0,1fr));
    padding-left: 0;
  }
  body.page-index.bpm-ui-polish-v216 .bpm185-media-btn {
    justify-content: center;
    padding-inline: 8px;
  }
  body.page-index.bpm-ui-polish-v216 .bpm185-title-input,
  body.page-index.bpm-ui-polish-v216 .bpm185-vis,
  body.page-index.bpm-ui-polish-v216 .bpm185-rights-confirm,
  body.page-index.bpm-ui-polish-v216 .bpm185-publish {
    grid-column: 1 / -1;
    width: 100%;
  }
  body.page-index.bpm-ui-polish-v216 .bpm185-publish { grid-row: auto; min-height: 46px; }
  body.page-index.bpm-ui-polish-v216 .bpm217-composer-status {
    margin-left: 0;
  }
  body.page-index.bpm-ui-polish-v216 .bpm183-feed-tabs { padding-inline: 12px !important; }
  body.page-index.bpm-ui-polish-v216 .bpm183-feed-tabs button {
    flex: 0 0 auto;
    min-width: auto;
    height: 42px !important;
  }
}

@media (max-width:620px) {
  body.page-index.bpm-ui-polish-v216 .bpm184-shell {
    width: calc(100% - 12px) !important;
    margin-inline: 6px !important;
  }
  body.page-index.bpm-ui-polish-v216 .bpm183-card,
  body.page-index.bpm-ui-polish-v216 .bpm184-radio-hero {
    border-radius: 18px !important;
    border-left: 1px solid var(--bpm184-line) !important;
    border-right: 1px solid var(--bpm184-line) !important;
  }
  body.page-index.bpm-ui-polish-v216 .bpm185-composer { margin-inline: 10px; }
  body.page-index.bpm-ui-polish-v216 .bpm183-post { padding-inline: 15px !important; }
  body.page-index.bpm-ui-polish-v216 .bpm183-post-actions {
    justify-content: flex-start !important;
  }
}

@media (max-width:430px) {
  body.page-index.bpm-ui-polish-v216 .bpm217-composer-status span { display: none; }
  body.page-index.bpm-ui-polish-v216 .bpm217-composer-status { justify-content: flex-end; }
  body.page-index.bpm-ui-polish-v216 .bpm185-media-btn span { font-size: 11px; }
  body.page-index.bpm-ui-polish-v216 .bpm183-feed-tabs button span { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  body.page-index.bpm-ui-polish-v216 .bpm185-composer,
  body.page-index.bpm-ui-polish-v216 :where(.bpm184-suggest-row,.bpm183-rank-row,.bpm183-track-mini,.bpm183-event-mini,.bpm183-video-mini) {
    transition: none;
  }
}