/* Titre de la section avantages */
.advantages-title {
    color: #ff8c00;
}
/* Footer centré */
.footer-centered {
    text-align: center;
}
/* Icône du bouton chatbot */
.chatbot-toggle-icon-span {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Bouton flottant du chatbot */
.chatbot-toggle-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 54px;
    height: 54px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff8c00, #e07b00);
    color: #fff;
    border: none;
    box-shadow: 0 2px 8px rgba(255,140,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    cursor: pointer;
    z-index: 1001;
    transition: transform 0.18s, box-shadow 0.18s;
    padding: 0;
    outline: none;
}
.chatbot-toggle-btn:hover, .chatbot-toggle-btn:focus {
    transform: scale(1.13);
}
/* Carousel track */
.custom-carousel-track {
    display: flex;
    gap: 24px;
    will-change: transform;
}
/* Carousel viewport */
.custom-carousel-viewport {
    overflow: hidden;
    width: 100%;
}
/* Titre notification d'abonnement (succès) */
.subscribe-success-title {
    color: #00b333;
    font-weight: bold;
    font-size: 1.1em;
}
/* Notification d'abonnement (succès) */
.subscribe-success {
    display: none;
    position: fixed;
    top: 32px;
    right: 32px;
    z-index: 9999;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px #0004;
    padding: 22px 32px;
    color: #222;
    font-size: 1.15em;
    font-weight: 500;
    min-width: 320px;
    max-width: 90vw;
    transition: opacity 0.3s;
}

    
                      /* ==================== GENERAL ==================== */
            body {
                
                margin: 0px;
                padding: 0px;
                /* background-image: url(..assets/images/Arrière-plan\ de\ R.png); */
                font-family: Arial, sans-serif;
                color: #333;
            }
            img, video {
                max-width: 100%;
                height: auto;
                display: block;
                margin: 0 auto;
            }
            h2 {
                color: #0056b3;
            }
            
            /* ==================== HEADER & NAVIGATION ==================== */
            nav ul li a i {
                color: #ff8c00;
                margin-right: 6px;
            }
            header {
                background: #090909;
                color: white;
                padding: 15px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-wrap: nowrap;
                position: relative;
                width: 100%;
                box-sizing: border-box;
            }
            .logo-container {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                flex-shrink: 0;
                width: auto;
            }
            .logo {
                height: 65px;
                width: 100px;
                margin-right: 10px;
            }
            nav ul {
                list-style: none;
                padding: 0;
                display: flex;
                justify-content: center;
                gap: 20px;
            }
            nav ul {
                list-style: none;
                padding: 0;
                margin: 0;
                display: flex;
            }
            nav ul {
                
                list-style: none;
                padding: 0;
                margin: 20;
                display: flex;
                align-items: center;
                gap: 20px;
                margin-right: -100%;
            
            }
            nav ul li {
                margin: 0 15px;
            }
            nav ul li {
                display: inline-block;
            }
            nav ul li a {
                color: white;
                text-decoration: none;
                font-weight: bold;
                transition: color 0.3s;
            }
            nav ul li a {
                text-decoration: none;
                color: white;
                font-size: 18px;
                padding: 10px 15px;
                transition: color 0.3s ease;
            }
            nav ul li a:hover {
                color: #ffd700;
            }
            nav ul li a:hover {
                color: #ffd700;
            }
            nav a {
                text-decoration: none;
                color: white;
                font-size: 18px;
            }
            
            /* Styles pour le bouton d'abonnement dans le header */
          
            .subscribe-btn:hover {
                background: linear-gradient(45deg, #e07b00, #ff8c00);
                transform: translateY(-2px);
                box-shadow: 0 4px 10px rgba(255, 140, 0, 0.3);
            }
            
            /* Container pour le bouton d'abonnement */
            .subscribe-container {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                flex-shrink: 0;
                width: auto;
                margin-left: 20px;
                margin-right: 2Opx;
            }
            
            /* ==================== SEARCH ==================== */
        
            
            /* ==================== CONTACT ==================== */
            #contact {
                text-align: center;
                padding: 25px;
                background:#292929;
                border-radius: 50%;
                width: 400px;
                height: 400px;
                margin: 20vh auto;
                box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                box-sizing: border-box;
                overflow: visible;
                position: relative;
            }
            #contact h2 {
                font-size: 20px;
                margin: 0 0 8px 0;
                color: #ff8c00;
            }
            #contact p {
                font-size: 12px;
                margin: 0 0 15px 0;
                color: #969696;
                line-height: 1.3;
                text-align: center;
                padding: 0 15px;
            }
            #contact .buttons {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 8px;
                width: 100%;
                max-width: 220px;
                position: relative;
            }
            #contact .btn {
                padding: 10px 8px;
                font-size: 12px;
                border-radius: 25px;
                text-decoration: none;
                color: white;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.3s ease;
                width: 100%;
                box-sizing: border-box;
                min-height: 35px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
            }
            #contact .btn i {
                margin-right: 6px;
                font-size: 16px;
            }
            #contact .call { background: green; }
            #contact .instagram { background: #E4405F; }
            #contact .facebook { background: #1877F2; }
            #contact .whatsapp { background: #25D366; }
            #contact .gmail { 
                background: #D14836;
                grid-column: 1 / -1;
                margin-top: 5px;
            }
            #contact .btn:hover {
                transform: translateY(-2px) scale(1.02);
                opacity: 0.9;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
            }
            .contact-section {
                text-align: left;
                max-width: 00px;
                text-align: right;
            }
            .contact-section h1 {
                font-size: 36px;
                margin-bottom: 20px;
                text-align: right;
            }
            .contact-info p {
                font-size: 18px;
                line-height: 1.5;
                text-align: right;
            }
            .contact-info i {
                font-size: 24px;
                margin-right: 10px;
                text-align: right;
            }
            
            /* ==================== BOUTONS ==================== */
            .buttons {
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                gap: 10px;
            }
            .buttons a {
                display: inline-block;
                background: #ff8c00;
                padding: 10px 20px;
                margin: 10px;
                color: white;
                text-decoration: none;
                           
                border-radius: 5px;
            }
            .buttons button {
                background: rgba(0, 0, 0, 0.5); color: white; border: none;
                padding: 10px; cursor: pointer; font-size: 18px; border-radius: 5px;
            }
            .buttons button:hover {
                background: rgba(0, 0, 0, 0.8);
            }
            .btn {
                padding: 10px 15px;
                text-decoration: none;
                color: white;
                border-radius: 5px;
                display: flex;
                align-items: center;
                transition: 0.3s;
            }
            .btn i {
                margin-right: 5px;
            }
            .btn:hover {
                opacity: 0.8;
            }
            button {
                background-color: #007BFF;
                color: white;
                border: none;
                padding: 15px 30px;
                font-size: 18px;
                border-radius: 5px;
                cursor: pointer;
                display: block;
                margin: 0 auto;
                transition: background-color 0.3s;
            }
            button:hover {
                background-color: #ff7300 ;
            }
            .add-to-cart {
                background: #ff8c00;
                color: white;
                padding: 10px;
                border: none;
                border-radius: 5px;
                cursor: pointer;
                font-size: 16px;
                transition: background 0.3s ease;
            }
            .add-to-cart:hover {
                background: #e07b00;
            }
            .close-btn {
                background: none;
                border: none;
                color: #333;
                font-size: 20px;
                cursor: pointer;
                position: absolute;
                top: 10px;
                right: 10px;
            }
            
            /* ==================== PRODUITS ==================== */
            #produits {
                text-align: center;
                padding: 40px;
                background: rgba(255, 140, 0, 0.1);
                border-radius: 10px;
                margin: 20px;
                box-shadow: 0px 0px 10px rgba(255, 140, 0, 0.5);
            }
            .product-list {
                display: flex;
                justify-content: center;
                gap: 20px;
                flex-wrap: wrap;
            }
            .product-item {
                background: #222;
                padding: 20px;
                border-radius: 10px;
                text-align: center;
                box-shadow: 0px 0px 10px rgba(255, 140, 0, 0.5);
                transition: transform 0.3s ease-in-out;
                width: 250px;
            }
            .product-item:hover {
                transform: scale(1.05);
            }
            .product-item img {
                width: 100%;
                border-radius: 10px;
            }
            .product-item span {
                display: block;
                margin: 10px 0;
                color: white;
                font-size: 18px;
            }
            .product-item {
                padding: 10px;
            }
            .produits-container {
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                gap: 20px;
            }
            .produit {
                background: white;
                border-radius: 10px;
                box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
                padding: 15px;
                width: 200px;
                text-align: center;
            }
            .produit img {
                max-width: 100%;
                border-radius: 5px;
            }
            .produit button {
                background: #007BFF;
                color: white;
                border: none;
                padding: 10px;
                border-radius: 5px;
                cursor: pointer;
                margin-top: 10px;
                transition: background 0.3s;
            }
            .produit button:hover {
                background: #0056b3;
            }
            
            /* ==================== SECTION PRINCIPALE ==================== */
            section {
                padding: 20px;
                text-align: center;
            }
            section, .product-list, .reviews, .contact-section {
                padding: 10px;
                margin: 0;
            }
            .accueil-stylise {
                text-align: center;
                padding: 50px;
                background: linear-gradient(135deg, #007BFF, #00BFFF);
                color: white;
                border-radius: 10px;
                box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
                margin: 20px;
            }
            .accueil-stylise h2 {
                font-size: 28px;
                font-weight: bold;
                margin-bottom: 10px;
            }
            .accueil-stylise p {
                font-size: 18px;
                font-weight: 300;
            }
            
  /* ==================== CARDS & REVIEWS TEMOIGNAGE==================== */
      
            /* ==================== SECTION CERCLE + LOGO ==================== */
            
            /* Container principal pour cercle + bouton côte à côte */
            #circle-and-button-section {
                padding: 50px 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 70vh;
            }
            
            .circle-button-container {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 80px;
                flex-wrap: nowrap !important;
                max-width: 1200px;
                width: 100%;
            }
            @media (max-width: 768px) {
                .circle-button-container {
                    flex-direction: row !important;
                    align-items: center !important;
                    justify-content: center !important;
                    gap: 8px !important;
                    padding: 0 2vw;
                }
                .container {
                    width: 220px !important;
                    height: 220px !important;
                    padding: 12px !important;
                }
                .boutique-btn {
                    padding: 8px 12px !important;
                    font-size: 0.95rem !important;
                }
            }
            @media (max-width: 480px) {
                .circle-button-container {
                    flex-direction: row !important;
                    align-items: center !important;
                    justify-content: center !important;
                    gap: 4px !important;
                    padding: 0 1vw;
                }
                .container {
                    width: 140px !important;
                    height: 140px !important;
                    padding: 6px !important;
                }
                .boutique-btn {
                    padding: 6px 8px !important;
                    font-size: 0.85rem !important;
                }
            }
            
            .container {
                display: flex !important;
                flex-direction: row !important;
                align-items: center !important;
                justify-content: center;
                background: transparent;
                padding: 28px;
                border-radius: 50%;
                width: 300px;
                height: 300px;
                position: relative;
                overflow: hidden;
                /* Ombres multiples pour effet 3D */
                box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
                /* Bordure lumineuse */
                border: 2px solid rgba(255, 140, 0, 0.8);
                /* Animation de pulsation */
                animation: circleGlow 3s ease-in-out infinite alternate;
                /* Force la disposition */
                flex-wrap: nowrap !important;
                /* Effet de brillance */
                /* backdrop-filter: blur(2px); */
                /* Empêche le redimensionnement automatique */
                flex-shrink: 0;
                
            }
            
            /* Style pour l'image de fond dans le cercle */
            .circle-background-image {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 50%;
                z-index: 1;
                opacity: 2;
                transition: opacity 0.3s ease;
            }
            
            /* Ajuster la text-section pour être au-dessus de l'image */
            .text-section {
                position: relative;
                z-index: 2;
                text-align: center;
                color: white;
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
            }
            
            /* Effet hover sur l'image */
            .container:hover .circle-background-image {
                opacity: 0.9;
            }
            
            /* Positionnement du bouton à côté du cercle */
            .boutique-main-btn {
                background: #ff8c00;
                color: #fff;
                border: none;
                border-radius: 50%;
                width: 120px;
                height: 120px;
                min-width: 120px;
                min-height: 120px;
                max-width: 120px;
                max-height: 120px;
                font-size: 1.08rem;
                font-weight: 600;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0 4px 16px rgba(255,140,0,0.18);
                transition: transform 0.18s;
                text-align: center;
                padding: 0;
                line-height: 1.2;
                aspect-ratio: 1/1;
            }
            .boutique-main-btn:hover {
                transform: scale(1.08);
            }

            
                /* Animation pour faire clignoter le texte du bouton boutique */
                .clignote {
                    animation: clignoter 3s infinite;
                }
                @keyframes clignoter {
                    0%, 100% { opacity: 1; }
                    50% { opacity: 0.5; }
                }
            .container {
                width: 240px;
                height: 240px;
                padding: 32px;
            }
            #contact {
                width: 320px;
                height: 320px;
                margin: 15vh auto;
                padding: 20px;
            }
            #contact h2 {
                font-size: 18px;
                margin: 0 0 6px 0;
            }
            #contact p {
                font-size: 11px;
                margin: 0 0 12px 0;
                padding: 0 12px;
            }
            #contact .buttons {
                max-width: 180px;
                gap: 6px;
            }
            #contact .btn {
                padding: 8px 6px;
                font-size: 11px;
                min-height: 32px;
            }
            #contact .btn i {
                margin-right: 5px;
                font-size: 14px;
            }
            #contact .gmail {
                margin-top: 4px;
            }
            
            @media (max-width: 480px) {
                .container {
                    width: 180px;
                    height: 180px;
                    padding: 18px;
                }
                
                #contact {
                    width: 280px;
                    height: 280px;
                    margin: 10vh auto;
                    padding: 15px;
                }
                
                #contact h2 {
                    font-size: 16px;
                    margin: 0 0 5px 0;
                }
                
                #contact p {
                    font-size: 10px;
                    margin: 0 0 10px 0;
                    padding: 0 10px;
                }
                
                #contact .buttons {
                    max-width: 160px;
                    gap: 5px;
                }
                
                #contact .btn {
                    padding: 7px 5px;
                    font-size: 10px;
                    min-height: 30px;
                }
                
                #contact .btn i {
                    margin-right: 4px;
                    font-size: 12px;
                }
                
                #contact .gmail {
                    margin-top: 3px;
                }
            }
            
            /* Media queries pour l'orientation - maintient la forme circulaire */
            @media screen and (orientation: landscape) {
                #contact {
                    margin: 5vh auto;
                }
            }
            
            @media screen and (orientation: portrait) {
                #contact {
                    margin: 15vh auto;
                }
            }
            
            /* Media queries spécifiques pour les petits écrans en mode paysage */
            @media screen and (orientation: landscape) and (max-height: 500px) {
                #contact {
                    width: 240px;
                    height: 240px;
                    margin: 2vh auto;
                    padding: 12px;
                }
                
                #contact h2 {
                    font-size: 14px;
                    margin: 0 0 4px 0;
                }
                
                #contact p {
                    font-size: 9px;
                    margin: 0 0 8px 0;
                    padding: 0 8px;
                }
                
                #contact .buttons {
                    max-width: 160px;
                    gap: 2px;
                }
                
                #contact .buttons {
                    max-width: 140px;
                    gap: 3px;
                }
                
                #contact .btn {
                    padding: 5px 4px;
                    font-size: 9px;
                    min-height: 26px;
                }
                
                #contact .btn i {
                    margin-right: 3px;
                    font-size: 11px;
                }
                
                #contact .gmail {
                    margin-top: 2px;
                }
            }
            .text-section {
                text-align: center;
                padding: 20px;
                position: relative;
                z-index: 5;
                color: white;
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
                /* backdrop-filter: blur(1px); */
            }
            
            .text-section h1 {
                font-size: 2.8rem;
                font-weight: bold;
                color: #fff;
                text-shadow: 
                    0 0 20px rgba(255, 140, 0, 0.8),
                    0 4px 8px rgba(0, 0, 0, 0.5);
                margin-bottom: 15px;
                animation: titleGlow 3s ease-in-out infinite alternate;
                letter-spacing: 2px;
            }
            
            .text-section p {
                font-size: 1.2rem;
                color: rgba(255, 255, 255, 0.9);
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
                margin-bottom: 30px;
                line-height: 1.6;
                font-weight: 300;
            }
            
            @keyframes titleGlow {
                0% {
                    text-shadow: 
                        0 0 20px rgba(255, 140, 0, 0.8),
                        0 4px 8px rgba(0, 0, 0, 0.5);
                }
                100% {
                    text-shadow: 
                        0 0 30px rgba(255, 140, 0, 1),
                        0 0 40px rgba(255, 200, 0, 0.6),
                        0 6px 12px rgba(0, 0, 0, 0.7);
                }
            }
            
            /* ==================== PERSONNAGE PROMOTIONNEL ==================== */
            .promo-character {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: center;
                animation: characterFloat 3s ease-in-out infinite;
                margin: 20px 0;
            }
            
            /* Tête du personnage */
            .character-head {
                width: 60px;
                height: 60px;
                background: linear-gradient(135deg, #ffdbab, #ffc688);
                border-radius: 50%;
                position: relative;
                border: 3px solid #ff8c00;
                box-shadow: 0 4px 12px rgba(255, 140, 0, 0.3);
            }
            
            /* Yeux */
            .character-eyes {
                position: absolute;
                top: 18px;
                left: 50%;
                transform: translateX(-50%);
                display: flex;
                gap: 8px;
            }
            
            .eye {
                width: 8px;
                height: 8px;
                background: #333;
                border-radius: 50%;
                animation: blink 3s infinite;
            }
            
            /* Bouche souriante */
            .character-mouth {
                position: absolute;
                bottom: 15px;
                left: 50%;
                transform: translateX(-50%);
                width: 20px;
                height: 10px;
                border: 2px solid #ff8c00;
                border-top: none;
                border-radius: 0 0 20px 20px;
            }
            
            /* Corps du personnage */
            .character-body {
                width: 50px;
                height: 70px;
                background: linear-gradient(135deg, #ff8c00, #e07b00);
                border-radius: 25px 25px 15px 15px;
                position: relative;
                margin-top: 5px;
                box-shadow: 0 4px 12px rgba(255, 140, 0, 0.3);
            }
            
            /* Bras du personnage */
            .character-arms {
                position: absolute;
                top: 15px;
                width: 100%;
            }
            
            .arm {
                width: 20px;
                height: 8px;
                background: linear-gradient(135deg, #ffdbab, #ffc688);
                border-radius: 10px;
                position: absolute;
                border: 2px solid #ff8c00;
            }
            
            .arm.left {
                left: -22px;
                transform: rotate(-30deg);
                animation: waveLeft 2s ease-in-out infinite;
            }
            
            .arm.right {
                right: -22px;
                transform: rotate(30deg);
                animation: waveRight 2s ease-in-out infinite;
            }
            
            /* Jambes du personnage */
            .character-legs {
                display: flex;
                gap: 8px;
                margin-top: 5px;
            }
            
            .leg {
                width: 15px;
                height: 30px;
                background: linear-gradient(135deg, #4a4a4a, #333);
                border-radius: 8px;
                border: 2px solid #ff8c00;
            }
            
            /* Bulle de dialogue */
            .speech-bubble {
                position: absolute;
                top: -80px;
                left: 50%;
                transform: translateX(-50%);
                background: rgba(255, 255, 255, 0.95);
                color: #333;
                padding: 12px 16px;
                border-radius: 20px;
                font-size: 12px;
                font-weight: bold;
                white-space: nowrap;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
                animation: bubblePulse 4s ease-in-out infinite;
                border: 2px solid #ff8c00;
                z-index: 10;
            }
            
            .speech-bubble::after {
                content: '';
                position: absolute;
                bottom: -10px;
                left: 50%;
                transform: translateX(-50%);
                width: 0;
                height: 0;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-top: 10px solid #ff8c00;
            }
            
            .speech-bubble::before {
                content: '';
                position: absolute;
                bottom: -8px;
                left: 50%;
                transform: translateX(-50%);
                width: 0;
                height: 0;
                border-left: 8px solid transparent;
                border-right: 8px solid transparent;
                border-top: 8px solid rgba(255, 255, 255, 0.95);
            }
            
            /* Animations */
            @keyframes characterFloat {
                0%, 100% { transform: translateY(0px); }
                50% { transform: translateY(-10px); }
            }
            
            @keyframes blink {
                0%, 90%, 100% { transform: scaleY(1); }
                95% { transform: scaleY(0.1); }
            }
            
            @keyframes waveLeft {
                0%, 100% { transform: rotate(-30deg); }
                50% { transform: rotate(-60deg); }
            }
            
            @keyframes waveRight {
                0%, 100% { transform: rotate(30deg); }
                50% { transform: rotate(60deg); }
            }
            
            @keyframes bubblePulse {
                0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
                50% { opacity: 0.8; transform: translateX(-50%) scale(1.05); }
            }
            .image-section {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .image-section img {
                width: 400%;
                max-width: 200px;
                border-radius: 20px;
                margin-left: 500%;
            }
            
            /* ==================== CAROUSEL ==================== */
            .carousel,
            .product-list,
            .offer-banner {
                max-width: 50%;
                margin: 0 auto;
                padding: 10px;
                overflow: hidden;
            }
            .carousel { 
                position: relative;
                width: 80%; max-width: 200px; margin: 50px auto; overflow: hidden; border-radius: 10px;
            }
            .carousel-images { 
                display: flex; transition: transform 0.5s ease-in-out; 
            }
            .carousel img { 
                width: 100%; border-radius: 10px; 
            }
            .carousel-container {
                overflow: hidden;
                position: relative;
                width: 100%;
            }
            .carousel-track {
                display: flex;
                gap: 20px;
                animation: scrollProducts 15s linear infinite;
            }
            .carousel-item {
                background: #222;
                padding: 10px;
                border-radius: 10px;
                text-align: center;
                box-shadow: 0px 0px 10px rgba(255, 140, 0, 0.5);
                transition: transform 0.3s ease-in-out;
                cursor: pointer;
                min-width: 50px;
                flex-shrink: 0;
                width: 15%;
            }
            .carousel-item:hover {
                transform: scale(1.1);
            }
            .carousel-item img {
                width: 100%;
                border-radius: 10px;
                margin-bottom: 10px;
            }
            .carousel-item p {
                font-size: 16px;
                color: white;
            }
            /* Animation pour le défilement */
            @keyframes scrollProducts {
                0% { transform: translateX(0);}
                100% { transform: translateX(-100%);}
            }
            
            /* ==================== CAROUSEL 3D ==================== */
            #circular-carousel {
                padding: 50px;
                background: transparent;
                color: white;
                text-align: center;
                border-radius: 10px;
                margin: 20px auto;
                max-width: 1200px;
                box-shadow:transparent;
            }
            #circular-carousel h2 {
                font-size: 2rem;
                margin-bottom: 20px;
                color: #ff8c00;
            }
            .carousel-3d {
                position: relative;
                width: 100px;
                height: 300px;
                margin: 0 auto;
                perspective: 1000px;
            }
            .carousel-3d {
                position: relative;
                width: 300px;
                height: 300px;
                margin: 0 auto;
                perspective: 1000px;
                transform-style: preserve-3d;
            }
            .carousel-3d-item {
                position: absolute;
                width: 150px;
                height: 150px;
                background: transparent;
                border-radius: 10px;
                text-align: center;
                box-shadow: transparent;
                transform-origin: center;
                transition: transform 0.5s ease, opacity 0.5s ease;
                opacity: 0.8;
            }
            .carousel-3d-item {
                position: absolute;
                width: 200px; /* Ajustez la largeur selon vos besoins */
                height: 100px; /* Ajustez la hauteur pour afficher l'image entière */
                border-radius: 10px;
                text-align: center;
                box-shadow: transparent;
                transform-origin: center;
                transition: transform 1s ease, opacity 0.3s ease;
                opacity: 0.8;
            }
            .carousel-3d-item img {
                width: 300%;
                height: 100px;
                object-fit: cover;
                border-radius: 10px 10px 0 0;
            }
            .carousel-3d-item img {
                width: 70%; /* L'image occupe toute la largeur du conteneur */
                height: auto; /* La hauteur est ajustée automatiquement pour conserver les proportions */
                object-fit: contain; /* Affiche l'image entière sans la couper */
                border-radius: 10px 10px 0 0; /* Coins arrondis si nécessaire */
                background: transparent; /* Ajoute un fond blanc pour éviter les espaces vides */
            }
            .carousel-3d-item p {
                margin: 10px 0;
                color: white;
                font-size: 14px;
            }
            .carousel-3d-item p {
                margin: 10px 0;
                color: #ff8c00;
                font-size: 14px;
            }
            .carousel-3d-item.active {
                transform: translateZ(200px);
                opacity: 1;
                z-index: 10;
            }
            .carousel-3d-item.active {
                transform: translateZ(300px);
                opacity: 1;
                z-index: 10;
            }
            
            /* Rendre invisibles les boutons du carousel 3D */
             #circular-carousel .buttons button {
             display: none !important;
           }
            /* ==================== OFFRE ==================== */
            .offer-banner {
                position: relative;
                background: linear-gradient(135deg, #ff8c00, #e07b00);
                color: white;
                padding: 20px;
                border-radius: 10px;
                text-align: center;
                box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
                margin: 20px auto;
                max-width: 250px;
                overflow: hidden;
                animation: pulse 3s infinite;
            }
            .offer-content h2 {
                font-size: 28px;
                font-weight: bold;
                margin-bottom: 10px;
                text-transform: uppercase;
                animation: glow 1.5s infinite alternate;
            }
            .offer-content p {
                font-size: 18px;
                margin-bottom: 20px;
            }
            .offer-content button {
                background: white;
                color: #ff8c00;
                padding: 10px 20px;
                border: none;
                border-radius: 5px;
                cursor: pointer;
                font-size: 16px;
                font-weight: bold;
                transition: transform 0.3s ease, background 0.3s ease;
            }
            .offer-content button:hover {
                background: #ffd700;
                transform: scale(1.1);
            }
            /* Animation pour le panneau */
            @keyframes pulse {
                0% { transform: scale(1); box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);}
                50% { transform: scale(1.05); box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.7);}
                100% { transform: scale(1); box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);}
            }
            /* Animation pour le texte */
            @keyframes glow {
                from { text-shadow: 0 0 10px #ffd700, 0 0 20px #ffd700, 0 0 30px #ff8c00;}
                to { text-shadow: 0 0 20px #ffd700, 0 0 30px #ff8c00, 0 0 40px #e07b00;}
            }
            
            /* ==================== AVANTAGES ==================== */
            /* LES AVANTAGE */
            #advantages {
                padding: 40px;
                background:transparent;
                color: white;
                text-align: center;
                margin: 20px auto;
                border-radius: 10px;
                box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
            }
            #advantages h2 {
                font-size: 28px;
                margin-bottom: 20px;
            }
            .advantages-container {
                display: flex;
                justify-content: center;
                gap: 20px;
                flex-wrap: wrap;
            }
            .advantage {
                background: #292929;
                padding: 20px;
                border-radius: 10px;
                text-align: center;
                width: 250px;
                box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
            }
            .advantage i {
                font-size: 40px;
                color: #ff8c00;
                margin-bottom: 10px;
            }
            .advantage h3 {
                font-size: 20px;
                margin-bottom: 10px;
            }
            .advantage p {
                font-size: 16px;
                line-height: 1.5;
            }
            
            /* ==================== BANNIERE PUBLICITAIRE ==================== */
            #publicite {
                background: transparent;
                color: white;
                padding: 15px 0;
                text-align: center;
                position: relative;
                overflow: hidden;
                box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
            }
            #publicite .publicite-content {
                display: inline-block;
                white-space: nowrap;
                animation: defilement 10s linear infinite;
            }
            #publicite p {
                font-size: 18px;
                font-weight: bold;
                margin: 0;
                padding: 0 20px;
            }
            /* Animation de défilement */
            @keyframes defilement {
                0% { transform: translateX(100%);}
                100% { transform: translateX(-100%);}
            }
            
            /* ==================== TEMOIGNAGES ==================== */
         
            /* ==================== ANNONCES DASHBOARD ADMIN ==================== */
            .announcements-container {
                margin: 20px auto;
                max-width: 1200px;
                position: relative;
            }
            .announcement-slide {
                display: none;
                position: relative;
                border-radius: 8px;
                overflow: hidden;
                box-shadow: 0 4px 15px rgba(0,0,0,0.2);
                transition: all 0.0s ease;
                cursor: pointer;
            }
            .announcement-slide.active {
                display: block;
            }
            .announcement-slide img {
                width: 28%;
                height: 300px;
                object-fit: cover;
            }
            .announcement-content {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                background:transparent;
                color: white;
                padding: 15px;
            }
            .announcement-title {
                font-size: 24px;
                margin: 0 0 5px 0;
                color: #ff8c00;
            }
            .announcement-description {
                margin: 0;
                font-size: 16px;
            }
            .announcement-nav {
                position: absolute;
                top: 50%;
                width: 100%;
                display: flex;
                justify-content: space-between;
                transform: translateY(-50%);
                z-index: 10;
            }
            .announcement-nav button {
                background:transparent;
                color: transparent;
                border: none;
                border-radius: 50%;
                width: 40px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                margin: 0 10px;
            }
            .announcement-nav button:hover {
                background: rgba(0,0,0,0.8);
            }
            .announcement-indicators {
                position: absolute;
                bottom: 50px;
                left: 0;
                right: 0;
                display: flex;
                justify-content: center;
                gap: 10px;
                z-index: 10;
            }
            .announcement-indicator {
                width: 12px;
                height: 12px;
                background: rgba(255,255,255,0.5);
                border-radius: 50%;
                cursor: pointer;
            }
            .announcement-indicator.active {
                background: #ff8c00;
            }
            .announcement-type {
                display: inline-block;
                background: var(--primary-color, #ff8c00);
                color: #fff;
                font-size: 13px;
                font-weight: bold;
                padding: 3px 10px;
                border-radius: 12px;
                margin-bottom: 8px;
            }
            
            /* Section d'avis/étoiles supprimée */
            
            /* ==================== LUMINOSITE ==================== */
            .fadidi {
                font-size: 10vw;
                font-weight: bold;
                color: white;
                text-shadow: 0 0 10px #ff8c00, 0 0 20px #ff8c00, 0 0 40px #ff8c00;
                animation: glow 1.5s infinite alternate;
            }
            @keyframes glow {
                from { text-shadow: 0 0 10px #ff8c00, 0 0 20px #ff8c00, 0 0 40px #ff8c00;}
                to { text-shadow: 0 0 20px white, 0 0 30px #ff8c00, 0 0 60px #ff8c00;}
            }
            
            /* ==================== VIDEO BACKGROUND ==================== */
            .video-background {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: -1; /* Placer la vidéo derrière le contenu */
            }
            video {
                width: 100%;
                height: 100%;
                object-fit: cover; /* La vidéo occupe toute la taille de l'écran */
            }
            /* Masquer le bouton play sur la vidéo de fond sur iPhone et mobile */
            .video-background video::-webkit-media-controls-start-playback-button {
                display: none !important;
            }
            .video-background video {
                pointer-events: none;
            }
            
            /* ==================== ANIMATION MAIN & TEXTE ==================== */
            .animated-hand {
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                animation: bounce 2s infinite;
                margin: 20px auto;
                width: fit-content;
                background: linear-gradient(135deg, #ff8c00, #ff7300);
                padding: 10px 20px;
                border-radius: 30px;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
                transition: transform 0.3s ease-in-out;
            }
            .animated-hand:hover {
                transform: scale(1.1);
                box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
            }
            .hand-text {
                font-size: 1.5rem;
                font-weight: bold;
                margin-right: 10px;
                color: white;
                animation: fadeIn 3s infinite alternate;
            }
            .hand-icon {
                font-size: 2rem;
                color: white;
                animation: wave 1.5s infinite;
            }
            @keyframes wave {
                0% { transform: rotate(0deg);}
                50% { transform: rotate(20deg);}
                100% { transform: rotate(0deg);}
            }
            @keyframes bounce {
                0%, 100% { transform: translateY(0);}
                50% { transform: translateY(-10px);}
            }
            @keyframes fadeIn {
                from { opacity: 0.5;}
                to { opacity: 1;}
            }
            
            /* ==================== ANIMATION LETTRES ==================== */
            #animated-text-container {
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                font-size: 2rem;
                font-weight: bold;
                color: #e07b00;
                margin: 50px auto;
                text-align: center;
                overflow: hidden;
                position: relative;
            }
            .letter {
                display: inline-block;
                opacity: 0;
                transform: scale(0) translate(0, 0);
                animation: explode 14s ease-in-out infinite; /* Durée totale de l'animation */
            }
            @keyframes explode {
                0% { opacity: 1; transform: scale(1) translate(0, 0);}
                25% { opacity: 0.5; transform: scale(1.5) translate(calc(-50px + 100px * var(--random-x)), calc(-50px + 100px * var(--random-y)));}
                50% { opacity: 0; transform: scale(0) translate(calc(-100px + 200px * var(--random-x)), calc(-100px + 200px * var(--random-y)));}
                75% { opacity: 0.5; transform: scale(1.5) translate(calc(-50px + 100px * var(--random-x)), calc(-50px + 100px * var(--random-y)));}
                90% { opacity: 1; transform: scale(1) translate(0, 0);}
                100% { opacity: 1; transform: scale(1) translate(0, 0);}
            }
            
            /* ==================== PROMO BANNER ==================== */
            #promo-banner {
                background: transparent;
                color: white;
                padding: 10px 0;
                overflow: hidden;
                position: relative;
                text-align: center;
                font-size: 1.2rem;
            }
            .promo-track {
                display: flex;
                animation: scrollText 10s linear infinite;
                gap: 50px;
            }
            .promo-track span {
                white-space: nowrap;
            }
            @keyframes scrollText {
                0% { transform: translateX(100%);}
                100% { transform: translateX(-100%);}
            }
            
            /* ==================== CHATBOT ==================== */
            #chatbot-container {
                position: fixed;
                bottom: 20px;
                right: 20px;
                width: 300px;
                background: #1e1e1e;
                color: white;
                border-radius: 10px;
                box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
                display: none;
                flex-direction: column;
                z-index: 1000;
            }
            #chatbot-header {
                background: #ff8c00;
                padding: 10px;
                border-radius: 10px 10px 0 0;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            #chatbot-header h3 {
                margin: 0;
                font-size: 16px;
            }
            #chatbot-header button {
                background: none;
                border: none;
                color: white;
                font-size: 16px;
                cursor: pointer;
            }
            #chatbot-messages {
                padding: 10px;
                height: 300px;
                overflow-y: auto;
                display: flex;
                flex-direction: column;
                gap: 10px;
            }
            .message {
                padding: 10px;
                border-radius: 5px;
                max-width: 80%;
            }
            .bot-message {
                background: #333;
                color: white;
                align-self: flex-start;
            }
            .user-message {
                background: #ff8c00;
                color: white;
                align-self: flex-end;
            }
            #chatbot-input-container {
                display: flex;
                padding: 10px;
                gap: 10px;
                border-top: 1px solid #333;
            }
            #chatbot-input {
                flex: 1;
                padding: 10px;
                border: none;
                border-radius: 5px;
                background: #292929;
                color: white;
            }
            #chatbot-send {
                background: #ff8c00;
                border: none;
                padding: 10px 20px;
                border-radius: 5px;
                cursor: pointer;
                color: white;
                font-size: 14px;
            }
            #chatbot-toggle {
                position: fixed;
                bottom: 20px;
                right: 20px;
                background: #ff8c00;
                color: white;
                border: none;
                border-radius: 50%;
                width: 50px;
                height: 50px;
                font-size: 24px;
                cursor: pointer;
                box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
                z-index: 1000;
            }
            #chatbot-welcome-message {
                position: fixed;
                bottom: 80px;
                right: 80px;
                background: #ff8c00;
                color: white;
                padding: 10px 15px;
                border-radius: 10px;
                font-size: 14px;
                font-weight: bold;
                box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
                z-index: 1000;
                opacity: 0;
                animation: fadeInOut 5s ease-in-out;
            }
            @keyframes fadeInOut {
                0% { opacity: 0; transform: translateY(20px);}
                10%, 90% { opacity: 1; transform: translateY(0);}
                100% { opacity: 0; transform: translateY(20px);}
            }
            
            /* ==================== FORMULAIRE ABONNEMENT ==================== */
            .subscribe-btn {
                background: linear-gradient(135deg, #ff8c00, #e07b00);
                color: white;
                padding: 10px 20px;
                border: none;
                border-radius: 5px;
                cursor: pointer;
                font-size: 16px;
                transition: transform 0.3s ease, background 0.3s ease;
            }
            .subscribe-btn:hover {
                background: linear-gradient(135deg, #e07b00, #ff8c00);
                transform: scale(1.1);
            }
            .subscribe-form-container {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.8);
                z-index: 1000;
                justify-content: center;
                align-items: center;
            }
            .subscribe-form {
                background: rgb(26, 25, 25);
                padding: 35px;
                border-radius: 10px;
                text-align: center;
                width: 300px;
                box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
                padding-left: 1%;
            }
            .subscribe-form h2 {
                margin-bottom: 10px;
                color: #333;
            }
            .subscribe-form p {
                margin-bottom: 20px;
                color: #555;
            }
            .subscribe-form input {
                width: 100%;
                padding: 10px;
                margin-bottom: 15px;
                border: 1px solid #ccc;
                border-radius: 5px;
            }
            .subscribe-submit-btn {
                background: #ff8c00;
                color: white;
                padding: 10px 20px;
                border: none;
                border-radius: 5px;
                cursor: pointer;
                font-size: 16px;
                transition: background 0.3s ease;
            }
            .subscribe-submit-btn:hover {
                background: #e07b00;
            }
            
            /* ==================== RESPONSIVE ==================== */
            /* Styles pour les tablettes (écrans entre 768px et 1024px) */
            @media (max-width: 1024px) {
                body { font-size: 16px;}
                header { 
                    flex-direction: row; 
                    justify-content: space-between;
                    align-items: center;
                    padding: 10px 15px;
                    flex-wrap: nowrap;
                }
                .logo-container {
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    flex-shrink: 0;
                    width: auto;
                }
                .logo {
                    width: 120px;
                    height: auto;
                }
                nav {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-grow: 1;
                    flex-shrink: 0;
                }
                nav ul { 
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                    flex-wrap: wrap;
                    margin: 0;
                    padding: 0;
                }
                nav ul li a {
                    font-size: 14px;
                    padding: 8px 10px;
                }
                .subscribe-btn {
                    padding: 8px 16px;
                    font-size: 12px;
                    border-radius: 5px;
                }
                .subscribe-container {
                    width: auto;
                    flex-shrink: 0;
                    margin-left: 15px;
                }
                .product-list { flex-direction: column; align-items: center;}
                /* Responsive tablette pour cercle et bouton */
                .circle-button-container {
                    gap: 50px;
                    flex-direction: column;
                    align-items: center;
                }
                .container { 
                    width: 260px;
                    height: 260px;
                    padding: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                #boutique-link {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                #boutique-link button[type="submit"] {
                    width: 120px !important;
                    height: 120px !important;
                    min-width: 120px !important;
                    min-height: 120px !important;
                    max-width: 120px !important;
                    max-height: 120px !important;
                    font-size: 1.08rem !important;
                }
                .image-section img { width: 100%; max-width: 220px;}
                .carousel-3d { width: 100%; height: auto;}
                .carousel-3d-item { width: 150px; height: auto;}
            }
            /* Styles pour les téléphones (écrans de moins de 768px) */
            @media (max-width: 768px) {
                body { font-size: 14px;}
                header { 
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: center;
                    padding: 8px 12px;
                    flex-wrap: nowrap;
                }
                .logo-container {
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    flex-shrink: 0;
                    width: auto;
                }
                .logo {
                    width: 80px;
                    height: auto;
                }
                nav {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-grow: 1;
                    flex-shrink: 0;
                }
                nav ul { 
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                    flex-wrap: wrap;
                    margin: 0;
                    padding: 0;
                }
                nav ul li a {
                    font-size: 12px;
                    padding: 6px 8px;
                }
                .subscribe-btn {
                    padding: 6px 12px;
                    font-size: 10px;
                    border-radius: 5px;
                }
                .subscribe-container {
                    width: auto;
                    flex-shrink: 0;
                    margin-left: 10px;
                }
                .product-item { width: 90%; margin: 10px auto;}
                /* Responsive pour le cercle et bouton */
                .circle-button-container {
                    flex-direction: column;
                    gap: 40px;
                    align-items: center;
                    padding: 20px;
                }
                .container { 
                    width: 220px;
                    height: 220px;
                    padding: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                #boutique-link {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                #boutique-link button[type="submit"] {
                    width: 100px !important;
                    height: 100px !important;
                    min-width: 100px !important;
                    min-height: 100px !important;
                    max-width: 100px !important;
                    max-height: 100px !important;
                    font-size: 1rem !important;
                }
                .image-section img { width: 100%; max-width: 180px;}
                .carousel-3d { width: 100%; height: auto;}
                .carousel-3d-item { width: 120px; height: auto;}
                footer { font-size: 12px; padding: 10px;}
                .promo-track span { font-size: 14px;}
                .animated-hand { flex-direction: column; padding: 10px;}
                .offer-banner { max-width: 90%; margin: 10px auto;}
                #chatbot-container { width: 90%; height: 70%; bottom: 10px; right: 5%; border-radius: 10px;}
                #chatbot-header { font-size: 16px; padding: 10px;}
                #chatbot-messages { height: calc(100% - 120px); overflow-y: auto;}
                #chatbot-input-container { flex-direction: column; gap: 5px; padding: 10px;}
                #chatbot-input { width: 100%; font-size: 14px;}
                #chatbot-send { width: 100%; font-size: 14px;}
                #chatbot-toggle { bottom: 15px; right: 15px; width: 45px; height: 45px; font-size: 20px;}
                #chatbot-welcome-message { bottom: 70px; right: 10px; font-size: 12px; padding: 8px 10px;}
            }
            /* Styles pour les écrans très petits (max-width: 480px) */
            @media (max-width: 480px) {
                header {
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: center;
                    padding: 6px 8px;
                    flex-wrap: nowrap;
                }
                .logo-container {
                    flex-shrink: 0;
                    width: auto;
                }
                .logo {
                    width: 60px;
                    height: auto;
                }
                nav {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-grow: 1;
                    flex-shrink: 0;
                }
                nav ul {
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                    flex-wrap: wrap;
                }
                nav ul li a {
                    font-size: 10px;
                    padding: 4px 6px;
                }
                .subscribe-btn {
                    padding: 4px 8px;
                    font-size: 9px;
                }
                .subscribe-container {
                    width: auto;
                    flex-shrink: 0;
                    margin-left: 6px;
                }
                #chatbot-container { width: 95%; height: 60%;}
                #chatbot-header { font-size: 14px;}
                #chatbot-input { font-size: 12px;}
                #chatbot-send { font-size: 12px;}
                #chatbot-welcome-message { font-size: 10px; padding: 5px 8px;}
            }


@keyframes fadeInText {
    0% { opacity: 0.7; transform: scale(1);}
    100% { opacity: 1; transform: scale(1.05);}
}



/* Désactive l'animation CSS sur le carrousel dynamique */
.custom-carousel-track {
    animation: none !important;
    transition: none !important;
}


@keyframes scrollProducts {
    0% { transform: translateX(0);}
    100% { transform: translateX(-100%);}
}
.carousel-track {
    display: flex;
    gap: 20px;
    animation: scrollProducts 15s linear infinite;
}

.carousel-images {
    display: flex;
    transition: transform 0.7s;
    will-change: transform;
}
.carousel-images img {
    width: 100%;
    flex-shrink: 0;
    border-radius: 10px;
}.carousel-images {
    display: flex;
    transition: transform 0.7s;
    will-change: transform;
}
.carousel-images img {
    width: 100%;
    flex-shrink: 0;
    border-radius: 10px;
}


/* ANIMATION MAIN REDIRECTION */

    .boutique-btn {
        display: flex;
        align-items: center;
        gap: 12px;
        background: transparent;
        color: #fff;
        border: none;
        border-radius: 30px;
        padding: 18px 32px;
        font-size: 1.4rem;
        font-weight: bold;
        cursor: pointer;
        box-shadow: 0 4px 16px rgba(255,140,0,0.25);
        animation: pulseBtn 1.2s infinite alternate;
        transition: transform 0.2s;
    }
    .boutique-btn:hover {
        transform: scale(1.07) rotate(-2deg);
        box-shadow: 0 8px 24px rgba(255,140,0,0.35);
        
    }

    
    .emoji-hand {
        font-size: 2rem;
        animation: waveHand 1.2s infinite;
        display: inline-block;
    }
    @keyframes pulseBtn {
        0% { box-shadow: 0 0 0 0 rgba(255,140,0,0.3);}
        100% { box-shadow: 0 0 16px 8px rgba(255,140,0,0.15);}
    }
    @keyframes waveHand {
        0% { transform: rotate(0deg);}
        30% { transform: rotate(18deg);}
        60% { transform: rotate(-10deg);}
        100% { transform: rotate(0deg);}
    }





     
        /* Style pour l'icône d'abonnement dans le header */
        .subscribe-icon {
            color: #ff8c00;
            font-size: 1.7rem;
            background:black;
            border-radius: 50%;
            padding: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            transition: background 0.3s, color 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 0;
            border: none;
            outline: none;
            text-decoration: none;
        }
        .subscribe-icon:hover {
            background: #ff6600;
            color: #fff;
        }
        @media (max-width: 1024px) {
            .subscribe-icon {
                font-size: 1.5rem;
                padding: 7px;
            }
        }
        @media (max-width: 768px) {
            .subscribe-container {
                display: flex !important;
                margin-left: 8px !important;
                margin-right: 0 !important;
            }
            .subscribe-icon {
                display: flex !important;
                font-size: 1.2rem;
                padding: 6px;
                margin-right: 0 !important;
            }
        }
        @media (max-width: 480px) {
            .subscribe-container {
                display: flex !important;
                margin-left: 4px !important;
                margin-right: 0 !important;
            }
            .subscribe-icon {
                display: flex !important;
                font-size: 1rem;
                padding: 5px;
                margin-right: 0 !important;
            }
        }
      

        #rotation-message {
    display: none;
    background: #ff8c00;
    color: #fff;
    text-align: center;
    font-size: 1em;
    font-weight: bold;
    padding: 10px 8px 8px 8px;
    border-radius: 0 0 16px 16px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 10000;
    box-shadow: 0 2px 12px #0005;
}
@media (max-width: 900px) and (orientation: portrait) {
    #rotation-message {
        display: block;
    }
}