/* ==========================================================================
   Badge "Bêta" — erlenmeyer bouillonnant
   Scope : Solutions (/services/), Plugins, Packages, CGU. Voir
   inc/public-beta-badge.php pour la logique de gating.

   Structure :
   .boss-beta-float  → ancrage, entrée en scène, zone d'interaction
     .bb-vapor       → vapeurs verdâtres autour du badge (pointer-events: none)
     .bb-core        → carré vert, pulsation, halo, reflet
       .bb-flask     → SVG fiole + bulles qui s'échappent du goulot
       .bb-label     → texte "Bêta"
       .bb-sheen     → reflet de verre qui balaie la surface
     .bb-tip         → infobulle (survol CSS / tap JS)

   Non-invasif par construction : seul le carré (~3.75rem) est cliquable,
   tout le reste du décor est pointer-events: none ; taille réduite sous
   640px ; animations coupées si prefers-reduced-motion.

   Placement (2026-07-27) : le badge vit désormais dans la barre de header
   (voir assets/js/public-beta-badge.js, placeInHeader()) plutôt qu'en coin
   flottant permanent, tout à l'extrême droite — après les boutons CTA.
   `.boss-beta-float` seule = repli avant que le JS ne déplace le badge (ou
   si `.site-header-primary-section-right` n'existe pas) ; `.is-inline` =
   état une fois inséré en dernière position de la ligne flex des CTA. Sous
   640px, le JS annule le déplacement et cette feuille retombe sur l'ancien
   widget flottant bas-droite.
   ========================================================================== */

.boss-beta-float {
  --bb-green-1: #22b573;
  --bb-green-2: #0f8a56;
  /* 3rem (48px) — demande TAKOUDJOU 2026-07-27 : aligner sur le gabarit
     des tuiles du rail "Le Quai" (.boss-nav-rail__tile, 48px), désormais
     le voisin direct du badge à l'extrême droite du header, plutôt que
     sur l'ancien repère des boutons CTA du thème parent,
     2.75rem/44px — CTA aujourd'hui masqués sur desktop, cf. header-nav-
     rail.css). */
  height: 3rem;
  width: 3rem;
  position: absolute;
  top: 50%;
  right: 1.5rem;
  margin-top: -1.5rem; /* centrage vertical stable, indépendant de `transform`
                           (déjà utilisé par l'animation d'entrée ci-dessous) */
  z-index: 45;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* Interaction volontaire, limitée au carré du badge uniquement
     (vapeurs, bulles et infobulle sont en pointer-events: none).
     Pour repasser en 100 % transparent : pointer-events: none. */
  pointer-events: auto;
  animation: bb-enter 0.7s cubic-bezier(0.22, 1.4, 0.36, 1) both;
}

/* Une fois déplacé en dernière position de `.site-header-primary-section-right`
   par le JS : simple élément de la ligne flex du thème, plus de positionnement
   manuel. Pas de marge à droite — le badge occupe l'extrême bord, là où
   s'arrêtait le dernier bouton CTA ; seule une marge à gauche l'espace des
   boutons qui le précèdent. */
.boss-beta-float.is-inline {
  position: relative;
  top: auto;
  right: auto;
  margin: 0 0 0 0.5rem;
  flex: none;
  align-self: center;
}

/* L'ombre d'« élévation » de .bb-core (voir @keyframes bb-pulse plus bas)
   est décalée vers le bas par construction (effet de carte flottante,
   pensé pour le widget en coin de page). Repris dans le header, ce biais
   vertical, combiné à la proximité immédiate du bouton CTA, se lisait
   comme un halo posé de travers plutôt que centré sur l'icône (retour
   TAKOUDJOU, 2026-07-27). Ici l'ombre est recentrée (aucun décalage X/Y). */
.boss-beta-float.is-inline .bb-core {
  animation-name: bb-pulse-inline;
}
@keyframes bb-pulse-inline {
  0%, 100% {
    box-shadow: 0 0 20px 0 rgba(15, 138, 86, 0.34), 0 0 0 0 rgba(34, 181, 115, 0.5);
    transform: scale(1) rotate(-2deg);
  }
  50% {
    box-shadow: 0 0 24px 2px rgba(15, 138, 86, 0.42), 0 0 0 9px rgba(34, 181, 115, 0);
    transform: scale(1.07) rotate(2deg);
  }
}

/* --- Entrée en scène : le badge "tombe" dans son coin et rebondit -------- */
@keyframes bb-enter {
  0%   { opacity: 0; transform: translateY(18px) scale(0.5) rotate(-8deg); }
  60%  { opacity: 1; transform: translateY(-3px) scale(1.08) rotate(2deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

/* --- Le carré vert : pulsation respiration + anneau ----------------------- */
.bb-core {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8% 8% 9%;
  background: linear-gradient(135deg, var(--bb-green-1) 0%, var(--bb-green-2) 100%);
  border-radius: 16px;
  animation: bb-pulse 2.6s ease-in-out infinite;
}

@keyframes bb-pulse {
  0%, 100% {
    box-shadow: 0 14px 30px rgba(15, 138, 86, 0.34), 0 0 0 0 rgba(34, 181, 115, 0.5);
    transform: scale(1) rotate(-2deg);
  }
  50% {
    box-shadow: 0 16px 34px rgba(15, 138, 86, 0.42), 0 0 0 9px rgba(34, 181, 115, 0);
    transform: scale(1.07) rotate(2deg);
  }
}

/* Halo supplémentaire, activé pendant l'ébullition / au survol */
.bb-core::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 19px;
  box-shadow: 0 0 20px 7px rgba(88, 230, 165, 0.55);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.boss-beta-float.is-boiling .bb-core::before { opacity: 0.85; }
@media (hover: hover) {
  .boss-beta-float:hover .bb-core::before { opacity: 0.5; }
}

/* --- Reflet de verre qui balaie le badge toutes les ~6 s ------------------ */
.bb-sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.bb-sheen::before {
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -70%;
  width: 55%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.32) 50%, transparent);
  transform: skewX(-18deg) translateX(0);
  animation: bb-sheen 6.5s ease-in-out infinite;
}
@keyframes bb-sheen {
  0%, 62%   { transform: skewX(-18deg) translateX(0); }
  78%, 100% { transform: skewX(-18deg) translateX(420%); }
}

/* --- La fiole --------------------------------------------------------------- */
.bb-flask {
  position: relative;
  width: 72%;
  transform-origin: 50% 85%;
}
.bb-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (hover: hover) {
  /* Au survol, la fiole penche comme pour verser */
  .boss-beta-float:hover .bb-svg { transform: rotate(-9deg) translateY(-1px); }
}

/* Vagues du liquide (période 40 unités → translation -40px sans couture) */
.bb-wave { animation: bb-wave 3.4s linear infinite; }
.bb-wave-b { animation-duration: 5.2s; animation-direction: reverse; }
@keyframes bb-wave { to { transform: translateX(-40px); } }

/* Bulles dans le liquide */
.bb-bub {
  fill: #eafff3;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: bb-rise var(--d, 2.6s) ease-in var(--dl, 0s) infinite;
}
@keyframes bb-rise {
  0%   { transform: translateY(0) scale(0.7); opacity: 0; }
  20%  { opacity: 0.95; }
  100% { transform: translateY(-13px) scale(1.3); opacity: 0; }
}

/* Bulles de renfort, en pause — libérées pendant l'ébullition */
.bb-bub.bb-extra { animation-play-state: paused; }
.boss-beta-float.is-boiling .bb-bub.bb-extra { animation-play-state: running; }

/* Ébullition : la fiole frétille */
.boss-beta-float.is-boiling .bb-flask {
  animation: bb-wobble 0.55s ease-in-out 4;
}
@keyframes bb-wobble {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-4deg); }
  75%      { transform: rotate(4deg); }
}

/* Écrasement-étirement au tap */
.boss-beta-float.bb-squash .bb-flask {
  animation: bb-squash 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes bb-squash {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.18, 0.82); }
  60%  { transform: scale(0.9, 1.12); }
  100% { transform: scale(1); }
}

/* --- Bulles qui s'échappent du goulot -------------------------------------- */
.bb-esc {
  position: absolute;
  left: 50%;
  bottom: 88%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.95), rgba(214, 255, 235, 0.55) 60%, rgba(214, 255, 235, 0));
  opacity: 0;
  pointer-events: none;
  animation: bb-esc var(--d, 3.2s) ease-in var(--dl, 0s) infinite;
}
@keyframes bb-esc {
  0%   { transform: translate(0, 0) scale(0.5); opacity: 0; }
  18%  { opacity: 0.9; }
  100% { transform: translate(var(--dx, 5px), -34px) scale(1.15); opacity: 0; }
}

/* Particules éjectées au tap (créées par le JS) */
.bb-pop {
  position: absolute;
  left: 50%;
  bottom: 88%;
  width: var(--s, 6px);
  height: var(--s, 6px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, rgba(190, 255, 222, 0.7) 55%, rgba(190, 255, 222, 0));
  opacity: 0;
  pointer-events: none;
  animation: bb-pop var(--pd, 0.8s) ease-out forwards;
}
@keyframes bb-pop {
  0%   { transform: translate(0, 0) scale(0.5); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(var(--dx, 0px), var(--dy, -34px)) scale(1.1); opacity: 0; }
}

/* --- Vapeurs verdâtres autour du badge -------------------------------------- */
.bb-vapor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  transition: opacity 0.6s ease;
}
.boss-beta-float.is-boiling .bb-vapor { opacity: 1; }
.bb-vapor i {
  position: absolute;
  border-radius: 50%;
  filter: blur(6px);
  background: radial-gradient(closest-side, rgba(190, 246, 216, 0.65), rgba(190, 246, 216, 0) 72%);
  opacity: 0;
  animation: bb-wisp var(--d, 6s) ease-in-out var(--dl, 0s) infinite alternate;
}
.bb-vapor i:nth-child(1) { width: 34px; height: 20px; left: -14px; top: -10px; --d: 5.6s; }
.bb-vapor i:nth-child(2) { width: 40px; height: 22px; right: -16px; top: -6px; --d: 7.2s; --dl: 1.4s; }
.bb-vapor i:nth-child(3) { width: 30px; height: 18px; left: -10px; bottom: 2px; --d: 6.4s; --dl: 2.6s; }
@keyframes bb-wisp {
  0%   { opacity: 0; transform: translate(0, 4px) scale(0.7); }
  45%  { opacity: 0.75; }
  100% { opacity: 0.15; transform: translate(6px, -10px) scale(1.25); }
}

/* --- Texte ------------------------------------------------------------------ */
.bb-label {
  font-family: var(--boss-font-ui);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(7, 60, 38, 0.45);
}

/* --- Infobulle ---------------------------------------------------------------- */
.bb-tip {
  /*
   * L'émoji 🧪 a des métriques de glyphe plus hautes que le texte latin
   * environnant : avec un simple bloc + `padding` en `em`, il dépassait
   * verticalement du fond arrondi (« le texte sort du background »).
   * `display: inline-flex` + `line-height` explicite + `width: max-content`
   * forcent le fond à toujours épouser exactement le contenu, sur les deux
   * axes, quel que soit le rendu du glyphe.
   */
  align-items: center;
  /*
   * Sous le badge par défaut, pas au-dessus (2026-07-27) : dans le header,
   * le badge est collé au sommet de la page (header sticky) — une bulle
   * posée « au-dessus » n'a nulle part où se déployer et sort du viewport,
   * invisible pour un vrai visiteur (seule la barre d'admin WP masquait ce
   * problème en donnant l'illusion d'un peu de place). Seul le widget
   * flottant mobile (bas-droite) repasse « au-dessus » — voir la media
   * query max-width: 640px plus bas, seul contexte où c'est correct.
   */
  top: calc(100% + 10px);
  box-sizing: border-box;
  display: inline-flex;
  gap: 0.35em;
  line-height: 1.35;
  position: absolute;
  /* Fond du carré, pas un décalage arbitraire : la bulle reste ancrée à
     l'icône plutôt que de sembler posée à côté d'elle (retour TAKOUDJOU,
     2026-07-27 — voir aussi ::after ci-dessous, recentré pour ce gabarit
     de 2.75rem). */
  right: 0;
  white-space: nowrap;
  width: max-content;
  font-family: var(--boss-font-ui);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #d9ffe9;
  background: #0b3f2a;
  border: 1px solid rgba(94, 234, 170, 0.4);
  border-radius: 999px;
  padding: 0.5em 0.85em;
  box-shadow: 0 10px 24px rgba(4, 40, 26, 0.45);
  opacity: 0;
  transform: translateY(-6px) scale(0.94);
  transform-origin: top right;
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.bb-tip::after {
  content: "";
  position: absolute;
  /* Pointe vers le centre du carré (2.75rem = 44px → centre à 22px du
     bord droit, flèche de 8px donc right: 18px). Bulle sous le badge par
     défaut : la flèche est au-dessus d'elle, pointe vers le haut (bordures
     haut/gauche visibles, cf. widget mobile ci-dessous pour l'inverse). */
  right: 18px;
  bottom: 100%;
  margin-bottom: -5px;
  width: 8px;
  height: 8px;
  background: #0b3f2a;
  border-left: 1px solid rgba(94, 234, 170, 0.4);
  border-top: 1px solid rgba(94, 234, 170, 0.4);
  transform: rotate(45deg);
}
@media (hover: hover) {
  .boss-beta-float:hover .bb-tip { opacity: 1; transform: none; }
}
.boss-beta-float.show-tip .bb-tip { opacity: 1; transform: none; }

/* --- Mobile ------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* Repli uniquement : le JS (placeInHeader(), public-beta-badge.js) place
     désormais le badge dans la ligne du header sur mobile aussi — la
     colonne `.site-header-primary-section-right` existe bien côté mobile
     (avant le déclencheur du menu), ce n'était qu'une question de place une
     fois le bouton « Tableau de bord » réduit à une icône (voir
     app-overrides.css, [data-boss-header-role="dashboard"]). Ce bloc ne
     s'applique donc que si le JS n'a pas pu poser `.is-inline` (slot
     introuvable) : `:not(.is-inline)` évite tout conflit avec le placement
     normal, même si la spécificité de `.is-inline` suffirait déjà seule. */
  .boss-beta-float:not(.is-inline) {
    position: fixed;
    top: auto;
    margin-top: 0;
    width: 2.75rem;
    height: 2.75rem;
    bottom: 0.6rem;
    right: 0.6rem;
  }
  .bb-core { border-radius: 12px; }
  .bb-label { font-size: 0.48rem; letter-spacing: 0.07em; }
  .bb-vapor { opacity: 0.4; }
  .bb-vapor i:nth-child(3) { display: none; }
  .bb-esc { width: 4px; height: 4px; margin-left: -2px; }
  /* Seul contexte où la bulle a de la place au-dessus : widget flottant de
     repli bas-droite, loin du sommet de la page. Le badge inline sur
     mobile (cas normal désormais) garde le défaut « en-dessous » posé plus
     haut dans ce fichier — sans le `:not(.is-inline)` ici, la bulle
     ressortirait du viewport en haut de page comme avant le correctif du
     27/07 (retour TAKOUDJOU). */
  .bb-tip { font-size: 0.6rem; }
  .boss-beta-float:not(.is-inline) .bb-tip {
    top: auto;
    bottom: calc(100% + 10px);
    transform: translateY(6px) scale(0.94);
    transform-origin: bottom right;
  }
  .boss-beta-float:not(.is-inline) .bb-tip::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: -5px;
    border-left: none;
    border-top: none;
    border-right: 1px solid rgba(94, 234, 170, 0.4);
    border-bottom: 1px solid rgba(94, 234, 170, 0.4);
  }
}

/* --- Accessibilité : mouvement réduit ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .boss-beta-float,
  .bb-core,
  .bb-wave,
  .bb-bub,
  .bb-esc,
  .bb-vapor i,
  .bb-sheen::before,
  .bb-flask {
    animation: none !important;
  }
  .bb-esc,
  .bb-pop { display: none; }
  /* Le liquide reste visible, figé, avec quelques bulles statiques */
  .bb-bub { opacity: 0.55; transform: none; }
  .bb-svg,
  .bb-core::before,
  .bb-tip,
  .bb-vapor { transition: none; }
}