/* ============================================================================
   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 : chaque site nomme ses variables autrement (--primary sur
   equiquiz.com et oPaddock, --emeraude sur equimondo.fr). Les proprietes
   --chat-* ci-dessous lisent la premiere qui existe et retombent sur une valeur
   sure : la feuille fonctionne sur un site qui n'en definit aucune.

   equimondo.fr et myequimondo.com gardent pour l'instant leur copie inline ;
   CETTE feuille est la reference, et c'est vers elle qu'ils migreront.
   Fichier ASCII pur, comme les autres assets communs.
   ========================================================================== */

.chat-bulle,
.chat-panneau{
  --chat-vert:       var(--primary,       var(--emeraude,   #10b981));
  --chat-vert-2:     var(--primary-light, var(--emeraude-2, #34d399));
  --chat-or:         var(--or,            #f59e0b);
  --chat-encre:      var(--ink,           var(--encre,      #1e293b));
  --chat-encre-doux: var(--ink-3,         var(--encre-doux, #64748b));
  --chat-creme:      var(--slate-50,      var(--creme,      #f8fafc));
  --chat-corail:     #fb923c;
  --chat-corail-2:   #ea580c;
}

/* ---- 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-corail),var(--chat-corail-2));
  border:none;color:#fff;font-size:1.05rem;cursor:pointer;
  font-family:'Outfit',sans-serif;
  box-shadow:0 14px 32px -14px rgba(234,88,12,.45);
  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 -16px rgba(234,88,12,.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(31,42,38,.09);
  border-radius:24px;overflow:hidden;
  box-shadow:0 30px 80px -28px rgba(31,42,38,.4);
  display:flex;flex-direction:column;
  color:var(--chat-encre);
  font-family:'Outfit',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(--chat-or));
  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 rgba(31,42,38,.07);
}
.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;
  display:flex;align-items:center;justify-content:center;font-size:.9rem;
  box-shadow:0 8px 18px -8px rgba(4,120,87,.45);
}
.chat-titre{line-height:1.3;min-width:0}
.chat-titre strong{display:block;font-size:.96rem;font-family:'Fraunces',serif;font-weight:600;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(16,185,129,.5)}60%{box-shadow:0 0 0 9px rgba(16,185,129,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:hover{background:rgba(31,42,38,.06);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 rgba(31,42,38,.06);
  border-bottom-left-radius:5px;
  box-shadow:0 4px 14px -8px rgba(31,42,38,.15);
}
.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 rgba(31,42,38,.06);
  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{display:none}
.chat-suggestion{
  flex-shrink:0;
  display:flex;align-items:center;gap:10px;width:100%;
  background:transparent;border:1px solid rgba(31,42,38,.13);
  border-radius:999px;padding:9px 15px;
  font-family:'Outfit',sans-serif;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(16,185,129,.05);
  transform:translateX(2px);
}
.cs-ico{width:9px;height:9px;border-radius:50%;flex-shrink:0;padding:0}
.cs-ico i{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,#f59e0b,var(--chat-or))}
.chat-suggestion .grad-bleu{background:linear-gradient(135deg,#2b57bb,#3b6fe0)}
.chat-suggestion .grad-corail{background:linear-gradient(135deg,var(--chat-corail),var(--chat-corail-2))}

/* ---- La saisie ------------------------------------------------------------ */
.chat-saisie{
  flex-shrink:0;display:flex;gap:9px;align-items:center;
  padding:11px 14px 13px;background:#fff;
  border-top:1px solid rgba(31,42,38,.06);
}
.chat-saisie input{
  flex:1;min-width:0;padding:11px 17px;border-radius:999px;
  border:1px solid rgba(31,42,38,.15);
  font-family:'Outfit',sans-serif;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 3px rgba(16,185,129,.12)}
.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(4,120,87,.45);
  transition:transform .2s ease,box-shadow .2s ease;
}
.chat-envoyer:hover{transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(4,120,87,.55)}

/* ---- 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}
}