/* Hotesse d'accueil ES-Protect : bulle et fenetre de discussion */
.hotesse { --h-bleu: #000091; --h-encre: #14143a; font-family: 'Inter', system-ui, sans-serif }
.hotesse__bulle { position: fixed; right: 20px; bottom: 20px; z-index: 900; width: 76px; height: 76px; border-radius: 50%; border: 3px solid #fff; padding: 0;
  overflow: visible; cursor: pointer; background: #e9e4dc; box-shadow: 0 14px 34px -10px rgba(0,0,145,.6), 0 0 0 1px rgba(0,0,145,.15); transition: transform .25s }
.hotesse__bulle:hover { transform: scale(1.06) }
.hotesse__bulle video { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; border-radius: 50% }
.hotesse__bulle::after { content: ''; position: absolute; right: 2px; bottom: 4px; width: 16px; height: 16px; border-radius: 50%; background: #18a558; border: 3px solid #fff }
.hotesse__badge { position: absolute; top: -4px; left: -4px; min-width: 24px; height: 24px; border-radius: 12px; background: #e1000f; color: #fff;
  font-size: .78rem; font-weight: 800; display: grid; place-items: center; border: 2px solid #fff }
.hotesse__badge[hidden] { display: none }
.hotesse__invite { position: absolute; right: 88px; bottom: 18px; white-space: nowrap; background: #fff; color: var(--h-encre); font-weight: 700; font-size: .9rem;
  padding: 10px 14px; border-radius: 14px 14px 4px 14px; box-shadow: 0 12px 28px -12px rgba(20,20,80,.5); opacity: 0; transform: translateX(10px); transition: all .4s; pointer-events: none }
.hotesse.attire:not(.est-ouvert) .hotesse__invite { opacity: 1; transform: none }
.hotesse.attire:not(.est-ouvert) .hotesse__bulle { animation: hotesse-pulse 2.2s ease-out 3 }
@keyframes hotesse-pulse { 0% { box-shadow: 0 14px 34px -10px rgba(0,0,145,.6), 0 0 0 0 rgba(0,0,145,.45) } 100% { box-shadow: 0 14px 34px -10px rgba(0,0,145,.6), 0 0 0 22px rgba(0,0,145,0) } }
.hotesse.est-ouvert .hotesse__bulle { display: none }

.hotesse__fenetre { position: fixed; right: 20px; bottom: 20px; z-index: 950; width: 390px; height: min(680px, calc(100dvh - 40px)); display: flex; flex-direction: column;
  background: #fff; border-radius: 24px; overflow: hidden; box-shadow: 0 30px 80px -20px rgba(10,12,48,.55), 0 0 0 1px rgba(0,0,145,.1); animation: hotesse-entree .3s cubic-bezier(.2,.8,.2,1) }
.hotesse__fenetre[hidden] { display: none }
@keyframes hotesse-entree { from { opacity: 0; transform: translateY(20px) scale(.97) } }
.hotesse__scene { position: relative; flex: none; height: 190px; background: #e9e4dc url(/robot/affiche.jpg) center 25% / cover; overflow: hidden }
.hotesse__scene video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; opacity: 0; transition: opacity .4s }
.hotesse__scene video.est-actif { opacity: 1 }
.hotesse__scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 40%, transparent 70%, rgba(255,255,255,.25)); pointer-events: none }
.hotesse__tete { position: absolute; left: 16px; top: 14px; z-index: 2; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.4) }
.hotesse__tete b { display: block; font-size: 1.02rem } .hotesse__tete span { font-size: .78rem; display: inline-flex; align-items: center; gap: 6px }
.hotesse__tete span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #3ddc84 }
.hotesse__fermer, .hotesse__son { position: absolute; top: 12px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.92); color: var(--h-encre); display: grid; place-items: center; font-size: 24px; line-height: 1 }
.hotesse__fermer { right: 12px } .hotesse__son { right: 58px } .hotesse__son.est-actif { background: var(--h-bleu); color: #fff }
.hotesse[data-etat="reflexion"] .hotesse__scene { box-shadow: inset 0 -4px 0 #7b5cff } .hotesse[data-etat="parole"] .hotesse__scene { box-shadow: inset 0 -4px 0 var(--h-bleu) }

.hotesse__fil { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #fafaff }
.hotesse__msg { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: .95rem; line-height: 1.55; animation: hotesse-msg .3s }
.hotesse__msg p { margin: 0 0 6px } .hotesse__msg p:last-child { margin: 0 } .hotesse__msg ul { margin: 4px 0 6px 18px; padding: 0 }
.hotesse__msg a { color: var(--h-bleu); font-weight: 700 }
.hotesse__msg--elle { align-self: flex-start; background: #fff; border: 1px solid #e6e7f4; border-bottom-left-radius: 5px; color: #23264a }
.hotesse__msg--moi { align-self: flex-end; background: var(--h-bleu); color: #fff; border-bottom-right-radius: 5px }
@keyframes hotesse-msg { from { opacity: 0; transform: translateY(8px) } }
.hotesse__points { display: inline-flex; gap: 5px } .hotesse__points i { width: 7px; height: 7px; border-radius: 50%; background: #7b5cff; animation: hotesse-points 1.2s infinite }
.hotesse__points i:nth-child(2) { animation-delay: .2s } .hotesse__points i:nth-child(3) { animation-delay: .4s }
@keyframes hotesse-points { 0%, 80%, 100% { opacity: .35; transform: scale(.7) } 40% { opacity: 1; transform: none } }
.hotesse__suggestions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; background: #fafaff }
.hotesse__suggestions[hidden] { display: none }
.hotesse__suggestions button { border: 1px solid #d8daee; background: #fff; border-radius: 999px; padding: 7px 12px; font: inherit; font-size: .84rem; color: #23264a; cursor: pointer }
.hotesse__suggestions button:hover { border-color: var(--h-bleu); color: var(--h-bleu) }
.hotesse__cta { display: block; margin: 0 14px 8px; padding: 11px; text-align: center; border-radius: 12px; background: #e1000f; color: #fff !important; font-weight: 800;
  text-decoration: none !important; background-image: none !important; box-shadow: 0 10px 22px -12px rgba(225,0,15,.8) }
.hotesse__cta[hidden] { display: none }
.hotesse__saisie { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid #eef0f8; background: #fff }
.hotesse__saisie textarea { flex: 1; resize: none; min-height: 44px; max-height: 120px; border: 1px solid #c9cbe0; border-radius: 12px; padding: 11px 13px; font: inherit; font-size: 16px; line-height: 1.4 }
.hotesse__saisie button { width: 46px; height: 44px; border: 0; border-radius: 12px; background: var(--h-bleu); color: #fff; display: grid; place-items: center; cursor: pointer }
.hotesse__mention { margin: 0; padding: 0 14px 10px; font-size: .7rem; color: #8b90aa; background: #fff }

@media (max-width: 760px) {
  .hotesse__bulle { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); width: 64px; height: 64px }
  .hotesse__invite { right: 74px; bottom: 14px; font-size: .84rem }
  .hotesse__fenetre { inset: 0; width: 100%; height: 100dvh; border-radius: 0; padding-bottom: env(safe-area-inset-bottom) }
  .hotesse__scene { height: 30dvh; padding-top: env(safe-area-inset-top) }
  .hotesse__msg { font-size: 1rem }
  html.hotesse-ouverte, html.hotesse-ouverte body { overflow: hidden }
  /* le bouton colle "Ouvrir mon dossier" de la vitrine laisse la place a la bulle */
  .v-collant { right: 88px !important }
}
@media (prefers-reduced-motion: reduce) { .hotesse * { animation: none !important } }

/* hotesse integree dans la section Questions de la vitrine */
.hotesse-integree { max-width: 860px; margin: 0 auto }
.hotesse.est-integree .hotesse__bulle { display: none }
.hotesse.est-integree .hotesse__fenetre { position: relative; inset: auto; right: auto; bottom: auto; width: 100%; height: 640px; max-height: 80dvh; border-radius: 24px; z-index: 1;
  animation: none; box-shadow: 0 2px 4px rgba(20,20,80,.05), 0 40px 70px -40px rgba(0,0,145,.5), 0 0 0 1px #e2e3f2;
  display: grid; grid-template-columns: 300px 1fr; grid-template-rows: 1fr auto auto auto auto }
.hotesse.est-integree .hotesse__scene { grid-row: 1 / -1; height: auto }
.hotesse.est-integree .hotesse__fermer { display: none }
.hotesse.est-integree .hotesse__son { right: 12px }
.hotesse.est-integree .hotesse__fil, .hotesse.est-integree .hotesse__suggestions, .hotesse.est-integree .hotesse__cta,
.hotesse.est-integree .hotesse__saisie, .hotesse.est-integree .hotesse__mention { grid-column: 2 }
.hotesse.est-integree .hotesse__suggestions button { text-align: left }
.v-faq__note { margin: 14px 0 0; text-align: center; font-size: .86rem; color: #6b6f8f }
@media (max-width: 760px) {
  .hotesse.est-integree .hotesse__fenetre { display: flex; height: 620px; max-height: 88dvh; padding-bottom: 0 }
  .hotesse.est-integree .hotesse__scene { height: 170px; padding-top: 0 }
}
/* les questions defilent sur une ligne pour laisser la place a la discussion */
.hotesse.est-integree .hotesse__suggestions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 12px }
.hotesse.est-integree .hotesse__suggestions button { white-space: nowrap; flex: none }
@media (min-width: 761px) { .hotesse.est-integree .hotesse__suggestions { flex-wrap: wrap; overflow: visible } .hotesse.est-integree .hotesse__suggestions button { white-space: normal } }

/* la bulle s'efface quand l'hotesse integree est deja a l'ecran */
.hotesse.section-visible:not(.est-ouvert) .hotesse__bulle { opacity: 0; pointer-events: none; transform: scale(.8) }
.hotesse__bulle { transition: transform .25s, opacity .3s }
/* telephone : la bulle se place AU-DESSUS du bouton colle "Ouvrir mon dossier" */
@media (max-width: 760px) {
  .hotesse:not(.est-integree) .hotesse__bulle { bottom: calc(96px + env(safe-area-inset-bottom)) }
  .hotesse:not(.est-integree) .hotesse__invite { bottom: 14px }
  .v-collant { right: 12px !important }
}
body.menu-ouvert .hotesse:not(.est-integree), body.menu-ouvert .v-collant { display: none }