/* Augmente la taille des téléphones et centre parfaitement les images dans feature-block */
.feature-block .phone-frame {
    width: 220px;
    height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: #fff;
    border-radius: 28px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    padding: 12px 0;
}

.feature-block .phone-frame img {
    display: block;
    max-width: 90%;
    max-height: 85%;
    margin: 0 auto;
    object-fit: contain;
    border-radius: 18px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

@media (max-width: 900px) {
    .feature-block .phone-frame {
        width: 160px;
        height: 300px;
    }
}
/* Centrage parfait des images dans les téléphones (phone-frame) */
.phone-frame {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: #fff;
    border-radius: 28px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    padding: 12px 0;
}

.phone-frame img {
    display: block;
    max-width: 90%;
    max-height: 85%;
    margin: 0 auto;
    object-fit: contain;
    border-radius: 18px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
/* Grille responsive pour 3 cartes dans results-section */
/* Nouvelle grille pour 3 cartes parfaitement centrées et réparties */
.results-grid {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 32px;
    width: 100%;
    max-width: 1000px;
    padding: 32px 0;
}

.result-card {
    flex: 1 1 0;
    max-width: 300px;
    min-width: 220px;
    margin: 0;
}

@media (max-width: 900px) {
    .results-grid {
        flex-direction: column;
        align-items: center;
        gap: 24px;
        max-width: 500px;
    }
    .result-card {
        max-width: 100%;
        min-width: 0;
    }
}
/* Affichage responsive et non-coupé de l'image dans ai-visual-wrapper */
.ai-visual-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 350px;
    background: transparent;
    padding: 24px 0;
}

.ai-visual-wrapper img {
    max-width: 100%;
    max-height: 70vh;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
    margin: 0 auto;
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
/* Centrage de l'image dans la section caullout */
.caullout {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 300px;
    background: transparent;
    padding: 32px 0;
    background-image: url('asset/666292bb75e39e436aa943b1_bg-callout.webp');
}

.caullout img {
    max-width: 90vw;
    height: auto;
    display: block;
    margin: 0 auto;
   
}
 :root {
            --bg-gradient: radial-gradient(circle at 50% 50%, #ffffff 0%, #fdfcfd 40%, #eefbfb 100%);
            --text-dark: #1a1a1a;
            --text-gray: #666;
            --primary-border: #e5e5e5;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
            /* Simulation du fond complexe avec plusieurs gradients */
            background: radial-gradient(at 0% 0%, hsla(253,16%,7%,0) 0, hsla(253,16%,7%,0) 50%), 
                        radial-gradient(at 50% 0%, #f3f4f6 0, #eef2ff 50%, #fff 100%);
            color: var(--text-dark);
            overflow-x: hidden;
            min-height: 100vh;
            position: relative;
        }

        /* --- Navbar --- */
        .navbar-container {
            display: flex;
            justify-content: center;
            padding-top: 20px;
            position: relative;
            z-index: 100;
        }

        .navbar {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            border: 1px solid #eaeaea;
            border-radius: 50px;
            padding: 10px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 90%;
            max-width: 1200px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
        }

        .nav-left {
            display: flex;
            align-items: center;
            gap: 30px;
        }

        .logo {
            display: flex;
            align-items: center;
            font-weight: 700;
            font-size: 1.2rem;
            color: #222;
            text-decoration: none;
        }

        .logo-icon {
            width: 24px;
            height: 24px;
            border-radius: 6px;
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            margin-right: 8px;
            display: inline-block;
            position: relative;
        }



        .logo img {
            border-radius: 20%;
            
        }
        
        .logo-icon::after {
            content: '';
            position: absolute;
            inset: 2px;
            background: white;
            border-radius: 4px;
        }

        .nav-links {
            display: flex;
            gap: 25px;
        }

/* Hamburger button (hidden on desktop) */
.hamburger {
    display: none;
    background: transparent;
    border: none;
    padding: 6px;
    cursor: pointer;
}
.hamburger .bar {
    display: block;
    width: 22px;
    height: 2px;
    background: #333;
    margin: 4px 0;
    border-radius: 2px;
}

        .nav-links a {
            text-decoration: none;
            color: #555;
            font-size: 0.95rem;
            font-weight: 500;
            transition: color 0.2s;
        }

        .nav-links a:hover {
            color: #000;
        }

        .nav-right {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .login-link {
            text-decoration: none;
            color: #333;
            font-weight: 500;
            font-size: 0.95rem;
        }

        /* Bouton avec bordure gradient */
        .btn-gradient {
            padding: 10px 24px;
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            color: #000;
            background: white;
            position: relative;
            z-index: 1;
            border: double 2px transparent;
            background-image: linear-gradient(white, white), 
                              linear-gradient(to right, #a855f7, #ec4899, #eab308, #22c55e);
            background-origin: border-box;
            background-clip: padding-box, border-box;
            transition: transform 0.2s;
        }
        
        .btn-gradient:hover {
            transform: scale(1.02);
        }

        /* --- Hero Section --- */
        .hero {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 60px;
            text-align: center;
            position: relative;
            z-index: 10;
            max-width: 1200px;
            margin: 0 auto;
            border-radius: 34px;
            border: 1px solid #e5e5e5;
            margin-top: 30px;

        }

        /* Badges */
        .badges {
            display: flex;
            gap: 15px;
            margin-bottom: 30px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .badge {
            background: rgba(255, 255, 255, 0.6);
            border: 1px solid #e5e5e5;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.85rem;
            color: #444;
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            transition: background 0.2s;
        }

        .badge:hover {
            background: white;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }

        /* Typographie Principale */
        h1 {
            font-size: 5rem; /* Très grand */
            line-height: 1.1;
            color: #0f172a;
            max-width: 900px;
            margin-bottom: 30px;
            letter-spacing: -0.02em;
        }

        /* Styles de texte spécifiques */
        .font-serif {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-weight: 400;
        }

        /* Gradients de texte */
        .text-gradient-blue {
            background: linear-gradient(to right, #3b82f6, #06b6d4);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .text-gradient-purple {
            background: linear-gradient(to right, #3b82f6, #8b5cf6, #d946ef);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .text-gradient-pink {
            background: linear-gradient(to right, #d946ef, #ec4899);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .text-gradient-gold {
            background: linear-gradient(to right, #eab308, #84cc16);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .text-gradient-green {
            background: linear-gradient(to right, #22c55e, #10b981);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .subtext {
            color: #526379;
            font-size: 1.15rem;
            line-height: 1.6;
            max-width: 600px;
            margin-bottom: 50px;
        }

        /* Zone d'input centrale */
        .input-area {
            background: white;
            border: 1px solid #eaeaea;
            border-radius: 100px;
            padding: 10px;
            display: flex;
            align-items: center;
            box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08);
            width: 100%;
            max-width: 500px;
            position: relative;
        }

        .input-prefix {
            color: #bbb;
            font-size: 1.5rem;
            padding-left: 25px;
            font-weight: 400;
            white-space: nowrap;
        }

        .main-input {
            border: none;
            outline: none;
            font-size: 1.5rem;
            color: #333;
            width: 100%;
            padding: 5px;
            font-family: 'Inter', sans-serif;
        }
        
        .main-input::placeholder {
            color: #333;
            opacity: 1;
        }

        .input-btn {
            padding: 12px 30px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            white-space: nowrap;
            /* Réutilisation du style gradient border mais plus épais */
            background: white;
            border: double 3px transparent;
            background-image: linear-gradient(white, white), 
                              linear-gradient(to right, #a855f7, #f43f5e, #eab308, #10b981);
            background-origin: border-box;
            background-clip: padding-box, border-box;
        }

        .bottom-link {
            margin-top: 25px;
            font-size: 0.95rem;
            color: #555;
            text-decoration: none;
            border-bottom: 1px solid #ccc;
            padding-bottom: 2px;
        }

        /* --- Images Flottantes (Floating Cards) --- */
        .floating-card {
            position: absolute;
            background: white;
            padding: 5px;
            border-radius: 12px;
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
            z-index: 1;
            transition: transform 0.3s ease;
        }
        
        .floating-card:hover {
            z-index: 20;
            transform: scale(1.05) rotate(0deg) !important;
        }

        .floating-card img {
            border-radius: 8px;
            display: block;
            object-fit: cover;
        }

        /* Positionnement spécifique des images comme sur la maquette */
        .card-1 {
            top: 25%;
            left: 5%;
            transform: rotate(-8deg);
            width: 180px;
        }

        .card-2 {
            top: 15%;
            right: 2%;
            transform: rotate(12deg);
            width: 200px;
        }

        .card-3 {
            bottom: -5%;
            left: -2%;
            transform: rotate(15deg);
            width: 250px;
        }
        
        .card-4 {
            bottom: -15%;
            left: 10%;
            transform: rotate(-5deg);
            width: 160px;
            z-index: 2;
        }

        /* Responsive */
        @media (max-width: 1024px) {
            h1 { font-size: 4rem; }
            .floating-card { width: 140px; }
            .card-3 { width: 180px; }
        }

        @media (max-width: 768px) {
            /* On cache les liens par défaut sur mobile; on affichera via la classe .nav-open */
            .nav-links { display: none; }
            .hamburger { display: block; }
            h1 { font-size: 3rem; padding: 0 20px; }
            .navbar { padding: 10px 15px; }
            .input-area { width: 90%; flex-direction: column; border-radius: 20px; padding: 15px; gap: 10px; }
            .input-prefix { padding-left: 0; font-size: 1.2rem; }
            .main-input { text-align: center; font-size: 1.5rem; }
            .input-btn { width: 100%; text-align: center; }
            
            /* Cacher complètement les images flottantes sur mobile pour éviter qu'elles recouvrent le texte */
            .floating-card { display: none !important; }

            /* When the navbar has the .nav-open class, show the menu as a dropdown */
            .navbar.nav-open .nav-links {
                display: flex;
                position: absolute;
                left: 12px;
                right: 12px;
                top: calc(100% + 10px);
                background: rgba(255,255,255,0.98);
                border-radius: 12px;
                flex-direction: column;
                gap: 12px;
                padding: 12px 16px;
                box-shadow: 0 8px 30px rgba(0,0,0,0.12);
                z-index: 200;
            }

            .navbar.nav-open .nav-links a {
                padding: 8px 6px;
                border-radius: 8px;
                display: block;
                color: #222;
            }
        }

        /* Animation d'apparition */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .hero > * {
            animation: fadeIn 0.8s ease-out forwards;
        }

/* --- Styles de la Section Crypto --- */
        .crypto-section {
            width: 100%;
            padding: 80px 0;
            background: white; /* Fond blanc comme sur l'image */
            display: flex;
            justify-content: center;
            max-width: 1200px;
            margin: 0 auto;
            border-radius: 24px;
            border: 1px solid #e5e5e5;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            margin-top: 20px;
            background-image: url('asset/666292bb75e39e436aa943b1_bg-callout.webp');
        }

        .crypto-container {
            width: 90%;
            max-width: 1200px;
            display: flex;
            align-items: center;
            gap: 80px; /* Espace entre l'image et le texte */
        }

        /* --- Colonne Gauche (Visuels) --- */
        .crypto-visual-wrapper {
            flex: 1;
            background-color: #f4f6f8; /* Le gris clair exact */
            border-radius: 40px;
            height: 600px;
            position: relative;
            overflow: hidden; /* Coupe ce qui dépasse si nécessaire */
            /* Pour centrer le contenu interne si besoin */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .phones-container {
            /* Layout en flex pour garantir que les maquettes restent
               côte à côte et visibles sur toutes tailles d'écran. */
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 28px;
            width: 100%;
            height: auto;
            padding: 24px;
        }

        .phone-mockup {
            position: relative; /* Ne plus utiliser absolute qui peut pousser les images hors de la zone visible */
            background: white;
            border-radius: 24px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.12); /* Ombre douce réaliste */
            overflow: hidden;
            border: 8px solid white; /* Simulation bordure téléphone */
            transition: transform 0.3s ease;
            flex: 0 0 auto;
        }
        
        .phone-mockup img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Tailles et légère rotation pour l'effet profondeur */
        .phone-back {
            width: 260px;
            height: 520px;
            z-index: 1;
            opacity: 0.95;
            transform: scale(0.96) rotate(-6deg);
        }

        .phone-front {
            width: 270px;
            height: 540px;
            z-index: 2;
            transform: none;
        }

        /* Animation au survol (optionnel mais sympa) */
        .crypto-visual-wrapper:hover .phone-front {
            transform: translateY(-10px);
        }

        /* --- Colonne Droite (Texte) --- */
        .crypto-content-wrapper {
            flex: 1;
            padding-right: 20px;
        }

        .crypto-title {
            font-family: 'Inter', sans-serif; /* Police clean sans serif */
            font-size: 4rem; /* Très gros titre */
            font-weight: 600; /* Semi-bold mais pas trop gras */
            line-height: 1;
            color: #000;
            margin-bottom: 25px;
            letter-spacing: -1.5px; /* Rapproche les lettres */
        }

        .crypto-text {
            font-size: 1.1rem;
            line-height: 1.6;
            color: #333;
            margin-bottom: 35px;
            max-width: 500px;
        }

        /* --- Formulaire --- */
        .crypto-form {
            display: flex;
            gap: 15px;
            max-width: 550px;
        }

        .crypto-input {
            flex: 1;
            padding: 18px 20px;
            border: 1px solid #ccc;
            border-radius: 8px;
            font-size: 1rem;
            color: #333;
            outline: none;
            transition: border-color 0.2s;
            font-family: 'Inter', sans-serif;
        }

        .crypto-input::placeholder {
            color: #5f6c80;
        }

        .crypto-input:focus {
            border-color: #0052ff;
        }

        .crypto-btn {
            background-color: #0052ff; /* Bleu Coinbase */
            color: white;
            border: none;
            border-radius: 50px; /* Bouton pillule */
            padding: 0 35px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
            transition: background 0.2s;
            font-family: 'Inter', sans-serif;
        }

        .crypto-btn:hover {
            background-color: #0040cc;
        }

        /* --- Responsive Design --- */
        @media (max-width: 1024px) {
            .crypto-title { font-size: 3rem; }
            .crypto-container { gap: 40px; }
            /* Petite réduction pour l'affichage tablette */
            .phone-front { transform: scale(0.98); }
        }

        @media (max-width: 900px) {
            .crypto-container {
                flex-direction: column; /* Empiler verticalement */
                padding: 0 20px;
            }

            .crypto-visual-wrapper {
                width: 100%;
                height: auto; /* Laisser la hauteur s'adapter au contenu */
                margin-bottom: 30px;
                padding: 20px 0;
            }

            /* Réduire les tailles des mockups pour tablettes / grands mobiles */
            .phone-back { width: 180px; height: 360px; transform: scale(0.95) rotate(-4deg); }
            .phone-front { width: 190px; height: 380px; transform: none; }
            
            .crypto-content-wrapper {
                text-align: center; /* Centrer le texte sur mobile */
                padding-right: 0;
            }

            .crypto-text { margin: 0 auto 30px auto; }

            .crypto-form {
                flex-direction: column; /* Input et bouton l'un sur l'autre */
                width: 100%;
            }

            .crypto-btn {
                width: 100%;
                padding: 15px;
            }
        }

        /* Très petits écrans: empiler les téléphones et garantir visibilité */
        @media (max-width: 480px) {
            .phones-container {
                flex-direction: column;
                gap: 12px;
                padding: 12px;
                align-items: center;
            }

            .phone-back, .phone-front {
                width: 85%;
                height: auto;
                transform: none;
            }

            .phone-mockup img { height: auto; }

            .crypto-visual-wrapper { height: auto; padding: 12px 0; }
        }


.caullout {
    width: 100%;
    max-width: 1200px;
    margin: 20px auto;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid #e5e5e5;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #e5e5e5;
    align-items: center;
}

.caullout img {
    width: 70%;
    height: auto;
    display: block;
    align-items: center;
}

/* --- Styles Section IA --- */
        .ai-section {
            width: 100%;
            padding: 100px 0;
            background: white;
            display: flex;
            justify-content: center;
            max-width: 1200px;
            margin: auto;
            border-radius: 23px;
            border: 1px solid #e5e5e5;
        }

        .ai-container {
            width: 90%;
            max-width: 1200px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 80px;
        }

        /* Colonne Texte */
        .ai-text-content {
            flex: 1;
            max-width: 550px;
        }

        .ai-title {
            font-family: 'Playfair Display', serif;
            font-size: 3.5rem;
            line-height: 1.1;
            color: #000;
            margin-bottom: 30px;
            font-weight: 400;
        }

        .ai-description {
            font-family: 'Inter', sans-serif;
            font-size: 1.1rem;
            line-height: 1.6;
            color: #1a1a1a;
            margin-bottom: 40px;
        }

        .ai-features-list {
            list-style: none;
            padding: 0;
            margin-bottom: 40px;
        }

        .ai-features-list li {
            display: flex;
            align-items: flex-start;
            gap: 15px;
            margin-bottom: 25px;
            font-size: 1.05rem;
            line-height: 1.5;
            color: #526379;
        }

        .ai-icon-box {
            min-width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 2px;
            color: #000;
        }

        .ai-link {
            display: inline-flex;
            align-items: center;
            font-weight: 600;
            color: #000;
            text-decoration: none;
            font-size: 1rem;
            border-bottom: 1px solid transparent;
            transition: border 0.2s;
        }

        .ai-link:hover {
            border-bottom: 1px solid #000;
        }

        /* Colonne Visuelle (Droite) */
        .ai-visual-wrapper {
            flex: 1;
            height: 600px;
            /* Le fond dégradé vert/bleu pâle */
            background: linear-gradient(180deg, #f3f6fa 0%, #eefbf3 100%);
            border-radius: 30px;
            position: relative;
            overflow: hidden; 
            display: flex;
            justify-content: center;
            align-items: flex-end; /* Colle l'image en bas */
        }

        /* Style de l'image du téléphone */
        .ai-phone-img {
            width: 320px; /* Ajustez selon la taille de votre image */
            height: auto;
            max-height: 90%;
            object-fit: contain;
            border-radius: 30px 30px 0 0; /* Arrondi en haut, plat en bas */
            box-shadow: 0 20px 50px rgba(0,0,0,0.15); /* Ombre pour l'effet 3D */
            display: block;
        }

        /* Responsive */
        @media (max-width: 900px) {
            .ai-container {
                flex-direction: column;
                padding: 0 20px;
            }
            .ai-text-content {
                max-width: 100%;
                text-align: left;
            }
            .ai-title {
                font-size: 2.5rem;
            }
            .ai-visual-wrapper {
                width: 100%;
                height: 500px;
            }
            .ai-phone-img {
                width: 280px;
            }
        }


        /* --- Styles Section Opportunité --- */
        .opportunity-section {
            width: 100%;
            padding: 80px 0 100px 0;
            background-color: #fcfcfc; /* Fond très léger presque blanc */
            display: flex;
            justify-content: center;
        }

        .opportunity-container {
            width: 90%;
            max-width: 1100px;
        }

        /* En-tête */
        .opportunity-header {
            text-align: center;
            margin-bottom: 60px;
        }

        .opp-title {
            font-family: 'Inter', sans-serif;
            font-size: 2.2rem;
            font-weight: 700;
            color: #0f172a;
            margin-bottom: 20px;
        }

        .opp-subtitle {
            font-family: 'Inter', sans-serif;
            font-size: 1.1rem;
            color: #475569;
            line-height: 1.6;
            max-width: 700px;
            margin: 0 auto;
        }

        /* Grille des cartes */
        .cards-grid {
            display: flex;
            gap: 25px;
            justify-content: center;
        }

        /* Style général de la carte */
        .opp-card {
            flex: 1;
            padding: 35px 30px;
            border-radius: 16px;
            /* Légère bordure et ombre très subtile comme l'image */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02); 
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            transition: transform 0.2s ease;
        }

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

        /* Couleurs spécifiques (Background + Bordure subtile) */
        .card-blue {
            background-color: #eff6ff; /* Bleu très pâle */
            border: 1px solid #dbeafe;
        }

        .card-purple {
            background-color: #faf5ff; /* Violet très pâle */
            border: 1px solid #f3e8ff;
        }

        .card-green {
            background-color: #f0fdf4; /* Vert très pâle */
            border: 1px solid #dcfce7;
        }

        /* Boite blanche de l'icône */
        .icon-box {
            width: 54px;
            height: 54px;
            background-color: white;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 25px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Petite ombre sous l'icône */
        }

        /* Typographie Carte */
        .card-title {
            font-family: 'Inter', sans-serif;
            font-size: 1.25rem;
            font-weight: 700;
            color: #0f172a;
            margin-bottom: 15px;
        }

        .card-text {
            font-family: 'Inter', sans-serif;
            font-size: 1rem;
            line-height: 1.6;
            color: #475569; /* Gris lisible */
        }

        /* --- Responsive --- */
        @media (max-width: 900px) {
            .cards-grid {
                flex-direction: column; /* Empiler les cartes */
                align-items: center;
            }

            .opp-card {
                width: 100%;
                max-width: 500px; /* Limite la largeur sur mobile pour que ce soit joli */
            }

            .opp-title {
                font-size: 1.8rem;
                padding: 0 10px;
            }
 
        }


  /* --- Styles Section Résultats --- */
        .results-section {
            width: 100%;
            padding: 100px 0;
            /* Fond identique à l'image : Rosé en haut gauche, Vert menthe en bas */
            background: radial-gradient(circle at 10% 10%, #fff5f9 0%, transparent 40%),
                        linear-gradient(180deg, #ffffff 0%, #e8fcf9 100%);
            display: flex;
            justify-content: center;
            
        }

        .results-container {
            width: 90%;
            max-width: 1200px;
        }

        /* Header */
        .results-header {
            text-align: center;
            margin-bottom: 60px;
        }

        .results-title {
            font-family: 'Inter', sans-serif;
            font-size: 2.5rem;
            font-weight: 800;
            color: #0f172a;
            margin-bottom: 15px;
            letter-spacing: -1px;
        }

        /* Gradient texte Violet/Rose */
        .text-gradient-magenta {
            background: linear-gradient(90deg, #c026d3, #db2777);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .results-subtitle {
            font-family: 'Inter', sans-serif;
            font-size: 1.1rem;
            color: #64748b;
        }

        /* Grille configurée pour 3 cartes */
        .results-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 3 colonnes égales */
            gap: 50px; /* Espacement légèrement plus grand pour aérer */
            margin: auto;
        }

        /* Carte de résultat */
        .result-card {
            background: white;
            /* Gradient interne subtil (blanc vers lavande très pâle) */
            background: linear-gradient(180deg, #ffffff 60%, #f5f3ff 100%);
            border-radius: 24px;
            padding: 40px 25px;
            text-align: center;
            box-shadow: 0 10px 30px -10px rgba(0,0,0,0.05);
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: transform 0.3s ease;
            height: 100%; /* Assure que toutes les cartes ont la même hauteur */
        }

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

        /* Badge */
        .result-badge {
            background-color: #f3e8ff;
            color: #7e22ce;
            font-size: 0.75rem;
            font-weight: 600;
            padding: 6px 16px;
            border-radius: 50px;
            margin-bottom: 25px;
            display: inline-block;
        }

        /* Gros chiffre Gradient */
        .stat-number {
            font-size: 3.5rem; /* Un peu plus gros car il y a plus de place */
            font-weight: 800;
            margin-bottom: 20px;
            background: linear-gradient(135deg, #a855f7, #db2777);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-family: 'Inter', sans-serif;
        }

        /* Titre stat */
        .stat-headline {
            font-size: 1.2rem;
            font-weight: 700;
            color: #1e293b;
            line-height: 1.4;
            margin-bottom: 15px;
            font-family: 'Inter', sans-serif;
        }

        /* Source */
        .stat-source {
            font-size: 0.85rem;
            color: #64748b;
            line-height: 1.4;
            margin-top: auto;
        }

        /* --- Responsive --- */
        @media (max-width: 900px) {
            .results-grid {
                grid-template-columns: repeat(1, 1fr); /* Une seule colonne sur mobile */
                max-width: 400px;
                margin: 0 auto;
            }
            
            .results-title {
                font-size: 2rem;
                padding: 0 10px;
            }
        }  
        
        
/* --- Styles Section Technique (Lens Grid) --- */
        .tech-grid-section {
            width: 100%;
            padding: 80px 0;
            background-color: #ffffff;
            display: flex;
            justify-content: center;
            overflow: hidden; /* Pour que les lignes ne dépassent pas trop */
            margin: auto;
        }

        .tech-grid-container {
            width: 100%;
            max-width: 1200px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            /* Astuce pour les lignes en pointillés externes : */
            border-top: 1px dashed #e5e7eb;
            border-left: 1px dashed #e5e7eb;
            margin: auto;
        }

        .tech-card {
            position: relative;
            padding: 60px 30px;
            /* Lignes en pointillés à droite et en bas de chaque carte */
            border-right: 1px dashed #e5e7eb;
            border-bottom: 1px dashed #e5e7eb;
            background: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            overflow: hidden; /* Contient le background complexe */
            margin: auto;
        }

        /* Le fond complexe (Rayures + Dégradé couleur) */
        .tech-card-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            opacity: 0.6; /* Subtil */
            /* 1. Rayures diagonales fines */
            /* 2. Glow radial vert/bleu */
            background-image: 
                repeating-linear-gradient(
                    45deg,
                    transparent,
                    transparent 10px,
                    #f3f4f6 10px,
                    #f3f4f6 11px
                ),
                radial-gradient(
                    circle at 50% 30%, 
                    rgba(209, 250, 229, 0.4) 0%, /* Vert menthe pâle */
                    rgba(224, 242, 254, 0.3) 40%, /* Bleu ciel pâle */
                    transparent 70%
                );
        }

        .tech-content {
            position: relative;
            z-index: 1; /* Au-dessus du fond */
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100%;
            margin: auto;
        }

        /* Wrapper de l'icône fleur */
        .icon-flower-wrapper {
            position: relative;
            width: 100px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 30px;
        }

        .flower-bg {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 0;
            /* Forme complexe SVG remplie de blanc avec bordure grise */
        }

        .inner-icon {
            position: relative;
            z-index: 1;
            /* Couleur des icônes un peu gris/vert */
            color: #4b5563;
        }

        /* Typographie */
        .tech-title {
            font-family: 'Inter', sans-serif;
            font-size: 1.35rem;
            font-weight: 500;
            color: #111827; /* Noir doux */
            margin-bottom: 15px;
        }

        .tech-desc {
            font-family: 'Inter', sans-serif;
            font-size: 1rem;
            line-height: 1.6;
            color: #6b7280; /* Gris moyen */
            max-width: 300px;
            margin-bottom: 40px;
            flex-grow: 1; /* Pousse le bouton vers le bas */
        }

        /* Bouton Capsule */
        .tech-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background-color: white;
            border: 1px solid #e5e7eb;
            border-radius: 50px; /* Forme pillule */
            padding: 12px 24px;
            font-family: 'Inter', sans-serif;
            font-size: 0.95rem;
            font-weight: 500;
            color: #111827;
            text-decoration: none;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
            transition: all 0.2s ease;
        }

        .tech-btn:hover {
            border-color: #d1d5db;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
            transform: translateY(-1px);
        }

        /* --- Responsive --- */
        @media (max-width: 900px) {
            .tech-grid-container {
                grid-template-columns: 1fr; /* 1 colonne */
                border-left: none;
                border-top: none;
                width: 95%; /* Marge sur mobile */
                margin: 0 auto;
            }

            .tech-card {
                /* Sur mobile, on garde la bordure bas et on ajoute bordure gauche/droite pour faire joli */
                border: 1px dashed #e5e7eb;
                border-bottom: none; /* Eviter double bordure */
            }
            
            .tech-card:last-child {
                border-bottom: 1px dashed #e5e7eb;
            }
        }



        /* --- Styles Section "Simple but Powerful" --- */
        .powerful-section {
            width: 100%;
            padding: 100px 0;
            background-color: white;
            display: flex;
            justify-content: center;
        }

        .powerful-container {
            width: 90%;
            max-width: 1200px;
        }

        /* Header */
        .powerful-header {
            margin-bottom: 60px;
            /* Alignement à gauche comme sur le début du texte de l'image, 
               mais centré globalement si on suit la logique des sections précédentes.
               L'image montre un alignement gauche par rapport au bloc de texte. */
            text-align: left; 
            max-width: 800px;
        }

        .powerful-title {
            font-family: 'Inter', sans-serif;
            font-size: 2.8rem;
            font-weight: 700;
            color: #000;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .powerful-subtitle {
            font-family: 'Inter', sans-serif;
            font-size: 1.25rem;
            line-height: 1.5;
            color: #333;
        }

        /* Grille 3 colonnes */
        .powerful-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            column-gap: 30px;
            row-gap: 60px; /* Espace vertical plus grand entre titre et carte suivante */
        }

        /* Bloc individuel */
        .feature-block {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* Fond Crème/Pêche */
        .feature-card-bg {
            background-color: #fff9f2; /* La couleur exacte crème */
            width: 100%;
            border-radius: 24px; /* Coins très arrondis */
            padding-top: 40px; /* Espace au dessus du téléphone */
            padding-bottom: 0; /* Le téléphone touche presque le bas ou est coupé */
            display: flex;
            justify-content: center;
            overflow: hidden; /* Coupe le bas du téléphone si besoin */
            margin-bottom: 20px;
            aspect-ratio: 1 / 1; /* Carré ou presque */
            position: relative;
        }

        /* Cadre du téléphone (iPhone Style) */
        .phone-frame {
            width: 70%; /* Largeur du tel par rapport à la carte */
            height: 100%; /* Prend toute la hauteur restante */
            background: #121212; /* Bordure noire */
            border-radius: 35px 35px 0 0; /* Arrondi haut, plat bas (coupé par le container) */
            padding: 10px 10px 0 10px; /* Bordure du cadre */
            position: relative;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        /* Dynamic Island (La pilule noire en haut) */
        .dynamic-island {
            width: 30%;
            height: 20px;
            background: black;
            border-radius: 20px;
            position: absolute;
            top: 15px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10;
        }

        .phone-frame img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top; /* Affiche le haut de l'interface */
            border-radius: 28px 28px 0 0;
            background: white;
        }

        /* Titre sous la carte */
        .feature-label {
            font-family: 'Inter', sans-serif;
            font-size: 1.2rem;
            font-weight: 600;
            color: #000;
            text-align: center;
        }

        /* --- Responsive --- */
        @media (max-width: 1024px) {
            .powerful-grid {
                grid-template-columns: repeat(2, 1fr); /* 2 colonnes tablette */
            }
        }

        @media (max-width: 600px) {
            .powerful-grid {
                grid-template-columns: 1fr; /* 1 colonne mobile */
            }
            .powerful-title {
                font-size: 2rem;
            }
            .phone-frame {
                width: 60%; /* Plus petit sur mobile pour voir le fond */
            }
        }



        /* --- Styles Section Pricing --- */
        .pricing-section {
            width: 100%;
            padding: 80px 0;
            background-color: #f8fafc; /* Fond très légèrement gris/bleuté */
            display: flex;
            justify-content: center;
        }

        .pricing-container {
            width: 90%;
            max-width: 1000px;
        }

        /* En-tête */
        .pricing-header {
            text-align: center;
            margin-bottom: 50px;
        }

        .pricing-title {
            font-family: 'Inter', sans-serif;
            font-size: 2.2rem;
            font-weight: 700;
            color: #0f172a;
            margin-bottom: 20px;
        }

        .pricing-subtitle {
            font-family: 'Inter', sans-serif;
            font-size: 1.1rem;
            line-height: 1.5;
            color: #475569;
            max-width: 600px;
            margin: 0 auto;
        }

        /* Grille des cartes */
        .pricing-grid {
            display: flex;
            justify-content: center;
            gap: 30px;
            align-items: stretch; /* Même hauteur */
        }

        /* Style commun aux cartes */
        .pricing-card {
            flex: 1;
            border-radius: 16px;
            padding: 40px 35px;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        /* Carte 1 : Light */
        .card-light {
            background: white;
            border: 1px solid #cbd5e1; /* Bordure grise nette */
            color: #1e293b;
        }

        /* Carte 2 : Dark */
        .card-dark {
            background: #0f172a; /* Bleu nuit très foncé */
            box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.3);
            border: 1px solid #0f172a;
        }

        /* Badge Recommandé */
        .badge-recommended {
            position: absolute;
            top: 0;
            right: 0;
            background-color: #2563eb; /* Bleu vif */
            color: white;
            font-family: 'Inter', sans-serif;
            font-size: 0.75rem;
            font-weight: 700;
            padding: 6px 12px;
            border-bottom-left-radius: 10px;
            border-top-right-radius: 16px; /* Suit l'arrondi de la carte */
            text-transform: uppercase;
        }

        /* Typographie Intérieure */
        .pack-name {
            font-family: 'Inter', sans-serif;
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 15px;
        }
        
        .text-white { color: white; }
        .text-gray { color: #94a3b8; }
        .text-light-gray { color: #e2e8f0; }

        /* Prix */
        .price-block {
            display: flex;
            align-items: baseline;
            gap: 5px;
            margin-bottom: 30px;
        }

        .price-number {
            font-family: 'Inter', sans-serif;
            font-size: 3rem; /* Très gros */
            font-weight: 700;
            line-height: 1;
        }

        .price-currency {
            font-family: 'Inter', sans-serif;
            font-size: 1.2rem;
            color: #64748b;
            font-weight: 400;
        }

        /* Liste */
        .pack-features {
            list-style: none;
            padding: 0;
            margin-bottom: 40px;
            flex-grow: 1; /* Pousse le bouton en bas */
        }

        .pack-features li {
            display: flex;
            align-items: center; /* Alignement vertical icône/texte */
            gap: 12px;
            margin-bottom: 18px;
            font-family: 'Inter', sans-serif;
            font-size: 1rem;
        }
        
        .pack-features li strong {
            font-weight: 700;
        }

        /* Icônes check */
        .check-icon-gray { color: #94a3b8; min-width: 20px; }
        .check-icon-blue { color: #2563eb; min-width: 20px; }

        /* Boutons */
        .btn-outline {
            display: block;
            width: 100%;
            text-align: center;
            padding: 15px;
            border-radius: 8px;
            border: 1px solid #cbd5e1;
            color: #1e293b;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.2s;
        }
        
        .btn-outline:hover {
            border-color: #94a3b8;
            background-color: #f8fafc;
        }

        .btn-blue {
            display: block;
            width: 100%;
            text-align: center;
            padding: 15px;
            border-radius: 8px;
            background-color: #2563eb;
            color: white;
            font-weight: 600;
            text-decoration: none;
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4); /* Glow bleu */
            transition: background 0.2s;
        }

        .btn-blue:hover {
            background-color: #1d4ed8;
        }

        /* Footer text */
        .pricing-footer {
            text-align: center;
            font-family: 'Inter', sans-serif;
            font-size: 0.85rem;
            color: #94a3b8;
            margin-top: 30px;
        }

        /* --- Responsive --- */
        @media (max-width: 850px) {
            .pricing-grid {
                flex-direction: column;
                align-items: center;
            }
            .pricing-card {
                width: 100%;
                max-width: 450px;
            }
        }


        /* --- Styles Footer --- */
        .main-footer {
            width: 100%;
            padding: 60px 0 40px 0;
            background-color: white; /* Fond blanc pur */
            display: flex;
            justify-content: center;
            border-top: 1px solid #f1f5f9; /* Optionnel : pour séparer du bloc précédent si besoin */
        }

        .footer-container {
            width: 90%;
            max-width: 1200px;
        }

        /* Partie Haute */
        .footer-top {
            display: flex;
            justify-content: space-between;
            align-items: center; /* Aligné verticalement au centre (ou flex-start selon préf) */
            padding-bottom: 40px; /* Espace avant la ligne */
        }

        .footer-name {
            font-family: 'Inter', sans-serif;
            font-size: 1.25rem;
            font-weight: 700;
            color: #111827; /* Noir charbon */
            text-transform: uppercase; /* Tout en majuscule */
            margin-bottom: 8px;
            letter-spacing: 0.5px;
        }

        .footer-role {
            font-family: 'Inter', sans-serif;
            font-size: 1rem;
            color: #6b7280; /* Gris moyen */
            font-weight: 400;
        }

        /* Liens Sociaux */
        .footer-socials {
            display: flex;
            gap: 30px;
        }

        .footer-socials a {
            font-family: 'Inter', sans-serif;
            font-size: 1rem;
            color: #9ca3af; /* Gris clair comme sur l'image */
            text-decoration: none;
            transition: color 0.2s;
        }

        .footer-socials a:hover {
            color: #111827; /* Devient noir au survol */
        }

        /* Séparateur */
        .footer-divider {
            width: 100%;
            height: 1px;
            background-color: #f3f4f6; /* Gris très très pâle */
            margin-bottom: 40px;
        }

        /* Partie Basse */
        .footer-bottom {
            text-align: center;
            display: flex;
            flex-direction: column;
            gap: 20px;
            align-items: center;
        }

        .warning-text {
            font-family: 'Inter', sans-serif;
            font-size: 0.85rem;
            line-height: 1.5;
            color: #9ca3af; /* Gris clair */
            max-width: 800px;
        }
        
        .warning-text strong {
            font-weight: 600;
            color: #9ca3af; /* Même couleur que le texte, juste plus gras */
        }

        .copyright-text {
            font-family: 'Inter', sans-serif;
            font-size: 0.85rem;
            color: #d1d5db; /* Gris encore plus clair */
        }

        /* --- Responsive --- */
        @media (max-width: 768px) {
            .footer-top {
                flex-direction: column;
                align-items: flex-start; /* Aligner à gauche sur mobile */
                gap: 20px;
            }

            .footer-socials {
                width: 100%;
                justify-content: flex-start; /* Liens alignés à gauche */
                gap: 20px;
            }
            
            .warning-text {
                font-size: 0.75rem; /* Un peu plus petit sur mobile */
                padding: 0 10px;
            }
        }


        /* --- Styles Section "Rejoindre l'équipe" --- */
        .join-team-section {
            width: 100%;
            padding: 100px 0;
            background-color: white;
            display: flex;
            justify-content: center;
        }

        .join-container {
            width: 90%;
            max-width: 1000px;
        }

        /* En-tête */
        .join-header {
            text-align: center;
            margin-bottom: 60px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .join-title {
            font-family: 'Inter', sans-serif;
            font-size: 2.5rem;
            font-weight: 800;
            color: #111827;
            margin-bottom: 15px;
        }

        .join-underline {
            width: 80px;
            height: 4px;
            background: linear-gradient(90deg, #3b82f6, #8b5cf6); /* Dégradé Bleu/Violet */
            border-radius: 2px;
        }

        /* Grille Cartes */
        .join-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            margin-bottom: 50px;
        }

        /* Style Carte */
        .join-card {
            background: #fff;
            border-radius: 24px;
            padding: 40px 30px;
            box-shadow: 0 10px 40px -5px rgba(0,0,0,0.06);
            border: 1px solid #f3f4f6;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .join-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 50px -10px rgba(0,0,0,0.1);
        }

        /* Barre de couleur en haut de carte */
        .join-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 6px;
        }

        .card-client::before { background: #3b82f6; } /* Bleu pour Client */
        .card-ambassador::before { background: #8b5cf6; } /* Violet pour Ambassadeur */

        /* Icon Wrapper */
        .card-icon-wrapper {
            width: 60px;
            height: 60px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 25px;
        }

        .icon-blue { background-color: #eff6ff; color: #3b82f6; }
        .icon-purple { background-color: #f5f3ff; color: #8b5cf6; }

        /* Textes Carte */
        .join-card-title {
            font-family: 'Inter', sans-serif;
            font-size: 1.5rem;
            font-weight: 700;
            color: #1f2937;
            margin-bottom: 5px;
        }

        .join-card-subtitle {
            font-family: 'Inter', sans-serif;
            font-size: 0.95rem;
            color: #6b7280;
            margin-bottom: 30px;
            font-style: italic;
        }

        /* Liste */
        .join-list {
            list-style: none;
            padding: 0;
        }

        .join-list li {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 15px;
            font-family: 'Inter', sans-serif;
            font-size: 1rem;
            color: #374151;
            line-height: 1.5;
        }

        .check-box {
            font-size: 1.1rem;
        }

        /* Points Négatifs (Pas de vente...) */
        .negative-point span:last-child {
            color: #ef4444; /* Rouge doux */
            font-weight: 500;
        }
        .cross-box {
            color: #ef4444;
            font-weight: bold;
        }

        /* Point spécial */
        .highlight-point {
            background-color: #f9fafb;
            padding: 10px;
            border-radius: 8px;
            font-size: 0.9rem !important;
            color: #6b7280 !important;
            font-style: italic;
            margin-top: 10px;
        }

        /* Boîte CTA Finale */
        .join-cta-box {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
            border-radius: 20px;
            padding: 30px;
            text-align: center;
            color: white;
            box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.3);
            max-width: 700px;
            margin: 0 auto;
        }

        .join-cta-box p {
            font-family: 'Inter', sans-serif;
            font-size: 1.1rem;
            line-height: 1.6;
            margin: 0;
        }

        .highlight-text {
            display: block;
            margin-top: 5px;
            font-weight: 700;
            font-size: 1.25rem;
            background: linear-gradient(90deg, #fbbf24, #f59e0b);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* --- Responsive --- */
        @media (max-width: 850px) {
            .join-grid {
                grid-template-columns: 1fr;
                max-width: 500px;
                margin-left: auto;
                margin-right: auto;
            }
            
            .join-title {
                font-size: 2rem;
            }
        }



        /* --- Styles Section Plan de Rémunération --- */
        .compensation-section {
            margin: auto;
            padding: 80px 0 100px 0;
            background-color: #0f172a; /* Fond Sombre (Bleu Nuit) pour le contraste */
            color: white;
            display: flex;
            justify-content: center;
            max-width: 1200px;
            border: 1px solid #fff;
            border-radius: 24px;
        }

        .comp-container {
            width: 90%;
            max-width: 900px;
        }

        /* En-tête Texte */
        .comp-header {
            text-align: center;
            margin-bottom: 50px;
        }

        .comp-title {
            font-family: 'Inter', sans-serif;
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 20px;
            background: linear-gradient(90deg, #fff, #94a3b8);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .comp-desc {
            font-family: 'Inter', sans-serif;
            font-size: 1.1rem;
            line-height: 1.6;
            color: #cbd5e1; /* Gris clair */
            margin-bottom: 30px;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

        /* Boite info paiement */
        .payment-info-box {
            background: rgba(255, 255, 255, 0.05); /* Transparence */
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 15px 20px;
            display: inline-flex;
            align-items: center;
            gap: 15px;
            text-align: left;
            max-width: 600px;
        }

        .info-icon {
            font-size: 1.5rem;
        }

        .info-text p {
            margin: 0;
            font-family: 'Inter', sans-serif;
            font-size: 0.95rem;
            color: #e2e8f0;
        }

        .info-text .sub-info {
            font-size: 0.85rem;
            color: #94a3b8;
            margin-top: 2px;
        }

        /* --- Tableau Design --- */
        .table-wrapper {
            width: 100%;
            overflow-x: auto; /* Permet le scroll horizontal sur mobile */
            border-radius: 16px;
            box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255,255,255,0.1);
        }

        .salary-table {
            width: 100%;
            border-collapse: collapse;
            background-color: #1e293b; /* Fond du tableau légèrement plus clair */
            font-family: 'Inter', sans-serif;
            min-width: 600px; /* Force une largeur min pour garder la forme */
        }

        /* En-tête Tableau */
        .salary-table thead {
            background: linear-gradient(90deg, #334155, #1e293b);
        }

        .salary-table th {
            padding: 20px;
            text-align: center; /* Centré comme sur l'image */
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #94a3b8;
            border-bottom: 2px solid rgba(255,255,255,0.1);
        }

        /* Corps Tableau */
        .salary-table td {
            padding: 18px 20px;
            text-align: center;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            color: white;
            font-size: 1rem;
        }

        /* Stylisation spécifique des colonnes */
        .pos-name {
            font-weight: 700;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        .revenue {
            font-weight: 700;
            color: #4ade80; /* Vert clair pour l'argent */
            font-size: 1.1rem;
        }

        .revenue span {
            font-size: 0.8rem;
            color: #94a3b8;
            font-weight: 400;
        }

        /* Effet Zebra (une ligne sur deux) */
        .salary-table tbody tr:nth-child(even) {
            background-color: rgba(255, 255, 255, 0.02);
        }

        /* Effet Survol */
        .salary-table tbody tr:hover {
            background-color: rgba(255, 255, 255, 0.08);
        }

        /* Highlight Diamond 10 (Changement de niveau) */
        .highlight {
            color: #38bdf8; /* Bleu clair */
        }

        /* Derniere ligne (Legend 500) */
        .top-tier td {
            border-bottom: none;
            background: linear-gradient(90deg, rgba(234, 179, 8, 0.1), transparent, rgba(234, 179, 8, 0.1)); /* Glow Or */
            color: #facc15; /* Or */
        }
        
        .top-tier .revenue {
            color: #facc15;
        }

        /* --- Responsive --- */
        @media (max-width: 600px) {
            .comp-title {
                font-size: 1.8rem;
            }
            .salary-table th, .salary-table td {
                padding: 15px 10px;
                font-size: 0.9rem;
            }
            .payment-info-box {
                flex-direction: row;
                text-align: left;
            }
        }


        /* --- Styles Section FAQ --- */
        .faq-section {
            width: 100%;
            padding: 100px 0;
            background-color: white;
            display: flex;
            justify-content: center;
        }

        .faq-container {
            width: 90%;
            max-width: 900px; /* Largeur idéale pour de la lecture */
        }

        /* En-tête */
        .faq-header {
            text-align: center;
            margin-bottom: 60px;
        }

        .faq-title {
            font-family: 'Inter', sans-serif;
            font-size: 2.5rem;
            font-weight: 500;
            color: #111827;
            margin-bottom: 10px;
        }

        /* Texte gris clair "des questions ?" comme sur l'image */
        .text-gray-light {
            color: #9ca3af; 
        }

        .faq-subtitle {
            font-family: 'Inter', sans-serif;
            font-size: 1.1rem;
            color: #6b7280;
        }

        /* Liste */
        .faq-list {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        /* Élément FAQ */
        .faq-item {
            border: 1px solid #e5e7eb; /* Bordure grise fine */
            border-radius: 16px;
            overflow: hidden; /* Important pour l'animation */
            transition: all 0.3s ease;
        }
        
        /* Changement de couleur de bordure quand ouvert */
        .faq-item.active {
            border-color: #d1d5db;
            background-color: #fafafa;
        }

        /* Bouton (Question) */
        .faq-question {
            width: 100%;
            background: white;
            border: none;
            padding: 25px 30px;
            text-align: left;
            font-family: 'Inter', sans-serif;
            font-size: 1.1rem;
            font-weight: 500;
            color: #374151;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            transition: background 0.2s;
        }

        .faq-question:hover {
            background-color: #f9fafb;
        }

        /* Icône (+) */
        .faq-icon {
            min-width: 30px;
            height: 30px;
            background-color: #9ca3af; /* Gris cercle */
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s ease, background-color 0.3s ease;
        }

        /* Rotation de l'icône quand actif */
        .faq-item.active .faq-icon {
            transform: rotate(45deg); /* Devient une croix (x) */
            background-color: #111827; /* Devient plus foncé */
        }

        /* Réponse (Cachée par défaut) */
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
            background-color: white;
        }

        .answer-content {
            padding: 0 30px 30px 30px;
            font-family: 'Inter', sans-serif;
            font-size: 1rem;
            line-height: 1.6;
            color: #6b7280;
        }

        /* --- Responsive --- */
        @media (max-width: 768px) {
            .faq-title { font-size: 2rem; }
            .faq-question { padding: 20px; font-size: 1rem; gap: 15px; }
            .answer-content { padding: 0 20px 20px 20px; }
        }