/* =========================================================
   KharonBridge — HeartWhispers (Murmures du cœur)
   UX CSS final — à coller dans ux-widget-heartwhispers.css
   Objectif : “écrire sans écrire” (souffle court, apaisé, rituel léger)
   Scope STRICT : .kbmb-heartwhispers (ou fallback .kbmb-murmures)
   ========================================================= */

/* ---------- Scope (inclut les classes réelles du widget) ---------- */
.kbmb-heartwhispers,
.kbmb-murmures,
.kbmb-heartwhispers-widget,
.kbmb-widget--heartwhispers,
.kb-section--hw{
  position: relative;
}

/* ---------- Container global : respiration + glass doux ---------- */
.kbmb-heartwhispers .kb-hw-card,
.kbmb-murmures .kb-hw-card,
.kbmb-heartwhispers .kbmb-card,
.kbmb-murmures .kbmb-card,
.kbmb-widget--heartwhispers .kb-hw-card,
.kbmb-widget--heartwhispers .kbmb-card,
.kb-section--hw .kb-hw-card,
.kb-section--hw .kbmb-card{
  border-radius: 26px;
  border: 1px solid rgba(44,62,80,.12);
  background: rgba(255,255,255,.58);
  box-shadow: 0 18px 54px rgba(44,62,80,.12);
  backdrop-filter: blur(10px);
  padding: 22px;
  overflow: hidden;
}

.kbmb-heartwhispers .kb-hw-card::before,
.kbmb-murmures .kb-hw-card::before,
.kbmb-heartwhispers .kbmb-card::before,
.kbmb-murmures .kbmb-card::before,
.kbmb-widget--heartwhispers .kb-hw-card::before,
.kbmb-widget--heartwhispers .kbmb-card::before,
.kb-section--hw .kb-hw-card::before,
.kb-section--hw .kbmb-card::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  background:
    radial-gradient(70% 110% at 18% 0%, rgba(212,175,55,.10), transparent 62%),
    radial-gradient(70% 120% at 86% 18%, rgba(86,199,255,.08), transparent 66%);
  opacity: .9;
}

/* ---------- Header : titre + sous-texte + compteur ---------- */
.kbmb-heartwhispers .kb-hw-header,
.kbmb-murmures .kb-hw-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 16px;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.kbmb-heartwhispers .kb-hw-title,
.kbmb-murmures .kb-hw-title,
.kbmb-widget--heartwhispers .kbmb-section-title,
.kb-section--hw .kbmb-section-title{
  font-weight: 800;
  letter-spacing: .2px;
  color: rgba(44,62,80,.92);
  font-size: 20px;
  margin: 0;
}

.kbmb-heartwhispers .kb-hw-subtitle,
.kbmb-murmures .kb-hw-subtitle,
.kbmb-widget--heartwhispers .kbmb-section-subtitle,
.kb-section--hw .kbmb-section-subtitle{
  margin: 6px 0 0 0;
  color: rgba(44,62,80,.62);
  font-size: 13.5px;
  line-height: 1.35;
  font-style: italic;
}

.kbmb-heartwhispers .kb-hw-counter,
.kbmb-murmures .kb-hw-counter,
.kbmb-widget--heartwhispers .kb-hw-counter,
.kb-section--hw .kb-hw-counter{
  margin-left:auto;
  white-space: nowrap;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(44,62,80,.12);
  background: rgba(255,255,255,.55);
  color: rgba(44,62,80,.70);
  font-size: 12.5px;
}

/* ---------- Alert success/info : plus “rituel”, moins “admin” ---------- */
.kbmb-heartwhispers .kb-hw-alert,
.kbmb-murmures .kb-hw-alert,
.kbmb-heartwhispers .kb-alert,
.kbmb-murmures .kb-alert{
  border-radius: 16px;
  border: 1px solid rgba(44,62,80,.10);
  background: rgba(255,255,255,.55);
  padding: 10px 12px;
  margin: 12px 0 14px;
  color: rgba(44,62,80,.76);
  font-size: 13px;
}

.kbmb-heartwhispers .kb-hw-alert--ok,
.kbmb-murmures .kb-hw-alert--ok{
  border-color: rgba(60,180,120,.22);
  background: rgba(60,180,120,.08);
}

.kbmb-heartwhispers .kb-hw-alert--warn,
.kbmb-murmures .kb-hw-alert--warn{
  border-color: rgba(236,62,80,.22);
  background: rgba(236,62,80,.06);
}

/* ---------- Tags rapides (chips) : # Gratitude / # Message / # Souvenir ---------- */
.kbmb-heartwhispers .kb-hw-tags,
.kbmb-murmures .kb-hw-tags{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 10px;
  position: relative;
  z-index: 1;
}

.kbmb-heartwhispers .kb-hw-tag,
.kbmb-murmures .kb-hw-tag,
.kbmb-heartwhispers .kb-hw-tags button,
.kbmb-murmures .kb-hw-tags button{
  appearance: none;
  border: 1px solid rgba(44,62,80,.16);
  background: rgba(255,255,255,.55);
  color: rgba(44,62,80,.72);
  border-radius: 999px;
  padding: 9px 12px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.kbmb-heartwhispers .kb-hw-tag:hover,
.kbmb-murmures .kb-hw-tag:hover,
.kbmb-heartwhispers .kb-hw-tags button:hover,
.kbmb-murmures .kb-hw-tags button:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(44,62,80,.10);
  border-color: rgba(212,175,55,.30);
}

.kbmb-heartwhispers .kb-hw-tag.is-on,
.kbmb-murmures .kb-hw-tag.is-on,
.kbmb-heartwhispers .kb-hw-tags button.is-on,
.kbmb-murmures .kb-hw-tags button.is-on,
.kbmb-widget--heartwhispers .kb-hw-tag-btn--active,
.kb-section--hw .kb-hw-tag-btn--active{
  border-color: rgba(212,175,55,.40);
  background: rgba(212,175,55,.10);
  color: rgba(44,62,80,.88);
}

/* ---------- Label “Écrivez ici…” : discret ---------- */
.kbmb-heartwhispers .kb-hw-label,
.kbmb-murmures .kb-hw-label,
.kbmb-heartwhispers label,
.kbmb-murmures label{
  display:block;
  margin: 10px 0 8px;
  font-size: 13px;
  color: rgba(44,62,80,.70);
}

/* ---------- Zone d’écriture : grande, calme, sans agressivité ---------- */
.kbmb-heartwhispers .kb-hw-textarea,
.kbmb-murmures .kb-hw-textarea,
.kbmb-heartwhispers textarea,
.kbmb-murmures textarea{
  width: 100%;
  min-height: 140px;
  resize: vertical;
  border-radius: 18px;
  border: 1px solid rgba(44,62,80,.16);
  background: rgba(255,255,255,.70);
  padding: 14px 14px;
  color: rgba(44,62,80,.88);
  font-size: 14px;
  line-height: 1.45;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.20);
  transition: box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

.kbmb-heartwhispers .kb-hw-textarea::placeholder,
.kbmb-murmures .kb-hw-textarea::placeholder,
.kbmb-heartwhispers textarea::placeholder,
.kbmb-murmures textarea::placeholder{
  color: rgba(44,62,80,.40);
}

.kbmb-heartwhispers .kb-hw-textarea:focus,
.kbmb-murmures .kb-hw-textarea:focus,
.kbmb-heartwhispers textarea:focus,
.kbmb-murmures textarea:focus{
  outline: none;
  border-color: rgba(212,175,55,.45);
  background: rgba(255,255,255,.82);
  box-shadow:
    0 16px 40px rgba(44,62,80,.10),
    0 0 0 6px rgba(212,175,55,.10);
}

/* ---------- Bouton principal : “Épingler ce murmure” (or doux + pill) ---------- */
.kbmb-heartwhispers .kb-hw-primary,
.kbmb-murmures .kb-hw-primary,
.kbmb-widget--heartwhispers .kb-hw-pin-btn,
.kb-section--hw .kb-hw-pin-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  margin-top: 12px;
  border-radius: 999px;
  padding: 12px 18px;
  border: 1px solid rgba(212,175,55,.55);
  background: rgba(212,175,55,.62);
  color: rgba(44,62,80,.88);
  font-weight: 600;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.kbmb-heartwhispers .kb-hw-primary:hover,
.kbmb-murmures .kb-hw-primary:hover,
.kbmb-widget--heartwhispers .kb-hw-pin-btn:hover,
.kb-section--hw .kb-hw-pin-btn:hover{
  transform: translateY(-1px);
  background: rgba(212,175,55,.72);
  box-shadow: 0 18px 44px rgba(212,175,55,.18);
}

/* ---------- Zone “post-it” : les murmures épinglés ---------- */
.kbmb-heartwhispers .kb-hw-grid,
.kbmb-murmures .kb-hw-grid,
.kbmb-heartwhispers .kb-hw-list,
.kbmb-murmures .kb-hw-list,
.kbmb-widget--heartwhispers .kb-hw-grid,
.kb-section--hw .kb-hw-grid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
  gap: 14px;
  align-items: start;
  position: relative;
  z-index: 1;
}

/* Carte post-it */
.kbmb-heartwhispers .kb-hw-note,
.kbmb-murmures .kb-hw-note,
.kbmb-heartwhispers .kb-hw-item,
.kbmb-murmures .kb-hw-item,
.kbmb-widget--heartwhispers .kb-hw-note,
.kb-section--hw .kb-hw-note{
  border-radius: 18px;
  border: 1px solid rgba(44,62,80,.10);
  background: rgba(255,255,255,.58);
  box-shadow: 0 14px 34px rgba(44,62,80,.12);
  padding: 14px 14px 12px;
  min-height: 86px;
  position: relative;
  overflow: hidden;
  transform: rotate(-0.35deg);
}

.kbmb-heartwhispers .kb-hw-note:nth-child(2n),
.kbmb-murmures .kb-hw-note:nth-child(2n),
.kbmb-heartwhispers .kb-hw-item:nth-child(2n),
.kbmb-murmures .kb-hw-item:nth-child(2n){
  transform: rotate(0.25deg);
}

.kbmb-heartwhispers .kb-hw-note::before,
.kbmb-murmures .kb-hw-note::before,
.kbmb-heartwhispers .kb-hw-item::before,
.kbmb-murmures .kb-hw-item::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(212,175,55,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.00));
  opacity: .9;
}

/* Contenu note */
.kbmb-heartwhispers .kb-hw-note-text,
.kbmb-murmures .kb-hw-note-text,
.kbmb-heartwhispers .kb-hw-note-content,
.kbmb-murmures .kb-hw-note-content,
.kbmb-widget--heartwhispers .kb-hw-note-content,
.kb-section--hw .kb-hw-note-content{
  color: rgba(44,62,80,.86);
  font-size: 13.5px;
  line-height: 1.35;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* Date discrète */
.kbmb-heartwhispers .kb-hw-note-date,
.kbmb-murmures .kb-hw-note-date{
  margin-top: 10px;
  color: rgba(44,62,80,.52);
  font-size: 12px;
  text-align: right;
  position: relative;
  z-index: 1;
}

/* ---------- Vide : message doux ---------- */
.kbmb-heartwhispers .kb-hw-empty,
.kbmb-murmures .kb-hw-empty{
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px dashed rgba(44,62,80,.18);
  background: rgba(255,255,255,.42);
  color: rgba(44,62,80,.62);
  font-size: 13px;
  font-style: italic;
}

/* ---------- Responsive ---------- */
@media (max-width: 720px){
  .kbmb-heartwhispers .kb-hw-card,
  .kbmb-murmures .kb-hw-card,
  .kbmb-heartwhispers .kbmb-card,
  .kbmb-murmures .kbmb-card,
  .kbmb-widget--heartwhispers .kb-hw-card,
  .kb-section--hw .kb-hw-card{
    padding: 18px;
    border-radius: 22px;
  }

  .kbmb-heartwhispers .kb-hw-header,
  .kbmb-murmures .kb-hw-header,
  .kbmb-widget--heartwhispers .kb-hw-header,
  .kb-section--hw .kb-hw-header{
    flex-direction: column;
    align-items: flex-start;
  }

  .kbmb-heartwhispers .kb-hw-grid,
  .kbmb-murmures .kb-hw-grid,
  .kbmb-heartwhispers .kb-hw-list,
  .kbmb-murmures .kb-hw-list,
  .kbmb-widget--heartwhispers .kb-hw-grid,
  .kb-section--hw .kb-hw-grid{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   Constellation — Ciel + étoiles + popover
   ========================================================= */

 .kbmb-heartwhispers .kb-hw-sky,
.kbmb-murmures .kb-hw-sky,
.kbmb-heartwhispers-widget .kb-hw-sky,
.kbmb-widget--heartwhispers .kb-hw-sky,
.kb-section--hw .kb-hw-sky{
  position: relative;
  margin-top: 16px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 520px at 28% 22%, rgba(212,175,55,.10), transparent 60%),
    radial-gradient(900px 520px at 78% 52%, rgba(86,199,255,.08), transparent 62%),
    radial-gradient(1200px 720px at 50% 50%, rgba(12,22,48,.55), rgba(5,9,20,.96));
  backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 22px 70px rgba(6,12,26,.30);
  padding: 18px;
  min-height: 280px;
  overflow: hidden;
}

/* grain + vignettage doux */
.kbmb-heartwhispers .kb-hw-sky::before,
.kbmb-murmures .kb-hw-sky::before,
.kbmb-heartwhispers-widget .kb-hw-sky::before,
.kbmb-widget--heartwhispers .kb-hw-sky::before,
.kb-section--hw .kb-hw-sky::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(140% 110% at 50% 40%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(140% 130% at 50% 100%, rgba(0,0,0,.28), transparent 55%);
  opacity: .95;
}

/* poussière d’étoiles discrète */
.kbmb-heartwhispers .kb-hw-sky::after,
.kbmb-murmures .kb-hw-sky::after,
.kbmb-heartwhispers-widget .kb-hw-sky::after,
.kbmb-widget--heartwhispers .kb-hw-sky::after,
.kb-section--hw .kb-hw-sky::after{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:
    radial-gradient(1px 1px at 12% 28%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(1px 1px at 22% 68%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(1px 1px at 41% 42%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(1px 1px at 67% 31%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(1px 1px at 78% 56%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(1px 1px at 88% 22%, rgba(255,255,255,.12), transparent 60%);
  opacity:.9;
}

.kbmb-heartwhispers .kb-hw-sky-inner,
.kbmb-murmures .kb-hw-sky-inner,
.kbmb-heartwhispers-widget .kb-hw-sky-inner,
.kbmb-widget--heartwhispers .kb-hw-sky-inner,
.kb-section--hw .kb-hw-sky-inner{
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 260px;
  z-index: 1;
}

.kbmb-heartwhispers .kb-hw-star,
.kbmb-murmures .kb-hw-star,
.kbmb-heartwhispers-widget .kb-hw-star,
.kbmb-widget--heartwhispers .kb-hw-star,
.kb-section--hw .kb-hw-star{
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  transform: translate(-50%, -50%) scale(var(--s, 1));
  width: 22px;
  height: 22px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  outline: none;
}

.kbmb-heartwhispers .kb-hw-star-dot,
.kbmb-murmures .kb-hw-star-dot,
.kbmb-heartwhispers-widget .kb-hw-star-dot,
.kbmb-widget--heartwhispers .kb-hw-star-dot,
.kb-section--hw .kb-hw-star-dot{
  display:block;
  width: 14px;
  height: 14px;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(212,175,55,.95);
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  box-shadow:
    0 0 0 3px rgba(212,175,55,.10),
    0 0 18px rgba(212,175,55,.45);
  opacity: .96;
  animation: kbHwTwinkle var(--tw, 3.6s) ease-in-out infinite;
}

.kbmb-heartwhispers .kb-hw-star:hover .kb-hw-star-dot,
.kbmb-murmures .kb-hw-star:hover .kb-hw-star-dot,
.kbmb-heartwhispers-widget .kb-hw-star:hover .kb-hw-star-dot,
.kbmb-widget--heartwhispers .kb-hw-star:hover .kb-hw-star-dot,
.kb-section--hw .kb-hw-star:hover .kb-hw-star-dot{
  transform: translate(-50%, -50%) scale(1.12);
  box-shadow:
    0 0 0 6px rgba(212,175,55,.12),
    0 0 28px rgba(212,175,55,.60);
}

@keyframes kbHwTwinkle{
  0%,100%{ opacity:.70; filter: blur(0px); transform: scale(1); }
  50%{ opacity:.98; filter: blur(.1px); transform: scale(1.06); }
}

/* Popover */
.kbmb-heartwhispers .kb-hw-popover,
.kbmb-murmures .kb-hw-popover,
.kbmb-heartwhispers-widget .kb-hw-popover,
.kbmb-widget--heartwhispers .kb-hw-popover,
.kb-section--hw .kb-hw-popover{
  position: absolute;
  z-index: 50;
  pointer-events: none; /* activé seulement quand ouvert */
  transform: translate(-50%, -100%);
  width: min(360px, calc(100% - 28px));
}

.kbmb-heartwhispers .kb-hw-popover.is-open,
.kbmb-murmures .kb-hw-popover.is-open,
.kbmb-heartwhispers-widget .kb-hw-popover.is-open,
.kbmb-widget--heartwhispers .kb-hw-popover.is-open,
.kb-section--hw .kb-hw-popover.is-open{
  pointer-events: auto;
}

.kbmb-heartwhispers .kb-hw-popover-inner,
.kbmb-murmures .kb-hw-popover-inner,
.kbmb-heartwhispers-widget .kb-hw-popover-inner,
.kbmb-widget--heartwhispers .kb-hw-popover-inner,
.kb-section--hw .kb-hw-popover-inner{
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(212,175,55,.22);
  background:
    radial-gradient(120% 140% at 20% 0%, rgba(212,175,55,.12), transparent 55%),
    rgba(10,18,34,.88);
  backdrop-filter: blur(12px);
  box-shadow: 0 24px 70px rgba(0,0,0,.38);
  padding: 14px 14px 12px;
  color: rgba(255,255,255,.92);
}

.kbmb-heartwhispers .kb-hw-popover-inner::after,
.kbmb-murmures .kb-hw-popover-inner::after,
.kbmb-heartwhispers-widget .kb-hw-popover-inner::after,
.kbmb-widget--heartwhispers .kb-hw-popover-inner::after,
.kb-section--hw .kb-hw-popover-inner::after{
  content:"";
  position:absolute;
  left: 50%;
  bottom: -7px;
  width: 14px;
  height: 14px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(10,18,34,.88);
  border-right: 1px solid rgba(212,175,55,.18);
  border-bottom: 1px solid rgba(212,175,55,.18);
}

.kbmb-heartwhispers .kb-hw-popover-tag,
.kbmb-murmures .kb-hw-popover-tag,
.kbmb-heartwhispers-widget .kb-hw-popover-tag,
.kbmb-widget--heartwhispers .kb-hw-popover-tag,
.kb-section--hw .kb-hw-popover-tag{
  color: rgba(255,255,255,.70);
  font-size: 12.5px;
  margin-bottom: 6px;
}

.kbmb-heartwhispers .kb-hw-popover-text,
.kbmb-murmures .kb-hw-popover-text,
.kbmb-heartwhispers-widget .kb-hw-popover-text,
.kbmb-widget--heartwhispers .kb-hw-popover-text,
.kb-section--hw .kb-hw-popover-text{
  color: rgba(255,255,255,.92);
  font-size: 14px;
  line-height: 1.45;
}

.kbmb-heartwhispers .kb-hw-popover-date,
.kbmb-murmures .kb-hw-popover-date,
.kbmb-heartwhispers-widget .kb-hw-popover-date,
.kbmb-widget--heartwhispers .kb-hw-popover-date,
.kb-section--hw .kb-hw-popover-date{
  margin-top: 10px;
  color: rgba(255,255,255,.55);
  font-size: 12px;
  text-align: right;
}

.kbmb-heartwhispers .kb-hw-popover-close,
.kbmb-murmures .kb-hw-popover-close,
.kbmb-heartwhispers-widget .kb-hw-popover-close,
.kbmb-widget--heartwhispers .kb-hw-popover-close,
.kb-section--hw .kb-hw-popover-close{
  position:absolute;
  top: 8px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: rgba(255,255,255,.80);
}

.kbmb-heartwhispers .kb-hw-popover-close:hover,
.kbmb-murmures .kb-hw-popover-close:hover,
.kbmb-heartwhispers-widget .kb-hw-popover-close:hover,
.kbmb-widget--heartwhispers .kb-hw-popover-close:hover,
.kb-section--hw .kb-hw-popover-close:hover{
  background: rgba(212,175,55,.14);
  border-color: rgba(212,175,55,.22);
}
/* =========================================================
   POPUP — plus émotionnel / rituel
   ========================================================= */

.kb-section--hw .kb-hw-popover-inner,
.kbmb-widget--heartwhispers .kb-hw-popover-inner{
  padding: 18px 18px 14px;
  border-radius: 20px;
  border: 1px solid rgba(212,175,55,.28);
  background:
    radial-gradient(120% 160% at 10% 0%, rgba(212,175,55,.16), transparent 55%),
    radial-gradient(140% 160% at 90% 20%, rgba(86,199,255,.10), transparent 60%),
    rgba(7,12,24,.92);
  box-shadow:
    0 26px 90px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.kb-section--hw .kb-hw-popover-tag,
.kbmb-widget--heartwhispers .kb-hw-popover-tag{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,.20);
  background: rgba(212,175,55,.10);
  color: rgba(255,255,255,.82);
  font-size: 12.5px;
  margin-bottom: 10px;
}

.kb-section--hw .kb-hw-popover-text,
.kbmb-widget--heartwhispers .kb-hw-popover-text{
  position: relative;
  color: rgba(255,255,255,.94);
  font-size: 15.5px;
  line-height: 1.55;
  letter-spacing: .15px;
  font-weight: 500;
  padding: 6px 2px 0;
}

/* Guillemets discrets = “murmure” */
.kb-section--hw .kb-hw-popover-text::before,
.kbmb-widget--heartwhispers .kb-hw-popover-text::before{
  content: "“";
  position: absolute;
  left: -6px;
  top: -10px;
  font-size: 32px;
  color: rgba(212,175,55,.35);
  line-height: 1;
}

.kb-section--hw .kb-hw-popover-date,
.kbmb-widget--heartwhispers .kb-hw-popover-date{
  margin-top: 12px;
  color: rgba(255,255,255,.62);
  font-size: 12.5px;
  text-align: right;
}

/* Animation très légère (rituel, pas “app”) */
.kb-section--hw .kb-hw-popover.is-open,
.kbmb-widget--heartwhispers .kb-hw-popover.is-open{
  animation: kbHwPopIn .14s ease-out both;
}

@keyframes kbHwPopIn{
  from{ opacity: 0; transform: translate(-50%, -96%) scale(.98); }
  to{   opacity: 1; transform: translate(-50%, -100%) scale(1); }
}

/* Bouton close plus doux */
.kb-section--hw .kb-hw-popover-close,
.kbmb-widget--heartwhispers .kb-hw-popover-close{
  border: 1px solid rgba(212,175,55,.18);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
}

.kb-section--hw .kb-hw-popover-close:hover,
.kbmb-widget--heartwhispers .kb-hw-popover-close:hover{
  background: rgba(212,175,55,.14);
  border-color: rgba(212,175,55,.30);
}
/* =========================================================
   GALACTIQUE — override popover (anti "chat bubble")
   À coller TOUT EN BAS du fichier pour écraser le reste
   ========================================================= */

/* Popover : apparition "révélation" */
.kb-hw-popover{
  transition: opacity .26s ease, transform .26s ease, filter .26s ease;
  opacity: 0;
  transform: translate(-50%, -96%);
  filter: blur(2px);
}

.kb-hw-popover.is-open{
  opacity: 1;
  transform: translate(-50%, -104%);
  filter: blur(0);
}

/* Conteneur galactique : halo + brume + bord lumineux */
.kb-hw-popover-inner{
  border-radius: 22px;
  border: 1px solid rgba(212,175,55,.22);
  background:
    radial-gradient(120% 140% at 20% 0%, rgba(212,175,55,.14), transparent 55%),
    radial-gradient(140% 140% at 80% 10%, rgba(86,199,255,.12), transparent 60%),
    rgba(6,10,22,.86);
  box-shadow:
    0 26px 80px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.05) inset;
  backdrop-filter: blur(14px);
  padding: 18px 18px 14px;
  position: relative;
  overflow: hidden;
}

/* Brume + poussière d’étoiles */
.kb-hw-popover-inner::before{
  content:"";
  position:absolute;
  inset:-20px;
  pointer-events:none;
  background:
    radial-gradient(2px 2px at 18% 28%, rgba(255,255,255,.18), transparent 55%),
    radial-gradient(1px 1px at 42% 62%, rgba(255,255,255,.14), transparent 55%),
    radial-gradient(1px 1px at 73% 35%, rgba(255,255,255,.16), transparent 55%),
    radial-gradient(420px 220px at 40% 80%, rgba(212,175,55,.10), transparent 60%),
    radial-gradient(520px 260px at 80% 30%, rgba(86,199,255,.08), transparent 65%);
  opacity:.9;
}

/* IMPORTANT : on supprime la "pointe de bulle" */
.kb-hw-popover-inner::after{
  content:"";
  position:absolute;
  left: 50%;
  bottom: -18px;
  width: 2px;
  height: 22px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(212,175,55,.55), transparent);
  opacity: .8;
}

/* Texte : “souffle”, pas “message” */
.kb-hw-popover-text{
  color: rgba(255,255,255,.93);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .1px;
  font-style: italic;
  position: relative;
  z-index: 1;
}

/* Guillemets fantômes (effet littéraire) */
.kb-hw-popover-text::before{
  content:"“";
  position:absolute;
  left:-6px;
  top:-10px;
  font-size: 34px;
  color: rgba(212,175,55,.28);
}

.kb-hw-popover-text::after{
  content:"”";
  position:absolute;
  right:-2px;
  bottom:-18px;
  font-size: 34px;
  color: rgba(212,175,55,.20);
}

/* Tag : discret, comme une constellation nommée */
.kb-hw-popover-tag{
  color: rgba(255,255,255,.62);
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}

/* Date : “déposé le …” (à gérer en PHP/JS si tu veux le libellé exact),
   côté CSS on la rend moins "timestamp" */
.kb-hw-popover-date{
  margin-top: 12px;
  color: rgba(255,255,255,.52);
  font-size: 12px;
  text-align: left;
  position: relative;
  z-index: 1;
}

/* Bouton close : invisibilisé (C validé) */
.kb-hw-popover-close{
  opacity: 0;
  pointer-events: none;
}

/* Optionnel : si tu veux quand même le rendre accessible au survol */
.kb-hw-popover-inner:hover .kb-hw-popover-close{
  opacity: .65;
  pointer-events: auto;
}

/* =========================================================
   OVERLAY (sur-exposition) — support du mode “comme une photo”
   Objectif : le popover doit être au-dessus du widget, lisible en entier,
   et ne plus dépendre des transforms "bulle" (translate -100%).
   ========================================================= */

/* Overlay plein écran (le HTML/JS peut utiliser data-kb-hw-overlay) */
[data-kb-hw-overlay],
.kb-hw-overlay{
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: none;
  background: rgba(2, 6, 15, .58);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

[data-kb-hw-overlay].is-open,
.kb-hw-overlay.is-open{
  display: block;
}

/* Popover en sur-exposition : position FIXED + ouverture vers le bas */
/*
  IMPORTANT : le JS doit placer le popover via left/top en px.
  On ne garde QUE translateX(-50%) pour centrer sur le point,
  et on ouvre vers le bas avec translateY(12px).
*/
.kb-section--hw .kb-hw-popover,
.kbmb-widget--heartwhispers .kb-hw-popover{
  position: fixed !important;
  z-index: 100000 !important;
  width: min(440px, calc(100vw - 32px));
  transform: translate(-50%, 0) !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, filter .22s ease;
  filter: blur(2px);
}

.kb-section--hw .kb-hw-popover.is-open,
.kbmb-widget--heartwhispers .kb-hw-popover.is-open{
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 12px) !important; /* ouverture vers le bas */
  filter: blur(0);
}

/* Garantir la lisibilité complète : pas de “message coupé” */
.kb-section--hw .kb-hw-popover-inner,
.kbmb-widget--heartwhispers .kb-hw-popover-inner{
  max-height: min(70vh, 520px);
  overflow: auto;
}

/* Scroll discret dans le popover */
.kb-section--hw .kb-hw-popover-inner::-webkit-scrollbar,
.kbmb-widget--heartwhispers .kb-hw-popover-inner::-webkit-scrollbar{
  width: 10px;
}

.kb-section--hw .kb-hw-popover-inner::-webkit-scrollbar-thumb,
.kbmb-widget--heartwhispers .kb-hw-popover-inner::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.10);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0);
  background-clip: padding-box;
}

/* Version accessible du bouton close si jamais le JS le réactive */
.kb-section--hw .kb-hw-popover-close,
.kbmb-widget--heartwhispers .kb-hw-popover-close{
  opacity: 0;
  pointer-events: none;
}

.kb-section--hw .kb-hw-popover-inner:hover .kb-hw-popover-close,
.kbmb-widget--heartwhispers .kb-hw-popover-inner:hover .kb-hw-popover-close{
  opacity: .65;
  pointer-events: auto;
}

/* =========================================================
   FINAL OVERRIDES — HeartWhispers (Jan 2026)
   Objectifs:
   1) Hint discret (1er usage) — stylable via .kb-hw-hint / .is-hidden
   2) Fil de constellation (SVG) — .kb-hw-constellation
   3) Nouvelle étoile (post-épingle) — .is-new + animation douce
   4) Sécurité: neutraliser tout overlay sombre si encore présent
   ========================================================= */

/* 1) Hint discret (à afficher au-dessus du ciel) */
.kbmb-heartwhispers .kb-hw-hint,
.kbmb-murmures .kb-hw-hint,
.kbmb-widget--heartwhispers .kb-hw-hint,
.kb-section--hw .kb-hw-hint{
  margin-top: 10px;
  margin-bottom: 6px;
  color: rgba(44,62,80,.58);
  font-size: 12.5px;
  font-style: italic;
  letter-spacing: .1px;
  user-select: none;
}

.kbmb-heartwhispers .kb-hw-hint.is-hidden,
.kbmb-murmures .kb-hw-hint.is-hidden,
.kbmb-widget--heartwhispers .kb-hw-hint.is-hidden,
.kb-section--hw .kb-hw-hint.is-hidden{
  display: none !important;
}

/* 2) Constellation lines (SVG au-dessus du ciel, sous les étoiles) */
.kbmb-heartwhispers .kb-hw-constellation,
.kbmb-murmures .kb-hw-constellation,
.kbmb-widget--heartwhispers .kb-hw-constellation,
.kb-section--hw .kb-hw-constellation{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1; /* étoiles = 2 */
  opacity: .95;
}

.kbmb-heartwhispers .kb-hw-constellation line,
.kbmb-murmures .kb-hw-constellation line,
.kbmb-widget--heartwhispers .kb-hw-constellation line,
.kb-section--hw .kb-hw-constellation line{
  stroke: rgba(212,175,55,.22);
  stroke-width: 1.2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 10px rgba(212,175,55,.18));
}

/* 3) Nouvelle étoile (fade + micro pop) */
.kbmb-heartwhispers .kb-hw-star.is-new,
.kbmb-murmures .kb-hw-star.is-new,
.kbmb-widget--heartwhispers .kb-hw-star.is-new,
.kb-section--hw .kb-hw-star.is-new{
  animation: kbHwStarIn .28s ease-out both;
}

.kbmb-heartwhispers .kb-hw-star.is-new .kb-hw-star-dot,
.kbmb-murmures .kb-hw-star.is-new .kb-hw-star-dot,
.kbmb-widget--heartwhispers .kb-hw-star.is-new .kb-hw-star-dot,
.kb-section--hw .kb-hw-star.is-new .kb-hw-star-dot{
  animation:
    kbHwStarGlow .9s ease-out 1 both,
    kbHwTwinkle var(--tw, 3.6s) ease-in-out infinite;
}

@keyframes kbHwStarIn{
  from{ opacity: 0; transform: translate(-50%, -50%) scale(.88); }
  to{ opacity: 1; transform: translate(-50%, -50%) scale(var(--s, 1)); }
}

@keyframes kbHwStarGlow{
  0%{ box-shadow: 0 0 0 2px rgba(212,175,55,.08), 0 0 10px rgba(212,175,55,.20); }
  55%{ box-shadow: 0 0 0 10px rgba(212,175,55,.14), 0 0 34px rgba(212,175,55,.55); }
  100%{ box-shadow: 0 0 0 3px rgba(212,175,55,.10), 0 0 18px rgba(212,175,55,.45); }
}

/* 4) Sécurité: si un overlay est encore utilisé, PAS de fond noir */
[data-kb-hw-overlay],
.kb-hw-overlay{
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}