/* ==========================================
	   STYLES MARIELLE - ASSISTANT VIRTUEL
	   ========================================== */

	.marielle-container {
	    min-height: calc(100vh - 200px);
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    padding: 40px 20px;
	    position: relative;
	    overflow: hidden;
	}

	.marielle-container::before {
	    content: '';
	    position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    background: radial-gradient(circle at 50% 50%, rgba(var(--primary-rgb), 0.1) 0%, transparent 70%);
	    animation: pulse-bg 4s ease-in-out infinite;
	    z-index: 0;
	}

	@keyframes pulse-bg {
	    0%, 100% {
		opacity: 1;
	    }
	    50% {
		opacity: 0.5;
	    }
	}

	.marielle-card {
	    background: var(--bg-light);
	    border-radius: var(--border-radius);
	    padding: 50px 40px;
	    max-width: 900px;
	    width: 100%;
	    box-shadow: 0 10px 40px var(--shadow-color);
	    position: relative;
	    z-index: 1;
	    animation: fadeInScale 0.8s ease;
	    transition: transform 0.3s ease;
	}

	.marielle-card:hover {
	    transform: translateY(-5px);
	}

	@keyframes fadeInScale {
	    from {
		opacity: 0;
		transform: scale(0.95);
	    }
	    to {
		opacity: 1;
		transform: scale(1);
	    }
	}

	/* Avatar Marielle */
	.marielle-avatar {
	    width: 120px;
	    height: 120px;
	    margin: 0 auto 25px;
	    background: var(--primary-gradient);
	    border-radius: 50%;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    font-size: 4em;
	    box-shadow: 0 8px 25px var(--shadow-color);
	    animation: float 3s ease-in-out infinite;
	}

	@keyframes float {
	    0%, 100% {
		transform: translateY(0);
	    }
	    50% {
		transform: translateY(-10px);
	    }
	}

	/* Slides - Système de diaporama moderne */
	.slides-container {
	    position: relative;
	    min-height: 500px;
	    overflow: hidden;
	}

	.slide {
	    opacity: 0;
	    transform: translateX(100%);
	    transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	    position: absolute;
	    width: 100%;
	    top: 0;
	    left: 0;
	    pointer-events: none;
	    visibility: hidden;
	}

	.slide.active {
	    opacity: 1;
	    transform: translateX(0);
	    position: relative;
	    pointer-events: auto;
	    visibility: visible;
	}

	.slide.slide-out {
	    opacity: 0;
	    transform: translateX(-100%);
	}

	/* Bulle de dialogue */
	.marielle-bubble {
	    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.15), rgba(var(--primary-rgb), 0.05));
	    border-left: 4px solid var(--primary-color);
	    border-radius: 15px;
	    padding: 30px;
	    margin: 30px 0;
	    position: relative;
	    opacity: 0;
	    transform: translateY(20px);
	    transition: all 0.6s ease 0.3s;
	}

	.slide.active .marielle-bubble {
	    opacity: 1;
	    transform: translateY(0);
	}

	.marielle-bubble h2 {
	    color: var(--primary-color);
	    font-size: 1.8em;
	    margin-bottom: 15px;
	    display: flex;
	    align-items: center;
	    gap: 12px;
	}

	.marielle-bubble p {
	    color: var(--text-light);
	    font-size: 1.05em;
	    line-height: 1.7;
	    margin: 15px 0;
	}

	.marielle-bubble ul {
	    color: var(--text-light);
	    line-height: 1.8;
	    margin-left: 20px;
	}

	.marielle-bubble ul li {
	    margin: 10px 0;
	    opacity: 0;
	    transform: translateX(-20px);
	    transition: all 0.5s ease;
	}

	.slide.active .marielle-bubble ul li {
	    opacity: 1;
	    transform: translateX(0);
	}

	.slide.active .marielle-bubble ul li:nth-child(1) { transition-delay: 0.4s; }
	.slide.active .marielle-bubble ul li:nth-child(2) { transition-delay: 0.5s; }
	.slide.active .marielle-bubble ul li:nth-child(3) { transition-delay: 0.6s; }
	.slide.active .marielle-bubble ul li:nth-child(4) { transition-delay: 0.7s; }
	.slide.active .marielle-bubble ul li:nth-child(5) { transition-delay: 0.8s; }

	/* Grille de fonctionnalités */
	.features-grid {
	    display: grid;
	    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	    gap: 20px;
	    margin: 30px 0;
	}

	.feature-item {
	    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.1), rgba(var(--primary-rgb), 0.05));
	    padding: 20px;
	    border-radius: 12px;
	    transition: all 0.4s ease;
	    border: 1px solid transparent;
	    opacity: 0;
	    transform: translateY(20px);
	}

	.slide.active .feature-item {
	    opacity: 1;
	    transform: translateY(0);
	}

	.slide.active .feature-item:nth-child(1) { transition-delay: 0.4s; }
	.slide.active .feature-item:nth-child(2) { transition-delay: 0.5s; }
	.slide.active .feature-item:nth-child(3) { transition-delay: 0.6s; }
	.slide.active .feature-item:nth-child(4) { transition-delay: 0.7s; }
	.slide.active .feature-item:nth-child(5) { transition-delay: 0.8s; }
	.slide.active .feature-item:nth-child(6) { transition-delay: 0.9s; }

	.feature-item:hover {
	    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.2), rgba(var(--primary-rgb), 0.1));
	    border-color: var(--primary-color);
	    transform: translateY(-5px);
	}

	.feature-item h3 {
	    color: var(--primary-color);
	    font-size: 1.1em;
	    margin-bottom: 10px;
	    display: flex;
	    align-items: center;
	    gap: 10px;
	}

	.feature-item p {
	    color: var(--text-muted);
	    font-size: 0.9em;
	    line-height: 1.5;
	}

	/* Barre de progression */
	.progress-container {
	    margin: 30px 0;
	    padding: 20px;
	    background: rgba(255, 255, 255, 0.05);
	    border-radius: 12px;
	}

	.progress-bar {
	    height: 10px;
	    background: rgba(255, 255, 255, 0.1);
	    border-radius: 10px;
	    overflow: hidden;
	    position: relative;
	}

	.progress-fill {
	    height: 100%;
	    background: var(--primary-gradient);
	    border-radius: 10px;
	    width: 0%;
	    transition: width 0.8s ease;
	    position: relative;
	    overflow: hidden;
	}

	.progress-text {
	    text-align: center;
	    margin-top: 15px;
	    color: var(--text-muted);
	    font-size: 0.9em;
	    font-weight: 600;
	}

	/* Indicateurs de slides */
	.slide-indicators {
	    display: flex;
	    justify-content: center;
	    gap: 12px;
	    margin: 30px 0;
	}

	.indicator {
	    width: 12px;
	    height: 12px;
	    border-radius: 50%;
	    background: rgba(var(--primary-rgb), 0.3);
	    cursor: pointer;
	    transition: all 0.3s ease;
	}

	.indicator:hover {
	    background: var(--primary-color);
	    transform: scale(1.2);
	}

	.indicator.active {
	    background: var(--primary-gradient);
	    transform: scale(1.3);
	    box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.5);
	}

	/* Boutons d'action */
	.action-buttons {
	    display: flex;
	    gap: 20px;
	    justify-content: center;
	    flex-wrap: wrap;
	    margin-top: 30px;
	}

	.btn-marielle {
	    padding: 15px 35px;
	    border-radius: 25px;
	    border: none;
	    font-size: 1.05em;
	    font-weight: 600;
	    cursor: pointer;
	    transition: all 0.3s ease;
	    display: flex;
	    align-items: center;
	    gap: 10px;
	    text-decoration: none;
	}

	.btn-primary-marielle {
	    background: var(--primary-gradient);
	    color: white;
	}

	.btn-primary-marielle:hover {
	    transform: translateY(-3px);
	    box-shadow: 0 8px 25px rgba(var(--primary-rgb), 0.4);
	}

	.btn-secondary-marielle {
	    background: rgba(255, 255, 255, 0.1);
	    color: var(--text-light);
	    border: 2px solid var(--primary-color);
	}

	.btn-secondary-marielle:hover {
	    background: rgba(var(--primary-rgb), 0.2);
	    transform: translateY(-3px);
	}

	/* Navigation controls */
	.slide-nav {
	    position: absolute;
	    top: 50%;
	    transform: translateY(-50%);
	    background: rgba(var(--primary-rgb), 0.2);
	    border: 2px solid var(--primary-color);
	    border-radius: 50%;
	    width: 50px;
	    height: 50px;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    cursor: pointer;
	    transition: all 0.3s ease;
	    z-index: 10;
	}

	.slide-nav:hover {
	    background: var(--primary-color);
	    transform: translateY(-50%) scale(1.1);
	}

	.slide-nav-prev {
	    left: -70px;
	}

	.slide-nav-next {
	    right: -70px;
	}

	/* Responsive */
	@media (max-width: 768px) {
	    .marielle-card {
		padding: 30px 20px;
	    }

	    .marielle-avatar {
		width: 100px;
		height: 100px;
		font-size: 3em;
	    }

	    .marielle-bubble {
		padding: 20px;
	    }

	    .marielle-bubble h2 {
		font-size: 1.4em;
	    }

	    .features-grid {
		grid-template-columns: 1fr;
	    }

	    .action-buttons {
		flex-direction: column;
		align-items: stretch;
	    }

	    .btn-marielle {
		justify-content: center;
	    }

	    .slide-nav {
		display: none;
	    }
	}