Vous pourrez bientôt découvrir notre site spécialement conçu pour la Biennale 2025 de l'AEEPS.
En attendant, vous pouvez réserver vos billets ici (nombre de places limité) et nous vous proposons ce chatbot pour vous aider dans le choix du tarif le plus adapté à votre situation :
.biennale-chatbot * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.biennale-chatbot {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
max-width: 600px;
margin: 20px auto;
background: white;
border-radius: 16px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
overflow: hidden;
border: 1px solid #e9d5ff;
}
/* Header */
.biennale-chatbot .bc-header {
background: linear-gradient(135deg, #a855f7 0%, #8b5cf6 50%, #7c3aed 100%);
color: white;
padding: 24px;
position: relative;
overflow: hidden;
}
.biennale-chatbot .bc-header::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(168, 85, 247, 0.2) 0%, rgba(124, 58, 237, 0.4) 100%);
}
.biennale-chatbot .bc-header-content {
position: relative;
display: flex;
align-items: center;
gap: 16px;
}
.biennale-chatbot .bc-header-icon {
background: rgba(255, 255, 255, 0.2);
padding: 12px;
border-radius: 50%;
backdrop-filter: blur(4px);
}
.biennale-chatbot .bc-header-title h1 {
font-size: 24px;
font-weight: bold;
margin-bottom: 4px;
}
.biennale-chatbot .bc-header-title .bc-ae {
color: #1f2937;
}
.biennale-chatbot .bc-header-title .bc-eps {
color: #e9d5ff;
}
.biennale-chatbot .bc-header-subtitle {
color: #e9d5ff;
font-weight: 500;
}
.biennale-chatbot .bc-athlete-silhouette {
margin-left: auto;
opacity: 0.3;
width: 48px;
height: 48px;
background: black;
border-radius: 50%;
position: relative;
}
.biennale-chatbot .bc-athlete-silhouette::before {
content: '';
position: absolute;
top: -8px;
right: -8px;
width: 24px;
height: 24px;
background: black;
border-radius: 4px;
transform: rotate(45deg);
}
.biennale-chatbot .bc-athlete-silhouette::after {
content: '';
position: absolute;
bottom: -8px;
left: -4px;
width: 32px;
height: 16px;
background: black;
border-radius: 8px;
transform: rotate(12deg);
}
/* Progress Bar */
.biennale-chatbot .bc-progress-container {
background: #faf5ff;
padding: 16px 24px;
}
.biennale-chatbot .bc-progress-info {
display: flex;
justify-content: space-between;
color: #7c3aed;
font-size: 14px;
margin-bottom: 8px;
}
.biennale-chatbot .bc-progress-info .bc-percentage {
font-weight: 600;
}
.biennale-chatbot .bc-progress-bar {
width: 100%;
height: 8px;
background: #ddd6fe;
border-radius: 4px;
overflow: hidden;
}
.biennale-chatbot .bc-progress-fill {
height: 100%;
background: linear-gradient(90deg, #8b5cf6 0%, #7c3aed 100%);
border-radius: 4px;
transition: width 0.5s ease-out;
width: 0%;
}
/* Chat Messages */
.biennale-chatbot .bc-chat-container {
height: 400px;
overflow-y: auto;
padding: 16px;
background: linear-gradient(180deg, rgba(250, 245, 255, 0.3) 0%, white 100%);
}
.biennale-chatbot .bc-message {
margin-bottom: 16px;
display: flex;
}
.biennale-chatbot .bc-message.bc-user {
justify-content: flex-end;
}
.biennale-chatbot .bc-message.bc-bot {
justify-content: flex-start;
}
.biennale-chatbot .bc-message-content {
max-width: 80%;
padding: 12px 16px;
border-radius: 12px;
line-height: 1.5;
}
.biennale-chatbot .bc-message.bc-user .bc-message-content {
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
color: white;
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}
.biennale-chatbot .bc-message.bc-bot .bc-message-content {
background: white;
color: #374151;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid #e9d5ff;
}
.biennale-chatbot .bc-message-time {
font-size: 12px;
margin-top: 8px;
opacity: 0.7;
}
/* Questions */
.biennale-chatbot .bc-question-container {
padding: 24px;
border-top: 1px solid #e9d5ff;
background: white;
}
.biennale-chatbot .bc-question-title {
font-size: 18px;
font-weight: 600;
color: #374151;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 8px;
}
.biennale-chatbot .bc-question-title::before {
content: '';
width: 8px;
height: 8px;
background: #8b5cf6;
border-radius: 50%;
}
.biennale-chatbot .bc-options-container {
display: flex;
flex-direction: column;
gap: 12px;
}
.biennale-chatbot .bc-option-button {
width: 100%;
text-align: left;
padding: 16px;
border: 2px solid #ddd6fe;
border-radius: 12px;
background: white;
cursor: pointer;
transition: all 0.2s ease;
font-size: 16px;
display: flex;
align-items: center;
gap: 12px;
}
.biennale-chatbot .bc-option-button:hover {
border-color: #a855f7;
background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(168, 85, 247, 0.15);
}
.biennale-chatbot .bc-option-button:active {
transform: translateY(0);
}
.biennale-chatbot .bc-option-icon {
font-size: 24px;
transition: transform 0.2s ease;
}
.biennale-chatbot .bc-option-button:hover .bc-option-icon {
transform: scale(1.1);
}
.biennale-chatbot .bc-option-text {
font-weight: 500;
color: #374151;
}
.biennale-chatbot .bc-option-button:hover .bc-option-text {
color: #7c3aed;
}
/* Restart Button */
.biennale-chatbot .bc-restart-container {
padding: 24px;
border-top: 1px solid #e9d5ff;
background: white;
}
.biennale-chatbot .bc-restart-button {
width: 100%;
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
color: white;
padding: 16px 24px;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}
.biennale-chatbot .bc-restart-button:hover {
background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}
.biennale-chatbot .bc-restart-button:active {
transform: translateY(0);
}
/* Footer */
.biennale-chatbot .bc-footer {
background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
color: white;
padding: 16px;
text-align: center;
}
.biennale-chatbot .bc-footer-title {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 14px;
font-weight: 500;
margin-bottom: 4px;
}
.biennale-chatbot .bc-footer-title .bc-ae {
color: #e5e7eb;
}
.biennale-chatbot .bc-footer-title .bc-eps {
color: #ddd6fe;
}
.biennale-chatbot .bc-footer-subtitle {
font-size: 12px;
color: #ddd6fe;
}
.biennale-chatbot .bc-hidden {
display: none;
}
/* Animations */
@keyframes bcFadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.biennale-chatbot .bc-message {
animation: bcFadeIn 0.3s ease-out;
}
/* Scrollbar styling */
.biennale-chatbot .bc-chat-container::-webkit-scrollbar {
width: 6px;
}
.biennale-chatbot .bc-chat-container::-webkit-scrollbar-track {
background: #f3e8ff;
}
.biennale-chatbot .bc-chat-container::-webkit-scrollbar-thumb {
background: #a855f7;
border-radius: 3px;
}
/* Responsive */
@media (max-width: 768px) {
.biennale-chatbot {
margin: 10px;
border-radius: 12px;
}
.biennale-chatbot .bc-header {
padding: 16px;
}
.biennale-chatbot .bc-header-title h1 {
font-size: 20px;
}
.biennale-chatbot .bc-chat-container {
height: 300px;
}
.biennale-chatbot .bc-question-container {
padding: 16px;
}
.biennale-chatbot .bc-option-button {
padding: 12px;
font-size: 14px;
}
}
`;
chatContainer.appendChild(messageDiv);
chatContainer.scrollTop = chatContainer.scrollHeight;
}
function bcUpdateProgress() {
const totalQuestions = bcQuestions.length;
const currentQuestion = bcCurrentStep + 1;
const percentage = Math.round((currentQuestion / totalQuestions) * 100);
document.getElementById('bcProgressText').textContent = `Question ${currentQuestion} sur ${totalQuestions}`;
document.getElementById('bcProgressPercentage').textContent = `${percentage}%`;
document.getElementById('bcProgressFill').style.width = `${percentage}%`;
}
function bcDisplayQuestion() {
const question = bcQuestions[bcCurrentStep];
// Vérifier la condition si elle existe
if (question.condition && !question.condition(bcAnswers)) {
// Passer à la question suivante
bcCurrentStep++;
if (bcCurrentStep {
const button = document.createElement('button');
button.className = 'bc-option-button';
button.onclick = () => bcHandleAnswer(question.id, option.value, option.label);
button.innerHTML = `
${option.label}
`;
optionsContainer.appendChild(button);
});
bcUpdateProgress();
}
function bcHandleAnswer(questionId, answer, label) {
bcAnswers[questionId] = answer;
bcAddMessage('user', label);
setTimeout(() => {
bcCurrentStep++;
if (bcCurrentStep {
bcDisplayQuestion();
}, 500);
} else {
bcShowResult();
}
}, 1000);
}
function bcShowResult() {
const tarifId = bcDeterminerTarif(bcAnswers);
const tarif = bcTarifs.find(t => t.id === tarifId);
document.getElementById('bcProgressContainer').classList.add('bc-hidden');
document.getElementById('bcQuestionContainer').classList.add('bc-hidden');
if (tarif) {
bcAddMessage('bot', '✅ Parfait ! Le tarif qui correspond à votre profil est :');
setTimeout(() => {
bcAddMessage('bot', `🎯 Tarif ${tarif.id} : ${tarif.name}
💰 Prix : ${tarif.prix}
📊 Places disponibles : ${tarif.disponible}
🌐 Pour vous inscrire, rendez-vous sur billetweb.fr/biennale-2025`);
document.getElementById('bcRestartContainer').classList.remove('bc-hidden');
}, 1500);
} else {
bcAddMessage('bot', '❌ Désolé, aucun tarif ne correspond exactement à votre profil. Veuillez contacter l\'organisateur.');
document.getElementById('bcRestartContainer').classList.remove('bc-hidden');
}
}
// Fonction globale pour le restart (accessible depuis le HTML)
window.bcRestartChat = function() {
bcCurrentStep = 0;
bcAnswers = {};
document.getElementById('bcChatContainer').innerHTML = `
`;
document.getElementById('bcProgressContainer').classList.remove('bc-hidden');
document.getElementById('bcQuestionContainer').classList.remove('bc-hidden');
document.getElementById('bcRestartContainer').classList.add('bc-hidden');
bcDisplayQuestion();
};
// Initialisation
function bcInit() {
if (document.getElementById('bcInitialTime')) {
document.getElementById('bcInitialTime').textContent = bcGetTimeString();
bcDisplayQuestion();
}
}
// Lancer l'initialisation quand le DOM est prêt
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', bcInit);
} else {
bcInit();
}
})();