const candidaturesService = require('../services/candidatures.service');

class DashboardController {
    async getStats(req, res, next) {
        try {
            const filters = {
                annee: req.query.annee,
                secteur: req.query.secteur,
                pays: req.query.pays
            };
            const stats = await candidaturesService.getDashboardStats(filters);
            res.json({ success: true, data: stats });
        } catch (error) {
            next(error);
        }
    }
}

module.exports = new DashboardController(); const axios = require('axios');
require('dotenv').config();

class CandidaturesService {
  constructor() {
    this.baseURL = process.env.WP_API_URL || 'https://succesendirect.com/wp-json/custom/v1';
    this.token = process.env.WP_API_TOKEN;
    
    // ⚡ CORRECTION MAJEURE : Initialisation de l'instance Axios
    this.axiosInstance = axios.create({
      baseURL: this.baseURL,
      headers: { 
        'X-API-TOKEN': this.token,
        'Content-Type': 'application/json'
      },
      timeout: 8000 // ⚡ Robustesse : échoue proprement après 8 secondes si WordPress est lent
    });
  }

  // Récupérer toutes les candidatures avec filtres et pagination
  async getAll(filters = {}) {
    try {
      const params = new URLSearchParams();
      if (filters.secteur) params.append('secteur', filters.secteur);
      if (filters.pays) params.append('pays', filters.pays);
      if (filters.status) params.append('status', filters.status);
      if (filters.search) params.append('search', filters.search);
      if (filters.page) params.append('page', filters.page);
      if (filters.limit) params.append('per_page', filters.limit);

      const response = await this.axiosInstance.get('/candidatures', { params });
      
      // ⚡ Récupération du total depuis les headers WordPress (ou fallback)
      const total = parseInt(
        response.headers['x-wp-total'] || response.data.total || response.data.length || 0, 
        10
      );

      return {
        data: response.data.data || response.data,
        total: total
      };
    } catch (error) {
      console.error('Erreur API WordPress (GET candidatures):', error.response?.data || error.message);
      if (error.code === 'ECONNABORTED') {
        throw new Error('Délai d\'attente de l\'API WordPress dépassé.');
      }
      throw new Error('Impossible de récupérer les candidatures');
    }
  }

  // Récupérer une candidature par ID
  async getById(id) {
    try {
      const response = await this.axiosInstance.get(`/candidatures/${id}`);
      return response.data.data || null;
    } catch (error) {
      if (error.response?.status === 404) return null;
      console.error('Erreur API WordPress (GET candidature by ID):', error.response?.data || error.message);
      throw new Error('Impossible de récupérer la candidature');
    }
  }

  // Récupérer les statistiques
  async getStats() {
    try {
      const response = await this.axiosInstance.get('/candidatures/stats');
      return response.data.data || response.data;
    } catch (error) {
      console.error('Erreur API WordPress (GET stats):', error.response?.data || error.message);
      throw new Error('Impossible de récupérer les statistiques');
    }
  }

  // Mettre à jour le statut d'une candidature
  async updateStatus(id, status, motif_rejet = null) {
    try {
      const payload = { status };
      if (motif_rejet) payload.motif_rejet = motif_rejet;
      
      const response = await this.axiosInstance.put(`/candidatures/${id}/status`, payload);
      return response.data;
    } catch (error) {
      console.error('Erreur API WordPress (PUT status):', error.response?.data || error.message);
      throw new Error('Impossible de mettre à jour le statut');
    }
  }

  // Lancer le scoring en masse pour une année
  async runScoring(annee, force = false) {
    try {
      const response = await this.axiosInstance.post('/scoring/run', { annee, force });
      return response.data;
    } catch (error) {
      console.error('Erreur scoring masse:', error.response?.data || error.message);
      throw new Error('Impossible de lancer le scoring');
    }
  }

  // Récupérer la liste des scores avec filtres
  async getScoringList(filters = {}) {
    try {
      const params = new URLSearchParams();
      if (filters.annee) params.append('annee', filters.annee);
      if (filters.secteur) params.append('secteur', filters.secteur);
      if (filters.pays) params.append('pays', filters.pays);
      if (filters.search) params.append('search', filters.search);
      if (filters.page) params.append('page', filters.page);
      if (filters.limit) params.append('limit', filters.limit);
      if (filters.orderby) params.append('orderby', filters.orderby);

      const response = await this.axiosInstance.get('/scoring/list', { params });
      return response.data;
    } catch (error) {
      console.error('Erreur liste scoring:', error.response?.data || error.message);
      throw new Error('Impossible de récupérer la liste des scores');
    }
  }

  // Récupérer le détail d'un score
  async getScoringDetail(id) {
    try {
      const response = await this.axiosInstance.get(`/scoring/${id}`);
      return response.data;
    } catch (error) {
      console.error('Erreur détail scoring:', error.response?.data || error.message);
      throw new Error('Impossible de récupérer le détail du score');
    }
  }

  // Récupérer les statistiques du tableau de bord
  async getDashboardStats(filters = {}) {
    try {
      const params = new URLSearchParams();
      if (filters.annee) params.append('annee', filters.annee);
      if (filters.secteur) params.append('secteur', filters.secteur);
      if (filters.pays) params.append('pays', filters.pays);

      const response = await this.axiosInstance.get('/dashboard/stats', { params });
      return response.data.data;
    } catch (error) {
      console.error('Erreur dashboard stats:', error.response?.data || error.message);
      throw new Error('Impossible de récupérer les statistiques du tableau de bord');
    }
  }
}

// Export d'une instance unique (Singleton)
module.exports = new CandidaturesService(); const express = require('express');
const router = express.Router();
const dashboardController = require('../controllers/dashboard.controller');
const { authenticate } = require('../middlewares/auth.middleware');

router.get('/stats', authenticate, dashboardController.getStats);

module.exports = router; app.use('/dashboard', dashboardRoutes); import api from './api';

export const dashboardService = {
    getStats: (filters = {}) => api.get('/dashboard/stats', { params: filters }),
}; import React, { useState, useEffect, useCallback, useMemo, useRef, memo } from "react";
import {
  BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer,
  PieChart, Pie, Cell,
} from "recharts";
import { dashboardService } from "../services/dashboard.service";
import Select, { type SingleValue } from "react-select";
import {
  Users, TrendingUp, Award, RefreshCw, PieChart as PieChartIcon,
  BarChart2, Target, CheckCircle, XCircle
} from "lucide-react";

// ============================================
// TYPES & INTERFACES
// ============================================

interface OptionType {
  value: string | number;
  label: string;
}

interface StatsData {
  stats: {
    total_candidats: number;
    avg_score: number;
    min_score: number;
    max_score: number;
    valides: number;
    en_attente: number;
    rejetes: number;
    total_analyses: number;
  };
  histogramme: Array<{ tranche: string; count: number }>;
  secteurs: Array<{ secteur: string; count: number; avg_score: number }>;
  pays: Array<{ pays: string; count: number; avg_score: number }>;
  top5: Array<{
    id: string;
    nom: string;
    nom_projet: string;
    secteur: string;
    pays: string;
    score_total: number;
  }>;
  dimensions: { A: number; B: number; C: number; D: number; E: number; F: number };
  evolution: Array<{ mois: string; count: number; avg_score: number }>;
  verdicts: Array<{ verdict: string; count: number }>;
}

interface StatCardProps {
  title: string;
  value: number | string;
  icon: React.ElementType;
  color: string;
  subtitle?: string;
}

// ============================================
// CACHE GLOBAL POUR LE DASHBOARD
// ============================================

const dashboardCache = {
  data: null as StatsData | null,
  timestamp: 0,
  params: null as any,
  CACHE_DURATION: 3 * 60 * 1000, // 3 minutes
};

// État global pour éviter les appels simultanés
let globalFetchPromise: Promise<any> | null = null;
let lastFetchTime = 0;

// ============================================
// SOUS-COMPOSANT OPTIMISÉ AVEC MEMO
// ============================================

const StatCard = memo<StatCardProps>(({ title, value, icon: Icon, color, subtitle }) => (
  <div className="bg-fne-white rounded-xl shadow-sm p-6 border border-fne-gray hover:shadow-gold transition-shadow duration-smooth">
    <div className="flex items-center justify-between">
      <div className="flex-1">
        <p className="text-sm text-fne-gray font-medium">{title}</p>
        <p className="text-2xl font-title text-fne-black mt-1">{value}</p>
        {subtitle && <p className="text-xs text-fne-gray mt-1">{subtitle}</p>}
      </div>
      <div className={`p-3 rounded-full ${color} bg-opacity-10`}>
        <Icon className={`w-6 h-6 ${color}`} />
      </div>
    </div>
  </div>
));
StatCard.displayName = "StatCard";

// ============================================
// COMPOSANT DES GRAPHIQUES (Mémoïsé)
// ============================================

const PieChartComponent = memo<{
  data: any[];
  title: string;
  icon: React.ElementType;
  colors: string[];
  dataKey: string;
  nameKey: string;
}>(({ data, title, icon: Icon, colors, dataKey, nameKey }) => {
  return (
    <div className="bg-fne-white rounded-xl border border-fne-gray p-4 shadow-sm">
      <h3 className="text-sm font-semibold text-fne-black mb-4 flex items-center gap-2">
        <Icon className="w-4 h-4 text-fne-gold" />
        {title}
      </h3>
      <div className="h-72">
        {data.length > 0 ? (
          <ResponsiveContainer width="100%" height="100%">
            <PieChart>
              <Pie
                data={data}
                cx="50%"
                cy="50%"
                innerRadius={60}
                outerRadius={90}
                paddingAngle={2}
                dataKey={dataKey}
                nameKey={nameKey}
              >
                {data.map((_, index) => (
                  <Cell key={`cell-${title}-${index}`} fill={colors[index % colors.length]} />
                ))}
              </Pie>
              <Tooltip
                contentStyle={{
                  backgroundColor: "#FFFFFF",
                  borderColor: "#DAA520",
                  borderRadius: "8px",
                }}
              />
              <Legend wrapperStyle={{ fontSize: "12px", color: "#3A3A3A" }} />
            </PieChart>
          </ResponsiveContainer>
        ) : (
          <div className="flex items-center justify-center h-full text-fne-gray">
            Aucune donnée
          </div>
        )}
      </div>
    </div>
  );
});
PieChartComponent.displayName = "PieChartComponent";

// ============================================
// COMPOSANT PRINCIPAL
// ============================================

const Dashboard: React.FC = () => {
  const [loading, setLoading] = useState<boolean>(false);
  const [stats, setStats] = useState<StatsData | null>(() => dashboardCache.data);
  
  const [annee, setAnnee] = useState<number>(new Date().getFullYear());

  // Référence pour annuler les requêtes en cours
  const abortControllerRef = useRef<AbortController | null>(null);
  const isMounted = useRef(true);
  const debounceTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  // Options de filtres
  const anneeOptions: OptionType[] = useMemo(() => [
    { value: 2024, label: "2024" },
    { value: 2025, label: "2025" },
    { value: 2026, label: "2026" },
    { value: 2027, label: "2027" },
  ], []);

  // Fonction de fetch optimisée avec cache
  const fetchStats = useCallback(async (forceRefresh = false) => {
    // Vérifier le cache
    const now = Date.now();
    const currentParams = { annee };
    const cacheKey = JSON.stringify(currentParams);
    const cacheValid = dashboardCache.data &&
                       dashboardCache.params === cacheKey &&
                       (now - dashboardCache.timestamp) < dashboardCache.CACHE_DURATION;

    if (!forceRefresh && cacheValid) {
      console.log("📦 Utilisation du cache du dashboard");
      setStats(dashboardCache.data);
      return;
    }

    // Éviter les appels simultanés
    if (globalFetchPromise) {
      console.log("⏳ Attente de la requête en cours...");
      await globalFetchPromise;
      return;
    }

    // Rate limiting
    if (!forceRefresh && (now - lastFetchTime) < 1500) {
      console.log("⏳ Appel trop fréquent, attente...");
      return;
    }

    // Annuler la requête précédente
    if (abortControllerRef.current) {
      abortControllerRef.current.abort();
    }

    const controller = new AbortController();
    abortControllerRef.current = controller;
    lastFetchTime = now;
    setLoading(true);

    const params = {
      annee,
    };

    const paramsKey = JSON.stringify(params);
    globalFetchPromise = dashboardService
      .getStats(params)
      .then((res) => {
        const data = res.data?.data || null;
        if (isMounted.current) {
          // Mettre à jour le cache
          dashboardCache.data = data;
          dashboardCache.timestamp = now;
          dashboardCache.params = paramsKey;
          setStats(data);
        }
        return data;
      })
      .catch((error: any) => {
        if (error.name === "AbortError" || error.name === "CanceledError") {
          console.log("⚠️ Requête annulée");
          return;
        }
        console.error("Erreur chargement dashboard:", error);
        if (isMounted.current) {
          // Garder les données du cache si disponibles
          if (!dashboardCache.data) {
            console.error("Aucune donnée en cache disponible.");
          }
        }
        throw error;
      })
      .finally(() => {
        globalFetchPromise = null;
        if (isMounted.current) {
          setLoading(false);
        }
      });

    await globalFetchPromise;
  }, [annee]);

  // Chargement initial avec cache
  useEffect(() => {
    isMounted.current = true;
    fetchStats();

    return () => {
      isMounted.current = false;
      if (abortControllerRef.current) {
        abortControllerRef.current.abort();
      }
      if (debounceTimeoutRef.current) {
        clearTimeout(debounceTimeoutRef.current);
      }
    };
  }, [fetchStats]);

  // Rafraîchir avec debounce quand les filtres changent
  useEffect(() => {
    if (debounceTimeoutRef.current) {
      clearTimeout(debounceTimeoutRef.current);
    }

    debounceTimeoutRef.current = setTimeout(() => {
      // Invalider le cache quand les filtres changent
      dashboardCache.timestamp = 0;
      fetchStats();
    }, 300); // Debounce de 300ms

    return () => {
      if (debounceTimeoutRef.current) {
        clearTimeout(debounceTimeoutRef.current);
      }
    };
  }, [annee, fetchStats]);

  // Fonction pour rafraîchir manuellement
  const handleRefresh = useCallback(() => {
    dashboardCache.timestamp = 0;
    fetchStats(true);
  }, [fetchStats]);

  // Gestionnaires de changement optimisés
  const handleAnneeChange = useCallback((option: SingleValue<OptionType>) => {
    if (option) setAnnee(Number(option.value));
  }, []);

  // ============================================
  // MÉMOÏSATION DES DONNÉES TRANSFORMÉES
  // ============================================

  const secteurData = useMemo(() => {
    if (!Array.isArray(stats?.secteurs)) return [];
    return stats.secteurs.map((item) => ({
      name: item.secteur || "Non renseigné",
      count: Number(item.count) || 0,
      avg_score: item.avg_score,
    }));
  }, [stats?.secteurs]);

  const paysDataFormatted = useMemo(() => {
    if (!Array.isArray(stats?.pays)) return [];
    return stats.pays.map((item) => ({
      name: item.pays || "Non renseigné",
      count: Number(item.count) || 0,
      avg_score: item.avg_score,
    }));
  }, [stats?.pays]);

  // Palette de couleurs FNE
  const COLORS = useMemo(
    () => ["#DAA520", "#FFD700", "#0A0A0A", "#3A3A3A", "#F5F5F5", "#2A2A2A", "#1A1A1A", "#FFE55C"],
    []
  );

  // Affichage du chargement initial
  if (loading && !stats) {
    return (
      <div className="flex justify-center items-center h-96">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-fne-gold"></div>
      </div>
    );
  }

  // Fallback si aucune donnée
  if (!stats) {
    return (
      <div className="bg-fne-white rounded-xl border border-fne-gray p-12 text-center">
        <Award className="w-16 h-16 mx-auto text-fne-gray mb-4" />
        <p className="text-fne-gray text-lg">Aucune donnée disponible pour ces critères.</p>
        <button
          onClick={handleRefresh}
          className="mt-4 inline-flex items-center gap-2 px-4 py-2 bg-fne-gold text-fne-black rounded-lg hover:bg-fne-gold-dark transition-colors"
        >
          <RefreshCw className="w-4 h-4" />
          Recharger
        </button>
      </div>
    );
  }

  const { stats: generalStats, histogramme, top5 } = stats;

  return (
    <div className="p-6 max-w-7xl mx-auto font-body space-y-6">
      {/* En-tête */}
      <div className="flex flex-col md:flex-row md:items-center md:justify-between">
        <div>
          <h1 className="text-2xl font-title text-fne-black">Tableau de bord</h1>
        </div>
        <div className="flex flex-wrap items-center gap-3 mt-4 md:mt-0">
          <Select<OptionType>
            options={anneeOptions}
            value={anneeOptions.find((o) => o.value === annee) || null}
            onChange={handleAnneeChange}
            className="w-32"
            isClearable={false}
            styles={{
              control: (p) => ({
                ...p,
                borderColor: "#DAA520",
                "&:hover": { borderColor: "#FFD700" },
                boxShadow: "none",
              }),
            }}
          />
          <button
            onClick={handleRefresh}
            disabled={loading}
            className="inline-flex items-center gap-2 px-4 py-2 bg-fne-gold-light rounded-lg hover:bg-fne-gold transition-colors duration-smooth disabled:opacity-50"
            title="Rafraîchir"
          >
            <RefreshCw className={`w-5 h-5 text-fne-black ${loading ? "animate-spin" : ""}`} />
            Rafraîchir
          </button>
        </div>
      </div>

      {/* Cartes statistiques */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <StatCard
          title="Total candidats"
          value={generalStats?.total_candidats || 0}
          icon={Users}
          color="text-fne-black"
        />
        <StatCard
          title="Score moyen IA"
          value={generalStats?.avg_score ? Math.round(generalStats.avg_score) : "—"}
          icon={TrendingUp}
          color="text-fne-gold-dark"
          subtitle={`Min: ${generalStats?.min_score || 0} | Max: ${generalStats?.max_score || 0}`}
        />
        <StatCard
          title="Candidatures validées"
          value={generalStats?.valides || 0}
          icon={CheckCircle}
          color="text-green-600"
        />
        <StatCard
          title="Candidatures rejetées"
          value={generalStats?.rejetes || 0}
          icon={XCircle}
          color="text-red-600"
        />
      </div>

      {/* Graphiques Principaux */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <PieChartComponent
          data={secteurData}
          title="Répartition par secteur"
          icon={PieChartIcon}
          colors={COLORS}
          dataKey="count"
          nameKey="name"
        />
        <PieChartComponent
          data={paysDataFormatted}
          title="Répartition par pays"
          icon={Target}
          colors={COLORS.slice(2)}
          dataKey="count"
          nameKey="name"
        />
      </div>

      {/* Histogramme des scores */}
      <div className="bg-fne-white rounded-xl border border-fne-gray p-4 shadow-sm">
        <h3 className="text-sm font-semibold text-fne-black mb-4 flex items-center gap-2">
          <BarChart2 className="w-4 h-4 text-fne-gold" />
          Répartition des scores globaux
        </h3>
        <div className="h-72">
          {histogramme && histogramme.length > 0 ? (
            <ResponsiveContainer width="100%" height="100%">
              <BarChart data={histogramme} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
                <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" vertical={false} />
                <XAxis
                  dataKey="tranche"
                  tick={{ fill: "#3A3A3A", fontSize: 12 }}
                  axisLine={false}
                  tickLine={false}
                />
                <YAxis
                  tick={{ fill: "#3A3A3A", fontSize: 12 }}
                  axisLine={false}
                  tickLine={false}
                />
                <Tooltip
                  cursor={{ fill: "#f9fafb" }}
                  contentStyle={{
                    backgroundColor: "#FFFFFF",
                    borderColor: "#DAA520",
                    borderRadius: "8px",
                  }}
                />
                <Bar dataKey="count" fill="#DAA520" radius={[6, 6, 0, 0]} maxBarSize={60} />
              </BarChart>
            </ResponsiveContainer>
          ) : (
            <div className="flex items-center justify-center h-full text-fne-gray">
              Aucune donnée
            </div>
          )}
        </div>
      </div>

      {/* Top 5 des candidats */}
      <div className="bg-fne-white rounded-xl border border-fne-gray p-4 shadow-sm">
        <h3 className="text-sm font-semibold text-fne-black mb-4 flex items-center gap-2">
          <Award className="w-4 h-4 text-fne-gold" />
          Top 5 des meilleures candidatures
        </h3>
        <div className="overflow-x-auto">
          {top5 && top5.length > 0 ? (
            <table className="w-full text-sm">
              <thead className="bg-fne-white-off">
                <tr>
                  {["#", "Nom", "Projet", "Secteur", "Pays", "Score"].map((header) => (
                    <th
                      key={header}
                      className="px-4 py-3 text-left font-semibold text-fne-gray-dark uppercase tracking-wider text-xs"
                    >
                      {header}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody className="divide-y divide-fne-gray">
                {top5.map((item, index) => (
                  <tr key={item.id} className="hover:bg-fne-white-off transition-colors duration-smooth">
                    <td className="px-4 py-3 text-fne-gray font-medium">{index + 1}</td>
                    <td className="px-4 py-3 font-medium text-fne-black">{item.nom}</td>
                    <td className="px-4 py-3 text-fne-black">{item.nom_projet}</td>
                    <td className="px-4 py-3 capitalize text-fne-gray">{item.secteur}</td>
                    <td className="px-4 py-3 capitalize text-fne-gray">{item.pays}</td>
                    <td className="px-4 py-3">
                      <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold bg-fne-gold-light text-fne-black">
                        {item.score_total} / 100
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          ) : (
            <p className="text-center text-fne-gray py-8">
              Aucun candidat classé pour le moment.
            </p>
          )}
        </div>
      </div>
    </div>
  );
};

export default Dashboard; <!DOCTYPE html>
<html lang="fr-FR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    
    <!-- ============================================
    MÉTAS SEO & RÉSEAUX SOCIAUX
    ============================================ -->
    <!-- Métas de base -->
    <meta name="description" content="Succès En Direct - Premier TV show d'investissement 100% Africain. Connecter investisseurs et entrepreneurs en toute confiance.">
    <meta name="keywords" content="TV show, investissement, Afrique, entrepreneurs, pitch, succès en direct">
    <meta name="author" content="Succès En Direct">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="https://succesendirect.com">
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://succesendirect.com">
    <meta property="og:title" content="Succès En Direct">
    <meta property="og:description" content="Succès En Direct - Premier TV show d'investissement 100% Africain. Connecter investisseurs et entrepreneurs en toute confiance.">
    <meta property="og:image" content="https://succesendirect.com/wp-content/themes/success/assets/media/images/logo_sm.png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:site_name" content="succesSite">
    <meta property="og:locale" content="fr_FR">
    
    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:url" content="https://succesendirect.com">
    <meta name="twitter:title" content="Succès En Direct">
    <meta name="twitter:description" content="Succès En Direct - Premier TV show d'investissement 100% Africain.">
    <meta name="twitter:image" content="https://succesendirect.com/wp-content/themes/success/assets/media/images/logo_sm.png">
    
    <!-- Métas supplémentaires -->
    <meta name="theme-color" content="#0A0A0A">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    
    <!-- Favicons -->
    <link rel="icon" type="image/png" sizes="32x32" href="https://succesendirect.com/wp-content/themes/success/assets/media/images/logo_sm.png">
    <link rel="icon" type="image/png" sizes="16x16" href="https://succesendirect.com/wp-content/themes/success/assets/media/images/logo_sm.png">
    <link rel="apple-touch-icon" href="https://succesendirect.com/wp-content/themes/success/assets/media/images/apple-touch-icon.png">
    
    <!-- Google Fonts - Montserrat -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

    <title>
        Succès En Direct - Premier TV Show d’Investissement Africain    </title>
    
    <title>succesSite</title>
<meta name='robots' content='max-image-preview:large' />
	<style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style>
	<link rel='stylesheet' id='montserrat-font-css' href='https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&#038;display=swap' type='text/css' media='all' />
<link rel='stylesheet' id='swiper-css-css' href='https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='success-custom-css' href='https://succesendirect.com/wp-content/themes/success/assets/css/style.css' type='text/css' media='all' />
<link rel='stylesheet' id='site-css' href='https://succesendirect.com/wp-content/themes/success/library/css/main.54b9ccfuhk2dsf03dbsdfsdf435456841712cdc194e4c1cd01a.css' type='text/css' media='all' />
</head>

<body class="home blog">

<!-- PRELOADER ANIMÉ -->
<div class="preloader" id="preloader">
    <div class="preloader__ring">
        <!-- Cercle extérieur qui tourne -->
        <svg class="preloader__orbit" viewBox="0 0 100 100">
            <circle cx="50" cy="50" r="46" fill="none" stroke="rgba(255,215,0,0.15)" stroke-width="1"/>
            <circle cx="50" cy="50" r="46" fill="none" stroke="rgba(255,215,0,0.5)" stroke-width="1.5"
                    stroke-dasharray="8 28" stroke-linecap="round"/>
        </svg>
        
        <!-- Logo fixe au centre -->
        <svg class="preloader__logo" viewBox="0 0 100 100">
            <path d="M50 22 L64 50 L50 78 L36 50 Z" fill="none" stroke="#FFD700" stroke-width="1.5" stroke-linejoin="round"/>
            <circle cx="50" cy="50" r="6" fill="#FFD700"/>
        </svg>
        
        <!-- Lumière pulsante -->
        <div class="preloader__glow"></div>
    </div>
    <div class="preloader__text">SUCCÈS EN DIRECT</div>
</div>

<!-- SITE WRAPPER -->
<div class="site-wrapper">

<!-- HEADER LUXUEUX -->
<header class="site-header" id="siteHeader">
    <div class="container">
        <div class="site-header__inner">
            <!-- Logo avec icône animée -->
            <a href="https://succesendirect.com" class="site-logo">
                <img src="https://succesendirect.com/wp-content/themes/success/assets/media/images/logo_sm.png" 
                    alt="Succès En Direct" 
                    class="site-logo__image">
            </a>
            
            <!-- Navigation principale (version simplifiée sans Custom_Nav_Walker) -->
            <nav class="site-nav">
                <ul class="site-nav__list">
                    <li class="current-menu-item">
                        <a href="https://succesendirect.com/">ACCUEIL</a>
                    </li>
                    <li class="menu-item-has-children">
                        <a href="#">À PROPOS</a>
                        <ul class="submenu">
                            <li><a href="https://succesendirect.com/succes-en-direct-s-a/">Succès En Direct S.A.</a></li>
                            <li><a href="https://succesendirect.com/notre-equipe/">Notre équipe</a></li>
                        </ul>
                    </li>
                    <li class="">
                        <a href="https://succesendirect.com/investisseurs/">INVESTISSEURS</a>
                    </li>
                    <li class="menu-item-has-children">
                        <a href="#">ARTICLES</a>
                        <ul class="submenu">
                            <li><a href="https://succesendirect.com/actualites/">Actualités</a></li>
                            <li><a href="https://succesendirect.com/analyses/">Analyses</a></li>
                        </ul>
                    </li>
                    <li class="menu-item-has-children">
                        <a href="#">EXTRAITS</a>
                        <ul class="submenu">
                            <li><a href="https://succesendirect.com/videos/">Vidéos</a></li>
                            <!-- <li><a href="https://succesendirect.com/entrepreneurs/">Entrepreneurs</a></li> -->
                        </ul>
                    </li>
                    <li class="">
                        <a href="https://succesendirect.com/entrepreneurs/">Entrepreneurs</a>
                    </li>
                    <!-- <li class="">
                        <a href="https://succesendirect.com/candidatures/">CANDIDACTURES</a>
                    </li> -->
                </ul>
            </nav>
            
            <!-- CTA Bouton -->
            <!-- <div class="site-header__cta">
                <a href="https://succesendirect.com/candidature/" class="btn btn--gold">
                    <span class="btn__text">Rejoignez le succès</span>
                    <span class="btn__glow"></span>
                </a>
            </div> -->
            
            <!-- Menu mobile toggle -->
            <button class="mobile-toggle" aria-label="Menu">
                <span></span>
                <span></span>
                <span></span>
            </button>
        </div>
    </div>
</header>

<main class="site-main">



<style>
    /* Image du logo */
.site-logo__image {
    height: 50px !important;
    width: auto;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    filter: brightness(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Animation au survol */
/* .site-logo:hover .site-logo__image {
    transform: scale(1.05);
    filter: brightness(1.1) drop-shadow(0 0 8px rgba(255, 215, 0, 0.4));
} */

/* Version scrolled du header */
/* .site-header--scrolled .site-logo__image {
    height: 45px;
} */

/* Version mobile */
@media (max-width: 768px) {
    .site-logo__image {
        height: 40px !important;
    }
    
    .site-header--scrolled .site-logo__image {
        height: 38px !important;
    }
}

/* Optionnel : Effet de brillance au chargement */
.site-logo__image {
    animation: logoGlow 2s ease-out;
}

@keyframes logoGlow {
    0% {
        opacity: 0;
        filter: brightness(0) drop-shadow(0 0 0 rgba(255, 215, 0, 0));
        transform: scale(0.9);
    }
    50% {
        opacity: 0.5;
        filter: brightness(0.5) drop-shadow(0 0 10px rgba(255, 215, 0, 0.3));
    }
    100% {
        opacity: 1;
        filter: brightness(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
        transform: scale(1);
    }
}

/* Alternative avec effet de contour doré au survol */
.site-logo {
    position: relative;
}

.site-logo::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    transition: width 0.4s ease;
}

.site-logo:hover::after {
    width: 80%;
}
</style> 
<!-- SECTION HERO AVEC VIDÉO -->
<section class="hero">
    <div class="hero__bg">
        <video 
            class="hero__video" 
            autoplay 
            muted 
            loop 
            playsinline
            poster="https://succesendirect.com/wp-content/themes/success/assets/media/images/image1.png"
        >
            <source src="https://succesendirect.com/wp-content/themes/success/assets/media/videos/video1.mp4" type="video/mp4">
        </video>
        <img src="https://succesendirect.com/wp-content/themes/success/assets/media/images/image1.png" alt="Succès En Direct" class="hero__fallback">
    </div>
    
    <div class="container">
        <div class="hero__content">
            
            <h1 class="hero__title" style="opacity:0;">
                Premier TV show d'investissement<br>
                <span class="hero__title-accent">100% Africain</span>
            </h1>
            
            <p class="hero__description">
                Connecter investisseurs et entrepreneurs en toute confiance.
            </p>
            
            <div class="hero__buttons">
                <a href="https://succesendirect.com/succes-en-direct-s-a/" class="btn btn--outline">
                    <span class="btn__text">Plus sur nous</span>
                </a>
                <a href="https://succesendirect.com/notre-equipe/" class="btn btn--gold">
                    <span class="btn__text">Rejoignez le succès</span>
                    <span class="btn__glow"></span>
                </a>
            </div>
        </div>
    </div>
    
    <div class="hero__scroll">
        <span>Scroll</span>
        <div class="hero__scroll-line"></div>
    </div>
</section>

<!-- SECTION QUI SOMMES-NOUS -->
<section class="about">
    <div class="container">
        <h2 class="section-title">Qui sommes-nous ?</h2>
        <p class="about__description">Succès En Direct est le premier TV show d'investissement en Afrique francophone.</p>
        
        <div class="about__cards">
            <!-- Carte 1: 30 minutes pour convaincre -->
            <div class="card">
                <div class="card__icon">
                    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="12" cy="12" r="10"/>
                        <polyline points="12 6 12 12 16 14"/>
                    </svg>
                </div>
                <div class="card__value">30 minutes</div>
                <div class="card__text">pour convaincre</div>
            </div>
            
            <!-- Carte 2: 5 investisseurs de renom -->
            <div class="card">
                <div class="card__icon">
                    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                        <circle cx="9" cy="7" r="4"/>
                        <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
                        <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
                    </svg>
                </div>
                <div class="card__value">4 investisseurs</div>
                <div class="card__text">de renom</div>
            </div>
            
            <!-- Carte 3: Jusqu'à 100M FCFA levés -->
            <div class="card">
                <div class="card__icon">
                    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/>
                        <circle cx="12" cy="12" r="3"/>
                        <path d="M12 8v4l3 3"/>
                    </svg>
                </div>
                <div class="card__value">Jusqu'à 100M FCFA</div>
                <div class="card__text">levés</div>
            </div>
            
            <!-- Carte 4: +4 zones monétaires couvertes -->
            <div class="card">
                <div class="card__icon">
                    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="12" cy="12" r="10"/>
                        <path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
                    </svg>
                </div>
                <div class="card__value">+4 zones</div>
                <div class="card__text">monétaires couvertes</div>
            </div>
            
            <!-- Carte 5: Diffusé sur média panafricain -->
            <div class="card">
                <div class="card__icon">
                    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                        <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
                        <line x1="8" y1="21" x2="16" y2="21"/>
                        <line x1="12" y1="17" x2="12" y2="21"/>
                        <path d="M2 9h20"/>
                    </svg>
                </div>
                <div class="card__value">Diffusé</div>
                <div class="card__text">sur un média panafricain</div>
            </div>
            
            <!-- PARTENAIRE 1 - AFG Bank -->
            <div class="card card--partner">
                <div class="card__icon">
                    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <rect x="2" y="7" width="20" height="14" rx="2" ry="2"/>
                        <line x1="16" y1="21" x2="16" y2="15"/>
                        <line x1="8" y1="21" x2="8" y2="15"/>
                        <line x1="12" y1="21" x2="12" y2="15"/>
                        <line x1="2" y1="11" x2="22" y2="11"/>
                    </svg>
                </div>
                <div class="card__value">AFG Bank</div>
                <div class="card__partner-logo">
                    <img src="https://succesendirect.com/wp-content/themes/success/assets/media/images/partenaires/image7.png" 
                        alt="AFG Bank" 
                        class="partner-logo">
                </div>
                <div class="card__text">Partenaire Financier</div>
            </div>
            
            <!-- PARTENAIRE 2 - Air Côte d'Ivoire -->
            <div class="card card--partner">
                <div class="card__icon">
                    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <path d="M3 15c2 0 3-2 5-2s3 2 5 2 3-2 5-2 3 2 5 2M3 9c2 0 3-2 5-2s3 2 5 2 3-2 5-2 3 2 5 2"/>
                        <path d="M3 21c2 0 3-2 5-2s3 2 5 2 3-2 5-2 3 2 5 2M3 3c2 0 3-2 5-2s3 2 5 2 3-2 5-2 3 2 5 2"/>
                        <circle cx="12" cy="12" r="2"/>
                    </svg>
                </div>
                <div class="card__value">Air Côte d'Ivoire</div>
                <div class="card__partner-logo">
                    <img src="https://succesendirect.com/wp-content/themes/success/assets/media/images/partenaires/image1.png" 
                        alt="Air Côte d'Ivoire" 
                        class="partner-logo">
                </div>
                <div class="card__text">Transporteur Officiel</div>
            </div>
        </div>
    </div>
    
    <div class="about__positioning">
        <div class="positioning__content">
            <p class="positioning__text">
                À mi-chemin entre <strong class="gold-text">média d'influence</strong> et <strong class="gold-text">accélérateur économique</strong>, 
                nous révélons les talents et connectons les entrepreneurs aux marchés régionaux, 
                au mentorat et au capital.
            </p>
            <div class="positioning__quote">
                <span class="quote-mark">"</span>
                <p>Pitcher une idée. Donner vie à un rêve.</p>
                <span class="quote-mark">"</span>
            </div>
            <p class="positioning__tagline">
                C'est ça, <strong class="gold-text">Succès En Direct</strong>.
            </p>
        </div>
        
        <!-- Élément décoratif -->
        <div class="positioning__decoration">
            <div class="decoration-light"></div>
        </div>
    </div>
</section>

<!-- SECTION INVESTISSEURS AVEC CARROUSEL -->
<section class="investors">
    <div class="container">
        <div class="investors__header">
            <h2 class="section-title">Ils font notre crédibilité</h2>
            <p class="investors__subtitle">Baobabs & Sages, unis pour la réussite africaine</p>
            <a href="https://succesendirect.com/investisseurs/" class="btn btn--outline">Voir tous les investisseurs</a>
        </div>
        
        <!-- Swiper Carrousel -->
        <div class="investors__carousel swiper">
            <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                        <div class="investor-card investor-card--sage">
                            <!-- BADGE SPÉCIFIQUE SELON LE TYPE -->
                           <div class="investor-card__badge investor-card__badge--sage">
                                                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/>
                                        <path d="M12 8v4l3 3"/>
                                    </svg>
                                    <span>Sage</span>
                                                            </div> 
                            
                            <div class="investor-card__image">
                                <img src="https://succesendirect.com/wp-content/themes/success/assets/media/images/investisseurs/image6.png" 
                                     alt="Mossadeck Bally"
                                     onerror="this.src='https://succesendirect.com/wp-content/themes/success/assets/media/images/investor-default.jpg'">
                                <div class="investor-card__glow"></div>
                            </div>
                            <div class="investor-card__content">
                                <h3>Mossadeck Bally</h3>
                                <p class="investor-card__fonction">Président du Groupe Azalaï</p>
                                <p class="investor-card__bio">L&#039;architecte de l&#039;hôtellerie moderne africaine.</p>
                                <a href="https://succesendirect.com/investisseur/mossadeck-bally/" class="investor-card__link">
                                    Découvrir <span>→</span>
                                </a>
                            </div>
                        </div>
                    </div>
                                    <div class="swiper-slide">
                        <div class="investor-card investor-card--sage">
                            <!-- BADGE SPÉCIFIQUE SELON LE TYPE -->
                           <div class="investor-card__badge investor-card__badge--sage">
                                                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/>
                                        <path d="M12 8v4l3 3"/>
                                    </svg>
                                    <span>Sage</span>
                                                            </div> 
                            
                            <div class="investor-card__image">
                                <img src="https://succesendirect.com/wp-content/themes/success/assets/media/images/investisseurs/image2.png" 
                                     alt="Alain Kouadio"
                                     onerror="this.src='https://succesendirect.com/wp-content/themes/success/assets/media/images/investor-default.jpg'">
                                <div class="investor-card__glow"></div>
                            </div>
                            <div class="investor-card__content">
                                <h3>Alain Kouadio</h3>
                                <p class="investor-card__fonction">CEO &amp; Fondateur</p>
                                <p class="investor-card__bio">L&#039;architecte discret de l&#039;élite économique ivoirienne.</p>
                                <a href="https://succesendirect.com/investisseur/alain-kouadio/" class="investor-card__link">
                                    Découvrir <span>→</span>
                                </a>
                            </div>
                        </div>
                    </div>
                                    <div class="swiper-slide">
                        <div class="investor-card investor-card--baobab">
                            <!-- BADGE SPÉCIFIQUE SELON LE TYPE -->
                           <div class="investor-card__badge investor-card__badge--baobab">
                                                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <path d="M12 2L15 8.5L22 9.5L17 14L18.5 21L12 17.5L5.5 21L7 14L2 9.5L9 8.5L12 2Z"/>
                                        <circle cx="12" cy="12" r="2"/>
                                    </svg>
                                    <span>Baobab</span>
                                                            </div> 
                            
                            <div class="investor-card__image">
                                <img src="https://succesendirect.com/wp-content/themes/success/assets/media/images/investisseurs/image5.png" 
                                     alt="Leon Konan Koffi"
                                     onerror="this.src='https://succesendirect.com/wp-content/themes/success/assets/media/images/investor-default.jpg'">
                                <div class="investor-card__glow"></div>
                            </div>
                            <div class="investor-card__content">
                                <h3>Leon Konan Koffi</h3>
                                <p class="investor-card__fonction">Expert Financier</p>
                                <p class="investor-card__bio">Un acteur majeur dans le paysage financier africain.</p>
                                <a href="https://succesendirect.com/investisseur/leon-konan-koffi/" class="investor-card__link">
                                    Découvrir <span>→</span>
                                </a>
                            </div>
                        </div>
                    </div>
                                    <div class="swiper-slide">
                        <div class="investor-card investor-card--baobab">
                            <!-- BADGE SPÉCIFIQUE SELON LE TYPE -->
                           <div class="investor-card__badge investor-card__badge--baobab">
                                                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <path d="M12 2L15 8.5L22 9.5L17 14L18.5 21L12 17.5L5.5 21L7 14L2 9.5L9 8.5L12 2Z"/>
                                        <circle cx="12" cy="12" r="2"/>
                                    </svg>
                                    <span>Baobab</span>
                                                            </div> 
                            
                            <div class="investor-card__image">
                                <img src="https://succesendirect.com/wp-content/themes/success/assets/media/images/investisseurs/image7.png" 
                                     alt="Vanessa Adande"
                                     onerror="this.src='https://succesendirect.com/wp-content/themes/success/assets/media/images/investor-default.jpg'">
                                <div class="investor-card__glow"></div>
                            </div>
                            <div class="investor-card__content">
                                <h3>Vanessa Adande</h3>
                                <p class="investor-card__fonction">Consultante &amp; Influenceuse</p>
                                <p class="investor-card__bio">L&#039;élégance tranchante de la parole libre.</p>
                                <a href="https://succesendirect.com/investisseur/vanessa-adande/" class="investor-card__link">
                                    Découvrir <span>→</span>
                                </a>
                            </div>
                        </div>
                    </div>
                                    <div class="swiper-slide">
                        <div class="investor-card investor-card--baobab">
                            <!-- BADGE SPÉCIFIQUE SELON LE TYPE -->
                           <div class="investor-card__badge investor-card__badge--baobab">
                                                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <path d="M12 2L15 8.5L22 9.5L17 14L18.5 21L12 17.5L5.5 21L7 14L2 9.5L9 8.5L12 2Z"/>
                                        <circle cx="12" cy="12" r="2"/>
                                    </svg>
                                    <span>Baobab</span>
                                                            </div> 
                            
                            <div class="investor-card__image">
                                <img src="https://succesendirect.com/wp-content/themes/success/assets/media/images/investisseurs/image3.png" 
                                     alt="Max Gradel"
                                     onerror="this.src='https://succesendirect.com/wp-content/themes/success/assets/media/images/investor-default.jpg'">
                                <div class="investor-card__glow"></div>
                            </div>
                            <div class="investor-card__content">
                                <h3>Max Gradel</h3>
                                <p class="investor-card__fonction">Footballeur International</p>
                                <p class="investor-card__bio">Le champion qui inspire.</p>
                                <a href="https://succesendirect.com/investisseur/max-gradel/" class="investor-card__link">
                                    Découvrir <span>→</span>
                                </a>
                            </div>
                        </div>
                    </div>
                                    <div class="swiper-slide">
                        <div class="investor-card investor-card--baobab">
                            <!-- BADGE SPÉCIFIQUE SELON LE TYPE -->
                           <div class="investor-card__badge investor-card__badge--baobab">
                                                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <path d="M12 2L15 8.5L22 9.5L17 14L18.5 21L12 17.5L5.5 21L7 14L2 9.5L9 8.5L12 2Z"/>
                                        <circle cx="12" cy="12" r="2"/>
                                    </svg>
                                    <span>Baobab</span>
                                                            </div> 
                            
                            <div class="investor-card__image">
                                <img src="https://succesendirect.com/wp-content/themes/success/assets/media/images/investisseurs/image1.png" 
                                     alt="Kouakou Abissa"
                                     onerror="this.src='https://succesendirect.com/wp-content/themes/success/assets/media/images/investor-default.jpg'">
                                <div class="investor-card__glow"></div>
                            </div>
                            <div class="investor-card__content">
                                <h3>Kouakou Abissa</h3>
                                <p class="investor-card__fonction">Jeune Leader</p>
                                <p class="investor-card__bio">Un leadership jeune d&#039;un expert rare.</p>
                                <a href="https://succesendirect.com/investisseur/kouakou-abissa/" class="investor-card__link">
                                    Découvrir <span>→</span>
                                </a>
                            </div>
                        </div>
                    </div>
                                    <div class="swiper-slide">
                        <div class="investor-card investor-card--baobab">
                            <!-- BADGE SPÉCIFIQUE SELON LE TYPE -->
                           <div class="investor-card__badge investor-card__badge--baobab">
                                                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <path d="M12 2L15 8.5L22 9.5L17 14L18.5 21L12 17.5L5.5 21L7 14L2 9.5L9 8.5L12 2Z"/>
                                        <circle cx="12" cy="12" r="2"/>
                                    </svg>
                                    <span>Baobab</span>
                                                            </div> 
                            
                            <div class="investor-card__image">
                                <img src="https://succesendirect.com/wp-content/themes/success/assets/media/images/investisseurs/image14.png" 
                                     alt="Didier Kla"
                                     onerror="this.src='https://succesendirect.com/wp-content/themes/success/assets/media/images/investor-default.jpg'">
                                <div class="investor-card__glow"></div>
                            </div>
                            <div class="investor-card__content">
                                <h3>Didier Kla</h3>
                                <p class="investor-card__fonction">Directeur Général de Kaydan Technologies</p>
                                <p class="investor-card__bio">Pionnier de l&#039;internet en Côte d&#039;Ivoire, il a construit le numérique africain pendant 26 ans.</p>
                                <a href="https://succesendirect.com/investisseur/didier-kla/" class="investor-card__link">
                                    Découvrir <span>→</span>
                                </a>
                            </div>
                        </div>
                    </div>
                                    <div class="swiper-slide">
                        <div class="investor-card investor-card--baobab">
                            <!-- BADGE SPÉCIFIQUE SELON LE TYPE -->
                           <div class="investor-card__badge investor-card__badge--baobab">
                                                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <path d="M12 2L15 8.5L22 9.5L17 14L18.5 21L12 17.5L5.5 21L7 14L2 9.5L9 8.5L12 2Z"/>
                                        <circle cx="12" cy="12" r="2"/>
                                    </svg>
                                    <span>Baobab</span>
                                                            </div> 
                            
                            <div class="investor-card__image">
                                <img src="https://succesendirect.com/wp-content/themes/success/assets/media/images/investisseurs/image13.png" 
                                     alt="Fabrice Nze-Bekale"
                                     onerror="this.src='https://succesendirect.com/wp-content/themes/success/assets/media/images/investor-default.jpg'">
                                <div class="investor-card__glow"></div>
                            </div>
                            <div class="investor-card__content">
                                <h3>Fabrice Nze-Bekale</h3>
                                <p class="investor-card__fonction">Directeur Associé &amp; Expert Financier</p>
                                <p class="investor-card__bio">Formé à Paris-Dauphine et London Business School, il met la finance au service de l&#039;Afrique.</p>
                                <a href="https://succesendirect.com/investisseur/fabrice-nze-bekale/" class="investor-card__link">
                                    Découvrir <span>→</span>
                                </a>
                            </div>
                        </div>
                    </div>
                            </div>
            
            <!-- Navigation du carrousel -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-pagination"></div>
        </div>
        
        <!-- Mention des 4 investisseurs permanents sur le plateau -->
        <div class="investors__info">
            <div class="investors__permanent">
                <span class="investors__permanent-icon">🎙️</span>
                <p><strong>4 investisseurs permanents</strong> sur le plateau — Prêts à investir dans votre projet</p>
            </div>
        </div>
    </div>
</section>

<!-- SECTION INTERACTIVE PASSEZ À L'ACTION -->
<section class="action-section">
    <div class="container">
        <div class="action-section__inner">
            <!-- Côté texte -->
            <div class="action-section__text">
                <span class="action-section__badge">Candidat</span>
                <h2 class="action-section__title">
                    Votre idée mérite<br>
                    <span class="text-gold">d'être lancée</span>
                </h2>
                <p class="action-section__description">
                    Rejoignez Succès En Direct et transformez votre vision en réalité.
                </p>
                
                <a href="https://succesendirect.com/candidature/" class="btn btn--action">
                    <span class="btn-action__icon">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                            <polygon points="5 3 19 12 5 21 5 3"/>
                        </svg>
                    </span>
                    <span class="btn-action__text">Appuyez sur GO</span>
                    <span class="btn-action__pulse"></span>
                </a> 
            </div>
            
            <!-- Côté image -->
            <div class="action-section__visual">
                <div class="action-visual__container">
                    <!-- Image principale -->
                    <div class="action-visual__main">
                        <img src="https://succesendirect.com/wp-content/themes/success/assets/media/images/image10.png" alt="Passez à l'action - Lancez votre projet avec Succès En Direct" class="action-visual__image">
                    </div>
                    
                    <!-- Éléments décoratifs flottants -->
                    <div class="action-visual__float action-visual__float--1">
                        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                            <path d="M12 19V5M5 12l7-7 7 7"/>
                        </svg>
                    </div>
                    <div class="action-visual__float action-visual__float--2">
                        <svg width="35" height="35" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                            <circle cx="12" cy="12" r="10"/>
                            <path d="M8 12l3 3 5-5"/>
                        </svg>
                    </div>
                    <div class="action-visual__float action-visual__float--3">
                        <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                            <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
                        </svg>
                    </div>
                    
                    <!-- Anneau décoratif -->
                    <div class="action-visual__ring"></div>
                    
                    <!-- Points lumineux -->
                    <div class="action-visual__dot action-visual__dot--1"></div>
                    <div class="action-visual__dot action-visual__dot--2"></div>
                    <div class="action-visual__dot action-visual__dot--3"></div>
                    <div class="action-visual__dot action-visual__dot--4"></div>
                    
                    <!-- Effet de glow -->
                    <div class="action-visual__glow"></div>
                </div>
                
                <!-- Texte décoratif en arrière-plan -->
                <div class="action-visual__bg-text">GO!</div>
            </div>
        </div>
    </div>
    
    <!-- Séparateur décoratif -->
    <div class="action-section__separator">
        <div class="separator-line"></div>
        <div class="separator-dot"></div>
        <div class="separator-line"></div>
    </div>
</section>

<!-- SECTION ARTICLES MAGAZINE -->
<section class="magazine">
    <div class="container">
        <div class="magazine__header">
            <h2 class="section-title">Derniers articles</h2>
            <p class="magazine__subtitle">Découvrez nos derniers articles pour rester informé et inspiré au quotidien.</p>
            <a href="https://succesendirect.com/actualites/" class="btn btn--outline">Tous les articles</a>
        </div>
        
        <!-- Grille Magazine : 2 grands + 3 petits -->
        <div class="magazine__grid">
            
            <!-- ARTICLE GRAND 1 -->
            <article class="mag-card mag-card--lg">
                <div class="mag-card__image">
                    <img src="https://succesendirect.com/wp-content/themes/success/assets/media/images/articles/image3.png" 
                         alt="Carnet de notes d'idées entrepreneuriales">
                    <div class="mag-card__category">Success</div>
                    <div class="mag-card__overlay"></div>
                </div>
                <div class="mag-card__content">
                    <h3>Un Pitch une vie qui change</h3>
                    <a href="https://succesendirect.com/actualite/un-pitch-une-vi-qui-chang/" class="mag-card__link">
                        Lire l'article 
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                    </a>
                </div>
            </article>
            
            <!-- ARTICLE GRAND 2 -->
            <article class="mag-card mag-card--lg">
                <div class="mag-card__image">
                    <img src="https://succesendirect.com/wp-content/themes/success/assets/media/images/articles/image4.png" 
                         alt="Investisseurs autour d'une table de négociation">
                    <div class="mag-card__category">Success</div>
                    <div class="mag-card__overlay"></div>
                </div>
                <div class="mag-card__content">
                    <h3>Tu travailles dur.</h3>
                    <a href="https://succesendirect.com/actualite/tu-travailles-dur/" class="mag-card__link">
                        Lire l'article 
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                    </a>
                </div>
            </article>
            
            <!-- ARTICLE PETIT 1 -->
            <article class="mag-card mag-card--sm">
                <div class="mag-card__image">
                    <img src="https://succesendirect.com/wp-content/themes/success/assets/media/images/articles/image2.png" 
                         alt="Entrepreneur en Afrique">
                    <div class="mag-card__category">Success</div>
                    <div class="mag-card__overlay"></div>
                </div>
                <div class="mag-card__content">
                    <h3>Informel et formel</h3>
                    <a href="https://succesendirect.com/actualite/informel-et-formel/" class="mag-card__link">
                        Lire <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                    </a>
                </div>
            </article>
            
            <!-- ARTICLE PETIT 2 -->
            <article class="mag-card mag-card--sm">
                <div class="mag-card__image">
                    <img src="https://succesendirect.com/wp-content/themes/success/assets/media/images/articles/image1.png" 
                         alt="Réseaux professionnels en Afrique">
                    <div class="mag-card__category">Success</div>
                    <div class="mag-card__overlay"></div>
                </div>
                <div class="mag-card__content">
                    <h3>Tu as une idée</h3>
                    <a href="https://succesendirect.com/actualite/tu-as-une-idee/" class="mag-card__link">
                        Lire <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                    </a>
                </div>
            </article>
            
            <!-- ARTICLE PETIT 3 -->
            <article class="mag-card mag-card--sm">
                <div class="mag-card__image">
                    <img src="https://succesendirect.com/wp-content/themes/success/assets/media/images/articles/image5.png" 
                         alt="Succès et croissance économique">
                    <div class="mag-card__category">Success</div>
                    <div class="mag-card__overlay"></div>
                </div>
                <div class="mag-card__content">
                    <h3>Pitch ton idée. Change ta vie.</h3>
                    <a href="https://succesendirect.com/actualite/un-pitch-une-vie-qui-change/" class="mag-card__link">
                        Lire <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                    </a>
                </div>
            </article>
            
        </div>
    </div>
</section>

<!-- SECTION PARTENAIRES AVEC CARROUSEL -->
<section class="partners-carousel">
    <div class="container">
        <div class="partners-carousel__header">
            <h2 class="section-title">Nos partenaires vous parlent !</h2>
            <p class="partners-carousel__subtitle">Des acteurs majeurs qui nous font confiance et accompagnent notre mission</p>
        </div>
        
        <!-- Swiper Carrousel -->
        <div class="partners-carousel__slider swiper">
            <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                        <div class="partner-card">
                            <div class="partner-card__logo">
                                <img src="https://succesendirect.com/wp-content/themes/success/assets/media/images/partenaires/image7.png" 
                                     alt="AFG Bank"
                                     onerror="this.src='https://succesendirect.com/wp-content/themes/success/assets/media/images/partner-placeholder.jpg'">
                                <div class="partner-card__glow"></div>
                            </div>
                            <div class="partner-card__content">
                                <h3>AFG Bank</h3>
                            </div>
                        </div>
                    </div>
                                    <div class="swiper-slide">
                        <div class="partner-card">
                            <div class="partner-card__logo">
                                <img src="https://succesendirect.com/wp-content/themes/success/assets/media/images/partenaires/image1.png" 
                                     alt="Air Côte d&#039;Ivoire"
                                     onerror="this.src='https://succesendirect.com/wp-content/themes/success/assets/media/images/partner-placeholder.jpg'">
                                <div class="partner-card__glow"></div>
                            </div>
                            <div class="partner-card__content">
                                <h3>Air Côte d&#039;Ivoire</h3>
                            </div>
                        </div>
                    </div>
                                    <div class="swiper-slide">
                        <div class="partner-card">
                            <div class="partner-card__logo">
                                <img src="https://succesendirect.com/wp-content/themes/success/assets/media/images/partenaires/image2.png" 
                                     alt="Azalai Fondation"
                                     onerror="this.src='https://succesendirect.com/wp-content/themes/success/assets/media/images/partner-placeholder.jpg'">
                                <div class="partner-card__glow"></div>
                            </div>
                            <div class="partner-card__content">
                                <h3>Azalai Fondation</h3>
                            </div>
                        </div>
                    </div>
                                    <div class="swiper-slide">
                        <div class="partner-card">
                            <div class="partner-card__logo">
                                <img src="https://succesendirect.com/wp-content/themes/success/assets/media/images/partenaires/image4.png" 
                                     alt="Gain"
                                     onerror="this.src='https://succesendirect.com/wp-content/themes/success/assets/media/images/partner-placeholder.jpg'">
                                <div class="partner-card__glow"></div>
                            </div>
                            <div class="partner-card__content">
                                <h3>Gain</h3>
                            </div>
                        </div>
                    </div>
                                    <div class="swiper-slide">
                        <div class="partner-card">
                            <div class="partner-card__logo">
                                <img src="https://succesendirect.com/wp-content/themes/success/assets/media/images/partenaires/image9.png" 
                                     alt="kaydan Groupe"
                                     onerror="this.src='https://succesendirect.com/wp-content/themes/success/assets/media/images/partner-placeholder.jpg'">
                                <div class="partner-card__glow"></div>
                            </div>
                            <div class="partner-card__content">
                                <h3>kaydan Groupe</h3>
                            </div>
                        </div>
                    </div>
                                    <div class="swiper-slide">
                        <div class="partner-card">
                            <div class="partner-card__logo">
                                <img src="https://succesendirect.com/wp-content/themes/success/assets/media/images/partenaires/image5.png" 
                                     alt="Hili conseil"
                                     onerror="this.src='https://succesendirect.com/wp-content/themes/success/assets/media/images/partner-placeholder.jpg'">
                                <div class="partner-card__glow"></div>
                            </div>
                            <div class="partner-card__content">
                                <h3>Hili conseil</h3>
                            </div>
                        </div>
                    </div>
                                    <div class="swiper-slide">
                        <div class="partner-card">
                            <div class="partner-card__logo">
                                <img src="https://succesendirect.com/wp-content/themes/success/assets/media/images/partenaires/image10.png" 
                                     alt="M Madu"
                                     onerror="this.src='https://succesendirect.com/wp-content/themes/success/assets/media/images/partner-placeholder.jpg'">
                                <div class="partner-card__glow"></div>
                            </div>
                            <div class="partner-card__content">
                                <h3>M Madu</h3>
                            </div>
                        </div>
                    </div>
                                    <div class="swiper-slide">
                        <div class="partner-card">
                            <div class="partner-card__logo">
                                <img src="https://succesendirect.com/wp-content/themes/success/assets/media/images/partenaires/image11.png" 
                                     alt="Dopamine"
                                     onerror="this.src='https://succesendirect.com/wp-content/themes/success/assets/media/images/partner-placeholder.jpg'">
                                <div class="partner-card__glow"></div>
                            </div>
                            <div class="partner-card__content">
                                <h3>Dopamine</h3>
                            </div>
                        </div>
                    </div>
                                    <div class="swiper-slide">
                        <div class="partner-card">
                            <div class="partner-card__logo">
                                <img src="https://succesendirect.com/wp-content/themes/success/assets/media/images/partenaires/image12.png" 
                                     alt="Ellipsis"
                                     onerror="this.src='https://succesendirect.com/wp-content/themes/success/assets/media/images/partner-placeholder.jpg'">
                                <div class="partner-card__glow"></div>
                            </div>
                            <div class="partner-card__content">
                                <h3>Ellipsis</h3>
                            </div>
                        </div>
                    </div>
                                    <div class="swiper-slide">
                        <div class="partner-card">
                            <div class="partner-card__logo">
                                <img src="https://succesendirect.com/wp-content/themes/success/assets/media/images/partenaires/image13.png" 
                                     alt="Hec | Challenge"
                                     onerror="this.src='https://succesendirect.com/wp-content/themes/success/assets/media/images/partner-placeholder.jpg'">
                                <div class="partner-card__glow"></div>
                            </div>
                            <div class="partner-card__content">
                                <h3>Hec | Challenge</h3>
                            </div>
                        </div>
                    </div>
                                    <div class="swiper-slide">
                        <div class="partner-card">
                            <div class="partner-card__logo">
                                <img src="https://succesendirect.com/wp-content/themes/success/assets/media/images/partenaires/image14.png" 
                                     alt="Max idel"
                                     onerror="this.src='https://succesendirect.com/wp-content/themes/success/assets/media/images/partner-placeholder.jpg'">
                                <div class="partner-card__glow"></div>
                            </div>
                            <div class="partner-card__content">
                                <h3>Max idel</h3>
                            </div>
                        </div>
                    </div>
                                    <div class="swiper-slide">
                        <div class="partner-card">
                            <div class="partner-card__logo">
                                <img src="https://succesendirect.com/wp-content/themes/success/assets/media/images/partenaires/image15.png" 
                                     alt="Foundation Magic System"
                                     onerror="this.src='https://succesendirect.com/wp-content/themes/success/assets/media/images/partner-placeholder.jpg'">
                                <div class="partner-card__glow"></div>
                            </div>
                            <div class="partner-card__content">
                                <h3>Foundation Magic System</h3>
                            </div>
                        </div>
                    </div>
                                    <div class="swiper-slide">
                        <div class="partner-card">
                            <div class="partner-card__logo">
                                <img src="https://succesendirect.com/wp-content/themes/success/assets/media/images/partenaires/image16.png" 
                                     alt="Donilab"
                                     onerror="this.src='https://succesendirect.com/wp-content/themes/success/assets/media/images/partner-placeholder.jpg'">
                                <div class="partner-card__glow"></div>
                            </div>
                            <div class="partner-card__content">
                                <h3>Donilab</h3>
                            </div>
                        </div>
                    </div>
                            </div>
            
            <!-- Navigation du carrousel -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-pagination"></div>
        </div>
        
        <!-- Message de confiance -->
        <div class="partners-carousel__trust">
            <div class="trust-badge">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
                    <polyline points="22 4 12 14.01 9 11.01"/>
                </svg>
                <span>+5 partenaires de confiance</span>
            </div>
        </div>
    </div>
    
    <!-- Élément décoratif -->
    <div class="partners-carousel__decoration">
        <div class="decoration-line"></div>
        <div class="decoration-dots"></div>
    </div>
</section>

<style>
    /* ============================================
   STYLES COMPLETS - ACCUEIL SIMPLE
   ============================================ */

/* ============================================
   HERO
   ============================================ */

.hero .container {
    position: relative;
    z-index: 3;
    width: 100%;
}

.hero__content {
    max-width: 800px;
    animation: heroFadeIn 1s ease forwards;
    text-align: center;
    margin: 0 auto;
}

@keyframes heroFadeIn {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero__title {
    font-size: 68px;
    line-height: 1.15;
    margin-bottom: 28px;
    color: var(--white);
}

.hero__title-accent {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    position: relative;
}

.hero__title-accent::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 6px;
    background: rgba(255, 215, 0, 0.15);
    border-radius: 3px;
    z-index: -1;
}

.hero__description {
    font-size: 20px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    max-width: 560px;
    margin-bottom: 40px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
    text-align: center;
    margin: 0 auto 40px auto;
}

.hero__buttons {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
}

.hero__fallback {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.35;
}

.hero__video ~ .hero__fallback {
    display: none;
}

.hero__scroll {
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 3;
    animation: scrollBounce 2.5s ease infinite;
}

.hero__scroll span {
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 215, 0, 0.6);
    font-weight: 500;
}

.hero__scroll-line {
    width: 1px;
    height: 45px;
    background: linear-gradient(to bottom, var(--gold), transparent);
}

@keyframes scrollBounce {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
    50% {
        transform: translateX(-50%) translateY(10px);
        opacity: 0.5;
    }
}

/* ============================================
   ABOUT - CARTES
   ============================================ */

.about__cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.card {
    flex: 0 1 calc(33.33% - 20px);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.05), rgba(255, 215, 0, 0.02));
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    min-height: 220px;
}

.card:hover {
    transform: translateY(-10px);
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

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

.card:hover::before {
    left: 100%;
}

.card__icon {
    margin-bottom: 15px;
    color: var(--gold);
}

.card__value {
    font-size: 24px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 8px;
}

.card__text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

/* ============================================
   CARTES PARTENAIRES
   ============================================ */

.card--partner {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(0, 0, 0, 0.4));
    border: 1px solid rgba(255, 215, 0, 0.2);
    text-align: center;
}

.card--partner .card__value {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 15px;
    color: var(--gold);
}

.card__partner-logo {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    margin: 15px 0;
    overflow: hidden;
}

.partner-logo {
    max-height: 60px;
    max-width: 90%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: none;
    transition: var(--transition);
}

.card--partner:hover .partner-logo {
    transform: scale(1.05);
    filter: none;
}

.card--partner .card__text {
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    margin-top: 5px;
}

/* ============================================
   POSITIONING
   ============================================ */

.about__positioning {
    position: relative;
    margin-top: 60px;
    padding: 60px 0;
    border-top: 1px solid rgba(255, 215, 0, 0.1);
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
}

.positioning__content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.positioning__text {
    font-size: 20px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.8);
}

.gold-text {
    color: var(--gold);
}

.positioning__quote {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 30px 0;
}

.quote-mark {
    font-size: 60px;
    color: var(--gold);
    opacity: 0.3;
    font-family: Georgia, serif;
    line-height: 1;
}

.positioning__quote p {
    font-size: 24px;
    font-style: italic;
    color: var(--white);
    margin: 0;
}

.positioning__tagline {
    font-size: 22px;
    color: rgba(255, 255, 255, 0.7);
}

.positioning__decoration {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 300px;
    height: 300px;
    pointer-events: none;
    z-index: 0;
}

.decoration-light {
    position: absolute;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.15), transparent);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: blur(20px);
    animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}

/* ============================================
   INVESTISSEURS
   ============================================ */

.investor-card {
    position: relative;
    border-radius: 20px;
    padding: 20px;
    transition: var(--transition);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
}

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

.investor-card--baobab {
    border: 1px solid rgba(139, 94, 60, 0.4);
    background: linear-gradient(135deg, rgba(46, 87, 62, 0.08), rgba(0, 0, 0, 0.3));
}

.investor-card--sage {
    border: 1px solid rgba(255, 215, 0, 0.3);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.05), rgba(0, 0, 0, 0.2));
}

.investor-card__badge {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(8px);
    padding: 5px 12px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.investor-card__badge--baobab {
    background: rgba(46, 87, 62, 0.9);
    border-left: 3px solid #8B5E3C;
    color: #D4C4A8;
}

.investor-card__badge--sage {
    background: rgba(26, 26, 26, 0.9);
    border-left: 3px solid var(--gold);
    color: var(--gold);
}

.investor-card__image {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 20px;
    border-radius: 50%;
    overflow: hidden;
}

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

.investor-card__content {
    text-align: center;
}

.investor-card--baobab .investor-card__content h3 {
    color: #D4C4A8;
}

.investor-card--sage .investor-card__content h3 {
    color: var(--gold);
}

.investor-card__fonction {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 12px;
    font-style: italic;
}

.investor-card__bio {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 15px;
}

.investor-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--gold);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: var(--transition);
}

.investor-card__link span {
    transition: transform 0.3s;
}

.investor-card__link:hover span {
    transform: translateX(5px);
}

.investors__info {
    margin-top: 40px;
    text-align: center;
}

.investors__permanent {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 50px;
    padding: 10px 24px;
}

.investors__permanent-icon {
    font-size: 20px;
}

.investors__permanent p {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.investors__permanent strong {
    color: var(--gold);
}

/* ============================================
   PARTENAIRES CARROUSEL
   ============================================ */

.partner-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 16px;
    padding: 30px 20px;
    text-align: center;
    transition: var(--transition);
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.partner-card:hover {
    border-color: rgba(255, 215, 0, 0.3);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.partner-card__logo {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
}

.partner-card__logo img {
    max-height: 80px;
    max-width: 80%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: none;
    transition: var(--transition);
}

.partner-card:hover .partner-card__logo img {
    transform: scale(1.05);
    filter: none;
}

.partner-card__content {
    margin-top: 10px;
}

.partner-card__content h3 {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    font-weight: 500;
}

.partner-card__glow {
    display: none;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .hero__title {
        font-size: 48px;
    }
    
    .card {
        flex: 0 1 calc(50% - 15px);
    }
}

@media (max-width: 768px) {
    .hero__title {
        font-size: 34px;
    }
    
    .hero__description {
        font-size: 16px;
        margin-bottom: 32px;
    }
    
    .hero__buttons {
        flex-direction: column;
        gap: 14px;
    }
    
    .hero__buttons .btn {
        width: 100%;
        justify-content: center;
    }
    
    .hero__scroll {
        bottom: 20px;
    }
    
    .hero__scroll-line {
        height: 30px;
    }
    
    .card {
        flex: 0 1 100%;
    }
    
    .card__partner-logo {
        height: 60px;
    }
    
    .partner-logo {
        max-height: 45px;
    }
    
    .positioning__decoration {
        width: 200px;
        height: 200px;
    }
    
    .decoration-light {
        width: 100px;
        height: 100px;
        filter: blur(15px);
    }
    
    .partner-card {
        height: 160px;
        padding: 20px 15px;
    }
    
    .partner-card__logo {
        height: 70px;
    }
    
    .partner-card__logo img {
        max-height: 60px;
    }
    
    .investor-card__image {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 480px) {
    .hero__title {
        font-size: 28px;
    }
    
    .hero__description {
        font-size: 15px;
    }
    
    .positioning__text {
        font-size: 17px;
    }
    
    .positioning__quote p {
        font-size: 20px;
    }
    
    .quote-mark {
        font-size: 40px;
    }
}

/* ============================================
   PARTENAIRES CARROUSEL - MODIFIÉ
   ============================================ */

.partner-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 16px;
    padding: 30px 20px;
    text-align: center;
    transition: var(--transition);
    height: 240px; /* Augmenté de 200px à 240px */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.partner-card:hover {
    border-color: rgba(255, 215, 0, 0.3);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.partner-card__logo {
    width: 100%;
    height: 140px; /* Augmenté de 100px à 140px */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05); /* Fond pour uniformiser */
    border-radius: 12px;
}

.partner-card__logo img {
    width: 180px; /* Largeur fixe */
    height: 100px; /* Hauteur fixe */
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Conserve les proportions */
    filter: none;
    transition: var(--transition);
}

.partner-card:hover .partner-card__logo img {
    transform: scale(1.05);
    filter: none;
}

.partner-card__content {
    margin-top: 10px;
}

.partner-card__content h3 {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    font-weight: 500;
}

.partner-card__glow {
    display: none;
}

/* ============================================
   RESPONSIVE - PARTENAIRES
   ============================================ */

@media (max-width: 768px) {
    .partner-card {
        height: 200px; /* Ajusté pour mobile */
        padding: 20px 15px;
    }
    
    .partner-card__logo {
        height: 110px; /* Ajusté pour mobile */
    }
    
    .partner-card__logo img {
        width: 150px; /* Largeur réduite pour mobile */
        height: 80px; /* Hauteur réduite pour mobile */
    }
}

@media (max-width: 480px) {
    .partner-card {
        height: 180px;
    }
    
    .partner-card__logo {
        height: 90px;
    }
    
    .partner-card__logo img {
        width: 130px;
        height: 70px;
    }
}
</style>

</main>
    
    <!-- FOOTER LUXUEUX -->
    <footer class="site-footer">
        <!-- Anneau décoratif -->
        <div class="footer-ring"></div>
        
        <div class="container">
            <div class="site-footer__inner">
                <!-- Logo et description -->
                <div class="site-footer__brand">
                    <div class="footer-logo">
                        <a href="https://succesendirect.com" class="site-logo">
                            <img src="https://succesendirect.com/wp-content/themes/success/assets/media/images/logo_sm.png" 
                                alt="Succès En Direct" 
                                class="site-logo__image">
                        </a>
                    </div>
                    <p class="footer-tagline">Premier TV show d'investissement<br>100% Africain</p>
                </div>
                
                <!-- Liens utiles -->
                <div class="site-footer__links">
                    <div class="footer-col">
                        <h4>SUCCÈS EN DIRECT</h4>
                        <ul>
                            <li><a href="https://succesendirect.com/succes-en-direct-s-a/">À propos</a></li>
                            <li><a href="https://succesendirect.com/notre-equipe/">Notre équipe</a></li>
                            <!-- <li><a href="https://succesendirect.com/contact/">Contact</a></li> -->
                        </ul>
                    </div>
                    <div class="footer-col">
                        <h4>PARTICIPER</h4>
                        <ul>
                            <li><a href="https://succesendirect.com/investisseurs/">Investisseurs</a></li>
                            <li><a href="https://succesendirect.com/entrepreneurs/">Entrepreneurs</a></li>
                            <!-- <li><a href="https://succesendirect.com/candidature/">Candidature</a></li> -->
                        </ul>
                    </div>
                    <div class="footer-col">
                        <h4>SUIVEZ-NOUS</h4>
                        <div class="footer-social footer-social--grid">
                            <a href="https://www.facebook.com/share/1DBzr9E9Da/?mibextid=wwXIfr" target="_blank" aria-label="Facebook">
                                <svg viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
                            </a>
                            <a href="https://twitter.com/Succesendirect" target="_blank" aria-label="Twitter">
                                <svg viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
                            </a>
                            <a href="https://www.instagram.com/succesendirect/" target="_blank" aria-label="Instagram">
                                <svg viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zM5.838 12a6.162 6.162 0 1112.324 0 6.162 6.162 0 01-12.324 0zM12 16a4 4 0 110-8 4 4 0 010 8zm4.965-10.405a1.44 1.44 0 112.881.001 1.44 1.44 0 01-2.881-.001z"/></svg>
                            </a>
                            <a href="https://www.linkedin.com/company/107463890/" target="_blank" aria-label="LinkedIn">
                                <svg viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451c.979 0 1.771-.773 1.771-1.729V1.729C24 .774 23.204 0 22.225 0z"/></svg>
                            </a>
                            <a href="https://www.tiktok.com/@succesendirect_officiel?_r=1&_t=ZS-97SAcDlptjR" target="_blank" aria-label="TikTok">
                                <svg viewBox="0 0 24 24"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.76-.08 1.4-.54 2.79-1.35 3.99-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.3-.71.3-1.1.03-3.27.02-6.53.02-9.8-.01.02-.02 0 0 0z"/></svg>
                            </a>
                            <a href="https://youtube.com/@succesendirect?si=oM_FvTRq-9qzNVMO" target="_blank" aria-label="YouTube">
                                <svg viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="site-footer__bottom">
                <div class="footer-copyright">
                    <p>&copy; 2026 SUCCÈS EN DIRECT. Tous droits réservés.</p>
                </div>
                <div class="footer-legal">
                    <a href="https://succesendirect.com/cgu/">CGU</a>
                    <a href="https://succesendirect.com/faq/">FAQ</a>
                </div>
            </div>
        </div>
    </footer>
    
</div><!-- .site-wrapper -->



<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js" id="swiper-js-js"></script>
<script type="text/javascript" src="https://succesendirect.com/wp-content/themes/success/assets/js/main.js" id="success-custom-js"></script>
<script type="text/javascript" src="https://succesendirect.com/wp-content/themes/success/library/js/app.b01811cdsdff3e7hj5a57f9e69d556495375caf6de5be.js" id="site-js"></script>

<style>
    /* Image du logo */
.site-logo__image {
    height: 70px;
    width: auto;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    filter: brightness(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Animation au survol */
/* .site-logo:hover .site-logo__image {
    transform: scale(1.05);
    filter: brightness(1.1) drop-shadow(0 0 8px rgba(255, 215, 0, 0.4));
} */

/* Version scrolled du header */
/* .site-logo__image {
    height: 45px;
} */

/* Version mobile */
@media (max-width: 768px) {
    .site-logo__image {
        height: 40px;
    }
    
    .site-logo__image {
        height: 38px;
    }
}

/* Optionnel : Effet de brillance au chargement */
.site-logo__image {
    animation: logoGlow 2s ease-out;
}

@keyframes logoGlow {
    0% {
        opacity: 0;
        filter: brightness(0) drop-shadow(0 0 0 rgba(255, 215, 0, 0));
        transform: scale(0.9);
    }
    50% {
        opacity: 0.5;
        filter: brightness(0.5) drop-shadow(0 0 10px rgba(255, 215, 0, 0.3));
    }
    100% {
        opacity: 1;
        filter: brightness(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
        transform: scale(1);
    }
}

/* Alternative avec effet de contour doré au survol */
.site-logo {
    position: relative;
}

.site-logo::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    transition: width 0.4s ease;
}

.site-logo:hover::after {
    width: 80%;
}

/* Style pour la grille des réseaux sociaux en 3x3 */
.footer-social--grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 12px;
    max-width: 180px;
}

.footer-social--grid a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 215, 0, 0.1);
}

.footer-social--grid a:hover {
    background: rgba(255, 215, 0, 0.2);
    transform: translateY(-3px);
    border-color: rgba(255, 215, 0, 0.4);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.15);
}

.footer-social--grid a svg {
    width: 20px;
    height: 20px;
    fill: #ffffff;
    transition: fill 0.3s ease;
}

.footer-social--grid a:hover svg {
    fill: var(--gold, #FFD700);
}

/* Ajustement pour mobile */
@media (max-width: 480px) {
    .footer-social--grid {
        gap: 6px 10px;
        max-width: 150px;
    }
    
    .footer-social--grid a {
        width: 36px;
        height: 36px;
    }
    
    .footer-social--grid a svg {
        width: 18px;
        height: 18px;
    }
}
</style>
</body>
</html>