/* ============================================================================
   SITE VITRINE EQUIMONDO - Le lanceur du chatbot « Une question ? »
   ----------------------------------------------------------------------------
   Feuille PARTAGEE par les 43 pages, chargee apres leur <style> : le CSS du
   lanceur etait recopie dans chaque page, en deux variantes divergentes. Ici il
   vit a UN seul endroit, et l'URL est versionnee (EquimondoVitrineAsset) donc
   une mise en ligne s'impose d'elle-meme au navigateur.

   L'INTENTION : le bouton doit se signaler sans harceler. Un mouvement permanent
   fatigue et finit par etre ignore ; on choisit donc une RESPIRATION LENTE --
   un cycle de 6 s dont l'accroche ne dure qu'une seconde et demie. Trois gestes
   simultanes sur ce temps fort : une onde qui s'echappe du bouton, un reflet qui
   traverse la pastille, et la baguette qui s'anime.

   ARCHITECTURE : toute l'animation vit sur les PSEUDO-ELEMENTS et sur l'icone.
   Le bouton lui-meme ne porte que son entree et ses etats survol/appui, donc
   rien n'entre en conflit avec eux -- une animation qui tourne sur `transform`
   ecraserait le `translateY` du survol, et le bouton paraitrait mort au passage
   de la souris.
   ========================================================================== */

.chat-bulle{
  --lanceur-cycle: 6s;          /* le temps mort entre deux accroches */
  --lanceur-corail: 251, 146, 60;
  /* PAS de `position` ici : le bouton est deja en `position:fixed` dans le CSS
     de la page, et cette feuille est chargee APRES -- redeclarer la propriete
     l'aurait remise dans le flux, et le bouton aurait defile avec la page.
     `fixed` sert deja de reference aux deux pseudo-elements en `inset:0`. */
}

/* Le texte et l'icone passent AU-DESSUS du reflet. */
.chat-bulle > *{ position: relative; z-index: 2; }

/* ---- Le reflet qui traverse la pastille -----------------------------------
   `background-position` sur une surface de 50 px de haut : le repeint est
   minuscule et borne au bouton. Un translate sur un enfant aurait demande un
   `overflow:hidden` qui aurait coupe l'onde. */
.chat-bulle::before{
  content:""; position:absolute; inset:0; z-index:1;
  border-radius:inherit; pointer-events:none;
  background:linear-gradient(105deg,
    transparent 38%,
    rgba(255,255,255,.50) 50%,
    transparent 62%);
  background-size:260% 100%;
  background-position:210% 0;
  animation: lanceurReflet var(--lanceur-cycle) cubic-bezier(.16,1,.3,1) 2.4s infinite;
}

/* ---- L'onde qui s'echappe -------------------------------------------------
   Un `box-shadow` en anneau : aucune boite supplementaire, aucun recalcul de
   mise en page, et l'onde traverse le bord arrondi sans le couper. */
.chat-bulle::after{
  content:""; position:absolute; inset:0; z-index:0;
  border-radius:inherit; pointer-events:none;
  box-shadow:0 0 0 0 rgba(var(--lanceur-corail), .5);
  animation: lanceurOnde var(--lanceur-cycle) cubic-bezier(.22,1,.36,1) 2.4s infinite;
}

/* ---- La baguette ---------------------------------------------------------- */
.chat-bulle i{
  display:inline-block;
  transform-origin:60% 70%;     /* le poignet, pas le centre du glyphe */
  animation: lanceurBaguette var(--lanceur-cycle) cubic-bezier(.22,1,.36,1) 2.4s infinite;
}

@keyframes lanceurReflet{
  0%, 62%   { background-position:210% 0; }
  84%, 100% { background-position:-60% 0; }
}
@keyframes lanceurOnde{
  0%   { box-shadow:0 0 0 0    rgba(var(--lanceur-corail), .50); }
  22%  { box-shadow:0 0 0 16px rgba(var(--lanceur-corail), 0);   }
  100% { box-shadow:0 0 0 16px rgba(var(--lanceur-corail), 0);   }
}
@keyframes lanceurBaguette{
  0%, 62%  { transform:rotate(0) scale(1); }
  70%      { transform:rotate(-15deg) scale(1.14); }
  78%      { transform:rotate(11deg)  scale(1.08); }
  88%,100% { transform:rotate(0) scale(1); }
}

/* ---- Survol : l'accroche s'arrete, la main a pris le relais ---------------
   Continuer a clignoter sous le curseur serait du bruit. Le reflet, lui,
   repasse une fois, plus vite : c'est la reponse au geste. */
.chat-bulle:hover::after,
.chat-bulle:hover i{ animation:none; }
.chat-bulle:hover::before{
  animation:lanceurReflet 1.1s cubic-bezier(.16,1,.3,1) both;
}
.chat-bulle:hover i{ transform:rotate(-12deg) scale(1.1); transition:transform .25s cubic-bezier(.22,1,.36,1); }
.chat-bulle:focus-visible{
  outline:3px solid rgba(255,255,255,.9);
  outline-offset:3px;
}

/* ---- Panneau ouvert : plus aucune accroche -------------------------------
   Le bouton a fait son travail ; insister serait agressif. */
body.chat-ouvert .chat-bulle::before,
body.chat-ouvert .chat-bulle::after,
body.chat-ouvert .chat-bulle i{ animation:none; }

/* ---- Mouvement reduit ----------------------------------------------------
   L'accroche disparait entierement. Le bouton reste parfaitement lisible : il
   garde sa couleur, son ombre et ses etats -- rien de ce qui SIGNALE le bouton
   ne dependait du mouvement seul. */
@media (prefers-reduced-motion: reduce){
  .chat-bulle::before,
  .chat-bulle::after,
  .chat-bulle i,
  .chat-bulle:hover::before{ animation:none; }
  .chat-bulle i{ transform:none; }
}