/* Assistant LG Préventis — bulle de discussion.
   Les couleurs sont celles du thème (#c2373d, #0d1421) : la bulle doit avoir
   l'air d'appartenir au site, pas d'y avoir été collée. */

.lgp-a {
  --lgp-rouge: #c2373d;
  --lgp-nuit: #0d1421;
  --lgp-gris: #f4f6f9;
  --lgp-bord: #e3e8ee;
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9998;
  font-family: inherit;
}

/* ── Bouton d'appel ─────────────────────────────────────────────────────────
   Le mouvement est lent et discret : une bulle qui sautille en permanence sur
   un site d'organisme de formation fait gadget. Ici, une respiration de six
   secondes, un anneau qui s'ouvre toutes les six secondes, et tout le reste ne
   se déclenche qu'au survol. */
.lgp-a__lanceur { position: relative; width: 64px; height: 64px; margin-left: auto; }
.lgp-a__lanceur[hidden] { display: none; }

.lgp-a__bulle {
  position: relative;
  z-index: 2;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #fff;
  background:
    radial-gradient(120% 120% at 30% 22%, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(145deg, #d8474d 0%, var(--lgp-rouge) 48%, #8f2329 100%);
  box-shadow:
    0 10px 26px rgba(146, 27, 33, .38),
    0 2px 6px rgba(13, 20, 33, .22),
    inset 0 1px 0 rgba(255, 255, 255, .32),
    inset 0 -2px 6px rgba(0, 0, 0, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Trois respirations à l'arrivée, puis le bouton se tient tranquille. Une
     bulle qui bouge sans fin sur toutes les pages finit par agacer, et empêche
     même de la viser à la souris. Le mouvement sert à se faire remarquer une
     fois, pas à occuper l'écran. */
  animation: lgp-respire 6s ease-in-out 3;
  transition: transform .28s cubic-bezier(.34, 1.56, .64, 1), box-shadow .28s ease;
}
.lgp-a__bulle:hover,
.lgp-a__bulle:focus-visible {
  transform: translateY(-4px) scale(1.06);
  box-shadow:
    0 18px 38px rgba(146, 27, 33, .46),
    0 3px 8px rgba(13, 20, 33, .24),
    inset 0 1px 0 rgba(255, 255, 255, .38);
  animation-play-state: paused;
}
.lgp-a__bulle:active { transform: translateY(-1px) scale(.98); }

/* Au survol, l'anneau repart : le geste appelle une réponse. */
.lgp-a__lanceur:hover .lgp-a__anneau { animation: lgp-anneau 2.4s cubic-bezier(.2, .7, .3, 1) infinite; }
.lgp-a__lanceur:hover .lgp-a__anneau--2 { animation-delay: .8s; }
.lgp-a__bulle:focus-visible { outline: 3px solid rgba(194, 55, 61, .35); outline-offset: 3px; }

.lgp-a__bulle svg { width: 28px; height: 28px; display: block; }

/* Le trait du logo se dessine une fois à l'arrivée : la bulle a l'air tracée,
   pas collée. */
.lgp-a__trace { stroke-dasharray: 120; stroke-dashoffset: 120; animation: lgp-tracer 1.1s .25s ease forwards; }

/* Les trois points respirent l'un après l'autre, comme une réponse en cours. */
.lgp-a__pt { opacity: .35; animation: lgp-pt 2.4s infinite ease-in-out; }
.lgp-a__pt--2 { animation-delay: .28s; }
.lgp-a__pt--3 { animation-delay: .56s; }

/* Anneau qui s'ouvre depuis le bouton, puis s'efface. */
.lgp-a__anneau {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(194, 55, 61, .55);
  animation: lgp-anneau 6s cubic-bezier(.2, .7, .3, 1) 3;
  pointer-events: none;
  z-index: 1;
}
.lgp-a__anneau--2 { animation-delay: 1.1s; }

/* Pastille d'appel : présente au repos, elle disparaît dès la première ouverture. */
.lgp-a__pastille {
  position: absolute;
  top: 2px; right: 2px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #22c55e;
  border: 2.5px solid #fff;
  z-index: 3;
  animation: lgp-pastille 2.6s ease-in-out infinite;
}
.lgp-a__pastille[hidden] { display: none; }

/* Invite discrète, une seule fois par visite. */
.lgp-a__invite {
  position: absolute;
  right: 76px;
  bottom: 14px;
  width: max-content;
  max-width: 220px;
  background: #fff;
  color: #1f2733;
  border: 1px solid var(--lgp-bord);
  border-radius: 14px 14px 4px 14px;
  padding: 9px 30px 9px 13px;
  font-size: 12.5px;
  line-height: 1.4;
  box-shadow: 0 12px 30px rgba(13, 20, 33, .16);
  cursor: pointer;
  opacity: 0;
  transform: translateX(8px);
  animation: lgp-invite .45s .2s cubic-bezier(.34, 1.4, .64, 1) forwards;
}
.lgp-a__invite[hidden] { display: none; }
.lgp-a__invite-fermer {
  position: absolute;
  top: 4px; right: 5px;
  border: 0; background: none; cursor: pointer;
  color: #9aa5b4; font-size: 14px; line-height: 1; padding: 3px;
}
.lgp-a__invite-fermer:hover { color: #1f2733; }

@keyframes lgp-respire {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-3px) scale(1.025); }
}
@keyframes lgp-anneau {
  0%       { transform: scale(1); opacity: .55; }
  55%, 100% { transform: scale(1.75); opacity: 0; }
}
@keyframes lgp-pastille {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); }
  50%      { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}
@keyframes lgp-tracer { to { stroke-dashoffset: 0; } }
@keyframes lgp-pt {
  0%, 100% { opacity: .3; transform: translateY(0); }
  40%      { opacity: 1;  transform: translateY(-1.2px); }
}
@keyframes lgp-invite { to { opacity: 1; transform: translateX(0); } }

/* ── Panneau ────────────────────────────────────────────────────────────── */
.lgp-a__panneau {
  width: 370px;
  max-width: calc(100vw - 32px);
  height: 520px;
  max-height: calc(100vh - 120px);
  background: #fff;
  border: 1px solid var(--lgp-bord);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(13, 20, 33, .22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.lgp-a__panneau[hidden] { display: none; }
.lgp-a__panneau { transform-origin: bottom right; animation: lgp-ouvre .26s cubic-bezier(.2, .9, .3, 1.1); }
@keyframes lgp-ouvre {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.lgp-a__entete {
  background: var(--lgp-nuit);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.lgp-a__titre { font-size: 14px; font-weight: 700; line-height: 1.2; }
.lgp-a__sous-titre { font-size: 11.5px; opacity: .72; line-height: 1.3; margin-top: 2px; }
.lgp-a__fermer {
  margin-left: auto;
  background: rgba(255, 255, 255, .12);
  border: 0;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}
.lgp-a__fermer:hover { background: rgba(255, 255, 255, .22); }

.lgp-a__fil {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: var(--lgp-gris);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lgp-a__msg {
  max-width: 85%;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.lgp-a__msg--bot { background: #fff; border: 1px solid var(--lgp-bord); color: #1f2733; align-self: flex-start; border-bottom-left-radius: 4px; }
.lgp-a__msg--moi { background: var(--lgp-rouge); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }

.lgp-a__sources { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 6px; }
.lgp-a__source {
  font-size: 11px;
  text-decoration: none;
  color: var(--lgp-rouge);
  border: 1px solid rgba(194, 55, 61, .3);
  border-radius: 999px;
  padding: 2px 8px;
}
.lgp-a__source:hover { background: rgba(194, 55, 61, .07); }

/* Bouton de passage à l'équipe : vert WhatsApp, pour qu'on comprenne où on va. */
.lgp-a__wa {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #25d366;
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
.lgp-a__wa:hover { background: #1eb257; color: #fff; }
.lgp-a__wa svg { width: 17px; height: 17px; flex-shrink: 0; }

.lgp-a__points { display: inline-flex; gap: 4px; align-items: center; }
.lgp-a__points span {
  width: 6px; height: 6px; border-radius: 50%; background: #9aa5b4;
  animation: lgp-rebond 1.1s infinite ease-in-out;
}
.lgp-a__points span:nth-child(2) { animation-delay: .15s; }
.lgp-a__points span:nth-child(3) { animation-delay: .3s; }
@keyframes lgp-rebond { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }

.lgp-a__bas { border-top: 1px solid var(--lgp-bord); padding: 10px; display: flex; gap: 8px; background: #fff; flex-shrink: 0; }
.lgp-a__saisie {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--lgp-bord);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13.5px;
  font-family: inherit;
  resize: none;
  max-height: 96px;
}
.lgp-a__saisie:focus { outline: 2px solid rgba(194, 55, 61, .35); outline-offset: 1px; }
.lgp-a__envoyer {
  width: 40px; height: 40px; flex-shrink: 0;
  border: 0; border-radius: 10px; background: var(--lgp-rouge); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lgp-a__envoyer:disabled { opacity: .45; cursor: default; }
.lgp-a__envoyer svg { width: 17px; height: 17px; }

.lgp-a__mention { font-size: 10.5px; color: #8a94a3; text-align: center; padding: 0 10px 8px; background: #fff; }

/* Plein écran sur mobile : un panneau de 370 px sur un téléphone laisse une
   bande inutilisable sur le côté et une saisie collée au bord. */
@media (max-width: 480px) {
  .lgp-a { right: 12px; bottom: 12px; left: 12px; }
  .lgp-a__lanceur { margin-left: auto; }
  .lgp-a__invite { right: 74px; max-width: min(220px, calc(100vw - 120px)); }
  .lgp-a__panneau { width: 100%; height: min(78vh, 560px); }
}

/* Mouvement réduit : tout s'arrête, y compris l'anneau et l'invite, qui
   restent lisibles à l'arrêt. */
@media (prefers-reduced-motion: reduce) {
  .lgp-a__bulle, .lgp-a__points span, .lgp-a__anneau, .lgp-a__pastille,
  .lgp-a__trace, .lgp-a__pt, .lgp-a__invite, .lgp-a__panneau {
    animation: none !important;
    transition: none !important;
  }
  .lgp-a__trace { stroke-dashoffset: 0; }
  .lgp-a__invite { opacity: 1; transform: none; }
  .lgp-a__anneau { display: none; }
}