/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: May 26 2025 | 17:53:00 */
/*═════════════════════════════════════════════
   CHATBOT “EVO” – THEME VIOLET (FEUILLE DE STYLE COMPLÈTE)
   Note : pour que les emojis en tête de titre échappent au dégradé,
   encadrez-les dans <span class="no-gradient">…</span>
═════════════════════════════════════════════*/

/*── 0. Variables ────────────────────────────*/
:host {
  /* Palette violet : clair → principal → foncé */
  --grad-start: #C29BFF;   /* lavande          */
  --grad-mid:   #7E2BD4;   /* violet principal */
  --grad-end:   #4A1B8E;   /* violet profond   */

  --txt-base:   #333;
  --font:       'Inter', sans-serif;
  --fs-h1: 34px;
  --fs-h2: 28px;
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-body: 16px;
}

/*── 1. Bulles de message ────────────────────*/
.vfrc-message {
  overflow: visible!important;
  line-height: normal!important;
  border-radius: 12px!important;
  padding: 10px 14px!important;
  box-shadow: 0 2px 6px rgba(0,0,0,.1)!important;
}
.vfrc-wrapper {
  font-family: var(--font)!important;
  color: var(--txt-base)!important;
}

/*── 2. Titres H1→H4 (dégradé lavande→violet) ──*/
.vfrc-chat--dialog .markdown h1,
.vfrc-chat--dialog .markdown h2,
.vfrc-chat--dialog .markdown h3,
.vfrc-chat--dialog .markdown h4 {
  background: linear-gradient(
    90deg,
    var(--grad-start),
    var(--grad-mid),
    var(--grad-end)
  )!important;
  -webkit-background-clip: text!important;
  -webkit-text-fill-color: transparent!important;
  font-weight: 700!important;
  margin: .4em 0!important;
  line-height: 1.25!important;
}
.vfrc-chat--dialog .markdown h1 { font-size: var(--fs-h1)!important; }
.vfrc-chat--dialog .markdown h2 { font-size: var(--fs-h2)!important; }
.vfrc-chat--dialog .markdown h3 { font-size: var(--fs-h3)!important; }
.vfrc-chat--dialog .markdown h4 { font-size: var(--fs-h4)!important; }

/*── 2.b Exclure le gradient sur les emojis ──*/
.vfrc-chat--dialog .markdown .no-gradient {
  background: none!important;
  -webkit-text-fill-color: currentColor!important;
  display: inline-block!important;
}

/*── 3. Paragraphes ──────────────────────────*/
.vfrc-chat--dialog .markdown p {
  font-size: var(--fs-body)!important;
  margin: .35em 0!important;
  line-height: 1.45!important;
}

/*── 4. Blockquotes ──────────────────────────*/
.vfrc-chat--dialog .markdown blockquote {
  border-left: 4px solid var(--grad-mid);
  background: #F6F1FF;
  padding: .5em .9em;
  margin: .6em 0!important;
  font-style: italic;
  color: #555;
}

/*── 5. Listes • suppression puces & flèche ➤ ─*/
.vfrc-chat--dialog .markdown ul {
  list-style: none!important;
  padding-left: 1.6em!important;
  margin: .45em 0!important;
}
.vfrc-chat--dialog .markdown ul li {
  position: relative!important;
  margin: .25em 0!important;
  padding-left: 0!important;
}
.vfrc-chat--dialog .markdown ul li::marker,
.vfrc-chat--dialog .markdown ul li::before {
  content: ""!important;
  display: none!important;
}
.vfrc-chat--dialog .markdown ul li::after {
  content: "➤"!important;
  position: absolute!important;
  left: -1.2em;
  top: .22em;
  font-size: 1em;
  line-height: 1;
  color: var(--grad-end)!important;
}
.vfrc-chat--dialog .markdown ol {
  padding-left: 1.4em!important;
  margin: .45em 0!important;
}
.vfrc-chat--dialog .markdown ol li {
  margin: .25em 0!important;
}

/*── 6. Liens ────────────────────────────────*/
.vfrc-chat--dialog .markdown a {
  color: var(--grad-mid)!important;
  text-decoration: underline!important;
}
.vfrc-chat--dialog .markdown a:hover {
  opacity: .8!important;
}

/*── 7. Images ───────────────────────────────*/
.vfrc-chat--dialog .markdown img {
  max-width: 100%!important;
  margin: 1em 0!important;
  border-radius: 6px;
}

/*── 8. Quick-reply boutons ──────────────────*/
.vfrc-chat--dialog .vfrc-message .vfrc-button {
  background: var(--grad-mid)!important;
  color: #fff!important;
  border-radius: 8px!important;
  padding: 8px 16px!important;
  font-size: var(--fs-body)!important;
  margin: 4px 0!important;
}
.vfrc-chat--dialog .vfrc-message .vfrc-button .vfrc-icon svg path {
  fill: #fff!important;
}

/*── 9. Champ de saisie / send icon ──────────*/
.vfrc-input input {
  border: 2px solid var(--grad-mid)!important;
  border-radius: 8px!important;
  font-size: var(--fs-body)!important;
}
.vfrc-input button.vfrc-button .vfrc-icon svg path {
  fill: var(--grad-mid)!important;
}


/*══════════════════════════════════════════════════════════════════════
   STYLES POUR LES BOUTONS NATIFS DE VOICEFLOW ET ELEMENTOR
══════════════════════════════════════════════════════════════════════*/

/* Styles de base pour tous les boutons Voiceflow - BLEU PAR DEFAUT */
.vfrc-button,
.vfrc-chat--dialog .vfrc-message .vfrc-button,
.voiceflow-button .elementor-button {  /* Cibler le bouton à l'intérieur */
  all: revert !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 24px !important;
  border: none !important;
  border-radius: 8px !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: #fff !important;
  background: #2196F3 !important; /* Bleu par défaut */
  cursor: pointer !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(33,150,243,0.3),
              inset 0 3px 0 rgba(255,255,255,0.2),
              inset 0 -3px 0 rgba(0,0,0,0.2) !important;
}

/* Forcer l'affichage du texte */
.voiceflow-button .elementor-button-text {
  color: #fff !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.voiceflow-button .elementor-button-content-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
}

/* État hover */
.vfrc-button:hover,
.vfrc-chat--dialog .vfrc-message .vfrc-button:hover,
.voiceflow-button .elementor-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(33,150,243,0.4),
              inset 0 3px 0 rgba(255,255,255,0.3),
              inset 0 -3px 0 rgba(0,0,0,0.3) !important;
}

/* État active (clic) */
.vfrc-button:active,
.vfrc-chat--dialog .vfrc-message .vfrc-button:active,
.voiceflow-button .elementor-button:active {
  transform: translateY(1px) !important;
  box-shadow: 0 2px 6px rgba(33,150,243,0.3),
              inset 0 1px 0 rgba(255,255,255,0.1),
              inset 0 -1px 0 rgba(0,0,0,0.1) !important;
}

/* Effet de scan sci-fi avant */
.vfrc-button::before,
.vfrc-chat--dialog .vfrc-message .vfrc-button::before,
.voiceflow-button .elementor-button::before {
  content: '' !important;
  position: absolute !important;
  top: -2px !important;
  left: -2px !important;
  width: calc(100% + 4px) !important;
  height: calc(100% + 4px) !important;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent) !important;
  transform: translateX(-100%) rotate(45deg) !important;
  transition: transform 0.8s ease !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Animation scan hover */
.vfrc-button:hover::before,
.vfrc-chat--dialog .vfrc-message .vfrc-button:hover::before,
.voiceflow-button .elementor-button:hover::before {
  transform: translateX(100%) rotate(45deg) !important;
}

/* S'assurer que le texte est bien positionné */
.voiceflow-button .elementor-button-content-wrapper {
  position: relative !important;
  z-index: 2 !important;
}

/* Style spécifique pour les boutons avec texte dans les messages */
.vfrc-chat--dialog .vfrc-message .vfrc-button {
  background: #4CAF50 !important; /* Vert pour les boutons de message */
  box-shadow: 0 4px 12px rgba(76,175,80,0.3),
              inset 0 3px 0 rgba(255,255,255,0.2),
              inset 0 -3px 0 rgba(0,0,0,0.2) !important;
}

.vfrc-chat--dialog .vfrc-message .vfrc-button:hover {
  box-shadow: 0 6px 20px rgba(76,175,80,0.4),
              inset 0 3px 0 rgba(255,255,255,0.3),
              inset 0 -3px 0 rgba(0,0,0,0.3) !important;
}

.vfrc-chat--dialog .vfrc-message .vfrc-button:active {
  box-shadow: 0 2px 6px rgba(76,175,80,0.3),
              inset 0 1px 0 rgba(255,255,255,0.1),
              inset 0 -1px 0 rgba(0,0,0,0.1) !important;
}

/* Réinitialisation des styles par défaut qui pourraient interférer */
.vfrc-button,
.vfrc-chat--dialog .vfrc-message .vfrc-button,
.voiceflow-button .elementor-button {
  box-sizing: border-box !important;
  line-height: normal !important;
}

/* État disabled */
.vfrc-button:disabled,
.vfrc-chat--dialog .vfrc-message .vfrc-button:disabled,
.voiceflow-button .elementor-button:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

.vfrc-button:disabled:hover,
.vfrc-chat--dialog .vfrc-message .vfrc-button:disabled:hover,
.voiceflow-button .elementor-button:disabled:hover {
  transform: none !important;
}

/* Ciblage spécifique des boutons de navigation et système */
.vfrc-button[label="Start new chat"],
.vfrc-button[label="Cancel"],
.vfrc-button:has(> svg[viewBox="0 0 24 24"]) {
  background: #2196F3 !important; /* Bleu pour les boutons système */
  box-shadow: 0 4px 12px rgba(33,150,243,0.3),
              inset 0 3px 0 rgba(255,255,255,0.2),
              inset 0 -3px 0 rgba(0,0,0,0.2) !important;
}

/* Icônes SVG dans les boutons - forçage couleur blanche */
.vfrc-button svg path,
.vfrc-chat--dialog .vfrc-message .vfrc-button svg path {
  fill: #fff !important;
  color: #fff !important;
}

.vfrc-button svg,
.vfrc-chat--dialog .vfrc-message .vfrc-button svg {
  color: #fff !important;
}

<!-- VERSION ALTERNATIVE AVEC ANIMATION FORCÉE -->
<div style="
  position: relative !important;
  width: 100% !important;
  max-width: 500px !important;
  margin: 20px auto !important;
  background: linear-gradient(135deg, #C29BFF, #7E2BD4) !important;
  border-radius: 25px !important;
  padding: 15px 20px !important;
  box-shadow: 0 8px 32px rgba(126, 43, 212, 0.3) !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
">
  <!-- Zone de texte qui défile -->
  <div style="
    position: relative !important;
    height: 50px !important;
    overflow: hidden !important;
    width: calc(100% - 60px) !important;
    line-height: 50px !important;
  ">
    <span style="
      display: inline-block !important;
      font-family: 'Inter', sans-serif !important;
      font-size: 16px !important;
      font-weight: 600 !important;
      color: #fff !important;
      text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
      white-space: nowrap !important;
      animation: evo-scroll-animation 12s linear infinite !important;
      padding-left: 100% !important;
      will-change: transform !important;
    ">🌐 Les sources documentaires et internet ont été extraites. Je passe à la génération du chapitre. Veuillez patienter encore quelques instants…</span>
  </div>
  
  <!-- Sablier -->
  <div style="
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  ">
    <span style="
      font-size: 28px !important;
      color: #fff !important;
      text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
      animation: evo-spin-animation 2s ease-in-out infinite !important;
    ">⏳</span>
  </div>
  
  <!-- Barre de progression -->
  <div style="
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 3px !important;
    background: rgba(255,255,255,0.8) !important;
    border-radius: 0 0 25px 25px !important;
    animation: evo-progress-animation 8s ease-out infinite !important;
    box-shadow: 0 0 10px rgba(255,255,255,0.5) !important;
  "></div>
</div>

<style>
@keyframes evo-scroll-animation {
  0% {
    transform: translateX(0%) !important;
  }
  100% {
    transform: translateX(-100%) !important;
  }
}

@keyframes evo-spin-animation {
  0%, 50% {
    transform: rotate(0deg) !important;
  }
  75% {
    transform: rotate(180deg) !important;
  }
  100% {
    transform: rotate(180deg) !important;
  }
}

@keyframes evo-progress-animation {
  0% {
    width: 0% !important;
  }
  50% {
    width: 70% !important;
  }
  100% {
    width: 95% !important;
  }
}