/* Styles généraux */
        body {
            font-family: 'Poppins', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f8f9fa;
            overflow-x: hidden;
            position: relative;
        }

        /* Effet de grain subtil sur tout le site */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
            opacity: 0.03;
            pointer-events: none;
            z-index: 100;
        }

        .particuliers-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
            position: relative;
            z-index: 1;
        }

        /* Style pour la section principale */
        .hero-section {
            display: flex;
            flex-direction: row;
            gap: 20px;
            margin-bottom: 30px;
            align-items: center;
            position: relative;
        }

        .hero-text {
            background: linear-gradient(-100deg, #5A9BD4 2%, #1D1832 100%);
            color: white;
            padding: 100px;
            border-radius: 40px;
            flex: 1;
            font-weight: bold;
            font-size: 24px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
            z-index: 1;
            position: relative;
            overflow: hidden;
        }

        /* Effet de vagues dans le background du hero text */
        .hero-text::before {
            content: '';
            position: absolute;
            bottom: -50px;
            left: -10px;
            right: -10px;
            height: 80px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            filter: blur(5px);
            animation: wave 8s infinite linear;
        }

       

        .hero-image {
            flex: 1;
            text-align: center;
            position: relative;
            top: 3rem;
            /* Réduction de la taille de l'image */
            max-width: 40%;
            margin: 0 auto;
        }

        .hero-image img {
            max-width: 80%;
            position: relative;
            z-index: 2;
            filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.2));
            transition: transform 0.5s ease-in-out;
        }

        .hero-image:hover img {
            transform: translateY(-5px);
        }

        /* Ajout d'un halo derrière l'image */
        .hero-image::after {
            content: '';
            position: absolute;
            width: 80%;
            height: 40%;
            left: 10%;
            bottom: -5%;
            background: radial-gradient(circle, rgba(69, 79, 157, 0.3) 0%, rgba(69, 79, 157, 0) 70%);
            border-radius: 50%;
            z-index: 1;
        }

        /* Style pour la section features */
        .features-section {
            background-color: #454F9D;
            color: white;
            border-radius: 25px;
            padding: 65px;
            margin-bottom: 30px;
            display: flex;
            flex-direction: row;
            gap: 20px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
            position: relative;
            overflow: hidden;
        }

        /* Motif géométrique à l'arrière-plan des features */
        .features-pattern {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(30deg, rgba(255, 255, 255, 0.05) 12%, transparent 12.5%, transparent 87%, rgba(255, 255, 255, 0.05) 87.5%, rgba(255, 255, 255, 0.05)),
                              linear-gradient(150deg, rgba(255, 255, 255, 0.05) 12%, transparent 12.5%, transparent 87%, rgba(255, 255, 255, 0.05) 87.5%, rgba(255, 255, 255, 0.05)),
                              linear-gradient(30deg, rgba(255, 255, 255, 0.05) 12%, transparent 12.5%, transparent 87%, rgba(255, 255, 255, 0.05) 87.5%, rgba(255, 255, 255, 0.05)),
                              linear-gradient(150deg, rgba(255, 255, 255, 0.05) 12%, transparent 12.5%, transparent 87%, rgba(255, 255, 255, 0.05) 87.5%, rgba(255, 255, 255, 0.05));
            background-size: 40px 70px;
            opacity: 0.3;
            pointer-events: none;
        }

        .feature-box {
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 65px;
            flex: 1;
            -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
        }

        .feature-box:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        }

        /* Effet de bordure lumineuse */
        .feature-box::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            transform: translateX(-100%);
            transition: transform 0.6s;
        }

        .feature-box:hover::before {
            transform: translateX(100%);
        }

        .feature-title {
            font-size: 22px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 15px;
            position: relative;
            display: inline-block;
            left: 50%;
            transform: translateX(-50%);
        }

        /* Soulignement décoratif sous les titres */
        .feature-title::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -5px;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.8), rgba(255,255,255,0));
        }

        .feature-description {
            font-size: 16px;
            line-height: 1.5;
        }

        /* Ajout d'icônes aux features */
        .feature-icon {
            display: block;
            text-align: center;
            font-size: 28px;
            margin-bottom: 15px;
            color: rgba(255, 255, 255, 0.9);
        }

        /* Style pour les boutons */
        .cta-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 60px;
            margin-bottom: 5rem;
            position: relative;
            z-index: 1;
        }

        .cta-button {
            background-color: white;
            color: #454F9D;
            border: none;
            border-radius: 25px;
            padding: 12px 30px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .cta-button:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(69, 79, 157, 0.3);
        }

        /* Effet de brillance */
        .cta-button::after {
            content: '';
            position: absolute;
            width: 30px;
            height: 100%;
            top: 0;
            left: -100px;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
            transform: skewX(-25deg);
            transition: 0.75s;
        }

        .cta-button:hover::after {
            left: calc(100% + 100px);
        }

        /* Icônes pour les boutons */
        .cta-button i {
            margin-right: 8px;
            font-size: 18px;
        }

        /* Formes flottantes - Agrandissement et repositionnement */
        .floating-shapes {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: visible;
            pointer-events: none;
            z-index: 0;
        }

        .shape {
            position: absolute;
            opacity: 0.5;
            filter: blur(1px);
            animation: float 15s infinite ease-in-out;
            /* Augmentation de la taille des formes */
            transform: scale(1.5);
        }

        /* Repositionnement des formes pour qu'elles soient visibles */
        .shape-1 {
            width: 80px;
            height: 80px;
            background-color: #5A9BD4;
            border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
            top: 5%;
            left: 8%;
            animation-duration: 20s;
            z-index: 3;
        }

        .shape-2 {
            width: 60px;
            height: 60px;
            background-color: #454F9D;
            border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
            top: 20%;
            right: 5%;
            animation-duration: 25s;
            animation-delay: 2s;
            z-index: 3;
        }

        .shape-3 {
            width: 40px;
            height: 40px;
            background-color: #8EAEDD;
            border-radius: 59% 41% 41% 59% / 37% 30% 70% 63%;
            bottom: 25%;
            left: 5%;
            animation-duration: 18s;
            animation-delay: 1s;
            z-index: 3;
        }

        .shape-4 {
            width: 70px;
            height: 70px;
            background-color: #1D1832;
            border-radius: 63% 37% 59% 41% / 48% 59% 41% 52%;
            bottom: 10%;
            right: 8%;
            animation-duration: 22s;
            animation-delay: 3s;
            z-index: 3;
        }

        .shape-5 {
            width: 50px;
            height: 50px;
            background-color: #6A75B7;
            border-radius: 37% 63% 51% 49% / 37% 65% 35% 63%;
            top: 40%;
            left: 3%;
            animation-duration: 19s;
            animation-delay: 4s;
            z-index: 3;
        }

        .shape-6 {
            width: 45px;
            height: 45px;
            background-color: #7FB6E9;
            border-radius: 64% 36% 27% 73% / 73% 75% 25% 27%;
            top: 30%;
            right: 3%;
            animation-duration: 21s;
            animation-delay: 5s;
            z-index: 3;
        }

        /* Repositionnement des autres formes */
        .shape-7 {
            width: 65px;
            height: 65px;
            background-color: #5886BE;
            border-radius: 32% 68% 69% 31% / 56% 32% 68% 44%;
            bottom: 35%;
            left: 10%;
            animation-duration: 23s;
            animation-delay: 2s;
            z-index: 3;
        }

        .shape-8 {
            width: 55px;
            height: 55px;
            background-color: #3C4684;
            border-radius: 39% 61% 38% 62% / 76% 46% 54% 24%;
            top: 50%;
            right: 15%;
            animation-duration: 17s;
            animation-delay: 1s;
            z-index: 3;
        }

        .shape-9 {
            width: 75px;
            height: 75px;
            background-color: #2E3267;
            border-radius: 59% 41% 52% 48% / 44% 59% 41% 56%;
            top: 15%;
            left: 40%;
            animation-duration: 26s;
            animation-delay: 3s;
            z-index: 3;
        }

        .shape-10 {
            width: 35px;
            height: 35px;
            background-color: #6E9CD1;
            border-radius: 43% 57% 29% 71% / 30% 42% 58% 70%;
            bottom: 45%;
            right: 12%;
            animation-duration: 19s;
            animation-delay: 4s;
            z-index: 3;
        }

        .shape-11 {
            width: 55px;
            height: 55px;
            background-color: #5F5B98;
            border-radius: 63% 37% 57% 43% / 37% 59% 41% 63%;
            bottom: 20%;
            left: 25%;
            animation-duration: 24s;
            animation-delay: 2s;
            z-index: 3;
        }

        .shape-12 {
            width: 45px;
            height: 45px;
            background-color: #8AA8D0;
            border-radius: 71% 29% 21% 79% / 79% 71% 29% 21%;
            top: 65%;
            right: 30%;
            animation-duration: 20s;
            animation-delay: 1s;
            z-index: 3;
        }

        /* Particules avec points lumineux */
        .particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 0;
        }

        .particle {
            position: absolute;
            width: 3px;
            height: 3px;
            background-color: rgba(255, 255, 255, 0.4);
            border-radius: 50%;
            pointer-events: none;
        }

        .particle:nth-child(1) { top: 10%; left: 20%; animation: particle-float 30s infinite ease-in-out; }
        .particle:nth-child(2) { top: 30%; left: 80%; animation: particle-float 25s infinite ease-in-out; }
        .particle:nth-child(3) { top: 60%; left: 50%; animation: particle-float 28s infinite ease-in-out; }
        .particle:nth-child(4) { top: 80%; left: 10%; animation: particle-float 32s infinite ease-in-out; }
        .particle:nth-child(5) { top: 20%; left: 60%; animation: particle-float 22s infinite ease-in-out; }
        .particle:nth-child(6) { top: 70%; left: 30%; animation: particle-float 26s infinite ease-in-out; }
        .particle:nth-child(7) { top: 40%; left: 90%; animation: particle-float 29s infinite ease-in-out; }
        .particle:nth-child(8) { top: 50%; left: 40%; animation: particle-float 24s infinite ease-in-out; }
        .particle:nth-child(9) { top: 85%; left: 70%; animation: particle-float 31s infinite ease-in-out; }
        .particle:nth-child(10) { top: 25%; left: 35%; animation: particle-float 27s infinite ease-in-out; }

        @keyframes particle-float {
            0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
            25% { transform: translate(20px, 10px) scale(1.2); opacity: 0.6; }
            50% { transform: translate(0, 20px) scale(1); opacity: 0.4; }
            75% { transform: translate(-20px, 10px) scale(1.2); opacity: 0.6; }
        }

        /* Cercles décoratifs dans la section features */
        .feature-shape {
            position: absolute;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.05);
            filter: blur(3px);
        }

        .feature-shape-1 {
            width: 100px;
            height: 100px;
            top: 10%;
            left: 5%;
        }

        .feature-shape-2 {
            width: 150px;
            height: 150px;
            bottom: 10%;
            right: 5%;
        }

        /* Animation des formes flottantes */
        @keyframes float {
            0% {
                transform: translate(0, 0) rotate(0deg) scale(1.5);
            }
            20% {
                transform: translate(5px, 10px) rotate(72deg) scale(1.5);
            }
            40% {
                transform: translate(10px, -5px) rotate(144deg) scale(1.5);
            }
            60% {
                transform: translate(-5px, -10px) rotate(216deg) scale(1.5);
            }
            80% {
                transform: translate(-10px, 5px) rotate(288deg) scale(1.5);
            }
            100% {
                transform: translate(0, 0) rotate(360deg) scale(1.5);
            }
        }

        /* Lignes connectées en arrière-plan */
        .connected-lines {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: -1;
        }

        .line {
            position: absolute;
            background: linear-gradient(90deg, rgba(90, 155, 212, 0), rgba(90, 155, 212, 0.3), rgba(90, 155, 212, 0));
            height: 1px;
            width: 100px;
            transform-origin: left center;
        }

        .line:nth-child(1) { top: 15%; left: 10%; transform: rotate(30deg); width: 150px; }
        .line:nth-child(2) { top: 25%; left: 30%; transform: rotate(-20deg); width: 120px; }
        .line:nth-child(3) { top: 40%; left: 70%; transform: rotate(15deg); width: 200px; }
        .line:nth-child(4) { top: 60%; left: 20%; transform: rotate(-40deg); width: 180px; }
        .line:nth-child(5) { top: 75%; left: 60%; transform: rotate(25deg); width: 150px; }
        .line:nth-child(6) { top: 85%; left: 40%; transform: rotate(-10deg); width: 130px; }

        /* Responsive: Mobile très petit (< 400px) */
        @media (max-width: 400px) {
            .particuliers-container {
                padding: 10px;
            }
            
            .hero-section {
                flex-direction: column;
                gap: 10px;
            }
            
            .hero-text {
                font-size: 18px;
                padding: 15px;
                width: 100%;
            }
            
            .hero-image img{
                   max-width: 130%;
                   margin-top: -55px;
            }
            
            .features-section {
                flex-direction: column;
                padding: 20px;
                gap: 15px;
            }
            
            .feature-title {
                font-size: 18px;
            }
            
            .feature-description {
                font-size: 14px;
            }
            
            .cta-buttons {
                flex-direction: column;
                gap: 10px;
            }
            
            .cta-button {
                width: 100%;
                font-size: 14px;
                padding: 10px 20px;
            }
        }

        /* Responsive: Mobile petit (400px - 600px) */
        @media (min-width: 400px) and (max-width: 600px) {
            .particuliers-container {
                padding: 15px;
            }
            
            .hero-section {
                flex-direction: column;
                gap: 15px;
            }
            
            .hero-text {
                font-size: 20px;
                padding: 20px;
                width: 100%;
            }
            
            .hero-image img{
                   max-width: 130%;
                   margin-top: -55px;
            }
            
            .features-section {
                flex-direction: column;
                padding: 25px;
                gap: 15px;
            }
            
            .feature-title {
                font-size: 20px;
            }
            
            .cta-buttons {
                flex-direction: column;
                gap: 15px;
            }
            
            .cta-button {
                width: 100%;
            }
        }

        /* Responsive: Mobile moyen (600px - 800px) */
        @media (min-width: 600px) and (max-width: 800px) {
            .particuliers-container {
                padding: 20px;
            }
            
            .hero-section {
                flex-direction: column;
            }
            
            .hero-text {
                font-size: 22px;
                width: 90%;
                margin: 0 auto;
            }
            
             .hero-image img{
                   max-width: 130%;
                   margin-top: -55px;
            }
            
            .features-section {
                flex-direction: column;
                gap: 20px;
            }
            
            .cta-buttons {
                gap: 15px;
            }
        }

        /* Responsive: Tablette (800px - 1000px) */
        @media (min-width: 800px) and (max-width: 1000px) {
            .hero-section {
                gap: 15px;
            }
            
            .hero-text {
                font-size: 22px;
                padding: 65px;
            }
            
            .hero-image {
                width: 45%;
            }
            
            .feature-title {
                font-size: 20px;
            }
            
            .feature-description {
                font-size: 15px;
            }
        }

        /* Responsive: Tablette large (1000px - 1200px) */
        @media (min-width: 1000px) and (max-width: 1200px) {
            .hero-text {
                font-size: 23px;
                padding: 65px;
            }
            
            .hero-image {
                width: 48%;
            }
        }

        /* Responsive: Desktop petit (1200px - 1400px) */
        @media (min-width: 1200px) and (max-width: 1400px) {
            .particuliers-container {
                max-width: 1200px;
            }

            .hero-text {
                font-size: 23px;
                padding: 70px;
            }
        }

        /* Responsive: Desktop moyen (1400px - 1600px) */
        @media (min-width: 1400px) and (max-width: 1600px) {
            .particuliers-container {
                max-width: 1400px;
            }
            
            .hero-text {
                font-size: 26px;
                padding: 90px;
            }
            
            .feature-title {
                font-size: 24px;
            }
            
            .feature-description {
                font-size: 17px;
            }
            
            .cta-button {
                font-size: 17px;
                padding: 14px 35px;
            }
        }

        /* Responsive: Desktop large (1600px - 1800px) */
        @media (min-width: 1600px) and (max-width: 1800px) {
            .particuliers-container {
                max-width: 1600px;
            }
            
            .hero-text {
                font-size: 28px;
                padding: 95px;
            }
            
            .feature-title {
                font-size: 26px;
            }
            
            .feature-description {
                font-size: 18px;
                line-height: 1.6;
            }
            
            .cta-button {
                font-size: 18px;
                padding: 15px 40px;
            }
        }

        /* Responsive: Desktop très large (1800px - 2000px) */
        @media (min-width: 1800px) and (max-width: 2000px) {
            .particuliers-container {
                max-width: 1800px;
            }
            
            .hero-text {
                font-size: 30px;
                padding: 100px;
            }
            
            .hero-section {
                gap: 30px;
            }
            
            .features-section {
                padding: 40px;
                gap: 30px;
            }
            
            .feature-title {
                font-size: 28px;
                margin-bottom: 20px;
            }
            
            .feature-description {
                font-size: 19px;
                line-height: 1.7;
            }
            
            .cta-button {
                font-size: 19px;
                padding: 16px 45px;
            }
        }

        /* Responsive: Écrans très larges (> 2000px) */
        @media (min-width: 2000px) {
            .particuliers-container {
                max-width: 2000px;
            }
            
            .hero-text {
                font-size: 32px;
                padding: 100px;
            }
            
            .hero-section {
                gap: 40px;
                margin-bottom: 30px;
            }
            
            .features-section {
                padding: 50px;
                gap: 40px;
                margin-bottom: 40px;
            }
            
            .feature-title {
                font-size: 30px;
                margin-bottom: 25px;
            }
            
            .feature-description {
                font-size: 20px;
                line-height: 1.8;
            }
            
            .cta-buttons {
                gap: 30px;
                margin-top: 90px;
            }
            
            .cta-button {
                font-size: 20px;
                padding: 18px 50px;
            }
        }