/* ============================================================
   AIDE CONTEXTUELLE (M4) — bouton « ? » + panneau flottant
   ============================================================
   Fichier autonome, chargé sur TOUTES les pages (admin, membres, public).
   Les 3 espaces n'ont pas le même jeu de jetons CSS (admin = --bo-*,
   public/membres = --accent/--surface/...) : les couleurs sont donc
   redéfinies ici, une seule fois, via des chaînes de repli var(A, var(B, litéral))
   qui retombent sur le bon jeton selon l'espace, sans dépendre d'aucun des deux.
   Aucune dépendance externe. Thème clair/sombre suivi automatiquement
   (mêmes attributs [data-theme] que le reste du site). */

:root {
  --actx-accent:      var(--bo-accent, var(--accent, #B8834A));
  --actx-accent-hov:  var(--bo-accent-strong, var(--accent-hover, #9A6B38));
  --actx-accent-ink:  var(--bo-accent-ink, #241A0E);
  --actx-bg:          var(--bo-card, var(--surface, #1A1A1D));
  --actx-border:      var(--bo-border, var(--border, #2A2A2E));
  --actx-text:        var(--bo-text, var(--text-primary, #F5F5F0));
  --actx-muted:       var(--bo-muted, var(--text-secondary, #A8A8A0));
  --actx-shadow:      0 12px 40px rgba(0,0,0,.35);
  --actx-radius:      14px;
}
[data-theme="light"] {
  --actx-shadow: 0 12px 32px rgba(0,0,0,.16);
}

/* --- Bouton flottant ------------------------------------------------- */
.actx-btn {
  position: fixed;
  left: 20px;
  bottom: 20px;
  /* Volontairement SOUS les modales admin (.mt-modal, z-index 50) et le
     tiroir de nav mobile (.bo-shell__scrim, 150-200) et les toasts (400) :
     le bouton s'efface derrière tout élément déjà au premier plan plutôt
     que de le gêner — cf. exigence « non gênant pour les commandes
     existantes ». Reste au-dessus du contenu de page ordinaire. */
  z-index: 45;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: none;
  background: var(--actx-accent);
  color: var(--actx-accent-ink);
  font: 700 1.15rem/1 var(--font-sans, system-ui, sans-serif);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--actx-shadow);
  transition: transform .15s ease, background .15s ease;
}
.actx-btn:hover,
.actx-btn:focus-visible { background: var(--actx-accent-hov); transform: translateY(-2px); }
.actx-btn:focus-visible { outline: 3px solid var(--actx-accent); outline-offset: 3px; }
.actx-btn[aria-expanded="true"] { transform: scale(0.94); }

/* Ne gêne jamais un autre élément flottant déjà présent (ex. bouton « haut de
   page » éventuel) : décalage automatique si le site en ajoute un jour au
   même coin — prévu, pas activé tant qu'aucun autre bouton n'existe. */

/* --- Panneau ----------------------------------------------------------- */
.actx-panel {
  position: fixed;
  left: 20px;
  bottom: 78px;
  z-index: 44;
  width: min(360px, calc(100vw - 40px));
  max-height: min(480px, calc(100vh - 120px));
  background: var(--actx-bg);
  color: var(--actx-text);
  border: 1px solid var(--actx-border);
  border-radius: var(--actx-radius);
  box-shadow: var(--actx-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px) scale(.98);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.actx-panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.actx-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--actx-border);
  flex: none;
}
.actx-panel__title {
  font: 600 .95rem/1.35 var(--font-sans, system-ui, sans-serif);
  margin: 0;
}
.actx-panel__title small {
  display: block;
  font-weight: 400;
  color: var(--actx-muted);
  font-size: .75rem;
  margin-top: 2px;
}
.actx-panel__close {
  background: none;
  border: none;
  color: var(--actx-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  flex: none;
}
.actx-panel__close:hover,
.actx-panel__close:focus-visible { color: var(--actx-text); background: var(--actx-border); }
.actx-panel__close:focus-visible { outline: 2px solid var(--actx-accent); outline-offset: 1px; }

.actx-panel__body {
  padding: 12px 14px;
  overflow-y: auto;
  flex: 1 1 auto;
  font-size: .875rem;
  line-height: 1.55;
}
.actx-panel__body p { margin: 0 0 10px; }
.actx-panel__body p:last-child { margin-bottom: 0; }

/* Rendu markdown-léger M3 injecté dans le panneau (réponse + extraits) */
.actx-reponse { margin-bottom: 12px; }
.actx-reponse :last-child { margin-bottom: 0; }
.actx-panel__body strong { color: var(--actx-text); font-weight: 600; }
.actx-panel__body ul,
.actx-panel__body ol { margin: 0 0 10px; padding-left: 1.15em; }
.actx-panel__body li { margin: 0 0 4px; }
.actx-panel__body a.aide-lien { color: var(--actx-accent); text-decoration: none; }
.actx-panel__body a.aide-lien:hover { text-decoration: underline; }
.actx-panel__body img,
.actx-panel__body .aide-capture { max-width: 100%; height: auto; border-radius: 6px; }
.actx-list__extrait strong { color: var(--actx-muted); font-weight: 600; }

.actx-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.actx-list a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--actx-text);
  text-decoration: none;
  border: 1px solid transparent;
}
.actx-list a:hover,
.actx-list a:focus-visible {
  background: color-mix(in srgb, var(--actx-accent) 12%, transparent);
  border-color: var(--actx-accent);
}
.actx-list a:focus-visible { outline: 2px solid var(--actx-accent); outline-offset: 1px; }
.actx-list__q { display: block; font-weight: 600; font-size: .85rem; }
.actx-list__extrait { display: block; color: var(--actx-muted); font-size: .78rem; margin-top: 2px; }

.actx-more { color: var(--actx-muted); font-size: .78rem; margin: 8px 0 0; }

.actx-panel__foot {
  flex: none;
  border-top: 1px solid var(--actx-border);
  padding: 10px 14px;
}
.actx-panel__foot a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--actx-accent);
  font-weight: 600;
  font-size: .82rem;
  text-decoration: none;
}
.actx-panel__foot a:hover,
.actx-panel__foot a:focus-visible { text-decoration: underline; }

.actx-loading,
.actx-empty {
  color: var(--actx-muted);
  font-size: .85rem;
}

/* --- Mobile : plein-largeur en bas d'écran, pas de débordement --------- */
@media (max-width: 560px) {
  .actx-btn { left: 14px; bottom: 14px; width: 46px; height: 46px; }
  .actx-panel {
    left: 10px;
    right: 10px;
    bottom: 70px;
    width: auto;
    max-height: min(70vh, 520px);
  }
}

/* --- Respect des animations réduites ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .actx-btn, .actx-panel { transition: none; }
}