/* ==========================================================================
   B2V - Assistant de navigation (styles)
   Cree le 31/08/2026.
   ========================================================================== */

/* --- Bulle d'appel -------------------------------------------------------- */
.b2v-as-bulle{
  position:fixed;
  right:22px; bottom:22px;
  z-index:9995;
  width:58px; height:58px;
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:50%;
  background:#60222D;
  color:#E0C26A;
  cursor:pointer;
  box-shadow:0 8px 26px rgba(96,34,45,.38);
  transition:transform .22s cubic-bezier(.22,.61,.36,1), background-color .2s ease;
}
.b2v-as-bulle:hover{ transform:scale(1.07); background:#7a2d3a; }
.b2v-as-bulle:focus-visible{ outline:3px solid #E0C26A; outline-offset:3px; }

/* Pastille doree pulsante : signale la presence sans etre agressive */
.b2v-as-pt{
  position:absolute; top:9px; right:9px;
  width:10px; height:10px; border-radius:50%;
  background:#E0C26A;
  border:2px solid #60222D;
}
@media (prefers-reduced-motion: no-preference){
  .b2v-as-pt{ animation:b2vAsPulse 2.6s ease-in-out infinite; }
  @keyframes b2vAsPulse{
    0%,100%{ transform:scale(1);   opacity:1; }
    50%    { transform:scale(1.3); opacity:.7; }
  }
}

/* --- Panneau -------------------------------------------------------------- */
.b2v-as{
  position:fixed;
  right:22px; bottom:92px;
  z-index:9996;
  width:min(380px, calc(100vw - 44px));
  max-height:min(560px, calc(100vh - 140px));
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid #ececec;
  border-radius:18px;
  box-shadow:0 18px 50px rgba(17,24,39,.22);
  overflow:hidden;
  opacity:0;
  transform:translateY(14px) scale(.97);
  pointer-events:none;
  transition:opacity .22s ease, transform .22s cubic-bezier(.22,.61,.36,1);
}
.b2v-as.is-open{ opacity:1; transform:none; pointer-events:auto; }

.b2v-as-tete{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
  background:linear-gradient(135deg,#60222D,#4a1a22);
  color:#fff;
}
.b2v-as-titre{
  font-family:"Hanken Grotesk",sans-serif;
  font-weight:800; font-size:.95rem; letter-spacing:.01em;
}
.b2v-as-x{
  border:0; background:none; color:#E0C26A;
  font-size:1.5rem; line-height:1; cursor:pointer; padding:0 4px;
}

.b2v-as-corps{
  flex:1; overflow-y:auto;
  padding:16px;
  display:flex; flex-direction:column; gap:10px;
  background:#FFFBF2;
}

/* --- Messages ------------------------------------------------------------- */
.b2v-as-msg{
  max-width:88%;
  padding:10px 13px;
  border-radius:14px;
  font-size:.875rem;
  line-height:1.5;
  animation:b2vAsIn .24s cubic-bezier(.22,.61,.36,1);
}
@keyframes b2vAsIn{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:none; }
}
.b2v-as-bot{
  align-self:flex-start;
  background:#fff; border:1px solid #F3ECDC; color:#111827;
  border-bottom-left-radius:5px;
}
.b2v-as-moi{
  align-self:flex-end;
  background:#60222D; color:#fff;
  border-bottom-right-radius:5px;
}
.b2v-as-ol{ margin:6px 0 0 18px; padding:0; }
.b2v-as-ol li{ margin:0 0 5px; }

/* --- Boutons de choix ----------------------------------------------------- */
.b2v-as-choix{ display:flex; flex-wrap:wrap; gap:7px; }
.b2v-as-btn{
  padding:.5rem .85rem;
  border:1px solid #60222D; border-radius:999px;
  background:#fff; color:#60222D;
  font:inherit; font-size:.8125rem; font-weight:600;
  cursor:pointer;
  transition:background-color .16s ease, color .16s ease;
}
.b2v-as-btn:hover{ background:#60222D; color:#fff; }

/* --- Fiche d'annonce dans le fil ------------------------------------------ */
.b2v-as-fiche{
  display:flex; align-items:center; gap:11px;
  padding:9px;
  background:#fff; border:1px solid #F3ECDC; border-radius:12px;
  text-decoration:none; color:inherit;
  transition:border-color .18s ease, transform .18s ease;
  max-width:100%;
}
.b2v-as-fiche:hover{ border-color:#60222D; transform:translateX(3px); }
.b2v-as-vis{
  flex:0 0 auto; width:54px; height:44px;
  border-radius:8px; background:#F3ECDC center/cover no-repeat;
}
.b2v-as-rond{ width:44px; height:44px; border-radius:50%; }
.b2v-as-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.b2v-as-txt strong{
  font-size:.8125rem; color:#111827; line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.b2v-as-txt em{ font-style:normal; font-size:.75rem; color:#6f6f76; }

/* --- Indicateur d'attente ------------------------------------------------- */
.b2v-as-dots{ display:inline-flex; gap:4px; }
.b2v-as-dots i{
  width:6px; height:6px; border-radius:50%;
  background:#60222D; opacity:.4;
}
@media (prefers-reduced-motion: no-preference){
  .b2v-as-dots i{ animation:b2vAsDot 1.1s ease-in-out infinite; }
  .b2v-as-dots i:nth-child(2){ animation-delay:.16s; }
  .b2v-as-dots i:nth-child(3){ animation-delay:.32s; }
  @keyframes b2vAsDot{ 0%,100%{ opacity:.3; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-4px); } }
}

.b2v-as-pied{
  padding:9px 14px;
  background:#fff; border-top:1px solid #ececec;
  color:#9a9aa0; font-size:.6875rem; line-height:1.4;
}

@media (max-width:520px){
  .b2v-as{ right:12px; left:12px; width:auto; bottom:84px; }
  .b2v-as-bulle{ right:14px; bottom:14px; }
}

@media (prefers-reduced-motion: reduce){
  .b2v-as, .b2v-as-msg, .b2v-as-bulle, .b2v-as-fiche{
    transition:none !important; animation:none !important;
  }
}