/* FOOTPASS Messenger v2 · Système de filtres « Modèle 4 » : code couleur par famille
   et par sous-catégorie sur l'écran Messages. Le ton des sous-filtres est posé inline
   (OKLCH) ; ce fichier ne fournit que la structure des pastilles, points et chevrons. */

/* Pastille de comptage (familles + sous-filtres) */
.m4-badge {
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: #F2545B; color: #fff; flex-shrink: 0;
  font: 700 9.5px/16px 'Inter', sans-serif; text-align: center;
  display: inline-flex; align-items: center; justify-content: center;
}
.hm-chip.sub .m4-badge { min-width: 15px; height: 15px; font-size: 9px; line-height: 15px; }

/* Point de famille / de ton en tête de chip */
.m4-cdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* Filtre rapide « Non lus » (accès direct aux messages non lus) */
.m4-unread-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--acc-bright,#00C49A); flex-shrink: 0; }
.hm-chip.m4-unread.on { background: var(--acc-bright,#00C49A); border-color: var(--acc-bright,#00C49A); color: #04130F; }
.hm-chip.m4-unread.on .m4-unread-dot { background: #04130F; }
.m4-unread-badge { background: var(--acc-bright,#00C49A); color: #04130F; }
.hm-chip.m4-unread.on .m4-unread-badge { background: rgba(4,19,15,0.20); color: #04130F; }
.hm.light .m4-unread-dot { background: var(--acc,#00A37E); }
.hm.light .hm-chip.m4-unread.on { background: var(--acc,#00A37E); border-color: var(--acc,#00A37E); color: #fff; }
.hm.light .hm-chip.m4-unread.on .m4-unread-dot { background: #fff; }
.hm.light .m4-unread-badge { background: var(--acc,#00A37E); color: #fff; }
.hm.light .hm-chip.m4-unread.on .m4-unread-badge { background: rgba(255,255,255,0.28); color: #fff; }

/* Sous-rangée à substitution */
.m4-sub { align-items: center; }
.m4-sub > .m4-kid { animation: m4kidIn 240ms cubic-bezier(0.2,0,0,1) both; }
@keyframes m4kidIn { from { transform: translateX(16px); } }

/* Chip parent (ancrage « remonter ») */
.hm-chip.parent {
  background: color-mix(in srgb, var(--acc-bright,#00C49A) 18%, transparent);
  border-color: color-mix(in srgb, var(--acc-bright,#00C49A) 48%, transparent);
  color: var(--acc-bright,#00C49A); font-weight: 650;
  animation: m4anchorIn 260ms cubic-bezier(0.2,0,0,1) both;
}
.hm.light .hm-chip.parent {
  background: color-mix(in srgb, var(--acc,#00A37E) 10%, #fff);
  border-color: color-mix(in srgb, var(--acc,#00A37E) 42%, transparent);
  color: var(--acc,#00A37E);
}
@keyframes m4anchorIn { from { transform: translateX(-10px); } }
.m4-back { font-size: 16px; line-height: 1; margin-right: 1px; }
.m4-sep { width: 1px; height: 18px; background: rgba(255,255,255,0.15); flex-shrink: 0; margin: 0 3px; }
.hm.light .m4-sep { background: rgba(15,15,16,0.14); }
.m4-chev { color: currentColor; opacity: 0.5; font-size: 14px; margin-left: 1px; }
.m4-pin { color: #E2B248; font-size: 10px; margin-right: 1px; }

/* Feuille « + Plus » */
.m4-pluslist { max-height: 46vh; overflow-y: auto; }
.m4-plusrow { display: flex; align-items: center; }
.m4-plusrow + .m4-plusrow { border-top: 1px solid rgba(255,255,255,0.06); }
.hm.light .m4-plusrow + .m4-plusrow { border-top-color: rgba(15,15,16,0.07); }
.m4-plusmain { flex: 1; display: flex; align-items: center; gap: 12px; padding: 11px 4px; background: none; border: none; cursor: pointer; color: inherit; text-align: left; min-width: 0; }
.m4-plusmain .hm-row-ic { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: #9A9AA2; flex-shrink: 0; }
.m4-plusmain .hm-row-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.m4-plusmain .hm-row-txt b { font: 650 13.5px/1.2 'Inter', sans-serif; color: #EDEDF2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m4-plusmain .hm-row-txt em { font: 500 11px/1.2 'Inter', sans-serif; font-style: normal; color: #8E8E96; }
.hm.light .m4-plusmain .hm-row-txt b { color: #15151A; }
.m4-dot { width: 7px; height: 7px; border-radius: 50%; background: #F2545B; flex-shrink: 0; margin-left: auto; }
.m4-pinbtn { background: none; border: none; cursor: pointer; color: #6B6B73; font-size: 17px; padding: 8px; flex-shrink: 0; }
.m4-pinbtn.on { color: #E2B248; }

/* Identité dans la liste : rôle teinté (inline), structure en blanc franc */
.hm-convo-id .ci-role { font-weight: 600; }
.hm-convo-id .ci-org { color: #EDEDF2; font-weight: 600; }
.hm.light .hm-convo-id .ci-org { color: #2C2C33; }
.hm-convo-id .ci-sep { color: #57575F; }
.hm.light .hm-convo-id .ci-sep { color: #B8B8BE; }

/* ─────────────── RECHERCHE SPOTLIGHT ─────────────── */
.m4-spot { position: absolute; inset: 0; z-index: 60; display: flex; flex-direction: column; }
.m4-spot-scrim {
  position: absolute; inset: 0;
  background: rgba(8,8,10,0.86); backdrop-filter: blur(20px) saturate(1.1); -webkit-backdrop-filter: blur(20px) saturate(1.1);
}
.hm.light .m4-spot-scrim { background: rgba(244,244,247,0.9); }
.m4-spot.in .m4-spot-scrim { animation: m4scrimIn 240ms ease both; }
.m4-spot.out .m4-spot-scrim { animation: m4scrimIn 220ms ease reverse both; }
@keyframes m4scrimIn { from { opacity: 0; } to { opacity: 1; } }

.m4-spot-panel { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; }
.m4-spot.in .m4-spot-panel { animation: m4panelIn 200ms ease both; }
.m4-spot.out .m4-spot-panel { animation: m4panelIn 180ms ease reverse both; }
@keyframes m4panelIn { from { opacity: 0; } to { opacity: 1; } }

.m4-spot-bar {
  display: flex; align-items: center; gap: 8px;
  margin: 12px 14px 2px; padding: 0 8px 0 13px; height: 42px; border-radius: 13px; flex-shrink: 0;
  background: rgba(118,118,128,0.18); border: 1px solid transparent;
  color: #98989F;
  transition: background 160ms ease;
}
.hm.light .m4-spot-bar { background: rgba(118,118,128,0.12); color: #8A8A93; }
.m4-spot-bar:focus-within { background: rgba(118,118,128,0.24); }
.hm.light .m4-spot-bar:focus-within { background: rgba(118,118,128,0.16); }
.m4-spot.in .m4-spot-bar { animation: m4barDrop 360ms cubic-bezier(0.16,1,0.3,1) both; }
.m4-spot.out .m4-spot-bar { animation: m4barDrop 200ms cubic-bezier(0.4,0,0.9,0.4) reverse both; }
@keyframes m4barDrop { from { opacity: 0; transform: translateY(-130%); } to { opacity: 1; transform: none; } }
.m4-spot-bar svg { flex-shrink: 0; }
.m4-spot-bar input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: #F2F2F5; font: 400 17px/1 'Inter', sans-serif; letter-spacing: -0.01em; }
.hm.light .m4-spot-bar input { color: #16161B; }
.m4-spot-bar input::placeholder { color: #6B6B73; font-weight: 400; }
.m4-spot-x { display: flex; background: rgba(255,255,255,0.10); border: none; border-radius: 50%; width: 19px; height: 19px; align-items: center; justify-content: center; color: #C7C7CF; cursor: pointer; flex-shrink: 0; }
.hm.light .m4-spot-x { background: rgba(15,15,16,0.08); color: #57575F; }
.m4-spot-cancel { background: none; border: none; color: var(--acc-bright,#00C49A); font: 500 16px/1 'Inter', sans-serif; letter-spacing: -0.01em; cursor: pointer; flex-shrink: 0; padding: 4px 6px 4px 6px; }
.hm.light .m4-spot-cancel { color: var(--acc,#00A37E); }

/* Meilleur résultat (Top Hit · signature Spotlight) */
.m4-spot-tophit {
  display: flex; align-items: center; gap: 13px; width: calc(100% - 16px); margin: 0 8px; padding: 12px 14px;
  border-radius: 16px; border: 1px solid rgba(255,255,255,0.07); cursor: pointer; text-align: left;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--hit) 14%, transparent) 0%, transparent 60%),
    rgba(255,255,255,0.045);
}
.hm.light .m4-spot-tophit { border-color: rgba(15,15,16,0.06); background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--hit) 12%, transparent) 0%, transparent 60%), rgba(15,15,16,0.025); }
.m4-spot-tophit:active { transform: scale(0.985); }
.m4-spot-tophit-name { font: 700 16.5px/1.15 'Inter', sans-serif; letter-spacing: -0.01em; color: #F4F4F7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm.light .m4-spot-tophit-name { color: #14141A; }
.m4-spot-tophit-go { font-size: 22px; line-height: 1; color: #57575F; flex-shrink: 0; font-weight: 300; }

.m4-spot-body { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 8px 24px; }
.m4-spot.in .m4-spot-body { animation: m4bodyIn 300ms ease both; animation-delay: 110ms; }
@keyframes m4bodyIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.m4-spot-count { padding: 12px 14px 4px; font: 600 11px/1 'Inter', sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: #71717A; }
.m4-spot-more { padding: 14px; text-align: center; font: 500 12.5px/1 'Inter', sans-serif; color: #71717A; }

.m4-spot-sec { margin-top: 12px; }
.m4-spot-sechead {
  display: flex; align-items: center; gap: 7px; padding: 4px 12px 7px;
  font: 700 11px/1 'Inter', sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: #71717A;
}
.m4-spot-sechead button { margin-left: auto; text-transform: none; letter-spacing: 0; font: 600 11.5px/1 'Inter', sans-serif; color: var(--acc-bright,#00C49A); background: none; border: none; cursor: pointer; }
.hm.light .m4-spot-sechead button { color: var(--acc,#00A37E); }
.m4-spot-sechead.grp em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 600; color: #57575F; }
.m4-spot-gdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.m4-spot-recents { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 12px; }
.m4-spot-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); color: #C7C7CF;
  font: 500 12.5px/1 'Inter', sans-serif; cursor: pointer;
}
.hm.light .m4-spot-chip { background: rgba(15,15,16,0.04); border-color: rgba(15,15,16,0.07); color: #4A4A52; }
.m4-spot-chip svg { opacity: 0.6; }

.m4-spotrow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px; background: none; border: none; cursor: pointer; text-align: left; border-radius: 12px; animation: m4rowIn 280ms cubic-bezier(0.2,0.7,0.1,1) both; }
@keyframes m4rowIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.m4-spotrow:active { background: rgba(255,255,255,0.05); }
.hm.light .m4-spotrow:active { background: rgba(15,15,16,0.04); }
.m4-spotrow-av { flex-shrink: 0; }
.m4-spotrow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.m4-spotrow-name { font: 650 14px/1.2 'Inter', sans-serif; color: #EDEDF2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm.light .m4-spotrow-name { color: #15151A; }
.m4-spotrow-name mark { background: color-mix(in srgb, var(--acc-bright,#00C49A) 30%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.m4-spotrow-id { font: 500 12px/1.2 'Inter', sans-serif; color: #8E8E96; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m4-spotrow-id span { font-weight: 600; }
.m4-spotrow-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; color: #0A0A0C; font: 700 10px/18px 'Inter', sans-serif; text-align: center; flex-shrink: 0; }

.m4-spot-none { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 56px 24px; text-align: center; }
.m4-spot-none-ic { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.05); color: #57575F; margin-bottom: 4px; }
.hm.light .m4-spot-none-ic { background: rgba(15,15,16,0.05); color: #9A9AA2; }
.m4-spot-none p { font: 650 14px/1.3 'Inter', sans-serif; color: #C7C7CF; margin: 0; }
.hm.light .m4-spot-none p { color: #4A4A52; }
.m4-spot-none span { font: 400 12.5px/1.4 'Inter', sans-serif; color: #71717A; }

.hm-iconbtn.on { background: color-mix(in srgb, var(--acc-bright,#00C49A) 18%, transparent); color: var(--acc-bright,#00C49A); }
.hm.light .hm-iconbtn.on { background: color-mix(in srgb, var(--acc,#00A37E) 12%, #fff); color: var(--acc,#00A37E); }

/* ─── Chips de portée (rôles) ─── */
.m4-spot-chips { display: flex; gap: 7px; padding: 9px 14px 5px; overflow-x: auto; flex-shrink: 0; scrollbar-width: none; }
.m4-spot-chips::-webkit-scrollbar { display: none; }
.m4-spot.in .m4-spot-chips { animation: m4bodyIn 300ms ease both; animation-delay: 70ms; }
.m4-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; cursor: pointer; font: 600 12.5px/1 'Inter', sans-serif; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.04); color: #C7C7CF; }
.m4-chip.on { background: var(--acc-bright,#00C49A); border-color: var(--acc-bright,#00C49A); color: #04130F; }
.m4-chip-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.hm.light .m4-chip { background: rgba(15,15,16,0.04); border-color: rgba(15,15,16,0.07); color: #4A4A52; }
.hm.light .m4-chip.on { background: var(--acc,#00A37E); border-color: var(--acc,#00A37E); color: #fff; }

/* ─── Carte « Meilleur résultat » ─── */
.m4-spot-sechead.bestlbl span { color: var(--acc-bright,#00C49A); }
.hm.light .m4-spot-sechead.bestlbl span { color: var(--acc,#00A37E); }
.m4-best { margin: 0 8px 4px; padding: 14px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--hit) 32%, transparent); background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--hit) 13%, transparent) 0%, transparent 60%), rgba(255,255,255,0.045); animation: m4rowIn 320ms cubic-bezier(0.2,0.7,0.1,1) both; }
.hm.light .m4-best { background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--hit) 12%, transparent) 0%, transparent 60%), rgba(15,15,16,0.025); border-color: color-mix(in srgb, var(--hit) 26%, transparent); }
.m4-best-top { display: flex; align-items: center; gap: 13px; width: 100%; background: none; border: none; cursor: pointer; text-align: left; padding: 0; }
.m4-best-top:active { transform: scale(0.99); }
.m4-best-av { flex-shrink: 0; }
.m4-best-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.m4-best-name { display: flex; align-items: center; gap: 7px; font: 700 17px/1.1 'Inter', sans-serif; letter-spacing: -0.01em; color: #F4F4F7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm.light .m4-best-name { color: #14141A; }
.m4-best-v { width: 17px; height: 17px; border-radius: 50%; background: var(--acc-bright,#00C49A); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.m4-best-role { font: 550 13px/1.2 'Inter', sans-serif; color: #9A9AA2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m4-best-role span { font-weight: 700; }
.m4-best-go { font-size: 22px; line-height: 1; color: #57575F; flex-shrink: 0; font-weight: 300; }
.m4-best-rel { display: flex; align-items: center; gap: 7px; margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,0.08); font: 500 12.5px/1.3 'Inter', sans-serif; color: #9A9AA2; }
.hm.light .m4-best-rel { border-top-color: rgba(15,15,16,0.07); }
.m4-best-rel svg { flex-shrink: 0; opacity: 0.85; }
.m4-best-cta { display: flex; gap: 8px; margin-top: 13px; }
.m4-bbtn { flex: 1; height: 40px; border-radius: 11px; border: none; cursor: pointer; font: 600 13.5px/1 'Inter', sans-serif; }
.m4-bbtn.pri { background: var(--acc-bright,#00C49A); color: #04130F; }
.m4-bbtn.sec { background: rgba(255,255,255,0.07); color: #EDEDF2; border: 1px solid rgba(255,255,255,0.10); }
.hm.light .m4-bbtn.pri { background: var(--acc,#00A37E); color: #fff; }
.hm.light .m4-bbtn.sec { background: rgba(15,15,16,0.04); color: #16161B; border-color: rgba(15,15,16,0.08); }

/* ─── Jeton de catégorie ─── */
.m4-spot-tk { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; background: #fff; color: #16161B; border: none; border-radius: 8px; padding: 5px 6px 5px 8px; font: 600 13.5px/1 'Inter', sans-serif; cursor: pointer; }
.m4-spot-tk svg { flex-shrink: 0; }
.m4-spot-tk-x { display: inline-flex; color: #9A9AA2; }
.hm.light .m4-spot-tk { background: #16161B; color: #fff; }
.hm.light .m4-spot-tk-x { color: rgba(255,255,255,0.6); }

/* ─── Catégories (objets métier) ─── */
.m4-cats { padding: 2px 6px 0; }
.m4-cat { display: flex; align-items: center; gap: 13px; width: 100%; padding: 11px 8px; background: none; border: none; cursor: pointer; text-align: left; }
.m4-cat + .m4-cat .m4-cat-lbl { box-shadow: none; }
.m4-cat + .m4-cat { border-top: 1px solid rgba(255,255,255,0.06); }
.hm.light .m4-cat + .m4-cat { border-top-color: rgba(15,15,16,0.06); }
.m4-cat:active { background: rgba(255,255,255,0.04); border-radius: 12px; }
.m4-cat-ic { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, currentColor 14%, transparent); }
.m4-cat-lbl { flex: 1; font: 600 15.5px/1.2 'Inter', sans-serif; color: #F0F0F4; }
.hm.light .m4-cat-lbl { color: #16161B; }
.m4-cat-count { font: 600 12px/1 'Inter', sans-serif; color: #9A9AA2; background: rgba(255,255,255,0.05); border-radius: 7px; padding: 5px 8px; flex-shrink: 0; }
.hm.light .m4-cat-count { background: rgba(15,15,16,0.05); color: #6B6B73; }
.m4-cat-go { font-size: 19px; line-height: 1; color: #4E4E56; flex-shrink: 0; font-weight: 300; }

/* ─── Vue Autorisations (écran filtré) ─── */
.m4-ctxstrip { display: flex; align-items: center; gap: 11px; margin: 4px 8px 6px; padding: 11px 13px; border-radius: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); }
.hm.light .m4-ctxstrip { background: rgba(15,15,16,0.025); border-color: rgba(15,15,16,0.06); }
.m4-ctx-cr { width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #E0A93E; color: #1a1206; font: 800 12px/1 'Inter', sans-serif; }
.m4-ctx-info b { display: block; font: 700 14.5px/1.2 'Inter', sans-serif; color: #F0F0F4; }
.hm.light .m4-ctx-info b { color: #16161B; }
.m4-ctx-info span { font: 500 11.5px/1.35 'Inter', sans-serif; color: #8E8E96; }
.m4-ctx-info em { font-style: normal; color: var(--acc-bright,#00C49A); font-weight: 700; }
.m4-agrp { display: flex; align-items: center; gap: 8px; padding: 14px 14px 6px; font: 700 11px/1 'Inter', sans-serif; letter-spacing: 0.05em; text-transform: uppercase; color: #71717A; }
.m4-gdot2 { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.m4-acard { margin: 6px 8px; padding: 13px; border-radius: 15px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
.hm.light .m4-acard { background: rgba(15,15,16,0.025); border-color: rgba(15,15,16,0.06); }
.m4-acard.live { border-color: rgba(0,196,154,0.3); background: color-mix(in srgb, var(--acc-bright,#00C49A) 6%, transparent); }
.m4-acard-h { display: flex; align-items: flex-start; gap: 10px; }
.m4-ti { flex: 1; font: 700 14.5px/1.3 'Inter', sans-serif; color: #F0F0F4; }
.hm.light .m4-ti { color: #16161B; }
.m4-apills { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.m4-youpill { font: 600 10px/1 'Inter', sans-serif; color: var(--acc-bright,#00C49A); background: color-mix(in srgb, var(--acc-bright,#00C49A) 12%, transparent); border: 1px solid color-mix(in srgb, var(--acc-bright,#00C49A) 40%, transparent); border-radius: 999px; padding: 4px 7px; white-space: nowrap; }
.m4-statpill { font: 600 10px/1 'Inter', sans-serif; padding: 5px 8px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.m4-statpill.actif { background: color-mix(in srgb, var(--acc-bright,#00C49A) 14%, transparent); color: var(--acc-bright,#00C49A); }
.m4-statpill.wait { background: rgba(232,180,90,0.16); color: #E8B45A; }
.m4-statpill.exp { background: rgba(255,255,255,0.07); color: #8E8E96; }
.hm.light .m4-statpill.exp { background: rgba(15,15,16,0.06); }
.m4-parties { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 11px; font: 500 12.5px/1 'Inter', sans-serif; color: #C7C7CF; }
.hm.light .m4-parties { color: #4A4A52; }
.m4-pchip { display: inline-flex; align-items: center; background: rgba(255,255,255,0.05); border-radius: 8px; padding: 6px 9px; }
.hm.light .m4-pchip { background: rgba(15,15,16,0.04); }
.m4-parrow { color: #57575F; }
.m4-ameta { display: flex; align-items: center; gap: 7px 10px; flex-wrap: wrap; margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.07); }
.hm.light .m4-ameta { border-top-color: rgba(15,15,16,0.06); }
.m4-m { font: 500 11px/1 'Inter', sans-serif; color: #8E8E96; display: inline-flex; align-items: center; gap: 4px; }
.m4-m.sec { color: var(--acc-bright,#00C49A); }

/* ─── Résultats « Messages » (recherche plein-texte) ─── */
.m4-sh-em { margin-left: auto; font-style: normal; font: 600 11px/1 'Inter', sans-serif; color: #57575F; }
.m4-msgrow .m4-spotrow-name { display: flex; align-items: baseline; gap: 8px; width: 100%; }
.m4-msg-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m4-msg-time { margin-left: auto; flex-shrink: 0; font: 500 11px/1 'Inter', sans-serif; color: #71717A; }
.m4-msg-snip { display: block; font: 400 12.5px/1.3 'Inter', sans-serif; color: #8E8E96; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm.light .m4-msg-snip { color: #6B6B73; }
.m4-msg-snip mark { background: color-mix(in srgb, var(--acc-bright,#00C49A) 30%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.m4-msg-you { color: #B6B6BE; }
.hm.light .m4-msg-you { color: #50505A; }

/* ─── Vue « PassID » · annuaire des identités vérifiées ─── */
.m4-passrow { display: flex; align-items: center; gap: 13px; width: 100%; padding: 11px 12px; background: none; border: none; cursor: pointer; text-align: left; border-radius: 14px; animation: m4rowIn 0.34s cubic-bezier(0.22,1,0.36,1) both; }
.m4-passrow + .m4-passrow { border-top: 1px solid rgba(255,255,255,0.06); border-radius: 0; }
.hm.light .m4-passrow + .m4-passrow { border-top-color: rgba(15,15,16,0.06); }
.m4-passrow:active { background: rgba(255,255,255,0.05); border-radius: 14px; }
.hm.light .m4-passrow:active { background: rgba(15,15,16,0.04); }
.m4-passrow-av { flex-shrink: 0; }
.m4-passrow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.m4-passrow-name { display: flex; align-items: center; gap: 6px; font: 650 14.5px/1.15 'Inter', sans-serif; color: #EDEDF2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm.light .m4-passrow-name { color: #15151A; }
.m4-passrow-v { width: 15px; height: 15px; border-radius: 50%; background: var(--acc-bright,#00C49A); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hm.light .m4-passrow-v { background: var(--acc,#00A37E); }
.m4-passrow-num { display: inline-flex; align-items: center; gap: 5px; font: 700 12px/1 'Orbitron', sans-serif; letter-spacing: 0.06em; color: var(--acc-bright,#00C49A); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm.light .m4-passrow-num { color: var(--acc,#00A37E); }
.m4-passrow-num svg { flex-shrink: 0; }
.m4-passrow-role { font: 500 12px/1.2 'Inter', sans-serif; color: #8E8E96; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m4-passrow-role span { font-weight: 700; }
.m4-passrow-go { font-size: 20px; line-height: 1; color: #4E4E56; flex-shrink: 0; font-weight: 300; }
/* Formule sur la ligne PassID · 3 variantes (Tweak) */
.m4-rtier { flex-shrink: 0; font: 800 9px/1 'Orbitron', sans-serif; letter-spacing: 0.07em; padding: 4px 7px; border-radius: 999px; }
.m4-rtier.pro { background: linear-gradient(135deg, #E8C96A, #A8853A); color: #1a1206; }
.m4-rtier.start { background: linear-gradient(135deg, #5C9DF5, #3B7DD8); color: #06121f; }
/* Variante A : pastille à droite (avant le chevron) */
.m4-passrow.tier-A .m4-passrow-go { margin-left: 10px; }
/* Variante B : tag en ligne avec le rôle (plus petit) */
.m4-passrow.tier-B .m4-passrow-role .m4-rtier { padding: 3px 6px; font-size: 8.5px; vertical-align: middle; }
/* Variante C : liseré d'avatar coloré + badge d'angle */
.m4-passrow-av { position: relative; }
.m4-passrow.tierav-pro .avatar-ring { box-shadow: 0 0 0 1.5px #CBA23F, 0 0 9px rgba(232,201,106,0.55); }
.m4-passrow.tierav-start .avatar-ring { box-shadow: 0 0 0 1.5px rgba(92,157,245,0.5); }
.m4-avtier { position: absolute; bottom: -1px; right: -2px; font: 800 6px/1 'Orbitron', sans-serif; letter-spacing: 0.01em; padding: 2px 3.5px; border-radius: 999px; border: 1.5px solid #FBFBF9; }
.hm:not(.light) .m4-avtier { border-color: #0C0C0E; }
.m4-avtier.pro { background: linear-gradient(135deg, #F1D67C, #B8923F); color: #1a1206; box-shadow: 0 1px 5px rgba(232,201,106,0.55); }
.m4-avtier.start { background: rgba(92,157,245,0.85); color: #06121f; opacity: 0.72; box-shadow: none; }

/* Bandeau « Upgrade to Professional Status » (upsell PRO) */
.m4-upsell { position: relative; overflow: hidden; margin: 4px 8px 8px; padding: 14px 15px; border-radius: 16px; border: 1px solid rgba(232,201,106,0.45); background: linear-gradient(150deg, rgba(232,201,106,0.14), rgba(232,201,106,0.04) 60%, transparent); }
.hm.light .m4-upsell { background: linear-gradient(150deg, rgba(184,146,63,0.12), rgba(184,146,63,0.03) 60%, transparent); border-color: rgba(184,146,63,0.4); }
.m4-upsell-top { display: flex; align-items: center; gap: 8px; }
.m4-upsell-badge { font: 800 9px/1 'Orbitron', sans-serif; letter-spacing: 0.1em; padding: 4px 7px; border-radius: 999px; background: linear-gradient(135deg, #F1D67C, #B8923F); color: #1a1206; flex-shrink: 0; }
.m4-upsell-top b { font: 700 14.5px/1.2 'Inter', sans-serif; letter-spacing: -0.01em; color: #F2E3B0; }
.hm.light .m4-upsell-top b { color: #6E5618; }
.m4-upsell p { margin: 8px 0 0; font: 450 12px/1.45 'Inter', sans-serif; color: #B8B2A0; }
.hm.light .m4-upsell p { color: #6B6552; }
.m4-upsell-btn { margin-top: 12px; width: 100%; height: 38px; border-radius: 10px; border: none; cursor: pointer; font: 700 13px/1 'Inter', sans-serif; background: linear-gradient(135deg, #F1D67C, #B8923F); color: #1a1206; }
.m4-upsell-btn:active { filter: brightness(0.95); }

/* Carte Amateur (non-PRO) · teinte bleu acier nettement distincte du charbon neutre */
.m4-amateurcard .ob-card {
  background:
    repeating-radial-gradient(circle at 112% -18%, rgba(150,190,255,0.05) 0 1px, transparent 1px 6px),
    linear-gradient(140deg, #20304F 0%, #0C1322 52%, #16243F 100%);
  border-color: rgba(92,157,245,0.5);
  box-shadow:
    inset 0 1.5px 0 rgba(150,190,255,0.18),
    inset 0 -1.5px 0 rgba(0,0,0,0.55),
    inset 0 22px 44px -30px rgba(92,157,245,0.4),
    0 24px 60px rgba(0,0,0,0.55);
}
.hm:not(.light) .m4-avtier { border-color: #0C0C0E; }
.m4-avtier.pro { background: linear-gradient(135deg, #E8C96A, #A8853A); color: #1a1206; }
.m4-avtier.start { background: linear-gradient(135deg, #5C9DF5, #3B7DD8); color: #06121f; }

/* ─── Feuille « Pass ID » (carte d'identité vérifiée d'un membre) ─── */
.m4-passsheet { z-index: 90; }
.m4-passcard { position: relative; overflow: hidden; border-radius: 18px; padding: 16px; margin-bottom: 16px; background: linear-gradient(150deg, #14141A 0%, #1C1D24 55%, #161620 100%); border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 12px 32px rgba(0,0,0,0.40); }
.m4-passcard::before { content: ''; position: absolute; top: -45%; right: -18%; width: 62%; height: 130%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--hit,#00C49A) 24%, transparent), transparent 70%); pointer-events: none; }
.m4-passcard-head { display: flex; align-items: flex-start; justify-content: space-between; position: relative; }
.m4-passcard-doc b { display: block; font: 800 14px/1 'Orbitron', sans-serif; letter-spacing: 0.06em; color: #F4F4F7; }
.m4-passcard-doc span { display: block; margin-top: 4px; font: 500 9px/1.3 'Inter', sans-serif; letter-spacing: 0.05em; color: #8E8E96; text-transform: uppercase; }
.m4-passcard-logo { height: 13px; opacity: 0.92; }
.m4-passcard-body { display: flex; align-items: center; gap: 13px; margin-top: 16px; position: relative; }
.m4-passcard-av { flex-shrink: 0; }
.m4-passcard-id { min-width: 0; }
.m4-passcard-name { display: flex; align-items: center; gap: 7px; font: 700 17px/1.1 'Inter', sans-serif; letter-spacing: -0.01em; color: #F4F4F7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m4-passcard-v { width: 16px; height: 16px; border-radius: 50%; background: var(--acc-bright,#00C49A); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.m4-passcard-role { margin-top: 4px; font: 550 12.5px/1.2 'Inter', sans-serif; color: #9A9AA2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m4-passcard-role span { font-weight: 700; }
.m4-passcard-numrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 16px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,0.10); position: relative; }
.m4-passcard-lbl { font: 600 8.5px/1 'Inter', sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: #71717A; margin-bottom: 6px; }
.m4-passcard-num { font: 700 15px/1 'Orbitron', sans-serif; letter-spacing: 0.04em; color: var(--acc-bright,#00C49A); }
.m4-passcard-badge { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; background: var(--acc-bright,#00C49A); color: #04130F; font: 800 9px/1 'Orbitron', sans-serif; letter-spacing: 0.07em; border-radius: 999px; padding: 6px 9px; }
.m4-passqr { display: flex; align-items: center; gap: 14px; padding: 13px; border-radius: 16px; background: #101013; border: 1px solid rgba(255,255,255,0.07); margin-bottom: 16px; }
.m4-passqr svg { border-radius: 8px; flex-shrink: 0; }
.m4-passqr-meta { min-width: 0; }
.m4-passqr-num { font: 700 13px/1 'Orbitron', sans-serif; letter-spacing: 0.04em; color: #F4F4F7; }
.m4-passqr-hint { margin-top: 7px; font: 450 11px/1.45 'Inter', sans-serif; color: #8E8E96; }
.m4-passnote { display: flex; align-items: flex-start; gap: 7px; margin-top: 14px; font: 450 11px/1.5 'Inter', sans-serif; color: #8E8E96; }
.m4-passnote svg { flex-shrink: 0; margin-top: 2px; opacity: 0.8; }
.m4-tierpill { display: inline-flex; align-items: center; font: 800 11px/1 'Orbitron', sans-serif; letter-spacing: 0.1em; padding: 6px 12px; border-radius: 999px; border: none; background: linear-gradient(135deg, #5C9DF5, #3B7DD8); color: #06121f; box-shadow: 0 2px 12px rgba(92,157,245,0.30); }
.m4-tierpill.pro { background: linear-gradient(135deg, #E8C96A, #A8853A); color: #1a1206; box-shadow: 0 2px 12px rgba(232,201,106,0.30); }
.m4-passid-row span:first-child { font-weight: 700; color: #C7C7CF; }