/* =====================================================================
 *  XoXo Community — « Qui est en ligne ? » — Feuille de styles
 *  Fichier asset externe (hors limite 64 Ko Fluent Snippets)
 *  Version : 2.0.8  ·  Piloté par le snippet SN-06 (XOXO_ONLINE_VERSION)
 *  v2.0.1 : fix infobulle (suppression du transform persistant sur .xow-avatar)
 *  v2.0.2 : interrupteur mode discret — couleurs inversées (vert = activé)
 *  v2.0.3 : verrouillage forme du toggle (pilule) sur les pages de groupe
 *  v2.0.4 : repositionnement panneau/bouton flottants (anti-chevauchement)
 *  v2.0.5 : mode sombre piloté par le SITE (sélecteurs) au lieu de l'OS
 *  v2.0.6 : déclencheur d'en-tête « En ligne » + fix fond du bouton flottant
 *  v2.0.7 : bouton flottant bas-droite (mobile), safe-area, visibilité responsive
 *  v2.0.8 : visibilité du bouton flottant par point de rupture CSS (≤1024px = mobile)
 *  Emplacement attendu : wp-content/uploads/xoxo-online/xoxo-online.css
 *  Scopé strictement sur .xoxo-online-widget — cohérence couleurs SN-04.
 * ===================================================================== */

/* ---------- Thème (variables) — CLAIR par défaut --------------------
   Tout le widget (texte, fonds, bordures, panneau flottant, modale) est piloté
   par ces 8 variables. Le panneau flottant est inclus car il n'est pas lui-même
   .xoxo-online-widget (la modale, si — elle porte la classe). */
:is(.xoxo-online-widget,.xoxo-online-floatpanel){
    --xow-bg:#ffffff;
    --xow-fg:#333333;
    --xow-muted:#555555;
    --xow-faint:#999999;
    --xow-line:#e5e5e5;
    --xow-card:#ffffff;
    --xow-soft:rgba(0,0,0,.03);
    --xow-pink:#ff00aa;
    --xow-violet:#9d3cff;
    --xow-grad:linear-gradient(90deg,#ff00aa 0%,#9d3cff 100%);
    --xow-tip-bg:#100820;
}
.xoxo-online-widget{
    position:relative;
    font-family:'Inter','Helvetica Neue',Arial,sans-serif;
    color:var(--xow-fg);
}
.xoxo-online-widget *{ box-sizing:border-box; }

/* ---------- Mode SOMBRE piloté par le SITE (et non par l'OS) ---------
   v2.0.5 — Le widget suit désormais le bouton clair/sombre du thème SocialV
   (avant : il suivait le mode de l'OS via prefers-color-scheme → texte à la
   mauvaise couleur si OS et site divergeaient).
   ⚠️ La liste ci-dessous couvre les signaux "mode sombre" les plus répandus.
   Si le mode sombre de TON site n'est pas détecté, il suffit d'ajouter son
   sélecteur à cette liste (voir instructions fournies). */
:is(html[data-bs-theme="dark"],
    html[data-theme="dark"],
    body[data-theme="dark"],
    body.dark-mode,
    body.dark,
    body.dark-theme,
    body.theme-dark,
    body.iq-dark,
    body.night-mode,
    body.is-dark,
    .dark-layout,
    .is-dark-mode) :is(.xoxo-online-widget,.xoxo-online-floatpanel){
    --xow-bg:#15101d;
    --xow-fg:#ece8f3;
    --xow-muted:#b9b2c7;
    --xow-faint:#8a8398;
    --xow-line:#3a3346;
    --xow-card:#1d1726;
    --xow-soft:rgba(255,255,255,.04);
    --xow-tip-bg:#241a36;
}

/* ---------- Barre d'outils (recherche + filtres + actions) ---------- */
.xoxo-online-widget .xoxo-online-toolbar{
    display:flex; flex-direction:column; gap:8px; margin:0 0 12px;
}
.xoxo-online-widget .xoxo-online-searchwrap{ position:relative; }
.xoxo-online-widget .xow-search-input{
    width:100%; padding:6px 28px 6px 10px;
    border:1px solid var(--xow-line); border-radius:999px;
    background:var(--xow-card); color:var(--xow-fg);
    font-size:12px; font-family:inherit; line-height:1.3;
    outline:none; transition:border-color .2s ease, box-shadow .2s ease;
}
.xoxo-online-widget .xow-search-input:focus{
    border-color:var(--xow-pink);
    box-shadow:0 0 0 3px rgba(255,0,170,.12);
}
.xoxo-online-widget .xow-search-clear{
    position:absolute; right:8px; top:50%; transform:translateY(-50%);
    border:none; background:none; cursor:pointer; color:var(--xow-faint);
    font-size:15px; line-height:1; padding:2px; display:none;
}
.xoxo-online-widget .xow-search-input:not(:placeholder-shown) ~ .xow-search-clear{ display:block; }

/* --- Filter pills (verrouillage CSS anti-override SocialV/BP) -------- */
body .xoxo-online-widget .xoxo-online-filters{
    display:flex !important; flex-wrap:wrap !important; gap:6px !important;
    margin:0 !important; padding:0 !important;
}
body .xoxo-online-widget .xow-filter,
body .xoxo-online-widget .xow-geo-toggle{
    appearance:none !important; -webkit-appearance:none !important;
    border:1px solid var(--xow-line) !important; background:var(--xow-card) !important;
    color:var(--xow-muted) !important;
    font-family:'Inter','Helvetica Neue',Arial,sans-serif !important;
    font-size:11px !important; font-weight:600 !important; letter-spacing:.02em !important;
    text-transform:none !important; text-decoration:none !important; text-shadow:none !important;
    padding:4px 10px !important; margin:0 !important; border-radius:999px !important;
    cursor:pointer !important; transition:all .2s ease !important; line-height:1.3 !important;
    width:auto !important; height:auto !important;
    min-width:0 !important; min-height:0 !important; max-width:none !important; max-height:none !important;
    box-shadow:none !important; box-sizing:border-box !important;
    text-align:center !important; vertical-align:baseline !important; white-space:nowrap !important;
    display:inline-flex !important; align-items:center !important; gap:4px !important;
}
body .xoxo-online-widget .xow-filter:hover,
body .xoxo-online-widget .xow-geo-toggle:hover{
    border-color:var(--xow-pink) !important; color:var(--xow-pink) !important;
}
body .xoxo-online-widget .xow-filter.is-active,
body .xoxo-online-widget .xow-geo-toggle.is-active{
    background:var(--xow-grad) !important; border-color:transparent !important;
    color:#fff !important; box-shadow:0 4px 12px -2px rgba(255,0,170,.35) !important;
}
body .xoxo-online-widget .xow-filter.is-active:hover,
body .xoxo-online-widget .xow-geo-toggle.is-active:hover{
    background:var(--xow-grad) !important; color:#fff !important; border-color:transparent !important;
}
.xoxo-online-widget .xoxo-online-actions{
    display:flex; flex-wrap:wrap; gap:6px; align-items:center;
}

/* --- Interrupteur "Apparaître hors ligne" (mode invisible) ---------- */
.xoxo-online-widget .xow-visibility{
    display:flex; align-items:center; gap:7px;
    font-size:11px; color:var(--xow-muted); margin-left:auto;
    user-select:none;
}
/* v2.0.2 — Couleurs inversées : convention "vert = activé".
   off (visible, aria-pressed=false) = gris + knob à gauche
   on  (mode discret, aria-pressed=true) = vert + knob à droite
   v2.0.3 — VERROUILLAGE forme (body + !important) : sur les pages de groupe,
   le CSS bouton de SocialV/BP écrasait border-radius/dimensions → rendu en
   rectangle arrondi au lieu d'une pilule. */
body .xoxo-online-widget .xow-visibility-toggle{
    appearance:none !important; -webkit-appearance:none !important;
    position:relative !important;
    width:34px !important; height:18px !important;
    min-width:34px !important; max-width:34px !important;
    min-height:18px !important; max-height:18px !important;
    border:none !important; border-radius:999px !important;
    padding:0 !important; margin:0 !important; flex:0 0 auto !important;
    box-sizing:border-box !important; line-height:1 !important; box-shadow:none !important;
    cursor:pointer !important; background:#9aa0aa; transition:background .2s ease;
}
body .xoxo-online-widget .xow-visibility-toggle::after{
    content:"" !important; position:absolute !important; top:2px !important; left:2px !important;
    width:14px !important; height:14px !important; border-radius:50% !important; background:#fff !important;
    transition:transform .2s ease !important; box-shadow:0 1px 2px rgba(0,0,0,.3) !important;
}
body .xoxo-online-widget .xow-visibility-toggle[aria-pressed="true"]{ background:#22c55e; }
body .xoxo-online-widget .xow-visibility-toggle[aria-pressed="true"]::after{ transform:translateX(16px) !important; }
.xoxo-online-widget .xow-visibility-toggle.is-busy{ opacity:.6; cursor:wait; }

/* ---------- Grille 3 colonnes + scroll vertical interne ------------- */
.xoxo-online-widget .xoxo-online-content{ position:relative; }
.xoxo-online-widget .xoxo-online-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:14px 10px;
    overflow-y:auto; overflow-x:hidden; padding:4px 4px 12px 4px;
    scrollbar-width:thin; scrollbar-color:rgba(255,0,170,.4) transparent;
}
.xoxo-online-widget .xoxo-online-grid::-webkit-scrollbar{ width:6px; }
.xoxo-online-widget .xoxo-online-grid::-webkit-scrollbar-track{ background:transparent; }
.xoxo-online-widget .xoxo-online-grid::-webkit-scrollbar-thumb{ background:rgba(255,0,170,.4); border-radius:6px; }
.xoxo-online-widget .xoxo-online-grid::-webkit-scrollbar-thumb:hover{ background:var(--xow-pink); }

/* ---------- Avatar ------------------------------------------------- */
/* v2.0.1 — Animation en OPACITÉ SEULE. Un transform persistant (même scale(1)
   via fill-mode `both`) ferait de .xow-avatar le référentiel des descendants
   position:fixed → l'infobulle (fixed) partait hors écran. Pas de transform ici. */
.xoxo-online-widget .xow-avatar{
    position:relative; display:flex; flex-direction:column; align-items:center; color:inherit;
    animation:xow-fade-in .35s ease;
}
.xoxo-online-widget .xow-avatar.xow-leaving{ animation:xow-fade-out .35s ease forwards; }
@keyframes xow-fade-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes xow-fade-out{ from{ opacity:1; } to{ opacity:0; } }
.xoxo-online-widget .xow-avatar-link{
    display:flex; flex-direction:column; align-items:center;
    text-decoration:none !important; color:inherit !important;
    transition:transform .2s ease; width:100%;
}
.xoxo-online-widget .xow-avatar:hover .xow-avatar-link{ transform:translateY(-2px); }
.xoxo-online-widget .xow-avatar-frame{
    position:relative; width:60px; height:60px; flex:0 0 60px; aspect-ratio:1/1;
    border-radius:50%; border:3px solid #ccc; background:var(--xow-card);
    box-sizing:border-box; overflow:visible; isolation:isolate; transition:box-shadow .25s ease;
}
.xoxo-online-widget .xow-avatar:hover .xow-avatar-frame{ box-shadow:0 6px 18px -4px rgba(0,0,0,.25); }
body .xoxo-online-widget .xow-avatar-clip{
    position:absolute !important; top:0 !important; right:0 !important; bottom:0 !important; left:0 !important;
    border-radius:50% !important; clip-path:circle(50%) !important;
    background-color:#f0f0f0 !important; background-size:cover !important;
    background-position:center center !important; background-repeat:no-repeat !important;
    overflow:hidden !important; z-index:0 !important; display:block !important;
}
.xoxo-online-widget .xow-avatar-clip img{ display:none !important; }

/* --- Liseré coloré par type membre (cohérent SN-04) ---------------- */
.xoxo-online-widget .member-type-un-homme        .xow-avatar-frame{ border-color:#1a78bd; }
.xoxo-online-widget .member-type-une-femme       .xow-avatar-frame{ border-color:#ff00aa; }
.xoxo-online-widget .member-type-un-couple       .xow-avatar-frame{ border-color:#952792; }
.xoxo-online-widget .member-type-une-transgenre  .xow-avatar-frame{ border-color:#37b54a; }
.xoxo-online-widget .member-type-professionnel   .xow-avatar-frame{ border-color:#ed1c24; }
.xoxo-online-widget .member-type-un-vendeur      .xow-avatar-frame{ border-color:#f15a29; }
.xoxo-online-widget .member-type-un-trouple      .xow-avatar-frame{ border-color:#00fff6; }
.xoxo-online-widget .member-type-un-restaurateur .xow-avatar-frame{ border-color:#e2dacb; }
.xoxo-online-widget .member-type-une-association .xow-avatar-frame{ border-color:#a9abae; }
.xoxo-online-widget .member-type-un-bailleur     .xow-avatar-frame{ border-color:#ffde00; }
.xoxo-online-widget .member-type-administrateur  .xow-avatar-frame{ border-color:#000000; }
.xoxo-online-widget .member-type-un-dj .xow-avatar-frame{
    border:3px solid transparent;
    background:linear-gradient(var(--xow-card),var(--xow-card)) padding-box,
               linear-gradient(135deg,#00156d 0%,#FF00AA 100%) border-box;
    -webkit-background-clip:padding-box,border-box; background-clip:padding-box,border-box;
}

/* --- Badges (online + nouveau) ------------------------------------- */
.xoxo-online-widget .xow-online-dot{
    position:absolute; bottom:1px; right:1px; width:12px; height:12px; border-radius:50%;
    background:#22c55e; border:2px solid var(--xow-bg); z-index:2;
    box-shadow:0 0 0 1px rgba(34,197,94,.25),0 0 8px rgba(34,197,94,.5);
    animation:xow-pulse 2.2s ease-in-out infinite;
}
@keyframes xow-pulse{
    0%,100%{ box-shadow:0 0 0 1px rgba(34,197,94,.25),0 0 6px rgba(34,197,94,.4); }
    50%{ box-shadow:0 0 0 1px rgba(34,197,94,.35),0 0 14px rgba(34,197,94,.75); }
}
.xoxo-online-widget .xow-new-badge{
    position:absolute; top:-2px; right:-2px; width:18px; height:18px; border-radius:50%;
    background:linear-gradient(135deg,#ff00aa 0%,#9d3cff 100%); color:#fff;
    font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center;
    border:1.5px solid var(--xow-bg); z-index:2; box-shadow:0 2px 6px rgba(255,0,170,.45);
}
.xoxo-online-widget .xow-name{
    display:block; margin-top:6px; font-size:11px; line-height:1.2; color:var(--xow-muted);
    text-align:center; max-width:84px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---------- Tooltip riche ------------------------------------------ */
.xoxo-online-widget .xow-tooltip{
    position:fixed; top:0; left:0; width:160px; background:var(--xow-tip-bg); color:#fff;
    padding:8px 10px; border-radius:10px;
    box-shadow:0 10px 24px -6px rgba(255,0,170,.4),0 6px 16px rgba(0,0,0,.45);
    z-index:99999; opacity:0; pointer-events:none; transform:translateY(4px);
    transition:opacity .08s ease, transform .08s ease; font-size:11px; text-align:left; line-height:1.35;
}
.xoxo-online-widget .xow-tooltip::after{
    content:""; position:absolute; bottom:-5px; left:50%; transform:translateX(-50%);
    border:5px solid transparent; border-top-color:var(--xow-tip-bg); border-bottom-width:0;
}
.xoxo-online-widget .xow-tooltip.xow-tooltip--below::after{
    bottom:auto; top:-5px; border-top-color:transparent; border-top-width:0;
    border-bottom-color:var(--xow-tip-bg); border-bottom-width:5px;
}
.xoxo-online-widget .xow-tooltip.is-visible{ opacity:1; pointer-events:auto; transform:translateY(0); }
.xoxo-online-widget .xow-tip-name{ font-weight:700; font-size:12px; margin-bottom:1px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.xoxo-online-widget .xow-tip-type{ font-size:10px; opacity:.7; margin-bottom:3px; }
.xoxo-online-widget .xow-tip-city{ display:flex; align-items:center; gap:3px; font-size:10px; opacity:.8; margin-bottom:6px; }
.xoxo-online-widget .xow-tip-actions{ display:flex; gap:5px; }

/* Boutons tooltip : verrouillage anti-override (body + !important) */
body .xoxo-online-widget .xow-tip-btn,
body .xoxo-online-widget .xow-tip-wink{
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    gap:4px !important; flex:1 1 auto !important;
    width:auto !important; min-width:0 !important; max-width:none !important;
    height:auto !important; min-height:0 !important; max-height:none !important;
    padding:4px 9px !important; margin:0 !important;
    border:0 !important; border-radius:999px !important; box-shadow:none !important;
    color:#fff !important; font-family:'Inter','Helvetica Neue',Arial,sans-serif !important;
    font-size:10px !important; font-weight:700 !important; line-height:1.3 !important;
    letter-spacing:normal !important; text-transform:none !important; text-decoration:none !important;
    text-shadow:none !important; text-align:center !important; white-space:nowrap !important;
    vertical-align:middle !important; float:none !important; box-sizing:border-box !important;
    cursor:pointer !important; transition:transform .12s ease, filter .12s ease !important;
}
body .xoxo-online-widget .xow-tip-btn{ background:var(--xow-grad) !important; }
body .xoxo-online-widget .xow-tip-wink{ background:linear-gradient(90deg,#ff8a00 0%,#ff00aa 100%) !important; }
body .xoxo-online-widget .xow-tip-btn svg,
body .xoxo-online-widget .xow-tip-wink svg{ flex:0 0 auto !important; width:12px !important; height:12px !important; margin:0 !important; vertical-align:middle !important; }
body .xoxo-online-widget .xow-tip-btn:hover,
body .xoxo-online-widget .xow-tip-wink:hover{ transform:scale(1.04) !important; filter:saturate(1.15) !important; color:#fff !important; }

/* ---------- Skeleton (chargement) --------------------------------- */
.xoxo-online-widget .xow-skel{
    width:60px; height:60px; border-radius:50%; margin:0 auto;
    background:linear-gradient(100deg, var(--xow-soft) 30%, rgba(255,0,170,.10) 50%, var(--xow-soft) 70%);
    background-size:200% 100%; animation:xow-shimmer 1.2s ease-in-out infinite;
}
.xoxo-online-widget .xow-skel-wrap{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.xoxo-online-widget .xow-skel-line{ width:70%; height:8px; border-radius:4px; background:var(--xow-soft); }
@keyframes xow-shimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }

/* ---------- Fade-mask + chevron ----------------------------------- */
body .xoxo-online-widget .xoxo-online-fade{
    position:absolute !important; left:0; right:0; bottom:38px; height:24px;
    background:linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--xow-bg) 100%);
    pointer-events:none !important; opacity:0 !important; transition:opacity .25s ease; z-index:3;
}
body .xoxo-online-widget.has-overflow:not(.is-scrolled-bottom) .xoxo-online-fade{ opacity:1 !important; }
body .xoxo-online-widget .xoxo-online-chevron{
    position:absolute !important; left:50%; bottom:42px; transform:translateX(-50%);
    width:22px; height:22px; border-radius:50%; border:none;
    background:rgba(255,0,170,.92); color:#fff;
    display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important;
    align-items:center; justify-content:center; cursor:pointer;
    box-shadow:0 4px 12px rgba(255,0,170,.4); z-index:4; animation:xow-bounce 1.4s ease-in-out infinite;
}
body .xoxo-online-widget.has-overflow:not(.is-scrolled-bottom) .xoxo-online-chevron{
    display:flex !important; visibility:visible !important; opacity:1 !important; pointer-events:auto !important;
}
@keyframes xow-bounce{ 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(3px); } }

/* ---------- Footer + légende -------------------------------------- */
.xoxo-online-widget .xoxo-online-footer{ margin:10px 0 0; font-size:12px; color:var(--xow-muted); text-align:center; line-height:1.4; }
.xoxo-online-widget .xoxo-online-count{ color:var(--xow-pink); font-weight:800; font-size:13px; }
.xoxo-online-widget .xow-sep{ margin:0 4px; opacity:.4; }
.xoxo-online-widget .xoxo-online-viewall{ color:var(--xow-violet); font-weight:600; text-decoration:none; cursor:pointer; background:none; border:none; font-family:inherit; font-size:12px; }
.xoxo-online-widget .xoxo-online-viewall:hover{ color:var(--xow-pink); text-decoration:underline; }
.xoxo-online-widget .xoxo-online-legend{
    margin-top:10px; padding:8px 10px; background:var(--xow-soft); border-radius:8px;
    display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:6px 8px;
    font-size:11px; color:var(--xow-muted); line-height:1.2;
}
.xoxo-online-widget .xow-legend-item{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.xoxo-online-widget .xow-legend-sep{ opacity:.4; user-select:none; }
.xoxo-online-widget .xow-legend-dot{ width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 1px var(--xow-bg),0 0 4px rgba(34,197,94,.6); display:inline-block; }
.xoxo-online-widget .xow-legend-newbadge{ width:14px; height:14px; border-radius:50%; background:linear-gradient(135deg,#ff00aa 0%,#9d3cff 100%); color:#fff; font-size:8px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--xow-bg); }

/* ---------- États vides / filtrés --------------------------------- */
.xoxo-online-widget .xoxo-online-empty{ text-align:center; color:var(--xow-faint); font-size:13px; padding:30px 10px; margin:0; }
.xoxo-online-widget .xow-avatar.is-hidden{ display:none !important; }
.xoxo-online-widget .xow-noresult{ grid-column:1/-1; text-align:center; color:var(--xow-faint); font-size:12px; padding:18px 8px; }

/* ====================================================================
 *  Modale « Voir tous les connectés »
 * ==================================================================== */
.xoxo-online-modal{
    position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center;
    background:rgba(8,4,18,.66); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
    opacity:0; pointer-events:none; transition:opacity .2s ease; padding:20px;
}
.xoxo-online-modal.is-open{ opacity:1; pointer-events:auto; }
.xoxo-online-modal-box{
    background:var(--xow-bg,#fff); color:var(--xow-fg,#333); width:min(680px,100%); max-height:86vh;
    border-radius:16px; overflow:hidden; display:flex; flex-direction:column;
    box-shadow:0 24px 70px -12px rgba(255,0,170,.45),0 10px 30px rgba(0,0,0,.45);
    transform:translateY(12px) scale(.98); transition:transform .2s ease;
}
.xoxo-online-modal.is-open .xoxo-online-modal-box{ transform:none; }
.xoxo-online-modal-head{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--xow-line,#eee); }
.xoxo-online-modal-title{ font-size:15px; font-weight:800; margin:0; }
.xoxo-online-modal-title .xoxo-online-count{ color:var(--xow-pink); }
.xoxo-online-modal-close{ margin-left:auto; border:none; background:var(--xow-soft); color:var(--xow-muted); width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:18px; line-height:1; }
.xoxo-online-modal-close:hover{ color:var(--xow-pink); }
.xoxo-online-modal-body{ padding:14px 16px; overflow-y:auto; }
.xoxo-online-modal-body .xoxo-online-grid{ grid-template-columns:repeat(auto-fill,minmax(86px,1fr)); max-height:none !important; }

/* ====================================================================
 *  Panneau flottant (pages sans sidebar)
 * ==================================================================== */
/* v2.0.7 — Bouton flottant ancré en bas à droite, suit le scroll (fixed),
   respecte la safe-area iOS. Sur desktop il est masqué par le JS dès que le
   déclencheur d'en-tête .xoxo-online-trigger est visible ; sur mobile (menu
   replié) il s'affiche. AJUSTABLE : `right` / `bottom` ci-dessous. */
.xoxo-online-fab{
    position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:99990;
    display:inline-flex; align-items:center; gap:8px; padding:10px 14px;
    border:none; border-radius:999px; cursor:pointer; color:#fff; font-family:'Inter',sans-serif;
    /* v2.0.6 — dégradé LITTÉRAL (le FAB n'est ni .xoxo-online-widget ni
       .xoxo-online-floatpanel : var(--xow-grad) n'y était pas défini → fond
       transparent + texte blanc = invisible). */
    font-size:13px; font-weight:700; background:linear-gradient(90deg,#ff00aa 0%,#9d3cff 100%);
    box-shadow:0 10px 24px -6px rgba(255,0,170,.5);
    transition:transform .2s ease, filter .2s ease;
}
.xoxo-online-fab:hover{ transform:translateY(-2px); filter:saturate(1.1); }
.xoxo-online-fab .xow-fab-dot{ width:9px; height:9px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 2px rgba(255,255,255,.8); animation:xow-pulse 2.2s ease-in-out infinite; }
.xoxo-online-fab .xow-fab-count{ background:rgba(255,255,255,.22); border-radius:999px; padding:1px 7px; font-size:12px; }
/* v2.0.8 — Quand un déclencheur d'en-tête est en place (classe posée par le JS) :
   bouton flottant MASQUÉ sur desktop (le bouton du menu le remplace) et AFFICHÉ
   sur mobile (où le menu est replié dans le hamburger).
   1024px = bascule desktop/mobile — AJUSTABLE si le menu de ton thème se replie
   à une autre largeur. (Sans déclencheur, le bouton reste visible partout = fallback.) */
html.xow-has-header-trigger .xoxo-online-fab{ display:none; }
@media (max-width:1024px){
    html.xow-has-header-trigger .xoxo-online-fab{ display:inline-flex; }
}
.xoxo-online-floatpanel{
    /* v2.0.4 — `bottom` remonté (74 → 132) pour ne PAS chevaucher le bouton
       "remonter en haut de page". + garde-fou hauteur sur petits écrans. */
    position:fixed; right:18px; bottom:132px; z-index:99991; width:320px; max-width:calc(100vw - 36px);
    max-height:calc(100vh - 160px); overflow-y:auto;
    background:var(--xow-bg,#fff); border-radius:16px; padding:16px;
    box-shadow:0 24px 60px -12px rgba(255,0,170,.4),0 10px 30px rgba(0,0,0,.4);
    transform:translateY(16px); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
}
.xoxo-online-floatpanel.is-open{ transform:none; opacity:1; pointer-events:auto; }
.xoxo-online-floatpanel-head{ display:flex; align-items:center; margin:0 0 10px; }
.xoxo-online-floatpanel-title{ font-size:14px; font-weight:800; margin:0; color:var(--xow-fg,#333); }
.xoxo-online-floatpanel-close{ margin-left:auto; border:none; background:var(--xow-soft); color:var(--xow-muted); width:26px; height:26px; border-radius:50%; cursor:pointer; font-size:16px; line-height:1; }

/* ---------- Déclencheur d'en-tête « En ligne » (menu WP / Elementor) ----
   v2.0.6 — N'importe quel élément .xoxo-online-trigger placé dans l'en-tête
   est transformé par le JS en ouvreur du panneau (point vert + compteur). */
.xoxo-online-trigger{ cursor:pointer; }
.xoxo-online-trigger--ready{ display:inline-flex; align-items:center; gap:6px; }
.xow-trigger-dot{
    width:9px; height:9px; border-radius:50%; background:#22c55e; flex:0 0 auto;
    box-shadow:0 0 0 2px rgba(255,255,255,.6),0 0 6px rgba(34,197,94,.7);
    animation:xow-pulse 2.2s ease-in-out infinite;
}
.xow-trigger-count{
    display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px;
    padding:0 5px; border-radius:999px; background:linear-gradient(90deg,#ff00aa 0%,#9d3cff 100%);
    color:#fff; font-size:11px; font-weight:800; line-height:1; flex:0 0 auto;
}

/* ====================================================================
 *  Toast (confirmations : wink, visibilité)
 * ==================================================================== */
.xoxo-online-toast{
    position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
    z-index:100001; background:#100820; color:#fff; padding:10px 16px; border-radius:999px;
    font-family:'Inter',sans-serif; font-size:13px; font-weight:600;
    box-shadow:0 12px 30px -8px rgba(255,0,170,.5); opacity:0; pointer-events:none;
    transition:opacity .25s ease, transform .25s ease; display:flex; align-items:center; gap:8px;
}
.xoxo-online-toast.is-visible{ opacity:1; transform:translateX(-50%) translateY(0); }
.xoxo-online-toast.is-error{ background:#7a1030; }

/* ---------- Responsive -------------------------------------------- */
@media (max-width:380px){
    .xoxo-online-widget .xoxo-online-grid{ grid-template-columns:repeat(3,1fr); gap:12px 8px; }
    .xoxo-online-widget .xow-avatar-frame{ width:54px; height:54px; flex-basis:54px; }
    .xoxo-online-widget .xow-name{ font-size:10px; max-width:72px; }
    .xoxo-online-floatpanel{ right:10px; left:10px; width:auto; bottom:calc(80px + env(safe-area-inset-bottom,0px)); }
}
@media (prefers-reduced-motion:reduce){
    .xoxo-online-widget .xow-online-dot,
    .xoxo-online-widget .xoxo-online-chevron,
    .xoxo-online-widget .xow-avatar,
    .xoxo-online-widget .xow-skel,
    .xoxo-online-fab .xow-fab-dot,
    .xow-trigger-dot{ animation:none !important; }
    .xoxo-online-widget .xow-avatar.xow-leaving{ display:none !important; }
}