/* Chatbot TrendJump — extrait de includes/chatbot.php le 2026-09-11 (était inline sur chaque page) */
#tjbot{--tj-accent:#c4f56b;--tj-accent-d:#a6e23f;--tj-ink:#0f140f;--tj-ink-2:#1c241b;
  --tj-bot:#f2f4ee;--tj-line:rgba(15,20,15,.09);--tj-shadow:0 20px 50px -12px rgba(15,30,10,.35);
  position:fixed;bottom:22px;right:22px;z-index:9999;font-family:'Barlow','Segoe UI',system-ui,sans-serif;
  opacity:0;transform:translateY(14px) scale(.92);pointer-events:none;
  transition:opacity .45s ease,transform .45s cubic-bezier(.34,1.56,.64,1)}
#tjbot.tjbot-ready{opacity:1;transform:none;pointer-events:auto}
#tjbot,#tjbot *{box-sizing:border-box}

/* Bulle flottante */
#tjbot-toggle{position:relative;width:46px;height:46px;border:none;border-radius:16px;cursor:pointer;
  background:linear-gradient(145deg,var(--tj-ink-2),var(--tj-ink));color:var(--tj-accent);
  box-shadow:var(--tj-shadow);display:flex;align-items:center;justify-content:center;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),border-radius .3s}
#tjbot-toggle:hover{transform:translateY(-3px) rotate(-4deg);border-radius:22px}
#tjbot-toggle:active{transform:scale(.94)}
#tjbot-toggle svg{width:21px;height:21px;transition:opacity .2s,transform .3s}
#tjbot-toggle .tjbot-close-ic{display:none;position:absolute}
#tjbot.open #tjbot-toggle{border-radius:50%}
#tjbot.open #tjbot-toggle .tjbot-chat-ic{opacity:0;transform:scale(.4) rotate(90deg)}
#tjbot.open #tjbot-toggle .tjbot-close-ic{display:block}
#tjbot-toggle::after{content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:0 0 0 0 rgba(196,245,107,.55);animation:tjbot-ring 2.6s ease-out infinite}
#tjbot.open #tjbot-toggle::after{animation:none}
@keyframes tjbot-ring{0%{box-shadow:0 0 0 0 rgba(196,245,107,.5)}70%,100%{box-shadow:0 0 0 16px rgba(196,245,107,0)}}
#tjbot-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;
  background:#ff5a4d;color:#fff;border-radius:11px;font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center;border:2.5px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.2)}

/* Lanceur du chat = bulle "Besoin d'aide ?" (remplace le bouton rond) */
#tjbot-teaser{position:absolute;bottom:0;right:0;display:flex;align-items:center;gap:11px;
  background:#fff;color:var(--tj-ink);padding:10px 14px 10px 11px;border-radius:18px 18px 5px 18px;
  box-shadow:var(--tj-shadow);white-space:nowrap;cursor:pointer;transform-origin:bottom right;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
#tjbot-teaser:hover{transform:translateY(-3px)}
#tjbot-teaser:active{transform:scale(.97)}
#tjbot.open #tjbot-teaser{display:none}
#tjbot-teaser .tjbot-teaser-av{width:38px;height:38px;border-radius:13px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:var(--tj-accent);
  background:linear-gradient(145deg,var(--tj-ink-2),var(--tj-ink))}
#tjbot-teaser .tjbot-teaser-av svg{width:21px;height:21px}
#tjbot-teaser b{font-size:14.5px;font-weight:700;line-height:1.2;display:block}
#tjbot-teaser small{font-size:12px;color:rgba(15,20,15,.5);line-height:1.2}
@media(max-width:480px){#tjbot-teaser small{display:none}#tjbot-teaser{padding:9px 15px 9px 9px}}


/* ─── Aperçu de conversation (état fermé), façon Chatra ─── */
#tjbot-preview{position:absolute;bottom:60px;right:0;width:272px;max-width:calc(100vw - 32px);display:flex;flex-direction:column;gap:8px;align-items:flex-end}
#tjbot.open #tjbot-preview,#tjbot.pv-off #tjbot-preview{display:none}
#tjbot-preview-close{width:22px;height:22px;border:none;border-radius:50%;background:#fff;color:#666;font-size:12px;cursor:pointer;
  box-shadow:0 4px 14px -4px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;margin-bottom:2px}
#tjbot-preview-close:hover{color:#000}
.tjbot-pv-row{display:flex;gap:9px;align-items:flex-end;width:100%}
.tjbot-pv-row .tjbot-teaser-av{width:32px;height:32px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,var(--tj-accent),var(--tj-accent-d));color:var(--tj-ink)}
.tjbot-pv-row .tjbot-teaser-av svg{width:17px;height:17px}
.tjbot-pv-msg{flex:1;background:#fff;color:var(--tj-ink);border:1px solid var(--tj-line);border-radius:16px 16px 16px 4px;padding:10px 13px;
  font-size:13.5px;line-height:1.4;box-shadow:var(--tj-shadow);animation:tjbot-up .4s ease both}
.tjbot-pv-quick{display:flex;flex-direction:column;gap:6px;width:100%;padding-left:41px}
.tjbot-pv-quick button{text-align:left;background:#fff;border:1px solid var(--tj-line);border-radius:18px;padding:9px 14px;font:inherit;font-size:13px;line-height:1.35;
  color:#3a7d16;cursor:pointer;box-shadow:0 10px 24px -14px rgba(0,0,0,.25);transition:transform .18s,border-color .18s,background .18s;animation:tjbot-up .4s ease both}
.tjbot-pv-quick button:nth-child(1){animation-delay:.15s}.tjbot-pv-quick button:nth-child(2){animation-delay:.25s}.tjbot-pv-quick button:nth-child(3){animation-delay:.35s}
.tjbot-pv-quick button:hover{transform:translateY(-2px);border-color:var(--tj-accent-d);background:#f6ffe8}
@media(max-width:480px){#tjbot-preview{width:calc(100vw - 32px)}.tjbot-pv-quick{padding-left:0}}

/* Croix de fermeture dans l'en-tête du chat */
#tjbot-head-close{position:absolute;top:14px;right:14px;z-index:2;width:30px;height:30px;border:none;
  background:rgba(255,255,255,.14);color:#fff;border-radius:50%;cursor:pointer;font-size:15px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background .15s}
#tjbot-head-close:hover{background:rgba(255,255,255,.26)}

/* Panneau */
#tjbot-panel{position:absolute;bottom:62px;right:0;width:378px;max-width:calc(100vw - 32px);
  height:560px;max-height:calc(100vh - 130px);background:#fff;border-radius:26px;
  box-shadow:var(--tj-shadow);overflow:hidden;display:none;flex-direction:column;
  border:1px solid var(--tj-line);transform-origin:bottom right}
#tjbot.open #tjbot-panel{display:flex;animation:tjbot-pop .42s cubic-bezier(.34,1.56,.64,1)}
@keyframes tjbot-pop{from{opacity:0;transform:translateY(24px) scale(.92)}to{opacity:1;transform:none}}

.tjbot-head{position:relative;padding:20px 20px 22px;color:#fff;overflow:hidden;
  background:radial-gradient(120% 120% at 15% -10%,#2a3626 0%,var(--tj-ink) 55%)}
.tjbot-head::before{content:"";position:absolute;top:-40px;right:-30px;width:150px;height:150px;
  background:radial-gradient(circle,rgba(196,245,107,.28),transparent 68%);pointer-events:none}
.tjbot-head-row{position:relative;display:flex;align-items:center;gap:13px}
.tjbot-avatar{width:46px;height:46px;border-radius:15px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,var(--tj-accent),var(--tj-accent-d));color:var(--tj-ink);box-shadow:0 6px 16px rgba(166,226,63,.4)}
.tjbot-avatar svg{width:26px;height:26px}
.tjbot-head b{font-size:16px;font-weight:700;letter-spacing:.2px;display:block;line-height:1.25}
.tjbot-head small{font-size:12.5px;color:rgba(255,255,255,.62);display:flex;align-items:center;gap:6px;margin-top:2px}
.tjbot-dot{width:8px;height:8px;border-radius:50%;background:var(--tj-accent);box-shadow:0 0 0 0 rgba(196,245,107,.7);animation:tjbot-live 2s infinite}
@keyframes tjbot-live{0%{box-shadow:0 0 0 0 rgba(196,245,107,.6)}70%,100%{box-shadow:0 0 0 7px rgba(196,245,107,0)}}

.tjbot-body{flex:1;overflow-y:auto;padding:18px 16px 8px;background:#fbfcf9;
  display:flex;flex-direction:column;gap:4px;scroll-behavior:smooth}
.tjbot-body::-webkit-scrollbar{width:6px}.tjbot-body::-webkit-scrollbar-thumb{background:rgba(15,20,15,.14);border-radius:3px}

.tjbot-row{display:flex;gap:8px;align-items:flex-end;margin-top:8px;animation:tjbot-up .32s ease both}
.tjbot-row.me{flex-direction:row-reverse}
@keyframes tjbot-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tjbot-mini{width:26px;height:26px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--tj-ink);color:var(--tj-accent)}
.tjbot-mini svg{width:15px;height:15px}
.tjbot-row.me .tjbot-mini{display:none}
.tjbot-msg{max-width:78%;padding:11px 14px;font-size:14.5px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word}
.tjbot-msg.bot{background:var(--tj-bot);color:var(--tj-ink);border-radius:18px 18px 18px 5px}
.tjbot-msg.user{background:linear-gradient(150deg,var(--tj-ink-2),var(--tj-ink));color:#fff;border-radius:18px 18px 5px 18px}
.tjbot-msg a{color:#3a7d16;font-weight:600;text-decoration:none;border-bottom:1.5px solid rgba(58,125,22,.3)}
.tjbot-msg a:hover{border-color:#3a7d16}

.tjbot-quick{display:flex;flex-wrap:wrap;gap:8px;padding:6px 16px 16px}
.tjbot-chip{background:#fff;border:1.5px solid var(--tj-line);color:var(--tj-ink);padding:9px 14px;border-radius:14px;
  font-size:13.5px;font-weight:600;cursor:pointer;transition:.18s cubic-bezier(.34,1.4,.64,1);font-family:inherit;line-height:1.15;
  animation:tjbot-up .3s ease both}
.tjbot-chip:hover{border-color:var(--tj-accent-d);background:#f6ffe8;transform:translateY(-2px);box-shadow:0 6px 14px -6px rgba(120,160,40,.4)}
.tjbot-chip.primary{background:linear-gradient(150deg,var(--tj-ink-2),var(--tj-ink));color:var(--tj-accent);border-color:transparent;
  box-shadow:0 8px 18px -8px rgba(15,20,15,.6)}
.tjbot-chip.primary:hover{background:var(--tj-ink);transform:translateY(-2px)}

.tjbot-form{padding:2px 16px 16px;display:flex;flex-direction:column;gap:9px}
.tjbot-form input{width:100%;padding:12px 14px;border:1.5px solid var(--tj-line);border-radius:13px;font-size:14.5px;font-family:inherit;background:#fff;transition:.15s}
.tjbot-form input:focus{outline:none;border-color:var(--tj-accent-d);box-shadow:0 0 0 3.5px rgba(196,245,107,.35)}
.tjbot-form .tjbot-hp{position:absolute;left:-9999px}
.tjbot-form button{width:100%;padding:13px;border:none;border-radius:13px;cursor:pointer;font-family:inherit;font-weight:700;font-size:14.5px;
  background:linear-gradient(150deg,var(--tj-ink-2),var(--tj-ink));color:var(--tj-accent);transition:.18s;box-shadow:0 8px 18px -8px rgba(15,20,15,.6)}
.tjbot-form button:hover{transform:translateY(-2px)}
.tjbot-form button:disabled{opacity:.55;cursor:default;transform:none}

.tjbot-typing{align-self:flex-start;background:var(--tj-bot);padding:13px 16px;border-radius:18px 18px 18px 5px;display:flex;gap:5px;margin-top:8px;margin-left:34px}
.tjbot-typing span{width:7px;height:7px;border-radius:50%;background:#9aa398;animation:tjbot-blink 1.3s infinite}
.tjbot-typing span:nth-child(2){animation-delay:.18s}.tjbot-typing span:nth-child(3){animation-delay:.36s}
@keyframes tjbot-blink{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.tjbot-inputbar{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;border-top:1px solid var(--tj-line);background:#fff}
.tjbot-inputbar textarea{flex:1;border:1.5px solid var(--tj-line);border-radius:13px;padding:10px 13px;font:inherit;font-size:14.5px;
  resize:none;max-height:96px;line-height:1.4;background:#fbfcf9;transition:.15s}
.tjbot-inputbar textarea:focus{outline:none;border-color:var(--tj-accent-d);box-shadow:0 0 0 3px rgba(196,245,107,.3);background:#fff}
.tjbot-send{flex-shrink:0;width:42px;height:42px;border:none;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,var(--tj-ink-2),var(--tj-ink));color:var(--tj-accent);transition:.18s}
.tjbot-send:hover{transform:translateY(-2px)}
.tjbot-send:disabled{opacity:.45;cursor:default;transform:none}
.tjbot-send svg{width:19px;height:19px}
@media(max-width:480px){#tjbot-panel{height:calc(100vh - 108px);border-radius:22px}}
@media(prefers-reduced-motion:reduce){#tjbot *{animation-duration:.01ms!important}}

/* ── Mobile : le chatbot ne doit pas manger l'écran (demande user 03/09) ──
   L'aperçu faisait 260x248 px, soit ~37 % de la hauteur utile d'un téléphone,
   par-dessus le contenu. On retire les trois questions : il ne reste que la
   bulle d'accroche, et le lanceur est un peu réduit. Les mêmes questions
   restent proposées à l'ouverture du chat. */
@media(max-width:768px){
  #tjbot-preview .tjbot-pv-quick{display:none}
  #tjbot-preview{bottom:56px;width:min(248px,calc(100vw - 84px));max-width:none;gap:0}
  .tjbot-pv-msg{font-size:13.5px;padding:9px 13px;line-height:1.35}
  .tjbot-pv-row .tjbot-teaser-av{width:28px;height:28px;border-radius:9px}
  .tjbot-pv-row .tjbot-teaser-av svg{width:15px;height:15px}
  #tjbot-preview-close{width:20px;height:20px;font-size:11px}
  #tjbot-toggle{width:42px;height:42px;border-radius:14px}
  #tjbot-toggle svg{width:19px;height:19px}
}
/* Très petits écrans : plus que le lanceur. */
@media(max-width:420px){
  #tjbot-preview{display:none}
}