/* ============================================================================
   VITRINES EQUIMONDO - Le widget du chatbot : la bulle ET le panneau
   ----------------------------------------------------------------------------
   Feuille PARTAGEE, a charger AVANT chat-lanceur.css sur toute page qui inclut
   _commun/includes/chat-widget.php. Elle porte tout ce qu'il faut pour que le
   widget s'affiche : la bulle en position fixe, le panneau replie puis ouvert,
   l'entete, les messages, les suggestions, la saisie.

   POURQUOI CE FICHIER EXISTE (08/09/2026). Le CSS du panneau ne vivait que
   COLLE dans les pages d'equimondo.fr (44 copies) et dans l'entete de
   myequimondo.com. equimondo.app et equiquiz.com, eux, chargeaient le widget,
   son JS et le lanceur -- mais aucun style pour le panneau : il s'affichait
   deroule, en texte brut, sous le pied de page (constate sur equiquiz.com).
   chat-lanceur.css n'y pouvait rien : par construction il ne pose PAS la
   position de la bulle, il compte sur la page pour le faire.

   COULEURS (09/09/2026) : les quatre vitrines nomment desormais leurs variables
   comme oPaddock (--primary*, --slate-*). Les proprietes --chat-* ci-dessous
   lisent ces variables et retombent sur une valeur sure : la feuille
   fonctionne sur un site qui n'en definit aucune. La bulle est EMERAUDE, plus
   orange : c'est la couleur d'action de la marque, la meme que les boutons.

   Depuis le 09/09/2026, equimondo.fr et myequimondo.com chargent AUSSI cette
   feuille (leur copie inline a ete retiree) : elle est l'unique source du
   panneau pour les quatre vitrines. Fichier ASCII pur, comme les autres assets
   communs.
   ========================================================================== */

.chat-bulle,
.chat-panneau{
  --chat-vert:       var(--primary,        #10b981);
  --chat-vert-2:     var(--primary-dark,   #059669);
  --chat-vert-rgb:   var(--primary-rgb,    16,185,129);
  --chat-or:         var(--amber-500,      #f59e0b);
  --chat-encre:      var(--slate-800,      #1e293b);
  --chat-encre-doux: var(--slate-500,      #64748b);
  --chat-creme:      var(--slate-50,       #f8fafc);
  --chat-ligne:      var(--slate-200,      #e2e8f0);
}

/* ---- La bulle "Une question ?" ------------------------------------------
   `position:fixed` vit ICI, et chat-lanceur.css, charge ensuite, s'y appuie
   pour ses deux pseudo-elements en `inset:0`. */
.chat-bulle{
  position:fixed;bottom:24px;right:24px;z-index:53;
  height:50px;border-radius:999px;
  padding:0 19px 0 22px;
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,var(--chat-vert),var(--chat-vert-2));
  border:none;color:#fff;font-size:1.05rem;cursor:pointer;
  font-family:'Inter',system-ui,sans-serif;
  box-shadow:0 14px 32px -12px rgba(var(--chat-vert-rgb),.5);
  animation:chatBulleEntre .7s cubic-bezier(.2,.8,.25,1.2) 1.1s both;
  transition:transform .25s ease,box-shadow .25s ease;
}
.chat-bulle-txt{font-size:.92rem;font-weight:600;white-space:nowrap}
.chat-bulle:hover{transform:translateY(-3px);box-shadow:0 20px 42px -14px rgba(var(--chat-vert-rgb),.55)}
.chat-bulle:active{transform:scale(.95)}
body.chat-ouvert .chat-bulle{opacity:0;pointer-events:none}
@keyframes chatBulleEntre{from{opacity:0;transform:translateY(70px) scale(.8)}to{opacity:1;transform:none}}

/* ---- Le panneau : replie par defaut, `.ouvert` pose par chat-vitrine.js --- */
.chat-panneau{
  position:fixed;bottom:24px;right:24px;z-index:56;
  width:min(92vw,368px);max-height:calc(100vh - 60px);
  background:#fff;
  border:1px solid rgba(15,23,42,.05);
  border-radius:24px;overflow:hidden;
  box-shadow:0 30px 80px rgba(15,23,42,.18);
  display:flex;flex-direction:column;
  color:var(--chat-encre);
  font-family:'Inter',system-ui,sans-serif;
  text-align:left;
  opacity:0;visibility:hidden;transform:translateY(20px) scale(.97);
  transform-origin:bottom right;
  transition:opacity .3s ease,transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s linear .35s;
}
.chat-panneau.ouvert{opacity:1;visibility:visible;transform:none;transition:opacity .3s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.chat-panneau::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--chat-vert),var(--blue-500,#3b82f6));
  z-index:2;
}

/* ---- L'entete ------------------------------------------------------------- */
.chat-entete{
  flex-shrink:0;display:flex;align-items:center;gap:12px;
  background:#fff;color:var(--chat-encre);
  padding:15px 16px 13px;
  border-bottom:1px solid var(--chat-ligne);
}
.chat-avatar{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--chat-vert),var(--chat-vert-2));
  color:#fff;overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-size:.9rem;
  box-shadow:0 8px 18px -8px rgba(var(--chat-vert-rgb),.55);
}
.chat-avatar img{width:100%;height:100%;object-fit:cover}
.chat-avatar svg{width:20px;height:20px}
.chat-titre{line-height:1.3;min-width:0}
.chat-titre strong{display:block;font-size:.96rem;font-weight:700;letter-spacing:-.01em;margin:0}
.chat-titre small{font-size:.74rem;color:var(--chat-encre-doux);display:flex;align-items:center;gap:6px}
.chat-statut{
  width:7px;height:7px;border-radius:50%;background:var(--chat-vert);flex-shrink:0;
  animation:chatPulse 1.8s ease infinite;
}
@keyframes chatPulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--chat-vert-rgb),.5)}60%{box-shadow:0 0 0 9px rgba(var(--chat-vert-rgb),0)}}
.chat-fermer{
  margin-left:auto;width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:transparent;border:none;color:var(--chat-encre-doux);cursor:pointer;
  font-size:.9rem;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,color .2s ease;
}
.chat-fermer svg{width:18px;height:18px}
.chat-fermer:hover{background:var(--chat-creme);color:var(--chat-encre)}

/* ---- Les messages --------------------------------------------------------- */
.chat-corps{
  flex:1;min-height:110px;overflow-y:auto;
  padding:16px 15px;display:flex;flex-direction:column;gap:10px;
  background:var(--chat-creme);
}
.chat-msg{
  max-width:85%;padding:10px 14px;border-radius:16px;
  font-size:.89rem;line-height:1.55;margin:0;
  animation:chatEntree .35s ease both;
}
@keyframes chatEntree{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.chat-msg p{margin:0 0 .5em}
.chat-msg p:last-child{margin-bottom:0}
.chat-msg a{color:var(--chat-vert);font-weight:600;text-decoration:underline}
.chat-bot{
  align-self:flex-start;
  background:#fff;border:1px solid var(--chat-ligne);
  border-bottom-left-radius:5px;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
}
.chat-moi{
  align-self:flex-end;
  background:linear-gradient(135deg,var(--chat-vert),var(--chat-vert-2));
  color:#fff;border-bottom-right-radius:5px;
}
.chat-moi a{color:#fff}

/* "L'assistant ecrit..." : trois points qui sautent */
.chat-ecrit{display:flex;gap:5px;align-items:center;padding:13px 15px}
.chat-ecrit span{
  width:6px;height:6px;border-radius:50%;background:var(--chat-vert-2);
  animation:chatEcritSaut 1.1s ease infinite;
}
.chat-ecrit span:nth-child(2){animation-delay:.15s}
.chat-ecrit span:nth-child(3){animation-delay:.3s}
@keyframes chatEcritSaut{
  0%,60%,100%{transform:translateY(0);opacity:.5}
  30%{transform:translateY(-5px);opacity:1}
}

/* ---- Les suggestions, masquees des le premier echange --------------------- */
.chat-sugg-zone{
  flex-shrink:1;min-height:0;overflow-y:auto;
  padding:12px 15px 8px;
  background:#fff;border-top:1px solid var(--chat-ligne);
  display:flex;flex-direction:column;gap:7px;
}
.chat-panneau.a-demarre .chat-sugg-zone{display:none}
.chat-sugg-titre{
  font-size:.64rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--chat-encre-doux);margin:0 0 3px;
}
.chat-sugg-titre i,.chat-sugg-titre svg{display:none}
.chat-suggestion{
  flex-shrink:0;
  display:flex;align-items:center;gap:10px;width:100%;
  background:transparent;border:1.5px solid var(--chat-ligne);
  border-radius:999px;padding:9px 15px;
  font-family:inherit;font-size:.84rem;font-weight:500;color:var(--chat-encre);
  cursor:pointer;text-align:left;
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.chat-suggestion:hover{
  border-color:var(--chat-vert);
  background:rgba(var(--chat-vert-rgb),.06);
  transform:translateX(4px);
}
.cs-ico{width:9px;height:9px;border-radius:50%;flex-shrink:0;padding:0}
.cs-ico i,.cs-ico svg{display:none}
.cs-txt{flex:1;line-height:1.35}
.cs-fleche{display:none}
/* Les pastilles des suggestions : quatre teintes, definies ici pour ne pas
   dependre des classes utilitaires d'un site en particulier. */
.chat-suggestion .grad-emeraude{background:linear-gradient(135deg,var(--chat-vert),var(--chat-vert-2))}
.chat-suggestion .grad-or{background:linear-gradient(135deg,#fbbf24,#d97706)}
.chat-suggestion .grad-bleu{background:linear-gradient(135deg,#60a5fa,#2563eb)}
.chat-suggestion .grad-corail{background:linear-gradient(135deg,#fb923c,#ea580c)}

/* ---- La saisie ------------------------------------------------------------ */
.chat-saisie{
  flex-shrink:0;display:flex;gap:9px;align-items:center;
  padding:11px 14px 13px;background:#fff;
  border-top:1px solid var(--chat-ligne);
}
.chat-saisie input{
  flex:1;min-width:0;padding:11px 17px;border-radius:999px;
  border:1.5px solid var(--chat-ligne);
  font-family:inherit;font-size:.89rem;color:var(--chat-encre);
  background:#fff;outline:none;transition:border .2s,box-shadow .2s;
}
.chat-saisie input:focus{border-color:var(--chat-vert);box-shadow:0 0 0 4px rgba(var(--chat-vert-rgb),.13)}
.chat-envoyer{
  width:41px;height:41px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--chat-vert),var(--chat-vert-2));
  border:none;color:#fff;font-size:.9rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 18px -8px rgba(var(--chat-vert-rgb),.55);
  transition:transform .25s cubic-bezier(.2,.8,.3,1.4),box-shadow .2s ease;
}
.chat-envoyer svg{width:18px;height:18px}
.chat-envoyer:hover{transform:scale(1.08) rotate(-12deg);box-shadow:0 12px 26px -10px rgba(var(--chat-vert-rgb),.6)}
.chat-envoyer:active{transform:scale(.94)}

/* ---- Telephone ------------------------------------------------------------ */
@media(max-width:640px){
  .chat-bulle{bottom:calc(16px + env(safe-area-inset-bottom, 0px));right:16px;padding:0 16px 0 20px}
  .chat-bulle-txt{font-size:.9rem}
  .chat-panneau{right:12px;left:12px;width:auto;bottom:calc(16px + env(safe-area-inset-bottom, 0px))}
}
@media(max-width:380px){
  .chat-bulle-txt{display:none}
  .chat-bulle{padding:0;width:52px;justify-content:center}
}

/* ---- Mouvement reduit ----------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .chat-bulle,.chat-msg,.chat-statut,.chat-ecrit span{animation:none}
  .chat-panneau,.chat-panneau.ouvert{transition:none}
}