/* Styles de base pour le corps du document */
        body {
            font-family: 'Inter', sans-serif;
            background-color: #FFFFFF; /* Fond blanc pour le corps */
            color: #333333; /* Texte gris foncé pour le contenu général */
            padding-top: 0; /* Pas de padding-top sur le body car le header est transparent et superposé */
            overflow-x: hidden; /* Empêche le défilement horizontal */
        }
        /* Styles de l'en-tête */
        .header-bg {
            background: linear-gradient(to right, #EA0C22, #BB0A1B); /* Dégradé rouge pour l'en-tête */
            box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Ajout d'une ombre subtile */
            z-index: 100; /* Assure que l'en-tête est au-dessus du menu mobile */
        }
        /* Styles de la section Hero */
        .hero-bg {
            background: linear-gradient(135deg, #FFFFFF, #F0F0F0); /* Dégradé gris clair/blanc pour la section hero */
            color: #333333; /* Texte foncé pour la section hero */
        }
        /* Styles des sections générales */
        .section-bg {
            background: #FFFFFF; /* Fond blanc pour les sections */
        }
        /* Styles des cartes (expertises, témoignages) */
        .card-bg {
            background-color: #F8F8F8; /* Fond de carte gris très clair */
            border-radius: 0.75rem; /* Coins arrondis */
            box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); /* Ombre subtile */
            padding: 1.5rem; /* Espacement interne */
        }
        /* Styles des titres de section */
        .section-title {
            position: relative;
            padding-bottom: 0.75rem; /* Espacement sous le titre */
            margin-bottom: 2.5rem; /* Marge sous le titre */
            text-align: center;
            color: #000000; /* Titre noir */
            font-weight: 800; /* Très gras */
        }
        .section-title::after {
            content: '';
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 0;
            width: 80px; /* Largeur du soulignement */
            height: 5px; /* Épaisseur du soulignement */
            background-color: #EA0C22; /* Accent rouge vif */
            border-radius: 2.5px;
            box-shadow: 0 0 8px #EA0C22; /* Effet de lueur pour le soulignement */
        }
        /* Styles du bouton principal */
        .btn-primary {
            background-color: #EA0C22; /* Rouge vif */
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            font-weight: 600;
        }
        .btn-primary:hover {
            background-color: #BB0A1B; /* Rouge plus foncé */
            box-shadow: 0 0 15px #EA0C22, 0 0 30px rgba(234, 12, 34, 0.5); /* Effet de lueur rouge au survol */
        }
        /* Styles du bouton secondaire */
        .btn-secondary {
            background-color: transparent;
            border: 2px solid #FFFFFF; /* Bordure blanche pour contraste sur fond sombre */
            color: #FFFFFF;
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            font-weight: 600;
        }
        .btn-secondary:hover {
            background-color: #FFFFFF;
            color: #EA0C22;
        }
         /* Styles du nouveau bouton "En savoir plus" */
        .btn-learn-more {
            display: inline-block;
            margin-top: 1rem;
            padding: 0.5rem 1rem;
            font-size: 0.875rem;
            font-weight: 600;
            color: #EA0C22;
            background-color: transparent;
            border: 2px solid #EA0C22;
            border-radius: 0.5rem;
        }
        .btn-learn-more:hover {
            background-color: #EA0C22;
            color: white;
            box-shadow: 0 4px 8px rgba(234, 12, 34, 0.3);
        }
        /* Styles des boîtes d'icônes */
        .icon-box {
            background-color: #EA0C22; /* Fond rouge pour l'icône */
            border-radius: 50%; /* Cercle */
            width: 64px; /* Largeur fixe */
            height: 64px; /* Hauteur fixe */
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1rem;
            box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); /* Lueur noire pour les boîtes d'icônes */
            animation: float 3s ease-in-out infinite; /* Animation de flottement */
        }
        .icon-box i {
            font-size: 32px; /* Taille de l'icône */
            color: #FFFFFF; /* Couleur de l'icône (blanc) */
        }
        /* Styles des cartes de valeurs */
        .value-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 1.5rem;
            background-color: transparent; /* Rendu transparent */
            border-radius: 0.75rem;
            box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); /* Ombre subtile */
            color: #FFFFFF; /* Texte blanc pour les cartes de valeurs */
        }
        /* Styles des étapes du plan stratégique */
        .plan-step {
            display: flex;
            align-items: flex-start;
            margin-bottom: 2rem;
            position: relative;
        }
        .plan-step:last-child {
            margin-bottom: 0; /* Pas de marge pour la dernière étape */
        }
        .plan-step::before {
            content: '';
            position: absolute;
            left: 17px; /* Ajustement pour aligner avec le centre du cercle */
            top: 40px; /* Commence sous le cercle */
            bottom: -20px; /* S'étend sous la carte */
            width: 4px;
            background-color: #EA0C22;
            z-index: 0;
            box-shadow: 0 0 5px #EA0C22; /* Lueur pour la ligne du plan */
        }
        .plan-step:last-child::before {
            display: none; /* Cache la ligne pour la dernière étape */
        }
        .plan-circle {
            width: 40px;
            height: 40px;
            min-width: 40px; /* Empêche le rétrécissement */
            border-radius: 50%;
            background-color: #EA0C22;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1.25rem;
            z-index: 1;
            margin-right: 1.5rem;
            box-shadow: 0 0 10px #EA0C22, 0 0 20px #EA0C22; /* Lueur rouge néon plus forte pour les cercles */
            animation: pulse-subtle 2s ease-in-out infinite; /* Animation de pulsation subtile */
        }
        .plan-content {
            flex-grow: 1;
            background-color: #F8F8F8; /* Gris très clair pour le contenu du plan */
            border-radius: 0.75rem;
            padding: 1.5rem;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            color: #333333; /* Texte foncé pour le contenu du plan */
        }
        /* Styles des titres de liens de pied de page */
        .footer-link-title {
            color: #FFFFFF; /* Blanc pour les titres de pied de page */
            font-weight: 600;
            margin-bottom: 0.75rem;
            text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); /* Lueur blanche subtile */
        }
        /* Styles des liens de pied de page */
        .footer-link-list li a {
            color: #F0F0F0; /* Blanc clair pour les liens de pied de page */
            transition: color 0.3s ease;
        }
        .footer-link-list li a:hover {
            color: #000000; /* Noir au survol */
            text-shadow: 0 0 5px #000000; /* Lueur noire subtile au survol */
        }
        /* Styles du pied de page */
        .footer-bg {
            background-color: #EA0C22; /* Fond rouge pour le pied de page */
            color: white;
        }

        /* Ajustements responsives pour les étapes du plan */
        @media (max-width: 768px) {
            .plan-step {
                flex-direction: column;
                align-items: center;
                text-align: center;
            }
            .plan-circle {
                margin-right: 0;
                margin-bottom: 1rem;
            }
            .plan-step::before {
                display: none;
            }
            .plan-content {
                width: 100%;
            }
            #mobile-menu-container {
                position: fixed;
                top: 96px;
                right: -100%;
                width: 100%;
                height: calc(100% - 96px);
                background-color: rgba(179, 0, 0, 0.9);
                padding: 1rem 0;
                z-index: 50;
                transition: right 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                overflow-y: auto;
            }

            #mobile-menu-container.is-open {
                right: 0;
            }

            #mobile-menu-container ul {
                padding: 0;
                margin: 0;
                justify-content: center;
                align-items: center;
            }
            #mobile-menu-container li {
                width: 100%;
                text-align: center;
                margin-bottom: 0.5rem;
            }
            #mobile-menu-container li:last-child {
                margin-bottom: 0;
            }
            #mobile-menu-container a {
                display: block;
                padding: 0.75rem 1rem;
                color: white;
                text-decoration: none;
                font-size: 1.125rem;
                font-weight: 500;
                transition: background-color 0.3s ease;
                border-radius: 0;
            }
            #mobile-menu-container a:hover {
                background-color: #BB0A1B;
                color: white;
            }
            .footer-bg .container {
                text-align: center;
            }
            .footer-bg .grid > div {
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-bottom: 2rem;
            }
            .footer-bg .grid > div:last-child {
                margin-bottom: 0;
            }
            .footer-link-list {
                text-align: center;
            }
            .footer-link-list li {
                width: auto;
            }
            .footer-link-list li a {
                display: inline-block;
            }
            .footer-bg .flex.items-start {
                align-items: center;
                justify-content: center;
            }
        }

        /* Animations CSS */
        @keyframes fade-in-up {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes fade-in {
            from { opacity: 0; }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes slide-in-left {
            from { opacity: 0; transform: translateX(-50px); }
            to { opacity: 1; transform: translateX(0); }
        }
        @keyframes scale-in {
            from { opacity: 0; transform: scale(0.9); }
            to { opacity: 1; transform: scale(1); }
        }
        @keyframes slide-in-right-to-left {
            from { opacity: 0; transform: translateX(50px); }
            to { opacity: 1; transform: translateX(0); }
        }
        @keyframes fade-in-top {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeInLeftBig {
            0% { opacity: 0; transform: translate3d(-2000px, 0, 0); }
            100% { opacity: 1; transform: none; }
        }
        @keyframes fadeInRightBig {
            0% { opacity: 0; transform: translate3d(2000px, 0, 0); }
            100% { opacity: 1; transform: none; }
        }
        @keyframes slide-right-hover {
            from { transform: translateX(0); }
            to { transform: translateX(5px); }
        }
        .hover-slide-right:hover {
            animation: slide-right-hover 0.3s ease-out forwards;
        }
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-5px); }
            100% { transform: translateY(0px); }
        }
        @keyframes pulse-subtle {
            0% { transform: scale(1); }
            50% { transform: scale(1.02); }
            100% { transform: scale(1); }
        }

        .whatsapp-button {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #25D366;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            z-index: 1000;
            transition: transform 0.3s ease;
            animation: whatsapp-blink 1.5s infinite alternate;
        }
        .whatsapp-button:hover {
            transform: scale(1.1);
        }
        @keyframes whatsapp-blink {
            0% { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(37, 211, 102, 0.7); }
            50% { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 0 10px rgba(37, 211, 102, 0); }
            100% { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(37, 211, 102, 0.7); }
        }

        .scroll-to-top-button {
            position: fixed;
            bottom: 90px;
            right: 20px;
            background-color: #EA0C22;
            color: white;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            z-index: 999;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
            cursor: pointer;
        }
        .scroll-to-top-button.show {
            opacity: 1;
            pointer-events: auto;
        }
        .scroll-to-top-button:hover {
            transform: translateY(-5px);
            background-color: #BB0A1B;
        }

        .animated-on-scroll {
            opacity: 0;
            transition: none;
        }
        .animated-on-scroll.animate-fade-in-up,
        .animated-on-scroll.animate-fade-in-top {
            transform: translateY(20px);
        }
        .animated-on-scroll.animate-slide-in-left {
            transform: translateX(-50px);
        }
        .animated-on-scroll.animate-slide-in-right-to-left {
            transform: translateX(50px);
        }
        .animated-on-scroll.animate-scale-in {
            transform: scale(0.9);
        }
        .animated-on-scroll.animate-fadeInLeftBig {
            transform: translate3d(-2000px, 0, 0);
        }
        .animated-on-scroll.animate-fadeInRightBig {
            transform: translate3d(2000px, 0, 0);
        }
        .show-element.animated-on-scroll.animate-fade-in-up { animation: fade-in-up 0.8s ease-out forwards; }
        .show-element.animated-on-scroll.animate-fade-in { animation: fade-in 0.8s ease-out forwards; }
        .show-element.animated-on-scroll.animate-slide-in-left { animation: slide-in-left 0.7s ease-out forwards; }
        .show-element.animated-on-scroll.animate-scale-in { animation: scale-in 0.6s ease-out forwards; }
        .show-element.animated-on-scroll.animate-slide-in-right-to-left { animation: slide-in-right-to-left 0.7s ease-out forwards; }
        .show-element.animated-on-scroll.animate-fade-in-top { animation: fade-in-top 0.8s ease-out forwards; }
        .show-element.animated-on-scroll.animate-fadeInLeftBig { animation: fadeInLeftBig 1s ease-out forwards; }
        .show-element.animated-on-scroll.animate-fadeInRightBig { animation: fadeInRightBig 1s ease-out forwards; }


        #open-community, #expertises, #portfolio, #contact, #why-choose-us, #vision, #plan, #values, #site-stats, #testimonials, #key-stats, #call-to-action, #actualites, #evenementiel, #faq {
            scroll-margin-top: 96px;
        }

        .hero-section-with-bg {
            position: relative;
            background-color: #333;
            min-height: clamp(380px, 78vh, 620px);
            display: flex;
            align-items: center;
            padding-top: 96px;
            padding-bottom: 4rem;
            overflow: hidden;
        }
        .hero-background-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.7;
            z-index: 0;
            transition: opacity 1s ease-in-out;
        }
        .hero-background-image.fade-out {
            opacity: 0;
        }
        .hero-content {
            position: relative;
            z-index: 1;
            color: white;
            text-align: left;
        }
        .hero-content h2 {
            font-size: 3.5rem;
            font-weight: 800;
            line-height: 1.2;
            margin-bottom: 1.5rem;
        }
        .hero-content p {
            font-size: 1.25rem;
            max-width: 700px;
            line-height: 1.6;
        }

        @media (min-width: 768px) {
            .header-desktop-nav {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                flex-grow: 1;
            }
            .header-desktop-nav ul {
                display: flex;
                align-items: center;
                margin-left: auto;
            }
            .header-desktop-nav li a {
                color: white;
                padding: 0.5rem 1rem;
                transition: color 0.3s ease, text-shadow 0.3s ease;
            }
            .header-desktop-nav li a:hover {
                color: #f0f0f0;
                text-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
            }

            #mobile-menu-container {
                display: none !important;
            }

            .hero-section-with-bg {
                padding-top: 112px;
            }
            #open-community, #expertises, #portfolio, #contact, #why-choose-us, #vision, #plan, #values, #site-stats, #testimonials, #key-stats, #call-to-action, #actualites, #evenementiel, #faq {
                scroll-margin-top: 112px;
            }
        }

        .open-community-section {
            background-color: #F8F8F8;
            padding: 4rem 0;
            border-radius: 0.75rem;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
            margin-top: 4rem;
        }
        .open-community-section h2 {
            font-size: 2.5rem;
            font-weight: 800;
            color: #333333;
            margin-bottom: 0.5rem;
        }
        .open-community-section h3 {
            font-size: 1.875rem;
            font-weight: 600;
            color: #EA0C22;
            margin-bottom: 1.5rem;
            position: relative;
            padding-bottom: 0.5rem;
        }
        .open-community-section h3::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 60px;
            height: 3px;
            background-color: #EA0C22;
            border-radius: 1.5px;
        }
        .open-community-section p {
            font-size: 1.125rem;
            line-height: 1.7;
            color: #555555;
            max-width: 600px;
        }
        .open-community-image-container {
            position: relative;
            border-radius: 0.75rem;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
        .open-community-image {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 0.75rem;
        }

        .services-section {
            background-color: #F8F8F8;
            padding: 4rem 0;
            border-radius: 0.75rem;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
            margin-top: 4rem;
        }
        .services-section .section-title {
            text-align: left;
            margin-left: 0;
            transform: translateX(0);
        }
        .services-section .section-title::after {
            left: 0;
            transform: translateX(0);
        }
        .service-item {
            background-color: #FFFFFF;
            border-radius: 0.75rem;
            box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
            padding: 1.5rem;
        }
        .service-item .icon-box {
            background-color: #EA0C22;
            border-radius: 0.5rem;
            padding: 0.75rem;
            margin-bottom: 1rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
        }
        .service-item .icon-box i {
            font-size: 28px;
            color: white;
        }

        .portfolio-section {
            background-color: #FFFFFF;
            padding: 4rem 0;
        }
        .portfolio-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2.5rem;
        }
        .portfolio-header .section-title {
            margin-bottom: 0;
            text-align: left;
            transform: translateX(0);
        }
        .portfolio-header .section-title::after {
            left: 0;
            transform: translateX(0);
        }
        .portfolio-view-more-btn {
            background-color: #F8F8F8;
            color: #EA0C22;
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            font-weight: 600;
            border: 1px solid #EA0C22;
            display: flex;
            align-items: center;
        }
        .portfolio-view-more-btn:hover {
            background-color: #EA0C22;
            color: white;
            box-shadow: 0 0 10px rgba(234, 12, 34, 0.4);
        }
        .portfolio-view-more-btn i {
            margin-left: 0.5rem;
        }
        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
        }
        .portfolio-item {
            position: relative;
            background-color: #F8F8F8;
            border-radius: 0.75rem;
            overflow: hidden;
            box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
        }
        .portfolio-item-thumbnail {
            width: 100%;
            height: 200px;
            object-fit: cover;
            display: block;
        }
        .portfolio-item-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 1;
            transition: opacity 0.3s ease;
            cursor: pointer;
        }
        .portfolio-item:hover .portfolio-item-overlay {
            opacity: 1;
        }
        .portfolio-play-icon {
            width: 60px;
            height: 60px;
            background-color: rgba(234, 12, 34, 0.8);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2rem;
            transition: transform 0.3s ease, background-color 0.3s ease;
        }
        .portfolio-play-icon:hover {
            transform: scale(1.1);
            background-color: rgba(187, 10, 27, 0.9);
        }
        .portfolio-play-icon i {
            font-size: 24px;
            color: white;
        }
        .portfolio-content {
            padding: 1rem;
            color: #333333;
        }
        .portfolio-description {
            font-size: 0.95rem;
            line-height: 1.5;
            margin-bottom: 0.5rem;
        }
        .portfolio-hashtags {
            font-size: 0.85rem;
            color: #EA0C22;
            font-weight: 500;
        }
        .portfolio-buttons-container {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-top: 3rem;
        }
        .portfolio-buttons-container .btn-load-more {
            background-color: #EA0C22;
            color: white;
            padding: 0.75rem 2rem;
            border-radius: 0.5rem;
            font-weight: 600;
        }
        .portfolio-buttons-container .btn-load-more:hover {
            background-color: #BB0A1B;
            box-shadow: 0 0 15px #EA0C22, 0 0 30px rgba(234, 12, 34, 0.5);
        }
        .portfolio-buttons-container .btn-instagram {
            background-color: #F8F8F8;
            color: #EA0C22;
            padding: 0.75rem 2rem;
            border-radius: 0.5rem;
            font-weight: 600;
            border: 1px solid #EA0C22;
        }
        .portfolio-buttons-container .btn-instagram:hover {
            background-color: #EA0C22;
            color: white;
            box-shadow: 0 0 10px rgba(234, 12, 34, 0.4);
        }

        .key-stats-section {
            padding: 4rem 0;
            border-radius: 0.75rem;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
            margin-top: 4rem;
            text-align: center;
            background-image: url('../img/stats.jpg');
            background-size: cover;
            background-position: center;
            background-blend-mode: overlay;
        }
        .key-stats-section .section-title {
            color: #FFFFFF;
        }
        .key-stats-section p {
            color: #FFFFFF;
        }
        .key-stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
            justify-content: center;
            align-items: flex-start;
        }
        .key-stat-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #FFFFFF;
        }
        .key-stat-value {
            font-size: 3.5rem;
            font-weight: 800;
            color: #EA0C22;
            line-height: 1;
            margin-bottom: 0.5rem;
        }
        .key-stat-label {
            font-size: 1.125rem;
            font-weight: 500;
            color: #FFFFFF;
        }

        @media (max-width: 768px) {
            .portfolio-header {
                flex-direction: column;
                align-items: flex-start;
                margin-bottom: 1.5rem;
            }
            .portfolio-header .section-title {
                margin-bottom: 1rem;
            }
            .portfolio-view-more-btn {
                width: 100%;
                justify-content: center;
            }
            /* Grille 2 colonnes : tous les projets visibles */
            .portfolio-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 0.7rem;
            }
            .portfolio-grid .portfolio-item:nth-of-type(n + 2) {
                display: block;
            }
            .portfolio-item-thumbnail {
                height: 132px;
            }
            .portfolio-content {
                padding: 0.65rem 0.7rem;
            }
            .portfolio-description {
                font-size: 0.78rem;
                line-height: 1.4;
                display: -webkit-box;
                -webkit-line-clamp: 4;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
            .portfolio-buttons-container {
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center;
                gap: 0.65rem;
            }
            .portfolio-buttons-container .btn-primary {
                flex: 1 1 auto;
                min-width: min(100%, 168px);
                justify-content: center;
            }
            .key-stats-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 1rem 0.65rem;
            }
            .key-stat-value {
                font-size: 2.15rem;
            }
            .key-stat-label {
                font-size: 0.88rem;
                line-height: 1.25;
            }
        }

        #vision {
            position: relative;
            padding-top: 4rem;
            padding-bottom: 6rem;
            background-image: url('../img/vision.jpg');
            background-size: cover;
            background-position: center;
            background-blend-mode: overlay;
        }
        #vision .card-bg {
            background-image: url('../img/mission.jpg');
            background-size: cover;
            background-position: center;
            background-blend-mode: overlay;
            color: #333333;
        }

        #values {
            position: relative;
            padding-top: 6rem;
            padding-bottom: 4rem;
            background-image: url('../img/Values.jpg');
            background-size: cover;
            background-position: center;
            background-blend-mode: overlay;
        }
        #vision .section-title.mission-title {
            color: #FFFFFF;
        }

        @media (max-width: 767px) {
            .hero-section-with-bg {
                min-height: clamp(340px, 70vh, 540px);
                padding-top: 5rem;
                padding-bottom: 2.75rem;
            }
            .hero-content {
                text-align: center;
            }
            .hero-content h2 {
                font-size: clamp(1.65rem, 6.2vw, 2.35rem);
                line-height: 1.18;
            }
            .hero-content p {
                font-size: 0.98rem;
                max-width: 94%;
                margin-left: auto;
                margin-right: auto;
                line-height: 1.55;
            }
            .hero-content .flex-col {
                align-items: center;
            }
        }
        body.no-scroll {
            overflow: hidden;
        }

        #loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #FFFFFF;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.5s ease-out;
            opacity: 1;
        }
        #loading-overlay.hidden {
            opacity: 0;
            pointer-events: none;
        }
        #loading-logo {
            width: 120px;
            height: auto;
            animation: pulse-logo 1.5s infinite alternate;
        }
        @keyframes pulse-logo {
            0% { transform: scale(1); opacity: 0.8; }
            100% { transform: scale(1.1); opacity: 1; }
        }

        .elegant-script-text {
            font-family: 'Dancing Script', cursive;
            font-size: 2.25rem;
            margin-top: 1.5rem;
            color: #333333;
            font-weight: 700;
        }
        
        /* --- AMÉLIORATIONS AJOUTÉES --- */
        /* Header qui change au défilement */
        .header-bg {
            transition: background-color 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease;
        }
        .header-scrolled {
            background: linear-gradient(to right, rgba(202, 11, 30, 0.9), rgba(162, 9, 23, 0.9));
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.1);
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
        }

        /* Effet de zoom sur les images au survol */
        .zoom-container {
            overflow: hidden;
            border-radius: 0.75rem;
        }
        .zoom-container img, .zoom-container video, .zoom-container .portfolio-item-thumbnail {
            transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        .zoom-container:hover img, .zoom-container:hover video, .zoom-container:hover .portfolio-item-thumbnail {
            transform: scale(1.08);
        }

        /* Effet de rebond pour les icônes au survol */
        .icon-bounce:hover {
            animation: icon-bounce-anim 0.6s ease;
        }
        @keyframes icon-bounce-anim {
            0%, 100% { transform: scale(1) rotate(0deg); }
            50% { transform: scale(1.2) rotate(-10deg); }
        }

        /* Amélioration des transitions des boutons et des cartes */
        .btn-primary, .btn-secondary, .btn-learn-more, .card-bg, .service-item, .value-card, .portfolio-item, .plan-content {
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        .btn-primary:hover, .btn-secondary:hover, .btn-learn-more:hover {
            transform: translateY(-3px);
            filter: brightness(1.1);
        }
        .card-bg:hover, .service-item:hover, .value-card:hover, .portfolio-item:hover, .plan-content:hover {
            transform: translateY(-8px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.05);
        }
        
        /* Soulignement des titres qui s'anime */
        .section-title::after {
            transform-origin: center;
            transform: translateX(-50%) scaleX(0);
            transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
        }
        .show-element .section-title::after {
             transform: translateX(-50%) scaleX(1);
        }

        /* Effet de parallaxe pour les images de fond */
        .parallax-bg {
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        /* Désactivation sur mobile pour la performance */
        @media (max-width: 1024px) {
            .parallax-bg {
                background-attachment: scroll;
            }
        }
        /* --- FIN DES AMÉLIORATIONS --- */