/* =========================================================
   KharonBridge — HeartWhispers (Murmures du cœur) V2 ⭐ SPECTACULAIRE
   UX CSS amélioré — Ciel étoilé immersif & magique
   Objectif : "écrire sans écrire" (souffle court, apaisé, rituel léger)
   Scope STRICT : .kbmb-heartwhispers (ou fallback .kbmb-murmures)

   AMÉLIORATIONS V2 (BASE):
   - ✓ Contrastes améliorés (WCAG AA)
   - ✓ Zones tactiles mobile optimisées (44px min)
   - ✓ Border-radius harmonisés
   - ✓ Transitions unifiées
   - ✓ États disabled/loading
   - ✓ Performance optimisée
   - ✓ CSS Variables pour maintenance
   - ✓ Focus keyboard amélioré

   ⭐ AMÉLIORATIONS SPECTACULAIRES (CIEL ÉTOILÉ):

   OPTION 1 - Ciel profond & immersif:
   - Dégradé nuit enrichi (bleu nuit → violet → noir)
   - Nébuleuses colorées (violet, rose)
   - Poussière d'étoiles enrichie (tailles variées)
   - Effet de profondeur multicouche

   OPTION 2 - Étoiles magiques:
   - Tailles variées (--star-size: 10px/14px/18px)
   - Scintillement prononcé et aléatoire
   - Couleurs selon type (or, cyan, rose)
     → data-type="gratitude|message|souvenir"
     → Classes: .kb-hw-star--gratitude, etc.
   - Pulsation douce avec brightness

   OPTION 3 - Interactions enrichies:
   - Trail doré au survol des étoiles
   - Shooting star spectaculaire (.is-new)
   - Effet lueur curseur (.kb-hw-sky-cursor-glow)
   - Shooting star globale (.kb-hw-shooting-star-effect)
   - Support parallax (via JS)

   OPTION 4 - Popovers élégants:
   - Design "parchemin céleste"
   - Bordure dorée lumineuse animée
   - Animation flottante douce
   - Ombre dramatique
   - Brume cosmique enrichie

   OPTION 5 - Ambiance cosmique:
   - Lune discrète (haut droite) avec halo
   - Voie lactée diagonale
   - Aurores boréales subtiles
   - Brillance qui pulse (12s)

   ⚙️ CLASSES UTILITAIRES:
   - .kb-hw-star--small|--large : tailles d'étoiles
   - .kb-hw-star--gratitude|--message|--souvenir : couleurs
   - .kb-hw-sky-cursor-glow : lueur interactive
   - .kb-hw-shooting-star-effect : étoile filante
   ========================================================= */

/* ---------- CSS Variables (facilite maintenance & dark mode futur) ---------- */
:root {
  /* Couleurs principales */
  --hw-text-primary: rgba(44,62,80,.92);
  --hw-text-secondary: rgba(44,62,80,.72);
  --hw-text-tertiary: rgba(44,62,80,.58);
  --hw-text-placeholder: rgba(44,62,80,.55);

  /* Accent or */
  --hw-accent: rgba(212,175,55,.62);
  --hw-accent-border: rgba(212,175,55,.55);
  --hw-accent-light: rgba(212,175,55,.10);
  --hw-accent-glow: rgba(212,175,55,.45);

  /* Backgrounds */
  --hw-bg-card: rgba(255,255,255,.58);
  --hw-bg-input: rgba(255,255,255,.70);
  --hw-bg-tag: rgba(255,255,255,.55);

  /* Border-radius harmonisés */
  --hw-radius-sm: 14px;
  --hw-radius-md: 16px;
  --hw-radius-lg: 20px;
  --hw-radius-xl: 24px;
  --hw-radius-pill: 999px;

  /* Transitions standard */
  --hw-transition-fast: .12s ease;
  --hw-transition-normal: .18s ease;
  --hw-transition-slow: .26s ease;

  /* Ombres */
  --hw-shadow-sm: 0 8px 24px rgba(44,62,80,.08);
  --hw-shadow-md: 0 12px 32px rgba(44,62,80,.12);
  --hw-shadow-lg: 0 18px 54px rgba(44,62,80,.15);

  /* Tailles tactiles */
  --hw-touch-target: 44px;
}

/* ---------- 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: var(--hw-radius-xl);
  border: 1px solid rgba(44,62,80,.12);
  background: var(--hw-bg-card);
  box-shadow: var(--hw-shadow-lg);
  backdrop-filter: blur(8px);
  padding: 22px;
  overflow: hidden;
  will-change: transform;
}

.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%);
  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: 16px;
  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: 700;
  letter-spacing: .4px;
  color: var(--hw-text-primary);
  font-size: 22px;
  margin: 0;
  line-height: 1.2;
}

.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: var(--hw-text-secondary);
  font-size: 13.5px;
  line-height: 1.4;
  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: 9px 14px;
  border-radius: var(--hw-radius-pill);
  border: 1px solid rgba(44,62,80,.12);
  background: var(--hw-bg-tag);
  color: var(--hw-text-secondary);
  font-size: 12.5px;
  font-weight: 500;
}

/* ---------- 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: var(--hw-radius-md);
  border: 1px solid rgba(44,62,80,.10);
  background: var(--hw-bg-tag);
  padding: 12px 14px;
  margin: 12px 0 14px;
  color: var(--hw-text-secondary);
  font-size: 13px;
  line-height: 1.4;
}

.kbmb-heartwhispers .kb-hw-alert--ok,
.kbmb-murmures .kb-hw-alert--ok{
  border-color: rgba(60,180,120,.25);
  background: rgba(60,180,120,.09);
  color: rgba(30,90,60,.88);
}

.kbmb-heartwhispers .kb-hw-alert--warn,
.kbmb-murmures .kb-hw-alert--warn{
  border-color: rgba(236,62,80,.25);
  background: rgba(236,62,80,.07);
  color: rgba(180,30,40,.88);
}

/* ---------- Tags rapides (chips) : # Gratitude / # Message / # Souvenir ---------- */
.kbmb-heartwhispers .kb-hw-tags,
.kbmb-murmures .kb-hw-tags{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 22px;
  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: var(--hw-bg-tag);
  color: var(--hw-text-secondary);
  border-radius: var(--hw-radius-pill);
  padding: 11px 16px;
  min-height: var(--hw-touch-target);
  font-size: 13px;
  line-height: 1;
  font-weight: 500;
  cursor: pointer;
  transition: transform var(--hw-transition-fast),
              box-shadow var(--hw-transition-fast),
              border-color var(--hw-transition-fast),
              background var(--hw-transition-fast);
  user-select: none;
}

.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(-2px);
  box-shadow: var(--hw-shadow-sm);
  border-color: var(--hw-accent-border);
}

.kbmb-heartwhispers .kb-hw-tag:active,
.kbmb-murmures .kb-hw-tag:active,
.kbmb-heartwhispers .kb-hw-tags button:active,
.kbmb-murmures .kb-hw-tags button:active{
  transform: scale(0.96);
}

.kbmb-heartwhispers .kb-hw-tag:focus-visible,
.kbmb-murmures .kb-hw-tag:focus-visible,
.kbmb-heartwhispers .kb-hw-tags button:focus-visible,
.kbmb-murmures .kb-hw-tags button:focus-visible{
  outline: 2px solid var(--hw-accent-border);
  outline-offset: 3px;
}

.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: var(--hw-accent-border);
  background: var(--hw-accent-light);
  color: var(--hw-text-primary);
  font-weight: 600;
}

/* ---------- Label "Écrivez ici…" : discret ---------- */
.kbmb-heartwhispers .kb-hw-label,
.kbmb-murmures .kb-hw-label,
.kbmb-heartwhispers label,
.kbmb-murmures label{
  display:block;
  margin: 12px 0 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--hw-text-secondary);
}

/* ---------- 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: var(--hw-radius-md);
  border: 1px solid rgba(44,62,80,.16);
  background: var(--hw-bg-input);
  padding: 14px 16px;
  color: var(--hw-text-primary);
  font-size: 14px;
  line-height: 1.5;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.20);
  transition: box-shadow var(--hw-transition-normal),
              border-color var(--hw-transition-normal),
              background var(--hw-transition-normal);
}

.kbmb-heartwhispers .kb-hw-textarea::placeholder,
.kbmb-murmures .kb-hw-textarea::placeholder,
.kbmb-heartwhispers textarea::placeholder,
.kbmb-murmures textarea::placeholder{
  color: var(--hw-text-placeholder);
}

.kbmb-heartwhispers .kb-hw-textarea:focus,
.kbmb-murmures .kb-hw-textarea:focus,
.kbmb-heartwhispers textarea:focus,
.kbmb-murmures textarea:focus{
  outline: none;
  border-color: var(--hw-accent-border);
  background: rgba(255,255,255,.85);
  box-shadow:
    0 16px 40px rgba(44,62,80,.10),
    0 0 0 4px var(--hw-accent-light);
}

.kbmb-heartwhispers .kb-hw-textarea:focus-visible,
.kbmb-murmures .kb-hw-textarea:focus-visible,
.kbmb-heartwhispers textarea:focus-visible,
.kbmb-murmures textarea:focus-visible{
  outline: 2px solid var(--hw-accent-border);
  outline-offset: 2px;
}

/* État invalide */
.kbmb-heartwhispers .kb-hw-textarea:invalid,
.kbmb-murmures .kb-hw-textarea:invalid,
.kbmb-heartwhispers textarea:invalid,
.kbmb-murmures textarea:invalid{
  border-color: rgba(236,62,80,.30);
}

/* ---------- Bouton principal : "Épingler ce murmure" (bleu #2c3e50 + texte or) ---------- */
.kbmb-heartwhispers .kb-hw-primary,
.kbmb-murmures .kb-hw-primary,
.kbmb-widget--heartwhispers .kb-hw-pin-btn,
.kb-section--hw .kb-hw-pin-btn,
.kbmb-heartwhispers .kb-hw-pin-btn,
.kbmb-murmures .kb-hw-pin-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  margin-top: 12px;
  min-height: var(--hw-touch-target);
  border-radius: var(--hw-radius-pill);
  padding: 11px 20px;
  border: 1px solid var(--hw-accent-border);
  background-color: #2c3e50;
  background-image: none;
  color: #d4af37;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.1;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 12px 30px rgba(15,23,42,0.35);
  transition: transform var(--hw-transition-fast),
              box-shadow var(--hw-transition-normal),
              opacity var(--hw-transition-normal);
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
}

.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,
.kbmb-heartwhispers .kb-hw-pin-btn:hover,
.kbmb-murmures .kb-hw-pin-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(15,23,42,0.45);
}

.kbmb-heartwhispers .kb-hw-primary:active,
.kbmb-murmures .kb-hw-primary:active,
.kbmb-widget--heartwhispers .kb-hw-pin-btn:active,
.kb-section--hw .kb-hw-pin-btn:active,
.kbmb-heartwhispers .kb-hw-pin-btn:active,
.kbmb-murmures .kb-hw-pin-btn:active{
  transform: translateY(0);
  box-shadow: 0 8px 22px rgba(15,23,42,0.35);
}

.kbmb-heartwhispers .kb-hw-primary:focus-visible,
.kbmb-murmures .kb-hw-primary:focus-visible,
.kbmb-widget--heartwhispers .kb-hw-pin-btn:focus-visible,
.kb-section--hw .kb-hw-pin-btn:focus-visible,
.kbmb-heartwhispers .kb-hw-pin-btn:focus-visible,
.kbmb-murmures .kb-hw-pin-btn:focus-visible{
  outline: 2px solid #d4af37;
  outline-offset: 3px;
}

/* État disabled */
.kbmb-heartwhispers .kb-hw-primary:disabled,
.kbmb-murmures .kb-hw-primary:disabled,
.kbmb-widget--heartwhispers .kb-hw-pin-btn:disabled,
.kb-section--hw .kb-hw-pin-btn:disabled,
.kbmb-heartwhispers .kb-hw-pin-btn:disabled,
.kbmb-murmures .kb-hw-pin-btn:disabled{
  opacity: .5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* État loading */
.kbmb-heartwhispers .kb-hw-primary.is-loading,
.kbmb-murmures .kb-hw-primary.is-loading,
.kbmb-widget--heartwhispers .kb-hw-pin-btn.is-loading,
.kb-section--hw .kb-hw-pin-btn.is-loading{
  position: relative;
  color: transparent;
  pointer-events: none;
}

.kbmb-heartwhispers .kb-hw-primary.is-loading::after,
.kbmb-murmures .kb-hw-primary.is-loading::after,
.kbmb-widget--heartwhispers .kb-hw-pin-btn.is-loading::after,
.kb-section--hw .kb-hw-pin-btn.is-loading::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid #d4af37;
  border-right-color: transparent;
  border-radius: 50%;
  animation: hwSpinner .6s linear infinite;
}

@keyframes hwSpinner{
  to{ transform: rotate(360deg); }
}

/* Animation de succès */
.kbmb-heartwhispers .kb-hw-primary.is-success,
.kbmb-murmures .kb-hw-primary.is-success{
  animation: hwSuccessPulse .4s ease-out;
}

@keyframes hwSuccessPulse{
  0%, 100%{ transform: scale(1); }
  50%{ transform: scale(1.05); }
}

/* Si des actions utilisent un style générique .kbmb-btn dans ce widget */
.kbmb-widget--heartwhispers .kbmb-btn,
.kb-section--hw .kbmb-btn{
  background-color: #2c3e50;
  background-image: none;
  color: #d4af37;
  border: 1px solid var(--hw-accent-border);
  opacity: 1;
  filter: none;
  padding: 10px 18px;
  min-height: var(--hw-touch-target);
  font-size: 13px;
  border-radius: var(--hw-radius-pill);
  transition: transform var(--hw-transition-fast),
              box-shadow var(--hw-transition-normal);
}

.kbmb-widget--heartwhispers .kbmb-btn:hover,
.kb-section--hw .kbmb-btn:hover{
  box-shadow: 0 16px 40px rgba(15,23,42,0.45);
  transform: translateY(-2px);
}

.kbmb-widget--heartwhispers .kbmb-btn:focus-visible,
.kb-section--hw .kbmb-btn:focus-visible{
  outline: 2px solid #d4af37;
  outline-offset: 3px;
}

/* ---------- 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: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
  gap: 16px;
  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: var(--hw-radius-md);
  border: 1px solid rgba(44,62,80,.10);
  background: var(--hw-bg-card);
  box-shadow: var(--hw-shadow-md);
  padding: 14px 14px 12px;
  min-height: 86px;
  position: relative;
  overflow: hidden;
  transform: rotate(-0.35deg);
  transition: transform var(--hw-transition-normal),
              box-shadow var(--hw-transition-normal);
}

.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:hover,
.kbmb-murmures .kb-hw-note:hover,
.kbmb-heartwhispers .kb-hw-item:hover,
.kbmb-murmures .kb-hw-item:hover{
  transform: rotate(0deg) translateY(-2px);
  box-shadow: 0 18px 44px rgba(44,62,80,.16);
}

.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: var(--hw-text-primary);
  font-size: 13.5px;
  line-height: 1.4;
  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: var(--hw-text-tertiary);
  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: 14px 16px;
  border-radius: var(--hw-radius-md);
  border: 1px dashed rgba(44,62,80,.18);
  background: rgba(255,255,255,.42);
  color: var(--hw-text-secondary);
  font-size: 13px;
  font-style: italic;
  text-align: center;
}

/* ---------- 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: var(--hw-radius-lg);
  }

  /* Réduire les effets coûteux sur mobile */
  .kbmb-heartwhispers .kb-hw-card::before,
  .kbmb-murmures .kb-hw-card::before{
    opacity: .6;
  }

  .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;
  }

  /* Augmenter la taille du texte pour lisibilité mobile */
  .kbmb-heartwhispers .kb-hw-textarea,
  .kbmb-murmures .kb-hw-textarea,
  .kbmb-heartwhispers textarea,
  .kbmb-murmures textarea{
    font-size: 16px; /* Évite le zoom auto sur iOS */
  }

  .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
   ⭐ VERSION SPECTACULAIRE ⭐
   - Ciel profond immersif
   - Étoiles magiques (tailles variées, scintillement)
   - Interactions enrichies (trails, parallax)
   - Popovers élégants
   - Ambiance cosmique (lune, aurores, voie lactée)
   ========================================================= */

.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: 24px;
  border-radius: var(--hw-radius-lg);
  border: 1px solid rgba(255,255,255,.15);
  /* OPTION 1: Ciel identique au mur de photos (widget deuil) */
  background:
    /* Nébuleuses colorées or et cyan */
    radial-gradient(900px 520px at 28% 22%, rgba(212,175,55,.18), transparent 60%),
    radial-gradient(900px 520px at 78% 52%, rgba(146,173,232,.14), transparent 62%),
    /* OPTION 5: Aurores boréales subtiles (bleu-vert) */
    radial-gradient(1200px 300px at 50% 0%, rgba(146,173,232,.12), transparent 45%),
    /* OPTION 5: Voie lactée diagonale */
    linear-gradient(135deg, transparent 35%, rgba(255,255,255,.04) 45%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 55%, transparent 65%),
    /* Fond nocturne (IDENTIQUE au mur de photos du widget deuil) */
    linear-gradient(180deg, rgba(24,31,53,.95), rgba(14,19,35,.96));
  backdrop-filter: blur(16px);
  box-shadow:
    0 24px 52px rgba(7,10,20,.34),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 60px rgba(146,173,232,.06);
  padding: 18px;
  min-height: 380px;
  overflow: hidden;
  /* OPTION 3: Support parallax léger */
  transition: transform .6s ease-out;
}

/* OPTION 5: Lune VISIBLE + vignettage cosmique */
.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:
    /* OPTION 5: Lune bien visible en haut à droite */
    radial-gradient(circle 70px at 88% 12%, rgba(255,255,255,.22), rgba(255,255,255,.14) 35%, transparent 55%),
    /* Halo lunaire doré */
    radial-gradient(circle 130px at 88% 12%, rgba(212,175,55,.12), transparent 48%),
    /* Cratères lunaires (détails) */
    radial-gradient(circle 8px at 86% 10%, rgba(0,0,0,.15), transparent 50%),
    radial-gradient(circle 6px at 90% 14%, rgba(0,0,0,.10), transparent 50%),
    radial-gradient(circle 5px at 88% 13%, rgba(0,0,0,.08), transparent 50%),
    /* Vignettage doux */
    radial-gradient(140% 110% at 50% 40%, rgba(255,255,255,.04), transparent 60%),
    radial-gradient(140% 130% at 50% 100%, rgba(0,0,0,.30), transparent 55%);
  opacity: 1;
  /* OPTION 5: Brillance lunaire qui pulse doucement */
  animation: kbHwMoonGlow 10s ease-in-out infinite;
}

@keyframes kbHwMoonGlow{
  0%, 100%{ opacity: 1; }
  50%{ opacity: .92; }
}

/* OPTION 1 & 2: Poussière d'étoiles enrichie - tailles variées, scintillement */
.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:
    /* Étoiles grandes (lumineuses) */
    radial-gradient(2px 2px at 8% 18%, rgba(255,255,255,.25), transparent 55%),
    radial-gradient(2px 2px at 92% 72%, rgba(212,175,55,.22), transparent 55%),
    /* Étoiles moyennes */
    radial-gradient(1.5px 1.5px at 15% 45%, rgba(255,255,255,.20), transparent 60%),
    radial-gradient(1.5px 1.5px at 73% 25%, rgba(86,199,255,.18), transparent 60%),
    radial-gradient(1.5px 1.5px at 45% 82%, rgba(255,255,255,.18), transparent 60%),
    /* Étoiles petites (nombreuses) */
    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%),
    radial-gradient(1px 1px at 34% 15%, rgba(255,255,255,.13), transparent 60%),
    radial-gradient(1px 1px at 56% 65%, rgba(255,255,255,.15), transparent 60%),
    radial-gradient(1px 1px at 82% 48%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(1px 1px at 18% 88%, rgba(255,255,255,.12), transparent 60%);
  opacity:.9;
  animation: kbHwStardust 20s ease-in-out infinite alternate;
}

@keyframes kbHwStardust{
  0%{ opacity: .85; }
  50%{ opacity: .95; }
  100%{ opacity: .90; }
}

.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: 320px;
  z-index: 1;
}

/* OPTION 3: Effet de lueur interactive qui suit le curseur (à activer en JS) */
.kb-hw-sky-cursor-glow{
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(212,175,55,.15) 0%,
    rgba(212,175,55,.08) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity .3s ease;
  /* Position sera mise à jour en JS avec --cursor-x et --cursor-y */
  left: var(--cursor-x, 50%);
  top: var(--cursor-y, 50%);
  transform: translate(-50%, -50%);
}

.kb-hw-sky:hover .kb-hw-sky-cursor-glow{
  opacity: 1;
}

/* OPTION 2 & 3: Étoile magique avec zone tactile améliorée + interactions */
.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: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  outline: none;
  transition: transform var(--hw-transition-fast);
  will-change: transform;
  /* OPTION 3: Trail de lumière subtil */
  filter: drop-shadow(0 0 0 transparent);
}

.kbmb-heartwhispers .kb-hw-star:hover,
.kbmb-murmures .kb-hw-star:hover,
.kbmb-heartwhispers-widget .kb-hw-star:hover,
.kbmb-widget--heartwhispers .kb-hw-star:hover,
.kb-section--hw .kb-hw-star:hover{
  transform: translate(-50%, -50%) scale(calc(var(--s, 1) * 1.15));
  /* OPTION 3: Trail doré au survol */
  filter: drop-shadow(0 0 12px rgba(212,175,55,.45))
          drop-shadow(0 0 6px rgba(255,255,255,.35));
  z-index: 10;
}

.kbmb-heartwhispers .kb-hw-star:focus-visible,
.kbmb-murmures .kb-hw-star:focus-visible,
.kbmb-heartwhispers-widget .kb-hw-star:focus-visible,
.kbmb-widget--heartwhispers .kb-hw-star:focus-visible,
.kb-section--hw .kb-hw-star:focus-visible{
  outline: 2px solid rgba(212,175,55,.70);
  outline-offset: 4px;
  border-radius: 50%;
}

/* OPTION 2: Étoile magique - tailles variées, couleurs, scintillement prononcé */
.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: var(--star-size, 14px);
  height: var(--star-size, 14px);
  margin: 0 auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* OPTION 2: Couleur variable selon le type (défaut: or) */
  background: var(--star-color, 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 var(--star-glow, rgba(212,175,55,.10)),
    0 0 18px var(--star-glow, var(--hw-accent-glow)),
    0 0 30px var(--star-glow, var(--hw-accent-glow));
  opacity: .96;
  /* OPTION 2: Scintillement plus prononcé et aléatoire */
  animation: kbHwTwinkleMagic var(--tw, 3.6s) ease-in-out infinite;
  animation-delay: var(--tw-delay, 0s);
  transition: transform var(--hw-transition-fast),
              box-shadow var(--hw-transition-fast);
}

/* Variantes de couleurs pour différents types de murmures */
.kb-hw-star[data-type="gratitude"] .kb-hw-star-dot,
.kb-hw-star--gratitude .kb-hw-star-dot{
  --star-color: rgba(212,175,55,.95);    /* Or chaleureux */
  --star-glow: rgba(212,175,55,.15);
}

.kb-hw-star[data-type="message"] .kb-hw-star-dot,
.kb-hw-star--message .kb-hw-star-dot{
  --star-color: rgba(86,199,255,.95);    /* Cyan doux */
  --star-glow: rgba(86,199,255,.15);
}

.kb-hw-star[data-type="souvenir"] .kb-hw-star-dot,
.kb-hw-star--souvenir .kb-hw-star-dot{
  --star-color: rgba(255,182,193,.95);   /* Rose tendre */
  --star-glow: rgba(255,182,193,.15);
}

/* Variantes de tailles */
.kb-hw-star--small .kb-hw-star-dot{
  --star-size: 10px;
}

.kb-hw-star--large .kb-hw-star-dot{
  --star-size: 18px;
}

.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.2);
  box-shadow:
    0 0 0 8px var(--star-glow, rgba(212,175,55,.12)),
    0 0 35px var(--star-glow, rgba(212,175,55,.60)),
    0 0 50px var(--star-glow, rgba(212,175,55,.40));
  /* Rotation douce au survol */
  animation: kbHwTwinkleMagic var(--tw, 3.6s) ease-in-out infinite,
             kbHwStarRotate 2s ease-in-out forwards;
}

@keyframes kbHwTwinkleMagic{
  0%{ opacity:.65; filter: blur(0px) brightness(1); transform: translate(-50%, -50%) scale(1); }
  25%{ opacity:.80; filter: blur(.2px) brightness(1.1); transform: translate(-50%, -50%) scale(1.04); }
  50%{ opacity:.98; filter: blur(.1px) brightness(1.15); transform: translate(-50%, -50%) scale(1.08); }
  75%{ opacity:.85; filter: blur(.2px) brightness(1.05); transform: translate(-50%, -50%) scale(1.02); }
  100%{ opacity:.70; filter: blur(0px) brightness(1); transform: translate(-50%, -50%) scale(1); }
}

@keyframes kbHwStarRotate{
  from{ transform: translate(-50%, -50%) scale(1.2) rotate(0deg); }
  to{ transform: translate(-50%, -50%) scale(1.2) rotate(72deg); }
}

/* =========================================================
   HINT DISCRET (1er usage)
   ========================================================= */

.kbmb-heartwhispers .kb-hw-hint,
.kbmb-murmures .kb-hw-hint,
.kbmb-widget--heartwhispers .kb-hw-hint,
.kb-section--hw .kb-hw-hint{
  margin-top: 12px;
  margin-bottom: 8px;
  color: var(--hw-text-tertiary);
  font-size: 12.5px;
  font-style: italic;
  letter-spacing: .1px;
  user-select: none;
  text-align: center;
  opacity: .85;
}

.kbmb-heartwhispers .kb-hw-constellation-intro,
.kbmb-murmures .kb-hw-constellation-intro,
.kbmb-widget--heartwhispers .kb-hw-constellation-intro,
.kb-section--hw .kb-hw-constellation-intro{
  margin: 8px 0 10px;
  color: rgba(44,62,80,.72);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}

.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;
}

.kbmb-heartwhispers .kb-hw-constellation-status,
.kbmb-murmures .kb-hw-constellation-status,
.kbmb-widget--heartwhispers .kb-hw-constellation-status,
.kb-section--hw .kb-hw-constellation-status{
  margin: 4px auto 12px;
  width: fit-content;
  max-width: 100%;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,.48);
  background: rgba(212,175,55,.20);
  color: rgba(44,62,80,.92);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .15px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(44,62,80,.12);
}

/* =========================================================
   CONSTELLATION LINES (SVG)
   ========================================================= */

.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;
  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));
}

.kbmb-heartwhispers .kb-hw-constellation line.kb-hw-constellation-line--zodiac,
.kbmb-murmures .kb-hw-constellation line.kb-hw-constellation-line--zodiac,
.kbmb-widget--heartwhispers .kb-hw-constellation line.kb-hw-constellation-line--zodiac,
.kb-section--hw .kb-hw-constellation line.kb-hw-constellation-line--zodiac{
  stroke: rgba(255,220,124,.44);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 12px rgba(255,214,102,.32));
}

.kbmb-heartwhispers .kb-hw-constellation line.kb-hw-constellation-line--template,
.kbmb-murmures .kb-hw-constellation line.kb-hw-constellation-line--template,
.kbmb-widget--heartwhispers .kb-hw-constellation line.kb-hw-constellation-line--template,
.kb-section--hw .kb-hw-constellation line.kb-hw-constellation-line--template{
  stroke: rgba(212,175,55,.14);
  stroke-width: 1.1;
  stroke-dasharray: 2 4;
  filter: none;
}

.kbmb-heartwhispers .kb-hw-constellation-slot,
.kbmb-murmures .kb-hw-constellation-slot,
.kbmb-widget--heartwhispers .kb-hw-constellation-slot,
.kb-section--hw .kb-hw-constellation-slot{
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,220,124,.28);
  background: rgba(255,220,124,.10);
  box-shadow: 0 0 8px rgba(255,220,124,.12);
  pointer-events: none;
  z-index: 1;
}

.kbmb-heartwhispers .kb-hw-constellation-slot.is-filled,
.kbmb-murmures .kb-hw-constellation-slot.is-filled,
.kbmb-widget--heartwhispers .kb-hw-constellation-slot.is-filled,
.kb-section--hw .kb-hw-constellation-slot.is-filled{
  background: rgba(255,220,124,.65);
  border-color: rgba(255,220,124,.68);
  box-shadow: 0 0 12px rgba(255,220,124,.34);
}

.kbmb-heartwhispers .kb-hw-star.kb-hw-star--constellation .kb-hw-star-dot,
.kbmb-murmures .kb-hw-star.kb-hw-star--constellation .kb-hw-star-dot,
.kbmb-widget--heartwhispers .kb-hw-star.kb-hw-star--constellation .kb-hw-star-dot,
.kb-section--hw .kb-hw-star.kb-hw-star--constellation .kb-hw-star-dot{
  background: radial-gradient(circle, rgba(255,242,196,.98) 0%, rgba(255,218,114,.92) 46%, rgba(255,170,60,.48) 100%);
  box-shadow: 0 0 14px rgba(255,219,120,.55), 0 0 28px rgba(255,178,72,.33);
}

/* =========================================================
   OPTION 3: NOUVELLE ÉTOILE - Shooting star spectaculaire 🌠
   ========================================================= */

.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 d'entrée avec effet "shooting star" */
  animation: kbHwShootingStar 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 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:
    kbHwStarGlowSpectacular 1.5s ease-out 1 both,
    kbHwTwinkleMagic var(--tw, 3.6s) ease-in-out infinite 1.5s;
}

/* Shooting star - trajectoire diagonale avec traînée */
@keyframes kbHwShootingStar{
  0%{
    opacity: 0;
    transform: translate(calc(-50% - 200px), calc(-50% - 150px)) scale(.3);
    filter: blur(3px) brightness(2);
  }
  40%{
    opacity: 1;
    filter: blur(1px) brightness(1.5);
  }
  100%{
    opacity: 1;
    transform: translate(-50%, -50%) scale(var(--s, 1));
    filter: blur(0) brightness(1);
  }
}

/* Glow spectaculaire pour nouvelle étoile */
@keyframes kbHwStarGlowSpectacular{
  0%{
    box-shadow:
      0 0 0 2px var(--star-glow, rgba(212,175,55,.08)),
      0 0 10px var(--star-glow, rgba(212,175,55,.20)),
      0 0 20px var(--star-glow, rgba(212,175,55,.10));
  }
  30%{
    box-shadow:
      0 0 0 18px var(--star-glow, rgba(212,175,55,.18)),
      0 0 50px var(--star-glow, rgba(212,175,55,.70)),
      0 0 80px var(--star-glow, rgba(212,175,55,.45)),
      0 0 120px var(--star-glow, rgba(255,255,255,.25));
  }
  60%{
    box-shadow:
      0 0 0 12px var(--star-glow, rgba(212,175,55,.14)),
      0 0 38px var(--star-glow, rgba(212,175,55,.60)),
      0 0 60px var(--star-glow, rgba(212,175,55,.35));
  }
  100%{
    box-shadow:
      0 0 0 3px var(--star-glow, rgba(212,175,55,.10)),
      0 0 18px var(--star-glow, var(--hw-accent-glow)),
      0 0 30px var(--star-glow, var(--hw-accent-glow));
  }
}

/* =========================================================
   OPTION 4: POPOVER — Élégant & Spectaculaire (parchemin céleste)
   ========================================================= */

.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: fixed;
  z-index: 100000;
  pointer-events: none;
  width: min(460px, calc(100vw - 32px));
  transform: translate(-50%, 0);
  opacity: 0;
  filter: blur(3px);
  /* OPTION 4: Animation d'apparition spectaculaire */
  transition: opacity .35s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform .35s cubic-bezier(0.34, 1.56, 0.64, 1),
              filter .35s ease;
  will-change: transform, opacity;
}

.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;
  opacity: 1;
  transform: translate(-50%, 12px);
  filter: blur(0);
  /* Légère animation de flottement */
  animation: kbHwPopoverFloat 4s ease-in-out infinite;
}

@keyframes kbHwPopoverFloat{
  0%, 100%{ transform: translate(-50%, 12px); }
  50%{ transform: translate(-50%, 8px); }
}

/* OPTION 4: Popover inner - Parchemin céleste avec BORDURE DORÉE VISIBLE */
.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: 22px;
  /* OPTION 4: Bordure dorée BIEN VISIBLE (épaisseur 3px) */
  border: 3px solid transparent;
  background:
    /* Bordure externe dorée lumineuse */
    linear-gradient(rgba(6,10,22,.94), rgba(6,10,22,.94)) padding-box,
    linear-gradient(135deg,
      rgba(212,175,55,.75) 0%,
      rgba(255,215,0,.85) 20%,
      rgba(212,175,55,.60) 40%,
      rgba(255,215,0,.85) 60%,
      rgba(212,175,55,.75) 80%,
      rgba(255,215,0,.85) 100%
    ) border-box;
  /* Fond cosmique enrichi */
  background-color: rgba(6,10,22,.92);
  background-image:
    /* Nébuleuses colorées */
    radial-gradient(120% 140% at 20% 0%, rgba(212,175,55,.18), transparent 55%),
    radial-gradient(140% 140% at 80% 10%, rgba(86,199,255,.14), transparent 60%),
    radial-gradient(100% 100% at 50% 50%, rgba(138,43,226,.06), transparent 70%),
    /* Texture subtile */
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,.008) 2px, rgba(255,255,255,.008) 4px);
  backdrop-filter: blur(14px);
  box-shadow:
    /* Ombre dramatique */
    0 32px 100px rgba(0,0,0,.55),
    0 16px 50px rgba(0,0,0,.35),
    /* OPTION 4: Lueur dorée BIEN VISIBLE externe */
    0 0 80px rgba(212,175,55,.35),
    0 0 40px rgba(255,215,0,.25),
    /* Reflet interne doré */
    inset 0 2px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(212,175,55,.18),
    inset 0 0 60px rgba(212,175,55,.08);
  padding: 22px 22px 18px;
  max-height: min(70vh, 520px);
  overflow: auto;
  /* Animation de bordure dorée */
  animation: kbHwGoldenBorder 8s ease-in-out infinite;
}

/* OPTION 4: Animation de bordure dorée VISIBLE */
@keyframes kbHwGoldenBorder{
  0%, 100%{
    background-image:
      linear-gradient(rgba(6,10,22,.94), rgba(6,10,22,.94)),
      linear-gradient(135deg,
        rgba(212,175,55,.75) 0%,
        rgba(255,215,0,.85) 20%,
        rgba(212,175,55,.60) 40%,
        rgba(255,215,0,.85) 60%,
        rgba(212,175,55,.75) 80%,
        rgba(255,215,0,.85) 100%
      );
  }
  50%{
    background-image:
      linear-gradient(rgba(6,10,22,.94), rgba(6,10,22,.94)),
      linear-gradient(135deg,
        rgba(255,215,0,.90) 0%,
        rgba(212,175,55,.70) 20%,
        rgba(255,215,0,.95) 40%,
        rgba(212,175,55,.65) 60%,
        rgba(255,215,0,.90) 80%,
        rgba(212,175,55,.75) 100%
      );
  }
}

/* OPTION 4: Brume cosmique + poussière d'étoiles enrichie */
.kbmb-heartwhispers .kb-hw-popover-inner::before,
.kbmb-murmures .kb-hw-popover-inner::before,
.kbmb-heartwhispers-widget .kb-hw-popover-inner::before,
.kbmb-widget--heartwhispers .kb-hw-popover-inner::before,
.kb-section--hw .kb-hw-popover-inner::before{
  content:"";
  position:absolute;
  inset:-20px;
  pointer-events:none;
  background:
    /* Poussière d'étoiles scintillantes */
    radial-gradient(2px 2px at 18% 28%, rgba(255,255,255,.22), transparent 50%),
    radial-gradient(1.5px 1.5px at 42% 62%, rgba(212,175,55,.18), transparent 50%),
    radial-gradient(1px 1px at 73% 35%, rgba(255,255,255,.20), transparent 50%),
    radial-gradient(1.5px 1.5px at 28% 78%, rgba(86,199,255,.16), transparent 50%),
    radial-gradient(1px 1px at 88% 15%, rgba(255,255,255,.18), transparent 50%),
    radial-gradient(1px 1px at 12% 48%, rgba(255,255,255,.14), transparent 50%),
    radial-gradient(2px 2px at 65% 88%, rgba(212,175,55,.20), transparent 50%),
    /* Brumes colorées */
    radial-gradient(500px 280px at 40% 80%, rgba(212,175,55,.12), transparent 60%),
    radial-gradient(600px 320px at 80% 30%, rgba(86,199,255,.10), transparent 65%),
    radial-gradient(450px 250px at 20% 20%, rgba(138,43,226,.08), transparent 60%);
  opacity:.92;
  animation: kbHwPopoverStardust 15s ease-in-out infinite alternate;
}

@keyframes kbHwPopoverStardust{
  0%{ opacity: .88; }
  50%{ opacity: .96; }
  100%{ opacity: .90; }
}

/* OPTION 4: Fil de lumière doré BIEN VISIBLE */
.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: -28px;
  width: 4px;
  height: 32px;
  transform: translateX(-50%);
  background:
    linear-gradient(to bottom,
      rgba(255,215,0,.90),
      rgba(212,175,55,.80) 25%,
      rgba(212,175,55,.60) 55%,
      rgba(212,175,55,.30) 80%,
      transparent
    );
  box-shadow:
    0 0 12px rgba(212,175,55,.60),
    0 0 6px rgba(255,215,0,.50),
    0 0 20px rgba(212,175,55,.35);
  opacity: .95;
  animation: kbHwLightRay 2.5s ease-in-out infinite;
}

@keyframes kbHwLightRay{
  0%, 100%{ opacity: .85; height: 32px; }
  50%{ opacity: 1; height: 38px; }
}

/* Masquer complètement les scrollbars du popover */
.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{
  /* Firefox */
  scrollbar-width: none;
  /* IE/Edge */
  -ms-overflow-style: none;
}

/* Webkit (Chrome, Safari) */
.kbmb-heartwhispers .kb-hw-popover-inner::-webkit-scrollbar,
.kbmb-murmures .kb-hw-popover-inner::-webkit-scrollbar,
.kbmb-heartwhispers-widget .kb-hw-popover-inner::-webkit-scrollbar,
.kbmb-widget--heartwhispers .kb-hw-popover-inner::-webkit-scrollbar,
.kb-section--hw .kb-hw-popover-inner::-webkit-scrollbar{
  display: none;
  width: 0;
  height: 0;
}

.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,.65);
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
  font-weight: 500;
}

/* Texte : "souffle", pas "message" */
.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,.94);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .1px;
  font-style: italic;
  position: relative;
  z-index: 1;
  padding: 6px 2px 0;
}

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

.kbmb-heartwhispers .kb-hw-popover-text::after,
.kbmb-murmures .kb-hw-popover-text::after,
.kbmb-heartwhispers-widget .kb-hw-popover-text::after,
.kbmb-widget--heartwhispers .kb-hw-popover-text::after,
.kb-section--hw .kb-hw-popover-text::after{
  content:""";
  position:absolute;
  right:-2px;
  bottom:-18px;
  font-size: 34px;
  color: rgba(212,175,55,.20);
  line-height: 1;
}

.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: 12px;
  color: rgba(255,255,255,.55);
  font-size: 12px;
  text-align: left;
  position: relative;
  z-index: 1;
}

/* Bouton close : invisibilisé (clic extérieur préféré) */
.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: 32px;
  height: 32px;
  border-radius: var(--hw-radius-pill);
  border: 1px solid rgba(212,175,55,.18);
  background: rgba(255,255,255,.06);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: rgba(255,255,255,.86);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--hw-transition-normal),
              background var(--hw-transition-fast);
}

.kbmb-heartwhispers .kb-hw-popover-close:focus-visible,
.kbmb-murmures .kb-hw-popover-close:focus-visible,
.kbmb-heartwhispers-widget .kb-hw-popover-close:focus-visible,
.kbmb-widget--heartwhispers .kb-hw-popover-close:focus-visible,
.kb-section--hw .kb-hw-popover-close:focus-visible{
  outline: 2px solid rgba(212,175,55,.60);
  outline-offset: 2px;
}

/* Apparaît au survol du popover */
.kbmb-heartwhispers .kb-hw-popover-inner:hover .kb-hw-popover-close,
.kbmb-murmures .kb-hw-popover-inner:hover .kb-hw-popover-close,
.kbmb-heartwhispers-widget .kb-hw-popover-inner:hover .kb-hw-popover-close,
.kbmb-widget--heartwhispers .kb-hw-popover-inner:hover .kb-hw-popover-close,
.kb-section--hw .kb-hw-popover-inner:hover .kb-hw-popover-close{
  opacity: .65;
  pointer-events: auto;
}

.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,.30);
  opacity: 1;
}

/* =========================================================
   OVERLAY (fermeture au clic extérieur)
   ========================================================= */

[data-kb-hw-overlay],
.kb-hw-overlay{
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: none;
  background: transparent; /* Pas de fond noir */
  cursor: pointer;
}

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

/* =========================================================
   TUTO CONTEXTUEL (hover/focus/touch)
   ========================================================= */
.kb-hw-tuto-pop{
  position: fixed;
  z-index: 10002;
  left: 0;
  top: 0;
  max-width: min(320px, calc(100vw - 20px));
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid rgba(188,168,128,.52);
  background: linear-gradient(180deg, #fffdf8 0%, #f3ecdf 100%);
  color: #2c3e50;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .1px;
  box-shadow:
    0 12px 24px rgba(15,23,42,.18),
    inset 0 1px 0 rgba(255,255,255,.88);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -4px);
  transition: opacity .14s ease, transform .14s ease;
}

.kb-hw-tuto-pop::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #f3ecdf;
}

.kb-hw-tuto-pop[data-placement="bottom"]{
  transform: translate(-50%, 4px);
}

.kb-hw-tuto-pop[data-placement="bottom"]::after{
  top: auto;
  bottom: 100%;
  border-top: 0;
  border-bottom: 7px solid #fffdf8;
}

.kb-hw-tuto-pop.is-open{
  opacity: 1;
  transform: translate(-50%, 0);
}

/* =========================================================
   RESPONSIVE — Mobile optimisé
   ========================================================= */

@media (max-width: 720px){
  /* Augmenter les zones tactiles des étoiles */
  .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{
    width: var(--hw-touch-target);
    height: var(--hw-touch-target);
  }

  /* Réduire la hauteur du ciel sur mobile */
  .kbmb-heartwhispers .kb-hw-sky,
  .kbmb-murmures .kb-hw-sky,
  .kbmb-widget--heartwhispers .kb-hw-sky,
  .kb-section--hw .kb-hw-sky{
    min-height: 240px;
  }

  .kbmb-heartwhispers .kb-hw-sky-inner,
  .kbmb-murmures .kb-hw-sky-inner,
  .kbmb-widget--heartwhispers .kb-hw-sky-inner,
  .kb-section--hw .kb-hw-sky-inner{
    min-height: 220px;
  }

  /* Popover pleine largeur sur mobile */
  .kbmb-heartwhispers .kb-hw-popover,
  .kbmb-murmures .kb-hw-popover,
  .kbmb-widget--heartwhispers .kb-hw-popover,
  .kb-section--hw .kb-hw-popover{
    width: calc(100vw - 24px);
  }
}

/* =========================================================
   OPTION 3: EFFET SHOOTING STAR GLOBAL (optionnel)
   Pour afficher une étoile filante occasionnelle
   ========================================================= */

.kb-hw-shooting-star-effect{
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255,255,255,.95);
  border-radius: 50%;
  box-shadow:
    0 0 8px rgba(255,255,255,.8),
    0 0 12px rgba(212,175,55,.6);
  /* Position de départ (en haut à gauche) */
  left: var(--shoot-start-x, 10%);
  top: var(--shoot-start-y, 10%);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

.kb-hw-shooting-star-effect.is-active{
  animation: kbHwShootingStarTravel 2s ease-out forwards;
}

@keyframes kbHwShootingStarTravel{
  0%{
    opacity: 0;
    transform: translate(0, 0);
  }
  10%{
    opacity: 1;
  }
  90%{
    opacity: .6;
  }
  100%{
    opacity: 0;
    transform: translate(400px, 300px);
    box-shadow:
      0 0 2px rgba(255,255,255,.3),
      0 0 4px rgba(212,175,55,.2);
  }
}

/* Traînée de l'étoile filante */
.kb-hw-shooting-star-effect::after{
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: 80px;
  height: 2px;
  background: linear-gradient(to left,
    rgba(255,255,255,.8),
    rgba(212,175,55,.6) 40%,
    transparent
  );
  transform: translateY(-50%);
  box-shadow: 0 0 4px rgba(212,175,55,.5);
}

/* =========================================================
   UTILITAIRES & HELPERS
   ========================================================= */

/* Animation générique fade-in */
@keyframes hwFadeIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

/* Animation générique slide-up */
@keyframes hwSlideUp{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* Classe helper pour réduire les mouvements (accessibilité) */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}