/* =============================================================================
   ROLOX MOTORSPORT - Social (v0.16 - MVP fil des athlètes)
   ============================================================================= */

.social-card {
  background: var(--bg-surface, #fff);
  border: 1px solid var(--border, #eee);
  border-radius: var(--radius-lg, 20px);
  padding: 16px;
  margin-bottom: 14px;
  cursor: pointer;
  transition: var(--transition-fast, 0.15s);
}
.social-card:hover {
  border-color: var(--flame, #ff5722);
  box-shadow: 0 6px 18px rgba(255, 87, 34, 0.08);
}

.social-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
/* v0.18 : zone avatar+pseudo cliquable -> profil */
.social-card__profile-link {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
  border-radius: 10px;
  padding: 4px;
  margin: -4px;
  transition: background .12s ease;
}
.social-card__profile-link:hover { background: rgba(255, 87, 34, 0.06); }
.social-card__profile-link:active { background: rgba(255, 87, 34, 0.1); }
.social-card__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2b2d42, #555a7a);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 800; font-size: 16px;
  flex-shrink: 0;
}
.social-card__avatar--me {
  background: linear-gradient(135deg, #ff5722, #e63946);
}
.social-card__who { flex: 1; min-width: 0; }
/* v0.37 FIX : la ligne portait `overflow:hidden` + `text-overflow:ellipsis`
   sur le CONTENEUR. Des que le pseudo + l'humeur depassaient, l'ellipsis
   rognait tout ce qui suivait - donc l'humeur disparaissait entierement, en
   ne laissant que "@remy ...". Le resultat dependait de la largeur d'ecran,
   d'ou "ca s'affiche sur un telephone et pas sur l'autre".
   Desormais : rangee flex ou CHAQUE element se retrecit pour son compte. Le
   pseudo tronque son propre texte, l'humeur tronque le sien, et les deux
   restent visibles. */
.social-card__pseudo {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary, #222);
}
.social-card__me-tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--flame, #ff5722);
  background: rgba(255, 87, 34, 0.1);
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 4px;
  vertical-align: middle;
}
.social-card__when {
  font-size: 12px;
  color: var(--text-tertiary, #999);
}
.social-card__type-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--bg-elevated, #f6f6f8);
  color: var(--flame, #ff5722);
  display: grid; place-items: center;
  font-size: 14px;
  flex-shrink: 0;
}

/* v0.26 : menu "⋯" en haut de ses propres seances (Modifier / Supprimer). */
.social-card__menu-wrap {
  position: relative;
  flex-shrink: 0;
}
.social-card__menu-btn {
  width: 34px; height: 34px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-muted, #8a8a95);
  font-size: 16px;
  display: grid; place-items: center;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease, color .15s ease;
}
.social-card__menu-btn:hover,
.social-card__menu-btn--open {
  background: var(--bg-elevated, #f6f6f8);
  color: var(--flame, #ff5722);
}
.social-card__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 172px;
  padding: 6px;
  border-radius: 14px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #ececf1);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.social-card__menu[hidden] { display: none; }
.social-card__menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text, #1c1c1e);
  font-family: inherit;
  font-size: 14px; font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background .12s ease;
}
.social-card__menu-item i { width: 16px; text-align: center; }
.social-card__menu-item:hover { background: var(--bg-elevated, #f6f6f8); }
.social-card__menu-item--danger { color: #e63946; }
.social-card__menu-item--danger:hover { background: #fdecee; }

.social-card__title {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary, #222);
}

.social-card__stats {
  display: flex;
  gap: 18px;
  font-size: 13px;
  color: var(--text-secondary, #666);
  padding: 10px 12px;
  background: var(--bg-elevated, #f6f6f8);
  border-radius: var(--radius-md, 12px);
  margin-bottom: 10px;
}
.social-card__stats strong {
  color: var(--text-primary, #222);
  font-weight: 800;
}

.social-card__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.social-card__kudos {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border, #eee);
  background: transparent;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary, #666);
  cursor: pointer;
  transition: var(--transition-fast, 0.15s);
}
.social-card__kudos:hover { border-color: var(--flame, #ff5722); color: var(--flame, #ff5722); }
.social-card__kudos--on {
  background: rgba(255, 87, 34, 0.1);
  border-color: var(--flame, #ff5722);
  color: var(--flame, #ff5722);
}
/* v0.23 : bouton dislike, symetrique du kudos (teinte bleu/gris froid). */
.social-card__dislike {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border, #eee);
  background: transparent;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary, #666);
  cursor: pointer;
  transition: var(--transition-fast, 0.15s);
}
.social-card__dislike:hover { border-color: #5b8def; color: #5b8def; }
.social-card__dislike--on {
  background: rgba(91, 141, 239, 0.12);
  border-color: #5b8def;
  color: #5b8def;
}
/* v0.24 : groupe pouce + compteur cliquable (separe du toggle). */
.social-card__react { display: inline-flex; align-items: center; gap: 4px; }
.social-card__react-count {
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-secondary, #666);
  padding: 2px 5px;
  border-radius: 6px;
  min-width: 16px;
  text-align: center;
}
.social-card__react-count:hover { text-decoration: underline; color: var(--text-primary, #222); }
.social-card__open-hint {
  font-size: 12px;
  color: var(--text-tertiary, #999);
  margin-left: auto;
}
.social-card__open-hint i { font-size: 10px; }

.social-more-btn {
  display: block;
  width: 100%;
  margin: 4px 0 20px;
}

.empty-state__small {
  font-size: 12px;
  color: var(--text-tertiary, #999);
}

/* ===== v0.18 : Modale profil d'un athlete ===== */
.social-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 0 18px;
}
.social-profile__avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2b2d42, #555a7a);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 800; font-size: 30px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.social-profile__avatar--me {
  background: linear-gradient(135deg, #ff5722, #e63946);
}
.social-profile__name {
  font-weight: 800; font-size: 18px;
  color: var(--text-primary, #222);
}
.social-profile__level {
  font-size: 12px; font-weight: 600;
  color: #ff5722;
  background: #fff5f0;
  padding: 3px 12px; border-radius: 999px;
}
.social-profile__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.social-profile__stat {
  background: var(--bg-surface, #fff);
  border: 1px solid var(--border, #eee);
  border-radius: 14px;
  padding: 16px 12px;
  text-align: center;
}
.social-profile__stat-val {
  font-size: 24px; font-weight: 800;
  color: var(--text-primary, #222);
}
.social-profile__stat-lbl {
  font-size: 12px; font-weight: 600;
  color: var(--text-tertiary, #888);
  margin-top: 2px;
}

/* ===== v0.18.1 : photo + texte libre sur les seances ===== */
.social-card__caption {
  margin: 6px 0 10px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-secondary, #444);
  white-space: pre-wrap;
  word-break: break-word;
}
.social-card__photo {
  display: block;
  width: 100%;
  max-height: 440px;
  object-fit: contain;
  object-position: center;
  background: #f3f3f5;
  border-radius: 12px;
  margin: 0 0 10px;
}
.social-card__post-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff5f0;
  color: #ff5722;
  border: none;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px; font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background .12s ease;
}
.social-card__post-btn:hover { background: #ffe6da; }

/* Detail */
.social-detail__photo {
  display: block;
  width: 100%;
  max-height: 480px;
  object-fit: contain;
  object-position: center;
  background: #f3f3f5;
  border-radius: 12px;
  margin-bottom: 10px;
}
.social-detail__caption {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-secondary, #444);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Apercu dans l'editeur */
.social-post-preview {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  object-position: center;
  background: #f3f3f5;
  border-radius: 12px;
  border: 1px solid var(--border, #eee);
}

/* =====================================================================
   v0.20 - Profil athlete enrichi : seances perso (copiables) + calendrier
   ===================================================================== */
.social-profile__section { margin-top: 20px; }
.social-profile__section-title {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 10px; font-size: 14px; font-weight: 800;
  color: var(--text-primary, #0a0a0f);
}
.social-profile__section-title i { color: var(--flame, #ff5722); }
.social-profile__loading, .social-profile__empty {
  font-size: 13px; color: var(--text-tertiary, #8888a0); padding: 6px 0;
}

.social-tpl-list, .social-cal-list { display: flex; flex-direction: column; gap: 8px; }

.social-tpl, .social-cal {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-elevated, #fafafc);
  border: 1px solid var(--border-light, #e4e4e9);
  border-radius: 12px; padding: 10px 12px;
}
.social-tpl__color, .social-cal__color {
  flex: 0 0 10px; width: 10px; height: 36px; border-radius: 6px;
}
.social-tpl__info, .social-cal__info { flex: 1; min-width: 0; }
.social-tpl__name, .social-cal__name {
  font-size: 14px; font-weight: 700; color: var(--text-primary, #0a0a0f);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.social-tpl__meta, .social-cal__date {
  font-size: 12px; color: var(--text-tertiary, #8888a0); margin-top: 2px;
}
.social-tpl__copy {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--flame, #ff5722); color: #fff; border: none;
  border-radius: 999px; padding: 8px 14px;
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background .12s ease;
}
.social-tpl__copy:hover { background: var(--flame-dark, #d84315); }
.social-tpl__copy:disabled { opacity: .8; cursor: default; }
.social-tpl__copy--done { background: var(--success, #2ecc71); }

.social-cal__status {
  flex: 0 0 auto; font-size: 11px; font-weight: 700; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px;
  background: var(--bg-surface-2, #ebebef); color: var(--text-secondary, #55556a);
}
.social-cal__status--completed { background: #e6f7ee; color: #1d9b5b; }
.social-cal__status--planned   { background: #fff1e9; color: #d84315; }
.social-cal__status--missed    { background: #fdeaea; color: #c0392b; }

/* =====================================================================
   v0.21 : Like des commentaires + "qui a aimé"
   ===================================================================== */
.comment__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.comment__like {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: transparent;
  color: var(--text-tertiary, #9a9ab0);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 8px;
  transition: transform .12s ease, color .12s ease;
}
.comment__like:hover { color: var(--flame, #ff5722); }
.comment__like:active { transform: scale(1.25); }
.comment__like.is-on { color: var(--flame, #ff5722); }
/* v0.24 : dislike de commentaire, symetrique (teinte bleu froid). */
.comment__dislike {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: transparent;
  color: var(--text-tertiary, #9a9ab0);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 8px;
  transition: transform .12s ease, color .12s ease;
}
.comment__dislike:hover { color: #5b8def; }
.comment__dislike:active { transform: scale(1.25); }
.comment__dislike.is-on { color: #5b8def; }
.comment__likes-count,
.comment__dislikes-count {
  border: none;
  background: transparent;
  color: var(--text-secondary, #666);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 8px;
}
.comment__likes-count:hover { text-decoration: underline; color: var(--flame, #ff5722); }
.comment__dislikes-count:hover { text-decoration: underline; color: #5b8def; }

/* Liste "qui a aimé" (modale) */
.likers-list { display: flex; flex-direction: column; gap: 4px; }
.likers-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border, #eee);
}
.likers-row:last-child { border-bottom: none; }
.likers-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  display: grid; place-items: center;
  font-weight: 700; color: #fff;
  background-color: #ff5722;
  flex-shrink: 0;
}
.likers-pseudo { font-weight: 600; color: var(--text-primary, #222); }

/* =============================================================================
   v0.29 - Composeur de commentaire : texte + bouton "+" (Photo / Vidéo)
   -----------------------------------------------------------------------------
   Remplace les trois onglets Texte / Vocal / Photo. Le texte est toujours
   accessible ; le média est une pièce jointe, pas un mode exclusif.
   ============================================================================= */
.comment-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.comment-row__text {
  flex: 1 1 auto;
  min-width: 0;
  resize: none;
  max-height: 120px;
}
.comment-attach { position: relative; flex: 0 0 auto; }
.comment-attach--post { display: inline-block; margin-top: 12px; }
.comment-attach__btn,
.comment-send {
  width: 40px; height: 40px;
  flex: 0 0 auto;
  border: none;
  border-radius: var(--radius-full, 999px);
  display: grid; place-items: center;
  cursor: pointer;
  font-size: 15px;
  font-family: inherit;
  transition: background var(--transition-fast, .15s), color var(--transition-fast, .15s);
}
.comment-attach__btn {
  background: var(--bg-elevated, #f4f4f7);
  color: var(--text-secondary, #4e4e5c);
}
.comment-attach__btn:hover { background: var(--bg-flame-soft, #fff3ee); color: var(--flame, #ff5722); }
.comment-send {
  background: var(--flame, #ff5722);
  color: #fff;
  box-shadow: var(--shadow-flame, 0 6px 20px rgba(255,87,34,.28));
}
.comment-send:disabled { opacity: .55; cursor: default; box-shadow: none; }

.comment-attach__menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 40;
  min-width: 150px;
  padding: 6px;
  border-radius: var(--radius-md, 14px);
  background: var(--bg-surface, #fff);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
  display: flex; flex-direction: column; gap: 2px;
}
.comment-attach__menu[hidden] { display: none; }
.comment-attach--post .comment-attach__menu { bottom: auto; top: calc(100% + 8px); }
.comment-attach__item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: none; border-radius: var(--radius-sm, 10px);
  background: transparent;
  color: var(--text-primary, #16161c);
  font-family: inherit; font-size: 14px; font-weight: 600;
  text-align: left; cursor: pointer;
  transition: background .12s ease;
}
.comment-attach__item i { width: 16px; text-align: center; color: var(--flame, #ff5722); }
.comment-attach__item:hover { background: var(--bg-elevated, #f4f4f7); }

/* Aperçu du média attaché */
.comment-media { position: relative; margin-top: 10px; }
.comment-media__img,
.comment-media__vid {
  width: 100%;
  max-height: 280px;
  border-radius: var(--radius-md, 14px);
  background: #000;
  display: block;
  object-fit: contain;
}
.comment-media__remove {
  position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px;
  border: none; border-radius: 999px;
  background: rgba(0, 0, 0, .6);
  color: #fff; cursor: pointer;
  display: grid; place-items: center;
}

/* Vidéos publiées */
.comment__video,
.social-card__video,
.social-detail__video {
  width: 100%;
  max-height: 420px;
  margin-top: 10px;
  border-radius: var(--radius-md, 14px);
  background: #000;
  display: block;
}

/* =============================================================================
   v0.31 - FORMAT UNIFORME DES MÉDIAS DU FIL
   -----------------------------------------------------------------------------
   Probleme : la hauteur d'une carte dependait des proportions de la photo ou de
   la video envoyee. Une photo panoramique donnait une bande fine, une video
   verticale d'iPhone une colonne enorme, et le fil "sautait" differemment sur
   chaque telephone.

   Solution : un CADRE de proportion FIXE (4:5, le format portrait standard des
   telephones), identique sur mobile et sur PC.
     - Photos  -> object-fit: cover. Le cadre est toujours rempli, donc jamais
                  de bandes. Un leger recadrage est preferable a une carte
                  deformee (c'est le parti pris d'Instagram).
     - Videos  -> object-fit: contain. Recadrer une video coupe le sujet, ce qui
                  est pire que des bandes ; on les garde donc, mais sur un fond
                  CLAIR accorde au theme au lieu du noir par defaut du lecteur.
   ============================================================================= */
.social-card__photo,
.social-card__video,
.social-detail__photo,
.social-detail__video,
.comment__photo,
.comment__video {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: none;
  height: auto;
  border-radius: var(--radius-md, 14px);
  background: var(--bg-elevated, #f4f4f7);
  object-position: center;
}
.social-card__photo,
.social-detail__photo,
.comment__photo {
  object-fit: cover;
}
/* `contain` laisse des bandes : elles doivent etre claires, pas noires.
   Sur une <video>, la couleur de fond ne s'applique que si l'element n'est pas
   opaque -> on force aussi la surface du lecteur. */
.social-card__video,
.social-detail__video,
.comment__video {
  object-fit: contain;
  background-color: var(--bg-elevated, #f4f4f7);
}
/* Les apercus du composeur suivent le meme cadre, pour que ce que l'on voit
   avant publication corresponde a ce qui sera publie. */
.comment-media__img,
.comment-media__vid {
  aspect-ratio: 4 / 5;
  max-height: none;
  height: auto;
  background: var(--bg-elevated, #f4f4f7);
}
.comment-media__img { object-fit: cover; }
.comment-media__vid { object-fit: contain; }

/* Ecrans larges : on plafonne pour qu'une carte ne devienne pas une affiche. */
@media (min-width: 700px) {
  .social-card__photo, .social-card__video,
  .social-detail__photo, .social-detail__video,
  .comment__photo, .comment__video {
    max-height: 520px;
    aspect-ratio: auto;
    height: 520px;
  }
}

/* =============================================================================
   v0.33 - Humeur (petit texte libre à côté du pseudo)
   ============================================================================= */
.mood-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--radius-full, 999px);
  background: var(--bg-flame-soft, #fff3ee);
  color: var(--flame, #ff5722);
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}
.mood-pill--empty {
  background: transparent;
  color: var(--text-tertiary, #85858f);
  font-weight: 600;
  font-style: italic;
}

/* Fiche profil dans le social : photo éditable + humeur */
.social-profile__avatar-wrap { position: relative; display: inline-block; }
.social-profile__avatar-wrap.is-editable { cursor: pointer; }
.social-profile__cam {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 26px; height: 26px;
  border-radius: 999px;
  background: var(--flame, #ff5722);
  color: #fff;
  font-size: 11px;
  display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}
.social-profile__mood-row {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 6px;
}
.social-profile__mood-row .mood-pill { margin-left: 0; max-width: 220px; }
.social-profile__moodedit {
  border: none; background: transparent;
  color: var(--text-tertiary, #85858f);
  cursor: pointer; font-size: 12px; padding: 4px;
}

/* v0.35 : carte du fil dont le rendu a échoué (isolée, le reste s'affiche). */
.social-card--broken {
  cursor: default;
  color: var(--text-tertiary, #85858f);
  font-size: 14px;
  text-align: center;
}


/* v0.39 : le pseudo ne se tronque PLUS. Avant, pseudo et humeur retrecissaient
   tous les deux (`flex: 0 1 auto`), et on finissait avec "@Lo..." + une humeur
   coupee : deux informations abimees au lieu d'une. Desormais le pseudo garde
   sa taille naturelle, et l'humeur PASSE A LA LIGNE quand il n'y a plus la
   place. Elle est ainsi toujours lisible en entier. */
.social-card__pseudo,
.comment__head { flex-wrap: wrap; }
.social-card__name {
  flex: 0 0 auto;                /* jamais tronque */
  white-space: nowrap;
}
.social-card__pseudo .mood-pill,
.comment__head .mood-pill {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: 0;
  max-width: 100%;
  /* Une humeur longue s'affiche sur plusieurs lignes plutot que de finir en
     "..." : le texte compte plus que la hauteur de la carte. */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.35;
}
.comment__head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.comment__pseudo {
  flex: 0 1 auto;
  min-width: 3.5em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.comment__when { flex: 0 0 auto; margin-left: auto; }

/* =============================================================================
   v0.37 - Tirer pour actualiser
   ============================================================================= */
.ptr {
  position: absolute;
  top: -44px;
  left: 50%;
  margin-left: -18px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--bg-surface, #fff);
  box-shadow: var(--shadow-md, 0 2px 10px rgba(0,0,0,.08));
  display: grid;
  place-items: center;
  color: var(--text-tertiary, #85858f);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity .15s ease, transform .2s ease, color .15s ease;
}
.ptr--ready { color: var(--flame, #ff5722); }
.ptr--spin  { color: var(--flame, #ff5722); opacity: 1; }
.ptr--spin i { animation: ptr-spin .8s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }

#screenSocial { position: relative; }

/* Empêche le "rebond" iOS de concurrencer le geste pendant qu'on tire. */
#screenSocial { overscroll-behavior-y: contain; }

/* =============================================================================
   v0.38 - Publicité dans le fil
   ============================================================================= */
.social-card--ad { cursor: default; }
.social-card--ad:hover { transform: none; }
.ad-badge {
  width: 40px; height: 40px;
  border-radius: 999px;
  background: var(--bg-flame-soft, #fff3ee);
  color: var(--flame, #ff5722);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.ad-tag {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: var(--radius-full, 999px);
  background: var(--bg-elevated, #f4f4f7);
  color: var(--text-tertiary, #85858f);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
/* Cadre animé : même moteur que les bordures de profil, en rectangle. */
.ad-media { margin-top: 10px; }
.ad-media--framed {
  border: 4px solid transparent;
  border-radius: calc(var(--radius-md, 14px) + 4px);
  padding: 3px;
}
.ad-media--framed .social-card__photo,
.ad-media--framed .social-card__video { border-radius: var(--radius-md, 14px); }

/* =============================================================================
   v0.44 - Messages privés + notifications
   ============================================================================= */
.social-topbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 12px;
}
.social-topbar__btn {
  position: relative;
  width: 40px; height: 40px;
  border: none; border-radius: 999px;
  background: var(--bg-surface, #fff);
  color: var(--text-secondary, #4e4e5c);
  box-shadow: var(--shadow-sm);
  display: grid; place-items: center;
  cursor: pointer; font-size: 16px;
}
.social-topbar__btn:hover { color: var(--flame, #ff5722); }
.social-topbar__dot {
  position: absolute; top: 7px; right: 7px;
  width: 9px; height: 9px;
  border-radius: 999px;
  background: var(--racing, #e63946);
  border: 2px solid var(--bg-surface, #fff);
}

.dm-people { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.dm-person {
  padding: 7px 13px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-surface); color: var(--text-primary);
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.dm-threads { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.dm-thread {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px;
  border: none; border-radius: var(--radius-md);
  background: transparent; color: var(--text-primary);
  font-family: inherit; text-align: left; cursor: pointer;
}
.dm-thread:hover { background: var(--bg-elevated); }
.dm-thread__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dm-thread__name { font-weight: 700; font-size: 14px; }
.dm-thread__prev {
  font-size: 13px; color: var(--text-tertiary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dm-thread__badge {
  flex: 0 0 auto;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px;
  background: var(--racing); color: #fff;
  font-size: 11px; font-weight: 800;
  display: grid; place-items: center;
}

.dm-messages {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 52vh; overflow-y: auto;
  padding: 4px 2px 12px;
}
.dm-msg {
  align-self: flex-start;
  max-width: 78%;
  padding: 9px 13px;
  border-radius: 16px 16px 16px 4px;
  background: var(--bg-elevated);
}
.dm-msg--me {
  align-self: flex-end;
  border-radius: 16px 16px 4px 16px;
  background: var(--flame);
  color: #fff;
}
.dm-msg__text { font-size: 14px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.dm-msg__time { font-size: 10px; opacity: .65; margin-top: 3px; }
.dm-composer { margin-top: 6px; }
.dm-back { margin-right: auto; }

.notif {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 10px;
  border-bottom: 1px solid var(--border-light);
}
.notif > i { color: var(--text-tertiary); margin-top: 3px; }
.notif--new > i { color: var(--flame); }
.notif__title { font-size: 14px; font-weight: 700; }
.notif__prev { font-size: 13px; color: var(--text-tertiary); }

/* ==========================================================================
   v0.47 - MEDIAS DANS LES MESSAGES PRIVES
   ========================================================================== */
.dm-msg--media { padding: 6px 6px 8px; max-width: 82%; }
.dm-msg--media .dm-msg__text { padding: 4px 7px 6px; }
.dm-msg--media .dm-msg__time { padding: 0 7px; }
.dm-msg__photo,
.dm-msg__video {
  display: block;
  width: 100%;
  max-height: 340px;
  border-radius: 12px;
  background: #000;
  object-fit: cover;
}
.dm-msg__video { object-fit: contain; }

/* Aperçu du média joint, au-dessus de la barre de saisie. */
.dm-media { margin: 6px 0 0; }

/* ==========================================================================
   v0.47 - CENTRE DE NOTIFICATIONS : CLIQUABLE + GLISSEMENT POUR SUPPRIMER
   --------------------------------------------------------------------------
   .notif-swipe est le rail : il porte le fond rouge, immobile.
   .notif est la carte qui glisse par-dessus et doit donc être OPAQUE,
   sinon le fond rouge transparaîtrait à travers au repos.
   ========================================================================== */
.notif-tools {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 2px 2px 10px;
}
.notif-hint { font-size: 11px; color: var(--text-tertiary); }
.notif-hint i { margin-right: 4px; }
.notif-clear {
  flex: 0 0 auto;
  padding: 6px 12px;
  border: 1px solid var(--border); border-radius: 999px;
  background: transparent; color: var(--text-secondary);
  font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.notif-clear:hover { color: var(--racing, #e63946); border-color: var(--racing, #e63946); }

.notif-swipe {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md, 14px);
  /* touch-action : on garde le défilement vertical natif de la liste, et on
     ne réclame l'horizontal que pour notre geste. */
  touch-action: pan-y;
  transition: max-height .18s ease, opacity .18s ease;
  max-height: 200px;
}
.notif-swipe.is-removing { max-height: 0; opacity: 0; }

.notif-swipe__del {
  position: absolute; inset: 0 0 0 auto;
  width: 100%;
  display: flex; align-items: center; justify-content: flex-end; gap: 7px;
  padding-right: 18px;
  background: var(--racing, #e63946);
  color: #fff; font-size: 13px; font-weight: 800;
  cursor: pointer;
}

.notif {
  position: relative;
  background: var(--bg-surface, #fff);
  cursor: pointer;
  will-change: transform;
  -webkit-user-select: none; user-select: none;
}
.notif:hover { background: var(--bg-elevated); }
.notif__body { flex: 1; min-width: 0; }
.notif__prev { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif__when { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
.notif__go { align-self: center; color: var(--text-tertiary); font-size: 12px; }

/* La règle v0.44 `.notif > i` visait l'unique icône de gauche. La ligne en
   compte deux depuis v0.47 (icône + chevron) : on recadre. */
.notif--new > i:first-child { color: var(--flame); }
.notif--new > i.notif__go { color: var(--text-tertiary); }
#notifList { display: flex; flex-direction: column; gap: 4px; }