:root {
     --celestial-blue: #0e4e78;
     --celestial-light-blue: #1a73e8;
     --celestial-white: #ffffff;
     --celestial-gold: #e9b949;
     --celestial-green: #38E82BFF;
     --celestial-dark: #1e293b;
     --celestial-light-bg: #f0f7ff;

     /* Nouvelles couleurs pour le design moderne */
     --celestial-purple: #8b5cf6;
     --celestial-pink: #ec4899;
     --celestial-cyan: #06b6d4;
     --celestial-emerald: #10b981;
     --celestial-orange: #f59e0b;

     /* Gradients modernes avec la nouvelle couleur principale */
     --gradient-primary: linear-gradient(135deg, var(--celestial-blue), var(--celestial-purple));
     --gradient-secondary: linear-gradient(135deg, var(--celestial-gold), var(--celestial-orange));
     --gradient-hero: linear-gradient(135deg, rgba(14, 78, 120, 0.9), rgba(139, 92, 246, 0.8));
     --gradient-blue: linear-gradient(135deg, var(--celestial-blue), var(--celestial-light-blue));

     /* Ombres modernes */
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
     --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
     --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
     --shadow-glow: 0 0 20px rgba(14, 78, 120, 0.3);

     /* Bordures arrondies */
     --radius-sm: 0.375rem;
     --radius-md: 0.5rem;
     --radius-lg: 0.75rem;
     --radius-xl: 1rem;
     --radius-2xl: 1.5rem;
     --radius-full: 9999px;
 }

 body {
     font-family: 'Nunito', sans-serif;
     background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f0f7ff 100%);
     color: #333;
     min-height: 100vh;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: 'Lora', serif;
 }

 .navbar {
     background: rgba(255, 255, 255, 0.98);
     border-bottom: 1px solid rgba(14, 78, 120, 0.1);
     box-shadow: 0 2px 20px rgba(14, 78, 120, 0.1);
     transition: all 0.3s ease;
 }

 .navbar-brand {
     font-family: 'Lora', serif;
     font-weight: 700;
     background: var(--gradient-blue);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     transition: all 0.3s ease;
 }

 .navbar-brand:hover {
     transform: scale(1.05);
 }

 .navbar-nav .nav-link {
     color: var(--celestial-blue);
     font-weight: 500;
     transition: all 0.3s ease;
     position: relative;
 }

 .navbar-nav .nav-link::after {
     content: '';
     position: absolute;
     bottom: -5px;
     left: 0;
     width: 0;
     height: 2px;
     background: var(--gradient-blue);
     transition: width 0.3s ease;
 }

 .navbar-nav .nav-link:hover::after {
     width: 100%;
 }

 .navbar-nav .nav-link:hover {
     color: var(--celestial-light-blue);
     transform: translateY(-2px);
 }

 .hero-section {
     background: linear-gradient(135deg, var(--celestial-blue), var(--celestial-light-blue));
     color: white;
     padding: 7rem 1rem;
     position: relative;
     overflow: hidden;
 }

 .hero-section::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: url('/api/placeholder/1200/800') no-repeat center center;
     background-size: cover;
     opacity: 0.1;
     z-index: 0;
 }

 .hero-content {
     position: relative;
     z-index: 1;
 }

 .hero-section h1 {
     font-size: 3rem;
     font-weight: 700;
     margin-bottom: 1.5rem;
     color: var(--celestial-dark);
     font-family: 'Lora', serif;
     line-height: 1.2;
 }

 .hero-section .lead {
     font-size: 1.2rem;
     margin-bottom: 2rem;
     max-width: 800px;
     color: #64748b;
     line-height: 1.6;
     font-weight: 400;
     margin-left: auto;
     margin-right: auto;
 }

 .feature-icon {
     font-size: 3rem;
     color: var(--celestial-blue);
     margin-bottom: 1rem;
 }

 .features-section {
     padding: 8rem 0;
     background: white;
     position: relative;
     overflow: hidden;
 }

 .features-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image:
         radial-gradient(circle at 20% 20%, rgba(26, 86, 219, 0.05) 0%, transparent 50%),
         radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);
     z-index: 0;
 }

 .feature-card {
     background: rgba(255, 255, 255, 0.9);
     border: 1px solid rgba(255, 255, 255, 0.5);
     border-radius: var(--radius-xl);
     box-shadow: var(--shadow-lg);
     overflow: hidden;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     z-index: 1;
 }

 .feature-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: var(--gradient-primary);
     opacity: 0;
     transition: opacity 0.4s ease;
     z-index: -1;
 }

 .feature-card:hover::before {
     opacity: 0.05;
 }

 .feature-card:hover {
     transform: translateY(-8px) scale(1.02);
     box-shadow: var(--shadow-xl);
     border-color: rgba(26, 86, 219, 0.2);
 }

 .feature-card .card-image {
     position: relative;
     overflow: hidden;
     height: 200px;
     background: var(--gradient-primary);
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .feature-card .card-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.4s ease;
     filter: brightness(0.9) contrast(1.1);
 }

 .feature-card:hover .card-image img {
     transform: scale(1.1);
 }

 .feature-card .card-image img.module-icon {
     width: 80px;
     height: 80px;
     object-fit: contain;
     filter: brightness(0) invert(1);
     opacity: 0.9;
 }

 .feature-card .card-content {
     padding: 2rem;
     flex-grow: 1;
     background: rgba(255, 255, 255, 0.95);
 }

 .feature-card .card-title {
     font-size: 1.5rem;
     font-weight: 700;
     margin-bottom: 1rem;
     color: var(--celestial-dark);
     background: var(--gradient-primary);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .feature-card .card-text {
     font-size: 1rem;
     color: #64748b;
     line-height: 1.6;
     margin: 0;
 }

 .feature-card .card-footer {
     margin-top: 15px;
     display: flex;
     justify-content: center;
     gap: 5px;
 }

 .feature-card .card-footer button {
     background-color: #e0d1ff;
     border: none;
     border-radius: 5px;
     color: #fff;
     padding: 5px 10px;
     font-size: 0.8em;
     cursor: pointer;
 }

 .feature-card .card-footer button:hover {
     background-color: #c1a1e3;
 }


 .btn-celestial {
     background-color: var(--celestial-gold);
     border-color: var(--celestial-gold);
     color: var(--celestial-dark);
     font-weight: 600;
     padding: 0.6rem 1.5rem;
     border-radius: 50px;
     transition: all 0.3s;
 }

 .btn-celestial:hover {
     background-color: #d9a93e;
     border-color: #d9a93e;
     transform: translateY(-3px);
     box-shadow: 0 5px 15px rgba(233, 185, 73, 0.4);
 }

 .btn-celestial-outline {
     background-color: transparent;
     border-color: var(--celestial-white);
     color: var(--celestial-white);
     font-weight: 600;
     padding: 0.6rem 1.5rem;
     border-radius: 50px;
     transition: all 0.3s;
 }

 .btn-celestial-outline:hover {
     background-color: var(--celestial-white);
     color: var(--celestial-blue);
     transform: translateY(-3px);
     box-shadow: 0 5px 15px rgba(255, 255, 255, 0.3);
 }

 .pricing-section {
     background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
     padding: 8rem 0;
     position: relative;
     overflow: hidden;
 }

 .pricing-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image:
         radial-gradient(circle at 10% 20%, rgba(233, 185, 73, 0.1) 0%, transparent 50%),
         radial-gradient(circle at 90% 80%, rgba(26, 86, 219, 0.1) 0%, transparent 50%);
     z-index: 0;
 }

 .pricing-card {
     background: rgba(255, 255, 255, 0.95);
     border: 1px solid rgba(255, 255, 255, 0.5);
     border-radius: var(--radius-2xl);
     box-shadow: var(--shadow-lg);
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     z-index: 1;
     overflow: hidden;
 }

 .pricing-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: var(--gradient-primary);
     opacity: 0;
     transition: opacity 0.4s ease;
     z-index: -1;
 }

 .pricing-card:hover::before {
     opacity: 0.03;
 }

 .pricing-card:hover {
     transform: translateY(-12px) scale(1.03);
     box-shadow: var(--shadow-xl);
     border-color: rgba(26, 86, 219, 0.2);
 }

 .pricing-card.highlighted {
     border: 2px solid rgba(14, 78, 120, 0.5);
     box-shadow: var(--shadow-xl), 0 0 30px rgba(14, 78, 120, 0.2);
     transform: scale(1.05);
     position: relative;
 }

 .pricing-card.highlighted::after {
     content: 'Populaire';
     position: absolute;
     top: -10px;
     right: 20px;
     background: var(--gradient-blue);
     color: white;
     padding: 0.5rem 1rem;
     border-radius: var(--radius-full);
     font-size: 0.875rem;
     font-weight: 600;
     box-shadow: var(--shadow-md);
 }

 .pricing-card.highlighted2 {
     border: 2px solid rgba(16, 185, 129, 0.5);
     box-shadow: var(--shadow-xl), 0 0 30px rgba(16, 185, 129, 0.2);
     position: relative;
 }

 .pricing-card.highlighted2::after {
     content: 'Élite';
     position: absolute;
     top: -10px;
     right: 20px;
     background: linear-gradient(135deg, var(--celestial-emerald), var(--celestial-cyan));
     color: white;
     padding: 0.5rem 1rem;
     border-radius: var(--radius-full);
     font-size: 0.875rem;
     font-weight: 600;
     box-shadow: var(--shadow-md);
 }

 .pricing-card .card-header {
     background: rgba(255, 255, 255, 0.95);
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
     padding: 2rem 2rem 1rem 2rem;
     text-align: center;
 }

 .pricing-card .card-header h4 {
     font-size: 1.75rem;
     font-weight: 700;
     background: var(--gradient-primary);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     margin: 0;
 }

 .pricing-card .card-body {
     padding: 2rem;
     background: rgba(255, 255, 255, 0.95);
 }

 .pricing-card .price {
     font-size: 3rem;
     font-weight: 800;
     margin: 1.5rem 0;
     background: var(--gradient-blue);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     text-align: center;
 }

 .pricing-card .price-period {
     font-size: 1rem;
     opacity: 0.7;
     font-weight: 500;
 }

 .pricing-feature {
     display: flex;
     align-items: center;
     margin-bottom: 0.75rem;
 }

 .pricing-feature i {
     color: var(--celestial-blue);
     margin-right: 0.5rem;
 }

 .pricing-card.highlighted .pricing-feature i {
     color: var(--celestial-blue);
 }

 .testimonial-section {
     background-color: var(--celestial-light-bg);
     padding: 5rem 1rem;
 }

 .testimonial-card {
     background: rgba(255, 255, 255, 0.9);
     border-radius: 15px;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
     padding: 25px;
     transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
 }

 .testimonial-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
 }

 .testimonial-card .card-body {
     padding: 2rem;
 }

 .testimonial-avatar {
     width: 70px;
     height: 70px;
     border-radius: 50%;
     object-fit: cover;
     margin-right: 1rem;
 }


 .testimonial-quote {
     font-size: 1.1rem;
     font-style: italic;
     margin-bottom: 1.5rem;
     position: relative;
     padding: 0 1rem;
 }

 .testimonial-quote::before {
     content: "\201C";
     font-size: 4rem;
     position: absolute;
     left: -1rem;
     top: -2rem;
     color: rgba(14, 78, 120, 0.1);
     font-family: serif;
 }

 .steps-section {
     padding: 50px 0;
     background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
 }

 .step-card {
     background: rgba(255, 255, 255, 0.8);
     border-radius: 15px;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
     padding: 25px;
     text-align: center;
     transition: transform 0.4s ease-in-out, background 0.3s ease-in-out;
     position: relative;
     overflow: hidden;
 }

 .steps-section {
     padding: 50px 0;
     background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
 }

 .step-card:before {
     content: '';
     position: absolute;
     top: 0;
     left: 50%;
     width: 300%;
     height: 300%;
     background: radial-gradient(circle, rgba(230, 215, 255, 0.3), rgba(230, 215, 255, 0) 70%);
     transition: transform 0.5s ease-in-out;
     transform: translateX(-50%) translateY(-50%);
     z-index: -1;
 }

 .step-card:hover:before {
     transform: translateX(-50%) translateY(-50%) rotate(45deg);
 }

 .step-number {
     background: var(--gradient-blue);
     color: white;
     border-radius: 50%;
     width: 50px;
     height: 50px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: bold;
     margin: 0 auto 1.5rem auto;
     box-shadow: var(--shadow-md);
 }

 .step-card h5 {
     color: #333;
     font-size: 1.2rem;
 }

 .step-card p {
     color: #666;
     font-size: 1rem;
 }

 .cta-section {
     background: linear-gradient(135deg, var(--celestial-blue), var(--celestial-light-blue));
     color: white;
     padding: 5rem 1rem;
     text-align: center;
     position: relative;
     overflow: hidden;
 }

 .cta-section::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: url('/api/placeholder/1200/800') no-repeat center center;
     background-size: cover;
     opacity: 0.1;
     z-index: 0;
 }

 .cta-content {
     position: relative;
     z-index: 1;
 }

 .footer {
     background-color: var(--celestial-dark);
     color: rgba(255, 255, 255, 0.8);
     padding: 3rem 1rem;
 }

 .footer h5 {
     color: white;
     font-weight: 600;
     margin-bottom: 1.5rem;
 }

 .footer ul {
     list-style-type: none;
     padding-left: 0;
 }

 .footer ul li {
     margin-bottom: 0.8rem;
 }

 .footer ul li a {
     color: rgba(255, 255, 255, 0.7);
     text-decoration: none;
     transition: all 0.3s;
 }

 .footer ul li a:hover {
     color: white;
     text-decoration: none;
 }


 .header_height {
     height: 100vh;
     /* Assurez-vous que le carrousel prend toute la hauteur de la vue */
 }

 .social-icons a {
     color: rgba(255, 255, 255, 0.7);
     font-size: 1.2rem;
     margin-right: 1rem;
     transition: all 0.3s;
 }

 .social-icons a:hover {
     color: white;
     transform: translateY(-3px);
 }

 .copyright {
     background-color: rgba(0, 0, 0, 0.2);
     padding: 1rem 0;
     margin-top: 2rem;
 }

 .dropdown-menu {
     border: none;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     border-radius: 0.5rem;
 }

 /* Pour la démo des personnalisations de paroisse */
 .parish-customization-preview {
     border: 2px dashed var(--celestial-blue);
     border-radius: 0.8rem;
     padding: 1.5rem;
     background-color: rgba(26, 86, 219, 0.05);
 }

 .parish-customization-preview:hover {
     transform: translateY(-10px);
 }

 .parish-customization-preview h3 {
     color: #333;
     font-size: 1.5rem;
 }

 .parish-customization-preview img {
     border-radius: 10px;
 }


 /* Animation légère */
 @keyframes float {
     0% {
         transform: translateY(0px);
     }

     50% {
         transform: translateY(-10px);
     }

     100% {
         transform: translateY(0px);
     }
 }

 .floating {
     animation: float 3s ease-in-out infinite;
 }

 /* Section Héros Pleine Largeur */
 .hero-section-modern {
     height: 80vh;
     min-height: 600px;
     position: relative;
     overflow: hidden;
     background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f0f7ff 100%);
     display: flex;
     align-items: center;
     padding: 2rem 0;
 }

 /* Section Vidéo */
 .video-section {
     height: 100%;
     background: transparent;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     overflow: hidden;
     padding: 2rem;
 }

 .video-container {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 2rem;
 }

 .video-placeholder {
     width: 100%;
     max-width: 500px;
     height: 400px;
     background: white;
     border-radius: var(--radius-2xl);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     position: relative;
     overflow: hidden;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease;
     padding: 2rem;
 }

 .video-placeholder:hover {
     transform: scale(1.02);
     box-shadow: var(--shadow-xl), var(--shadow-glow);
 }

 .video-content {
     text-align: center;
     color: var(--celestial-dark);
     z-index: 2;
     position: relative;
     width: 100%;
 }

 .play-button {
     width: 80px;
     height: 80px;
     background: var(--gradient-blue);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 2rem auto;
     border: none;
     transition: all 0.3s ease;
     cursor: pointer;
     box-shadow: 0 8px 20px rgba(14, 78, 120, 0.3);
 }

 .play-button:hover {
     transform: scale(1.1);
     box-shadow: 0 12px 30px rgba(14, 78, 120, 0.4);
 }

 .play-button i {
     font-size: 2rem;
     margin-left: 4px;
     color: white;
 }

 .video-title {
     font-size: 1.75rem;
     font-weight: 700;
     margin-bottom: 1rem;
     color: var(--celestial-dark);
     font-family: 'Lora', serif;
 }

 /* Onglets vidéo */
 .video-tabs {
     display: flex;
     gap: 0.5rem;
     margin-bottom: 2rem;
     padding: 0.5rem;
     background: #f8fafc;
     border-radius: var(--radius-lg);
 }

 .tab-btn {
     flex: 1;
     padding: 0.75rem 1rem;
     background: transparent;
     border: none;
     border-radius: var(--radius-md);
     color: #64748b;
     font-weight: 500;
     font-size: 0.9rem;
     transition: all 0.3s ease;
     cursor: pointer;
 }

 .tab-btn.active {
     background: white;
     color: var(--celestial-dark);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }

 .tab-btn:hover:not(.active) {
     color: var(--celestial-blue);
 }

 /* Aperçu vidéo */
 .video-preview {
     position: relative;
     margin: 2rem 0;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 2rem;
 }

 .preview-image {
     width: 200px;
     height: 150px;
     background: #f8fafc;
     border-radius: var(--radius-lg);
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
 }

 .preview-img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 /* Élément de visite guidée */
 .tour-element {
     position: relative;
     margin-top: 2rem;
     display: flex;
     align-items: center;
     gap: 1rem;
 }

 .tour-label {
     font-size: 0.8rem;
     font-weight: 600;
     color: var(--celestial-blue);
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .tour-line {
     flex: 1;
     height: 2px;
     background: linear-gradient(90deg, var(--celestial-blue), transparent);
     border-radius: 1px;
 }

 /* Styles pour le Carrousel Héro Pleine Largeur */
 #heroCarousel {
     height: 100%;
     min-height: 500px;
     position: relative;
     color: var(--celestial-dark);
     overflow: hidden;
     border-radius: var(--radius-2xl);
     background: white;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
 }

 .carousel-item {
     height: 100%;
     position: relative;
     transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .carousel-image-wrapper {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-size: cover;
     background-position: center center;
     background-repeat: no-repeat;
     transform: scale(1.1);
     transition: transform 8s ease-out;
 }

 .carousel-item.active .carousel-image-wrapper {
     transform: scale(1);
 }


 .payment-text {
     font-size: 0.9rem;
     color: #555;
 }

 .payment-icon {
     max-width: 40px;
     /* Réduit la taille des icônes */
     height: auto;
 }

 .gap-2 {
     gap: 0.5rem;
     /* Réduit l'espacement entre les icônes */
 }

 /* Overlay moderne avec gradient */
 .carousel-image-wrapper::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: var(--gradient-hero);
     z-index: 1;
     opacity: 0.8;
 }

 /* Effet de particules flottantes */
 .carousel-image-wrapper::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image:
         radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
         radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
         radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
     z-index: 1;
     animation: float 6s ease-in-out infinite;
 }

 /* Style de la légende personnalisée pleine largeur */
 .carousel-caption-custom {
     position: relative;
     z-index: 2;
     padding: 3rem 2rem;
     background: transparent;
     border-radius: var(--radius-xl);
     text-shadow: none;
     max-width: 100%;
     margin: 0;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
 }

 /* Boutons modernes avec glassmorphism */
 .btn-celestial {
     background: var(--celestial-dark);
     border: none;
     color: white;
     font-weight: 600;
     padding: 1rem 2.5rem;
     border-radius: var(--radius-lg);
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 8px 20px rgba(30, 41, 59, 0.3);
     position: relative;
     overflow: hidden;
     font-size: 1rem;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 .btn-celestial::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
     transition: left 0.6s;
 }

 .btn-celestial:hover::before {
     left: 100%;
 }

 .btn-celestial:hover {
     transform: translateY(-2px);
     box-shadow: 0 12px 30px rgba(30, 41, 59, 0.4);
     background: var(--celestial-blue);
 }

 .btn-celestial-outline {
     background: transparent;
     border: 2px solid var(--celestial-dark);
     color: var(--celestial-dark);
     font-weight: 600;
     padding: 1rem 2.5rem;
     border-radius: var(--radius-lg);
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
     font-size: 1rem;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 .btn-celestial-outline::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: var(--gradient-blue);
     opacity: 0;
     transition: opacity 0.4s ease;
     z-index: -1;
 }

 .btn-celestial-outline:hover::before {
     opacity: 1;
 }

 .btn-celestial-outline:hover {
     color: white;
     border-color: var(--celestial-blue);
     background: var(--celestial-blue);
     transform: translateY(-2px);
     box-shadow: 0 12px 30px rgba(14, 78, 120, 0.3);
 }

 /* Indicateurs et contrôles modernes */
 .carousel-indicators {
     bottom: 2rem;
     z-index: 3;
 }

 .carousel-indicators [data-bs-target] {
     background-color: rgba(255, 255, 255, 0.4);
     border: 2px solid rgba(255, 255, 255, 0.6);
     width: 16px;
     height: 16px;
     border-radius: var(--radius-full);
     margin: 0 8px;
     transition: all 0.3s ease;
 }

 .carousel-indicators .active {
     background-color: var(--celestial-blue);
     border-color: var(--celestial-blue);
     transform: scale(1.2);
     box-shadow: var(--shadow-glow);
 }

 .carousel-control-prev,
 .carousel-control-next {
     width: 60px;
     height: 60px;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(255, 255, 255, 0.2);
     border-radius: var(--radius-full);
     border: 1px solid rgba(255, 255, 255, 0.3);
     transition: all 0.3s ease;
 }

 .carousel-control-prev:hover,
 .carousel-control-next:hover {
     background: rgba(255, 255, 255, 0.2);
     transform: translateY(-50%) scale(1.1);
 }

 .carousel-control-prev-icon,
 .carousel-control-next-icon {
     background-color: transparent;
     width: 24px;
     height: 24px;
     filter: brightness(0) invert(1);
 }

 /* Animations (Optionnel - nécessite une bibliothèque comme Animate.css ou keyframes CSS) */
 /* Exemple simple avec keyframes */
 @keyframes fadeInDown {
     from {
         opacity: 0;
         transform: translate3d(0, -50px, 0);
     }

     to {
         opacity: 1;
         transform: translate3d(0, 0, 0);
     }
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translate3d(0, 50px, 0);
     }

     to {
         opacity: 1;
         transform: translate3d(0, 0, 0);
     }
 }

 .animated {
     animation-duration: 1s;
     animation-fill-mode: both;
 }

 .fadeInDown {
     animation-name: fadeInDown;
     animation-delay: 0.3s;
 }

 .fadeInUp {
     animation-name: fadeInUp;
     animation-delay: 0.5s;
 }

 /* Responsive Design */
 @media (max-width: 992px) {
     .hero-section-modern {
         height: auto;
         min-height: 400px;
     }

     .video-section {
         height: 300px;
         order: 2;
     }

     #heroCarousel {
         height: 400px;
         min-height: 400px;
         order: 1;
     }

     .carousel-caption-custom {
         padding: 1rem 0.5rem;
         max-width: 100%;
     }

     .hero-section h1 {
         font-size: 2rem;
     }

     .hero-section .lead {
         font-size: 1rem;
         margin-bottom: 1rem;
     }

     .video-placeholder {
         height: 250px;
         max-width: 400px;
     }

     .play-button {
         width: 60px;
         height: 60px;
     }

     .play-button i {
         font-size: 1.5rem;
     }

     .video-title {
         font-size: 1.25rem;
     }

     .video-description {
         font-size: 0.9rem;
     }
 }

 @media (max-width: 768px) {
     .hero-section-modern {
         min-height: 350px;
     }

     #heroCarousel {
         height: 350px;
         min-height: 350px;
     }

     .hero-section h1 {
         font-size: 1.75rem;
     }

     .hero-section .lead {
         font-size: 0.95rem;
     }

     .video-placeholder {
         height: 200px;
         max-width: 350px;
     }

     .play-button {
         width: 50px;
         height: 50px;
     }

     .play-button i {
         font-size: 1.25rem;
     }

     .video-title {
         font-size: 1.1rem;
     }

     .video-description {
         font-size: 0.85rem;
     }
 }

 /* Animations au scroll */
 @keyframes slideInUp {
     from {
         opacity: 0;
         transform: translateY(50px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes slideInLeft {
     from {
         opacity: 0;
         transform: translateX(-50px);
     }

     to {
         opacity: 1;
         transform: translateX(0);
     }
 }

 @keyframes slideInRight {
     from {
         opacity: 0;
         transform: translateX(50px);
     }

     to {
         opacity: 1;
         transform: translateX(0);
     }
 }

 @keyframes scaleIn {
     from {
         opacity: 0;
         transform: scale(0.8);
     }

     to {
         opacity: 1;
         transform: scale(1);
     }
 }

 /* Classes d'animation */
 .animate-on-scroll {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .animate-on-scroll.animated {
     opacity: 1;
     transform: translateY(0);
 }

 .animate-on-scroll-left {
     opacity: 0;
     transform: translateX(-30px);
     transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .animate-on-scroll-left.animated {
     opacity: 1;
     transform: translateX(0);
 }

 .animate-on-scroll-right {
     opacity: 0;
     transform: translateX(30px);
     transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .animate-on-scroll-right.animated {
     opacity: 1;
     transform: translateX(0);
 }

 .animate-on-scroll-scale {
     opacity: 0;
     transform: scale(0.9);
     transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .animate-on-scroll-scale.animated {
     opacity: 1;
     transform: scale(1);
 }