/* ============================================================
   G6M ReactPlus Enrich V484 — actionBar reaction pill (replaces J'aime)
   Complements ThemeHouse ReactPlus 1.2 — no TH/XF core edits
   ============================================================ */

:root {
  --g6m-rpe-bg: rgba(22, 22, 30, 0.85);
  --g6m-rpe-border: rgba(168, 85, 247, 0.25);
  --g6m-rpe-border-hot: rgba(192, 132, 252, 0.55);
  --g6m-rpe-glow: rgba(168, 85, 247, 0.35);
  --g6m-rpe-radius: 999px;
  --g6m-rpe-gap: 8px;
  --g6m-rpe-btn: 28px;
  --g6m-rpe-h: 40px;
  --g6m-rpe-ease: 0.25s ease;
}

/* ── Kill legacy Like / J'aime action-bar button ── */
html body .actionBar-action--react,
html body .actionBar-set--external > .reaction:not(.g6m-rp-bar__btn),
html body .actionBar-set--external > a.reaction--imageHidden:not(.g6m-rp-bar__btn),
html body .actionBar-set--external > a[data-xf-click="reaction"],
html body .message-actionBar .actionBar-action--react {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
}

/* Keep external action row on ONE line */
html body .message-actionBar,
html body .actionBar {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
}

html body .actionBar-set--external,
html body .actionBar-set--internal {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

/* Slot inside actionBar */
html body .g6m-rp-bar-slot,
html body .g6m-rp-bar-slot--actionBar {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: min(100%, 28rem) !important;
  vertical-align: middle !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
}

/* Premium pill */
html body .g6m-rp-bar {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--g6m-rpe-gap) !important;
  height: var(--g6m-rpe-h) !important;
  min-height: var(--g6m-rpe-h) !important;
  width: max-content !important;
  max-width: 100% !important;
  padding: 0 16px !important;
  border-radius: var(--g6m-rpe-radius) !important;
  border: 1px solid var(--g6m-rpe-border) !important;
  background: var(--g6m-rpe-bg) !important;
  background-image: linear-gradient(135deg, rgba(168, 85, 247, 0.12), transparent 55%) !important;
  backdrop-filter: blur(12px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.15) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 6px 18px rgba(0, 0, 0, 0.25) !important;
  transition:
    border-color var(--g6m-rpe-ease),
    box-shadow var(--g6m-rpe-ease),
    transform var(--g6m-rpe-ease) !important;
}

html body .g6m-rp-bar:hover {
  border-color: var(--g6m-rpe-border-hot) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 24px rgba(168, 85, 247, 0.28),
    0 0 18px rgba(168, 85, 247, 0.2) !important;
}

html body .g6m-rp-bar__track {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: var(--g6m-rpe-gap) !important;
  overflow-x: auto !important;
  max-width: 100% !important;
  scrollbar-width: none !important;
}

html body .g6m-rp-bar__track::-webkit-scrollbar {
  display: none !important;
}

html body .g6m-rp-bar__item {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
}

html body .g6m-rp-bar__btn,
html body .g6m-rp-bar .reaction.g6m-rp-bar__btn,
html body .g6m-rp-bar a.reaction {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--g6m-rpe-btn) !important;
  height: var(--g6m-rpe-btn) !important;
  min-width: var(--g6m-rpe-btn) !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  transition: transform var(--g6m-rpe-ease), box-shadow var(--g6m-rpe-ease), background var(--g6m-rpe-ease) !important;
  text-decoration: none !important;
  line-height: 1 !important;
}

html body .g6m-rp-bar--sm { --g6m-rpe-btn: 24px; --g6m-rpe-h: 36px; }
html body .g6m-rp-bar--md { --g6m-rpe-btn: 28px; }
html body .g6m-rp-bar--lg { --g6m-rpe-btn: 32px; --g6m-rpe-h: 44px; }

html body .g6m-rp-bar .reaction-image,
html body .g6m-rp-bar .reaction-sprite,
html body .g6m-rp-bar .reaction--imageHidden > img.reaction-image {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: calc(var(--g6m-rpe-btn) - 4px) !important;
  height: calc(var(--g6m-rpe-btn) - 4px) !important;
  max-width: none !important;
  object-fit: contain !important;
}

html body .g6m-rp-bar .reaction-text,
html body .g6m-rp-bar .js-reactionText {
  display: none !important;
}

html body .g6m-rp-bar .reaction > i,
html body .g6m-rp-bar .reaction > i::before {
  display: none !important;
}

html body .g6m-rp-bar--anim .g6m-rp-bar__btn:hover,
html body .g6m-rp-bar--anim a.reaction:hover,
html body .g6m-rp-bar--hover .g6m-rp-bar__btn:hover,
html body .g6m-rp-bar--hover a.reaction:hover {
  transform: scale(1.18) !important;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.45) !important;
  background: rgba(168, 85, 247, 0.12) !important;
  z-index: 2 !important;
}

html body .g6m-rp-bar__btn.is-active,
html body .g6m-rp-bar a.reaction.is-active,
html body .g6m-rp-bar a.has-reaction {
  background: rgba(168, 85, 247, 0.18) !important;
  border-color: rgba(192, 132, 252, 0.4) !important;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.3) !important;
}

html body .g6m-rp-bar__more {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 22px !important;
  height: 22px !important;
  color: #c4c4d4 !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.05em !important;
  opacity: 0.85 !important;
  user-select: none !important;
}

html body .g6m-rp-bar__item.is-favorite .g6m-rp-bar__btn {
  box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.45) !important;
}

/* ── ThemeHouse advanced picker popup polish ── */
@keyframes g6mRpePickerIn484 {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

html body .tooltip--thReactPlus,
html body .tooltip.tooltip--threactplus,
html body .tooltip--reaction,
html body [class*="th-reactplus"] .tooltip-content,
html body .tooltip--basic.tooltip--thReactPlusAdvanced,
html body .thReactPlus-reactionTooltip,
html body .tooltip--noninteractive.tooltip--thReactPlus {
  animation: g6mRpePickerIn484 180ms ease-out both !important;
}

html body .tooltip--thReactPlus .tooltip-content,
html body .tooltip.tooltip--thReactPlusAdvanced .tooltip-content,
html body .thReactPlus-reactionTooltip,
html body .tooltip-content.tooltip-content--thReactPlus,
html body .menu--reaction,
/* CORRIGE 2026-08-09 : l'accolade ouvrante manquait apres ce selecteur.
   Consequence : le navigateur poursuivait la lecture du selecteur sur les
   declarations suivantes, perdait CE bloc ET le suivant, et la feuille etait
   ecartee du regroupement CSS (solde d'accolades non nul). */
html body .block[data-xf-init*="th-reactplus"] .block-container {
  background: rgba(16, 16, 24, 0.92) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
  border-radius: 16px !important;
  box-shadow: 0 14px 40px rgba(168, 85, 247, 0.22), 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

/* Hide leftover footer bar slot if any outside actionBar (safety) */
html body .message-footer > .g6m-rp-bar-slot:not(.g6m-rp-bar-slot--actionBar),
html body .message-content + .g6m-rp-bar-slot,
html body .reactionsBar + .g6m-rp-bar-slot,
html body .g6m-rp-bar-slot:not(.g6m-rp-bar-slot--actionBar):not(.js-g6mRpBarSlot) {
  /* keep actionBar slots only — old placements get compacted */
}

html body footer.message-footer .g6m-rp-bar-slot:not(.g6m-rp-bar-slot--actionBar) {
  display: none !important;
}

/* reactions summary list stays (counters), no duplicate trigger */
html body .reactionsBar:not(.is-active):empty,
html body .reactionsBar:not(.is-active):not(:has(*)) {
  display: none !important;
}

/* Responsive: keep single line, allow horizontal scroll on pill */
@media (max-width: 720px) {
  html body .message-actionBar,
  html body .actionBar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: thin !important;
  }

  html body .g6m-rp-bar {
    padding: 0 12px !important;
    --g6m-rpe-btn: 26px !important;
    --g6m-rpe-h: 38px !important;
  }

  html body .g6m-rp-bar-slot--actionBar {
    max-width: min(70vw, 18rem) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .g6m-rp-bar,
  html body .g6m-rp-bar__btn,
  html body .g6m-rp-bar a.reaction {
    transition: none !important;
    animation: none !important;
  }
}


/* ===========================================================================
   G6M_REACTPLUS_ICONES_V466 — les 3 reactions a icone etaient invisibles
   ---------------------------------------------------------------------------
   Sur les 9 reactions de la barre, seules les 6 premieres s'affichaient. Les
   trois suivantes — « Mod valide », « Bug signale », « Premium » — occupaient
   bien leur emplacement de 28px mais ne peignaient rien : d'ou le grand vide
   entre la derniere emoji et le bouton « ... ».

   Ce ne sont pas des images mais des icones FontAwesome. XenForo pose alors la
   classe `reaction--imageHidden` sur le lien, et ReactPlus masque le porteur de
   l'icone :

       .reaction.reaction--imageHidden .th_reactplus_reaction-identifier
       { display: none }                     (css.php, coeur + ReactPlus)

   Dans le balisage de notre barre, l'icone est justement DANS ce span — le
   `<i></i>` qui devrait la porter est vide. La regle du coeur efface donc la
   seule chose a afficher.

   Piege de diagnostic : le SVG existe, sa largeur calculee vaut bien 1em, mais
   son rectangle mesure 0x0 parce qu'un ancetre est en `display: none`. On croit
   a un sprite d'icones incomplet et on va chercher du cote de
   `data/local/icons/*.svg` pour rien.

   Portee limitee a `.g6m-rp-bar` : ailleurs, le balisage d'origine de ReactPlus
   met l'icone au bon endroit et cette regle n'a pas lieu d'etre.
   =========================================================================== */

html body .g6m-rp-bar .reaction.reaction--imageHidden .th_reactplus_reaction-identifier {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 100% !important;
}

html body .g6m-rp-bar .reaction.reaction--imageHidden .th_reactplus_reaction-identifier .fa--xf {
	font-size: 17px !important;
	line-height: 1 !important;
}

html body .g6m-rp-bar .reaction.reaction--imageHidden .th_reactplus_reaction-identifier .fa--xf svg {
	width: 1em !important;
	height: 1em !important;
}