/* ═══════════════════ AGENT CHAT — composant partagé ═══════════════════
   Le guide du site : bouton flottant + panneau de conversation.

   ⚠️ Placement en bas à GAUCHE, et ce n'est pas un caprice. Le coin bas-droite
   est déjà occupé sur presque tout le site : bouton « ↑ » (bottom:24px) sur 98
   pages, bouton « ✏️ Édition » (bottom:70px) sur 17 pages. Le haut-droite est
   pris par le cta-panel. Le bas-gauche est le seul coin libre — y poser le
   lanceur évite une pile de trois boutons superposés.

   ⚠️ Mode sombre : on ne suit QUE html[data-theme="dark"], jamais
   prefers-color-scheme. La majorité des pages du site sont en fond clair fixe
   et n'ont pas de bascule ; un widget sombre sur une page claire jurerait.
   ══════════════════════════════════════════════════════════════════════ */

.lbag {
  --lbag-teal: #0E6E66;
  --lbag-teal-clair: #128a80;
  --lbag-ocre: #b07840;
  --lbag-fond: #fdfaf5;
  --lbag-surface: #fff;
  --lbag-encre: #1a1614;
  --lbag-doux: #6b6560;
  --lbag-ligne: rgba(26, 22, 20, .12);
  --lbag-ombre: 0 6px 28px rgba(0, 0, 0, .16);
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
}

html[data-theme="dark"] .lbag {
  --lbag-fond: #16130f;
  --lbag-surface: #1f1b16;
  --lbag-encre: #f2ece4;
  --lbag-doux: #a9a099;
  --lbag-ligne: rgba(242, 236, 228, .16);
  --lbag-ombre: 0 6px 28px rgba(0, 0, 0, .5);
  --lbag-teal: #35a99e;
  --lbag-teal-clair: #4cc4b8;
}

/* ── Le lanceur ────────────────────────────────────────────────────────── */

.lbag-btn {
  position: fixed;
  bottom: 24px;
  left: 20px;
  z-index: 9400;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px 11px 13px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--lbag-teal), var(--lbag-teal-clair));
  color: #fff;
  font: 600 14px/1 'DM Sans', system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(14, 110, 102, .38);
  transition: transform .18s, box-shadow .18s;
}

.lbag-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 24px rgba(14, 110, 102, .46); }
.lbag-btn:focus-visible { outline: 3px solid var(--lbag-ocre); outline-offset: 3px; }

/* La boussole est le logo de la série « Penser avec l'IA » : elle dit
   « on t'oriente » mieux qu'une bulle de chat de plus. */
.lbag-btn-ico { font-size: 19px; line-height: 1; }

/* Halo qui respire — signale la présence sans clignoter agressivement. */
.lbag-btn::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  border: 2px solid var(--lbag-teal);
  opacity: 0;
  animation: lbag-halo 3.6s ease-out infinite;
  pointer-events: none;
}

@keyframes lbag-halo {
  0%   { transform: scale(.96); opacity: .55; }
  70%  { transform: scale(1.22); opacity: 0; }
  100% { opacity: 0; }
}

/* Une fois la conversation entamée, le halo n'a plus lieu d'être. */
.lbag-btn.lbag-vu::before { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .lbag-btn::before { animation: none; }
  .lbag-btn { transition: none; }
}

@media (max-width: 560px) {
  .lbag-btn { bottom: 16px; left: 14px; padding: 11px 15px 11px 12px; font-size: 13px; }
}

/* ── Le panneau ────────────────────────────────────────────────────────── */

.lbag-panneau {
  position: fixed;
  bottom: 84px;
  left: 20px;
  z-index: 9500;
  display: none;
  flex-direction: column;
  width: 392px;
  max-width: calc(100vw - 40px);
  height: min(620px, calc(100vh - 120px));
  background: var(--lbag-fond);
  border: 1px solid var(--lbag-ligne);
  border-radius: 18px;
  box-shadow: var(--lbag-ombre);
  overflow: hidden;
}

.lbag-panneau.lbag-ouvert { display: flex; }

@media (max-width: 560px) {
  /* Plein écran sur mobile : un panneau flottant de 390px sur un écran de
     360px n'a pas de sens, et le clavier virtuel mange la moitié de la place. */
  .lbag-panneau {
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    border-radius: 0;
    border: none;
  }
}

/* ⚠️ Fond figé pendant que le panneau plein écran est ouvert.

   Sans cela, le document continue de défiler derrière le panneau. Anodin sur
   une page courte, franchement mauvais ici : /atelier-prompts/ mesure 68 000
   pixels de haut, /guides/ pèse 2,2 Mo. Le navigateur mobile devait composer
   une couche fixe par-dessus un document immense, et le défilement passait du
   fil de conversation à la page dès qu'on atteignait le bout — la page se
   bloquait ou l'onglet était tué.

   La classe est posée par le JS, uniquement sous 560 px : sur grand écran le
   panneau est une petite carte flottante, et le fond doit rester utilisable. */
html.lbag-fige,
html.lbag-fige body {
  overflow: hidden;
}

html.lbag-fige body {
  position: fixed;
  width: 100%;
}

/* ── En-tête ───────────────────────────────────────────────────────────── */

.lbag-tete {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  background: var(--lbag-surface);
  border-bottom: 1px solid var(--lbag-ligne);
  flex-shrink: 0;
}

.lbag-tete-ico {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lbag-teal), var(--lbag-teal-clair));
  font-size: 16px;
  flex-shrink: 0;
}

.lbag-tete-txt { flex: 1; min-width: 0; }
.lbag-tete-titre { font: 700 14.5px/1.25 'Fraunces', Georgia, serif; color: var(--lbag-encre); }
.lbag-tete-sous { font-size: 11.5px; color: var(--lbag-doux); margin-top: 1px; }

.lbag-tete-btn {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid var(--lbag-ligne);
  border-radius: 8px;
  background: transparent;
  color: var(--lbag-doux);
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.lbag-tete-btn:hover { background: var(--lbag-ligne); color: var(--lbag-encre); }

/* ── Fil de conversation ───────────────────────────────────────────────── */

.lbag-fil {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.lbag-msg { max-width: 90%; font-size: 14px; line-height: 1.58; }

.lbag-msg-moi {
  align-self: flex-end;
  background: var(--lbag-teal);
  color: #fff;
  padding: 9px 13px;
  border-radius: 15px 15px 4px 15px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.lbag-msg-lui { align-self: flex-start; color: var(--lbag-encre); max-width: 100%; }
.lbag-msg-lui p { margin: 0 0 9px; }
.lbag-msg-lui p:last-child { margin-bottom: 0; }
.lbag-msg-lui ul { margin: 0 0 9px; padding-left: 19px; }
.lbag-msg-lui li { margin-bottom: 5px; }
.lbag-msg-lui strong { font-weight: 700; }
.lbag-msg-lui code {
  background: var(--lbag-ligne);
  padding: 1px 5px;
  border-radius: 4px;
  font: 500 12.5px/1 'JetBrains Mono', ui-monospace, monospace;
}

/* ── Liens proposés, avec leur QR ──────────────────────────────────────── */

.lbag-lien {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--lbag-teal);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
}
.lbag-lien:hover { color: var(--lbag-ocre); }

/* Petite pastille cliquable posée après chaque lien : pictogramme + mot
   « QR ». Assez dessinée pour se voir comme un bouton, assez discrète pour ne
   pas concurrencer le lien lui-même. */
.lbag-qr {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 5px;
  padding: 2px 7px 2px 5px;
  border: 1px solid var(--lbag-ligne);
  border-radius: 999px;
  background: var(--lbag-surface);
  color: var(--lbag-doux);
  font: 600 10.5px/1 inherit;
  letter-spacing: .03em;
  cursor: pointer;
  vertical-align: middle;
  transition: background .15s, color .15s, border-color .15s;
}
.lbag-qr:hover {
  background: var(--lbag-teal);
  border-color: var(--lbag-teal);
  color: #fff;
}
.lbag-qr:focus-visible { outline: 2px solid var(--lbag-teal); outline-offset: 2px; }
.lbag-qr svg { display: block; }

.lbag-qr-boite {
  margin: 8px 0;
  padding: 11px;
  background: var(--lbag-surface);
  border: 1px solid var(--lbag-ligne);
  border-radius: 12px;
  text-align: center;
}
.lbag-qr-boite img { width: 148px; height: 148px; image-rendering: pixelated; }
.lbag-qr-leg { font-size: 11.5px; color: var(--lbag-doux); margin-top: 6px; }

/* ── Suggestions ───────────────────────────────────────────────────────── */

.lbag-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }

.lbag-chip {
  padding: 7px 12px;
  border: 1px solid var(--lbag-teal);
  border-radius: 999px;
  background: transparent;
  color: var(--lbag-teal);
  font: 500 12.5px/1.3 inherit;
  cursor: pointer;
  text-align: left;
  transition: background .15s, color .15s;
}
.lbag-chip:hover { background: var(--lbag-teal); color: #fff; }

/* ── Saisie ────────────────────────────────────────────────────────────── */

.lbag-bas {
  flex-shrink: 0;
  padding: 11px 12px;
  border-top: 1px solid var(--lbag-ligne);
  background: var(--lbag-surface);
}

.lbag-saisie { display: flex; gap: 8px; align-items: flex-end; }

.lbag-champ {
  flex: 1;
  min-height: 40px;
  max-height: 120px;
  padding: 10px 12px;
  border: 1px solid var(--lbag-ligne);
  border-radius: 11px;
  background: var(--lbag-fond);
  color: var(--lbag-encre);
  font: 400 14px/1.45 inherit;
  resize: none;
}
.lbag-champ:focus { outline: 2px solid var(--lbag-teal); outline-offset: -1px; }
.lbag-champ::placeholder { color: var(--lbag-doux); }

.lbag-envoi {
  width: 40px; height: 40px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border: none;
  border-radius: 11px;
  background: var(--lbag-teal);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background .15s;
}
.lbag-envoi:hover:not(:disabled) { background: var(--lbag-teal-clair); }
.lbag-envoi:disabled { opacity: .45; cursor: default; }

.lbag-note { font-size: 10.5px; color: var(--lbag-doux); text-align: center; margin-top: 7px; }

/* ── États ─────────────────────────────────────────────────────────────── */

.lbag-points { display: inline-flex; gap: 4px; align-items: center; height: 18px; }
.lbag-points i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lbag-doux);
  animation: lbag-rebond 1.3s infinite ease-in-out;
}
.lbag-points i:nth-child(2) { animation-delay: .16s; }
.lbag-points i:nth-child(3) { animation-delay: .32s; }

@keyframes lbag-rebond {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30%           { transform: translateY(-5px); opacity: 1; }
}

.lbag-err {
  align-self: stretch;
  padding: 9px 12px;
  border: 1px solid rgba(190, 90, 60, .35);
  border-radius: 10px;
  background: rgba(190, 90, 60, .08);
  color: #a34a30;
  font-size: 12.5px;
}
html[data-theme="dark"] .lbag-err { color: #e29076; }

.lbag-reessai {
  margin-left: 6px;
  padding: 3px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: 600 11.5px/1.3 inherit;
  cursor: pointer;
}
.lbag-reessai:hover { background: currentColor; color: var(--lbag-fond); }

/* ── Invitation d'accueil ──────────────────────────────────────────────── */

/* Sur la page d'accueil seulement : une bulle posée juste au-dessus du
   lanceur, qu'elle désigne de sa pointe. Elle ne va NI en haut à droite (le
   cta-panel y est fixé), NI dans le flux de la page : l'accueil démarre par
   une bannière photo, où le texte devenait illisible. */
.lbag-bulle {
  position: fixed;
  left: 20px;                 /* recalculé en JS : à droite du lanceur */
  bottom: 24px;               /* même niveau que le bouton « Guide du site » */
  z-index: 9399;              /* juste sous le lanceur */
  width: 300px;
  max-width: calc(100vw - 40px);
  background: var(--lbag-surface);
  border: 1px solid var(--lbag-ligne);
  border-radius: 16px;
  box-shadow: var(--lbag-ombre);
  opacity: 0;
  transform: translateY(10px) scale(.97);
  pointer-events: none;
  transition: opacity .28s ease, transform .28s cubic-bezier(.2, .8, .3, 1);
}

.lbag-bulle.lbag-bulle-la { opacity: 1; transform: none; pointer-events: auto; }

/* La pointe, tournée vers le lanceur qui se trouve à gauche. Posée en bas :
   la bulle est plus haute que le bouton et monte au-dessus de lui. */
.lbag-bulle::after {
  content: '';
  position: absolute;
  left: -7px;
  bottom: 16px;
  width: 12px;
  height: 12px;
  background: var(--lbag-surface);
  border-left: 1px solid var(--lbag-ligne);
  border-bottom: 1px solid var(--lbag-ligne);
  transform: rotate(45deg);
}

.lbag-bulle-corps {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  padding: 14px 32px 15px 14px;
  border: none;
  border-radius: 16px;
  background: none;
  color: var(--lbag-encre);
  font: 500 13px/1.45 'DM Sans', system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}

.lbag-bulle-ico {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lbag-teal), var(--lbag-teal-clair));
  font-size: 15px;
  flex-shrink: 0;
}

.lbag-bulle-txt b {
  display: block;
  margin-bottom: 3px;
  font: 700 14px/1.3 'Fraunces', Georgia, serif;
  color: var(--lbag-encre);
}
.lbag-bulle-txt span { color: var(--lbag-doux); font-size: 12.5px; }

.lbag-bulle-x {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--lbag-doux);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.lbag-bulle-x:hover { background: var(--lbag-ligne); color: var(--lbag-encre); }

@media (max-width: 560px) {
  /* Pas la place à droite du lanceur : sur téléphone, la bulle repasse
     au-dessus de lui, la pointe tournée vers le bas. */
  .lbag-bulle { left: 14px !important; bottom: 68px; width: 276px; }
  .lbag-bulle::after {
    left: 20px; bottom: -7px;
    border-left: none; border-right: 1px solid var(--lbag-ligne);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lbag-bulle { transition: none; }
}