/* Evotic — FIL v2 : réactions, menu ⋯, feuilles (commentaires, partage, signalement),
   pastille « nouvelles publications », bandeau Annuler. Contrat : docs/fil-protocole-v2.md.
   Les couleurs passent par des jetons : la feuille suit le thème du téléphone. */

:root {
  --fs-sheet-bg: #fff;
  --fs-sheet-ink: #1C1B1F;
  --fs-sheet-mute: #75727e;
  --fs-sheet-line: #ECE7F5;
  --fs-field: #F1EEF8;
  --fs-accent: #A23BE0;
  --fs-danger: #D4453B;
  --fs-bubble: #F4F1FA;
  --fs-ov: rgba(20, 12, 40, 0.48);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fs-sheet-bg: #1F1B2A;
    --fs-sheet-ink: #ECE9F5;
    --fs-sheet-mute: #A8A2B8;
    --fs-sheet-line: #322C44;
    --fs-field: #2A2438;
    --fs-bubble: #2A2438;
  }
}
:root[data-theme="dark"] {
  --fs-sheet-bg: #1F1B2A;
  --fs-sheet-ink: #ECE9F5;
  --fs-sheet-mute: #A8A2B8;
  --fs-sheet-line: #322C44;
  --fs-field: #2A2438;
  --fs-bubble: #2A2438;
}

/* ── Réaction (§1) : bouton + résumé. La couleur vient de la ligne d'actions qui la porte. ── */
.fu-actions { color: var(--text-muted); align-items: center; }
.feed-actions { color: #75727e; }
.fs-rx { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.fs-rx-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  color: inherit; font: inherit; font-size: 13px; font-weight: 700;
  -webkit-touch-callout: none; user-select: none; touch-action: manipulation;
}
.fs-rx-btn > i { font-size: 16px; }
.fs-rx-btn.is-on { color: var(--ak-pink, #FF2E93); }
.feed-actions .fs-rx-btn.is-on { color: var(--fs-accent); }
.fs-rx-btn:active { transform: scale(.94); }
.fs-rx-emo { font-size: 17px; line-height: 1; }
.fs-rx-sum {
  display: inline-flex; align-items: center; gap: 0; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: inherit; opacity: .9;
}
.fs-rx-sum > span { font-size: 14px; margin-right: -2px; }
.fs-rx-sum > b { margin-left: 6px; font-weight: 700; }
@media (max-width: 360px) { .fs-rx-lbl { display: none; } }

/* Palette (appui long / survol) */
.fs-pick {
  position: fixed; z-index: 4200; display: flex; gap: 2px; padding: 6px 8px;
  background: var(--fs-sheet-bg); border-radius: 999px;
  box-shadow: 0 10px 30px rgba(20, 10, 40, .28);
  animation: fs-pop .16s ease-out;
}
.fs-pick > button {
  font-size: 26px; line-height: 1; padding: 6px; border: 0; background: none; cursor: pointer;
  border-radius: 50%; transition: transform .12s ease;
}
.fs-pick > button:hover, .fs-pick > button:focus-visible { transform: scale(1.25) translateY(-3px); }
.fs-pick > button.is-on { background: var(--fs-field); }
@keyframes fs-pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── Bouton ⋯ des cartes ── */
.fs-more {
  margin-left: auto; flex: 0 0 auto; background: none; border: 0; cursor: pointer;
  color: inherit; opacity: .8; font-size: 16px; padding: 6px 4px; line-height: 1;
}
.fu-head .fs-more { color: var(--text-muted); }

/* ── Feuilles ── */
.fs-ov {
  position: fixed; inset: 0; z-index: 4000; background: var(--fs-ov);
  display: flex; align-items: flex-end; justify-content: center;
}
.fs-sheet {
  width: 100%; max-width: 640px; max-height: 86vh; overflow: auto;
  background: var(--fs-sheet-bg); color: var(--fs-sheet-ink);
  border-radius: 20px 20px 0 0; padding: 4px 0 calc(12px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
  animation: fs-up .18s ease-out;
}
.fs-sheet.is-tall { height: 78vh; overflow: hidden; }
@keyframes fs-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.fs-grab { width: 38px; height: 4px; border-radius: 4px; background: var(--fs-sheet-line); margin: 6px auto 2px; flex: 0 0 auto; }
.fs-head {
  display: flex; align-items: center; justify-content: center; position: relative; flex: 0 0 auto;
  padding: 10px 44px; font-size: 15px; border-bottom: 1px solid var(--fs-sheet-line);
}
.fs-x {
  position: absolute; right: 10px; top: 4px; background: none; border: 0; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--fs-sheet-mute); padding: 4px 8px;
}
.fs-menu { display: flex; flex-direction: column; padding: 4px 0; }
.fs-mi {
  display: flex; align-items: center; gap: 13px; width: 100%; background: none; border: 0; text-align: left;
  padding: 14px 20px; font: inherit; font-size: 15px; color: var(--fs-sheet-ink); cursor: pointer;
}
.fs-mi > i { width: 20px; text-align: center; color: var(--fs-sheet-mute); font-size: 16px; }
.fs-mi > span { flex: 1; min-width: 0; }
.fs-mi > .fa-chevron-right { width: auto; font-size: 12px; }
.fs-mi:hover { background: var(--fs-field); }
.fs-mi.is-danger, .fs-mi.is-danger > i { color: var(--fs-danger); }
.fs-mi.is-cancel { justify-content: center; color: var(--fs-sheet-mute); font-weight: 700; border-top: 1px solid var(--fs-sheet-line); margin-top: 4px; }
.fs-note { font-size: 13px; color: var(--fs-sheet-mute); padding: 4px 20px 10px; line-height: 1.45; }
.fs-why { list-style: none; margin: 0; padding: 10px 20px 4px; }
.fs-why > li { padding: 8px 0; font-size: 14.5px; display: flex; gap: 10px; align-items: baseline; }
.fs-why > li > i { color: var(--fs-accent); }
.fs-btn {
  margin: 10px 16px 0; padding: 12px 16px; border: 0; border-radius: 14px; cursor: pointer;
  background: linear-gradient(135deg, #A23BE0, #FF2E93); color: #fff; font: inherit; font-weight: 800; font-size: 15px;
}
.fs-btn:disabled { opacity: .5; cursor: default; }

/* Commentaires */
/* La publication ouverte au-dessus de sa discussion (openPost, 30/10). Les styles de carte du fil
   sont écrits pour un fond sombre (encre blanche) : la feuille suit le thème → encre de la feuille. */
.fs-cm-lead { flex: 0 1 auto; max-height: 46vh; overflow-y: auto; padding: 6px 16px 10px; border-bottom: 1px solid var(--fs-sheet-line); }
.fs-cm-lead .fu-lead-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.fs-cm-lead .fu-lead-head small { color: var(--fs-sheet-mute); font-size: 12px; }
.fs-cm-lead .fu-author, .fs-cm-lead .fu-title, .fs-cm-lead .fu-body { color: var(--fs-sheet-ink); }
.fs-cm-lead .fu-body { white-space: pre-wrap; }
/* Ordinateur : la feuille devient une fenêtre centrée, plus large que le fil (rien sous 1100 px). */
@media (min-width: 1100px) {
  body.has-desktop-shell .fs-ov:has(> .fs-sheet.is-tall) { align-items: center; }
  body.has-desktop-shell .fs-sheet.is-tall { max-width: 720px; border-radius: 20px; height: 84vh; }
}
.fs-cm-open {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex: 0 0 auto;
  padding: 8px 16px; font-size: 13px; font-weight: 700; color: var(--fs-accent); text-decoration: none;
}
.fs-cm-list { flex: 1; overflow-y: auto; padding: 8px 14px; min-height: 0; }
.fs-cm-load, .fs-cm-empty { text-align: center; color: var(--fs-sheet-mute); font-size: 14px; padding: 28px 12px; }
.fs-cm-more {
  display: block; margin: 4px auto 8px; background: none; border: 0; cursor: pointer;
  color: var(--fs-accent); font: inherit; font-size: 13px; font-weight: 700;
}
.fs-cm { display: flex; gap: 9px; padding: 6px 0; }
.fs-cm.is-reply { padding-left: 38px; }
.fs-cm.is-focus .fs-cm-bubble { box-shadow: 0 0 0 2px var(--fs-accent); }
.fs-cm-main { flex: 1; min-width: 0; }
.fs-cm-bubble { background: var(--fs-bubble); border-radius: 16px; padding: 8px 12px; display: inline-block; max-width: 100%; }
.fs-cm-name { display: block; font-size: 12.5px; font-weight: 800; color: var(--fs-sheet-ink); text-decoration: none; }
.fs-cm-text { font-size: 14px; line-height: 1.45; word-wrap: break-word; overflow-wrap: anywhere; }
.fs-cm-media { display: block; margin-top: 6px; max-width: 220px; max-height: 220px; border-radius: 12px; object-fit: cover; }
.fs-cm-meta { display: flex; flex-wrap: wrap; gap: 12px; padding: 3px 10px 0; font-size: 11.5px; color: var(--fs-sheet-mute); }
.fs-cm-meta > button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 700; color: var(--fs-sheet-mute); }
.fs-cm-editf { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.fs-cm-editf > input { flex: 1 1 160px; min-width: 0; border: 0; border-radius: 10px; padding: 7px 10px; background: var(--fs-sheet-bg); color: var(--fs-sheet-ink); font: inherit; font-size: 14px; }
.fs-cm-editf > button { border: 0; background: none; color: var(--fs-accent); font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
.fs-cm-form, .fs-cm-staged {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px 4px; border-top: 1px solid var(--fs-sheet-line); flex: 0 0 auto;
}
.fs-cm-staged > img, .fs-cm-vid { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; }
.fs-cm-vid { display: flex; align-items: center; justify-content: center; background: var(--fs-field); color: var(--fs-accent); }
.fs-cm-staged > button { margin-left: auto; background: none; border: 0; font-size: 22px; color: var(--fs-sheet-mute); cursor: pointer; }
.fs-cm-input, .fs-share-note {
  flex: 1; min-width: 0; background: var(--fs-field); color: var(--fs-sheet-ink); border: 0; border-radius: 22px;
  padding: 10px 14px; font: inherit; font-size: 14px; outline: none;
}
.fs-share-note { margin: 10px 16px 0; flex: 0 0 auto; }
.fs-cm-send, .fs-cm-attach { background: none; border: 0; color: var(--fs-accent); font-size: 19px; cursor: pointer; padding: 4px; }
.fs-mention { color: var(--fs-accent); font-weight: 700; text-decoration: none; }
.fu-card .fs-mention { color: #FFD3F0; }

/* Partage : conversations, republier */
.fs-conv-list { flex: 1; overflow-y: auto; padding: 4px 8px; min-height: 0; }
.fs-conv { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; cursor: pointer; }
.fs-conv:hover { background: var(--fs-field); }
.fs-conv > input { width: 20px; height: 20px; accent-color: var(--fs-accent); flex: 0 0 auto; }
.fs-conv > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.fs-conv > i { color: var(--fs-sheet-mute); }
.fs-repost-in {
  margin: 12px 16px 0; padding: 12px 14px; border: 0; border-radius: 14px; resize: vertical;
  background: var(--fs-field); color: var(--fs-sheet-ink); font: inherit; font-size: 15px; min-height: 90px;
}
.fs-repost-foot { display: flex; align-items: center; justify-content: space-between; padding: 0 0 0 16px; }
.fs-repost-foot .fs-btn { margin-right: 16px; }
.fs-count { font-size: 12px; color: var(--fs-sheet-mute); }

/* Bandeau « Annuler » */
.fs-undo {
  position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 4300; display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px);
  background: #241B35; color: #fff; padding: 11px 16px; border-radius: 14px; font-size: 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
}
.fs-undo > button { background: none; border: 0; color: #FF9BD2; font: inherit; font-weight: 800; cursor: pointer; padding: 0; }

/* Pastille « N nouvelles publications » */
.fs-newpill {
  position: sticky; top: 56px; z-index: 13; display: flex; justify-content: center; height: 0; overflow: visible;
}
.fs-newpill > button {
  margin-top: 6px; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px;
  border: 0; border-radius: 999px; cursor: pointer; color: #fff; font: inherit; font-size: 13.5px; font-weight: 800;
  background: linear-gradient(135deg, #A23BE0, #FF2E93); box-shadow: 0 6px 18px rgba(20, 10, 40, .35);
}

/* Barre d'outils du fil (notifications, enregistrés) */
.fs-toolbar { display: flex; gap: 8px; justify-content: flex-end; padding: 8px 12px 0; }
.fs-toolbar > a {
  position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px;
  background: var(--chip); border: 1px solid transparent;   /* MINIMAL : pastille neutre, plus de verre */
  color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 700;
}
.fs-badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #FF2E93; color: #fff;
  font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}

/* Bandeau hors ligne du fil */
.fs-offline { margin: 8px 12px 0; padding: 8px 12px; border-radius: 12px; background: var(--chip); color: var(--text); font-size: 12.5px; }

/* Publication en attente / non publiée (outbox) */
.feed-card.is-pending { opacity: .78; }
.fs-post-state { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size: 12.5px; font-weight: 700; color: #8A5A0B; }
.fs-post-state.is-failed { color: var(--fs-danger); }
.fs-post-state > button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; text-decoration: underline; }
.fs-post-state > button.fs-discard { color: var(--fs-sheet-mute); }
.feed-card.is-focus { box-shadow: inset 4px 0 0 var(--fs-accent); animation: fs-flash 1.6s ease-out; }
@keyframes fs-flash { from { background: rgba(162, 59, 224, .14); } }

/* Compteur du composer (280) */
.fs-counter { font-size: 11.5px; color: #75727e; padding: 0 2px; flex: 0 0 auto; align-self: center; }
.fs-counter.is-near { color: #B45309; }
.fs-counter.is-over { color: var(--fs-danger); font-weight: 800; }

/* Fil unifié : défilement infini */
.fu-sentinel { height: 1px; }
.fu-loadmore { text-align: center; padding: 14px; color: var(--text-muted); font-size: 13px; }

/* ALERTE OFFICIELLE : épinglée, jamais confondue avec une publication */
.fu-card.fu-alerte {
  margin: 10px 10px 4px; padding: 12px 14px; border-radius: 16px; border: 0;
  background: linear-gradient(135deg, #B91C1C, #7F1D1D); box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
/* Surface fixe (dégradé rouge/bleu/orange) → encre fixe blanche, quel que soit le thème.
   Téléphone seulement : sur ordinateur, desktop-w4.css repeint l'alerte en rose pâle. */
@media (max-width: 1099px) {
  .fu-card.fu-alerte, .fu-card.fu-alerte .fu-body, .fu-card.fu-alerte .fu-title a,
  .fu-card.fu-alerte .fu-meta, .fu-card.fu-alerte .fu-headtxt small, .fu-card.fu-alerte .fu-act,
  .fu-card.fu-alerte .fu-author { color: #fff; }
}
.fu-card.fu-alerte.is-info { background: linear-gradient(135deg, #1D4ED8, #1E3A8A); }
.fu-card.fu-alerte.is-warn { background: linear-gradient(135deg, #C2410C, #7C2D12); }
.fu-alerte-tag {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 900; letter-spacing: .5px;
  text-transform: uppercase; background: rgba(255, 255, 255, .18); padding: 3px 9px; border-radius: 999px;
}
.fu-alerte .fu-body { white-space: pre-line; }

/* MATCH : tableau de score */
.fu-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 6px 0 10px; }
.fu-team { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: 13px; font-weight: 800; min-width: 0; }
.fu-team > img { width: 40px; height: 40px; object-fit: contain; }
.fu-team > span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.fu-goals { font-size: 26px; font-weight: 900; letter-spacing: 2px; text-align: center; }
.fu-goals > small { display: block; font-size: 11px; letter-spacing: 0; font-weight: 700; opacity: .8; }
.fu-live { color: #FF6B6B; }

/* ── Centre de notifications (§4) — page /notifications ── */
.nt-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 2px 8px; font-size: 14px; }
.nt-markall { background: none; border: 0; padding: 4px 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: var(--primary, #A23BE0); }
.nt-row.is-unread { border-color: var(--primary, #A23BE0); }
.nt-avs { display: inline-flex; flex: 0 0 auto; }
.nt-avs > * + * { margin-left: -12px; }
.nt-avs .user-avatar, .nt-avs > span { box-shadow: 0 0 0 2px var(--fs-sheet-bg); border-radius: 50%; }
.nt-more { margin-top: 10px; }
.nt-empty { margin: 4px 2px 10px; }

/* ── Enregistrés (page /enregistres) ── */
.sv-tag { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: rgba(162, 59, 224, .12); color: var(--fs-accent); flex: 0 0 auto; }
.sv-thumb { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; flex: 0 0 auto; background: rgba(162, 59, 224, .10); }