<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pirras'Associe - Accueil</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Syne:wght@500;700;800&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --orange: #f05a1a;
            --orange-2: #ff7a3d;
            --text: #101418;
            --muted: #5f6b76;
            --line: #e7eaee;
            --white: #ffffff;
            --soft: #f8fafc;
            --shadow: 0 12px 30px rgba(16, 24, 40, 0.08);
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: "DM Sans", sans-serif;
            color: var(--text);
            background: var(--white);
            line-height: 1.65;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        h1,
        h2,
        h3 {
            font-family: "Syne", sans-serif;
            line-height: 1.15;
        }

        .container {
            width: min(1160px, 92%);
            margin: 0 auto;
        }

        nav {
            position: sticky;
            top: 0;
            z-index: 100;
            background: rgba(255, 255, 255, 0.92);
            backdrop-filter: blur(8px);
            border-bottom: 1px solid var(--line);
        }

        .nav-wrap {
            min-height: 92px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
        }

        .brand {
            font-family: "Syne", sans-serif;
            font-size: 22px;
            font-weight: 800;
        }

        .brand-logo {
            display: block;
            height: 88px;
            width: auto;
        }

        .footer-logo {
            display: block;
            height: 56px;
            width: auto;
            margin-bottom: 14px;
        }

        .brand span {
            color: var(--orange);
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 14px;
            font-size: 14px;
            color: #2b3540;
        }

        .nav-mobile-toggle {
            display: none;
            width: 44px;
            height: 44px;
            border: 1px solid var(--line);
            border-radius: 10px;
            background: #fff;
            color: #1f2937;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            position: relative;
            z-index: 220;
        }

        .nav-mobile-toggle span {
            width: 18px;
            height: 2px;
            background: currentColor;
            display: block;
            border-radius: 2px;
            box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
        }

        .nav-links a {
            padding: 7px 10px;
            border-radius: 8px;
            transition: 0.2s ease;
        }

        .nav-links a:hover {
            background: #f2f4f7;
            color: var(--orange);
        }

        .nav-links a.is-active {
            color: var(--orange);
            font-weight: 700;
            background: transparent;
        }

        .nav-dropdown {
            position: relative;
        }

        .nav-dropdown-toggle {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 7px 10px;
            border-radius: 8px;
            transition: 0.2s ease;
            cursor: pointer;
            border: 0;
            background: transparent;
            font: inherit;
            color: inherit;
        }

        .nav-dropdown-toggle::after {
            content: "▾";
            font-size: 10px;
            transform: translateY(1px);
        }

        .nav-dropdown:hover .nav-dropdown-toggle,
        .nav-dropdown.open .nav-dropdown-toggle {
            background: #f2f4f7;
            color: var(--orange);
        }

        .nav-dropdown-menu {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            min-width: 230px;
            background: #ffffff;
            border: 1px solid var(--line);
            border-radius: 12px;
            box-shadow: 0 12px 28px rgba(16, 24, 40, 0.14);
            padding: 8px;
            opacity: 0;
            transform: translateY(6px);
            pointer-events: none;
            transition: 0.2s ease;
            z-index: 120;
        }

        .nav-dropdown:hover .nav-dropdown-menu,
        .nav-dropdown.open .nav-dropdown-menu {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        .nav-dropdown-menu a {
            display: block;
            padding: 10px 12px;
            border-radius: 8px;
            color: #334155;
        }

        .nav-dropdown-menu a:hover {
            background: #f7f8fb;
            color: var(--orange);
        }

        section {
            padding: 92px 0;
            border-bottom: 1px solid var(--line);
        }

        .kicker {
            color: var(--orange);
            text-transform: uppercase;
            letter-spacing: 1.6px;
            font-size: 12px;
            font-weight: 700;
            margin-bottom: 12px;
        }

        .title {
            font-size: clamp(26px, 3.4vw, 44px);
            margin-bottom: 14px;
        }

        .sub {
            color: var(--muted);
            max-width: 760px;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border-radius: 10px;
            padding: 13px 22px;
            font-family: "Syne", sans-serif;
            font-weight: 700;
            border: 1px solid transparent;
            transition: 0.2s ease;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--orange), var(--orange-2));
            color: #fff;
            box-shadow: 0 10px 24px rgba(240, 90, 26, 0.28);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
        }

        .btn-outline {
            border-color: #fff;
            color: #fff;
        }

        .btn-outline:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        #accueil {
            min-height: calc(100vh - 74px);
            display: flex;
            align-items: center;
            color: #fff;
            background:
                linear-gradient(120deg, rgba(6, 10, 16, 0.78), rgba(14, 20, 28, 0.55)),
                url("https://images.unsplash.com/photo-1565793298595-6a879b1d9492?auto=format&fit=crop&w=1800&q=80") center/cover no-repeat;
        }

        .hero-title {
            font-size: clamp(30px, 4.8vw, 54px);
            max-width: 920px;
            margin-bottom: 16px;
        }

        .hero-sub {
            font-size: clamp(18px, 2.4vw, 24px);
            margin-bottom: 34px;
            color: #f5f7fa;
        }

        .hero-actions {
            display: flex;
            gap: 14px;
            flex-wrap: wrap;
        }

        #valeur .grid,
        #solutions .grid,
        #process .timeline,
        #chiffres .grid {
            margin-top: 42px;
            display: grid;
            gap: 18px;
        }

        #valeur .grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .value-card {
            border: 1px solid rgba(240, 90, 26, 0.14);
            border-radius: 16px;
            padding: 26px;
            background: linear-gradient(165deg, rgba(240, 90, 26, 0.07) 0%, #fff 42%);
            box-shadow: var(--shadow);
            transition: 0.2s ease;
        }

        .value-card:hover {
            transform: translateY(-4px);
            border-color: rgba(240, 90, 26, 0.28);
            box-shadow:
                var(--shadow),
                0 12px 36px rgba(240, 90, 26, 0.08);
        }

        .value-icon {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;
            background: #fff3ed;
            color: var(--orange);
        }

        .value-icon svg {
            width: 24px;
            height: 24px;
            stroke: currentColor;
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .value-card h3 {
            font-size: 23px;
            margin-bottom: 6px;
        }

        .strong-line {
            margin-top: 24px;
            max-width: 880px;
            font-family: "Syne", sans-serif;
            font-size: clamp(24px, 3vw, 38px);
            color: var(--orange);
            line-height: 1.25;
        }

        #solutions .grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .solution-card {
            border: 1px solid rgba(240, 90, 26, 0.14);
            border-radius: 16px;
            background: linear-gradient(165deg, rgba(240, 90, 26, 0.07) 0%, #fff 42%);
            box-shadow: var(--shadow);
            padding: 26px;
            transition: 0.2s ease;
            display: block;
        }

        .solution-card:hover {
            transform: translateY(-4px);
            border-color: rgba(240, 90, 26, 0.28);
            box-shadow:
                var(--shadow),
                0 12px 36px rgba(240, 90, 26, 0.08);
        }

        .solution-card .n {
            color: var(--orange);
            font-weight: 700;
            margin-bottom: 6px;
        }

        #trip {
            color: #fff;
            background:
                linear-gradient(120deg, rgba(8, 14, 20, 0.82), rgba(8, 14, 20, 0.52)),
                url("https://images.unsplash.com/photo-1515923256482-1c04580b477c?auto=format&fit=crop&w=1800&q=80") center/cover no-repeat;
        }

        #trip .sub {
            color: #f3f4f6;
        }

        #process .timeline {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .step {
            border: 1px solid rgba(240, 90, 26, 0.14);
            border-radius: 16px;
            padding: 22px;
            background: linear-gradient(165deg, rgba(240, 90, 26, 0.07) 0%, #fff 42%);
            box-shadow: var(--shadow);
            position: relative;
            transition: 0.2s ease;
        }

        .step:hover {
            transform: translateY(-4px);
            border-color: rgba(240, 90, 26, 0.28);
            box-shadow:
                var(--shadow),
                0 12px 36px rgba(240, 90, 26, 0.08);
        }

        .num {
            width: 34px;
            height: 34px;
            border-radius: 999px;
            background: var(--orange);
            color: #fff;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;
        }

        #temoignages .slider-wrap {
            margin-top: 38px;
            overflow: hidden;
        }

        .slider-track {
            display: grid;
            transition: transform 0.4s ease;
        }

        .testimonial {
            border: 1px solid var(--line);
            border-radius: 16px;
            padding: 28px;
            background: #fff;
            box-shadow: var(--shadow);
            margin-right: 10px;
        }

        .testimonial p {
            color: #2f3944;
        }

        .t-tag {
            color: var(--orange);
            font-weight: 700;
            margin-bottom: 8px;
            font-size: 13px;
        }

        .stars {
            color: #f59e0b;
            margin-bottom: 10px;
            letter-spacing: 1px;
        }

        .t-author {
            margin-top: 16px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .t-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-family: "Syne", sans-serif;
            font-size: 16px;
            font-weight: 700;
            color: #fff;
            background: linear-gradient(135deg, var(--orange), var(--orange-2));
            border: 2px solid #fff;
            box-shadow: 0 6px 16px rgba(16, 24, 40, 0.15);
            flex-shrink: 0;
        }

        .t-name {
            font-weight: 700;
            font-family: "Syne", sans-serif;
            font-size: 14px;
            line-height: 1.2;
        }

        .t-role {
            color: var(--muted);
            font-size: 12px;
        }

        .slider-controls {
            margin-top: 14px;
            display: flex;
            gap: 10px;
        }

        .slider-controls button {
            border: 1px solid var(--line);
            border-radius: 9px;
            padding: 8px 12px;
            background: #fff;
            cursor: pointer;
            font-weight: 700;
        }

        #chiffres .grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        #chiffres {
            background:
                radial-gradient(circle at 15% 20%, rgba(240, 90, 26, 0.14), transparent 34%),
                radial-gradient(circle at 85% 80%, rgba(255, 122, 61, 0.12), transparent 36%),
                #0b0f14;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        #chiffres .kicker {
            color: #ff9a6c;
        }

        #chiffres .title,
        #chiffres .sub {
            color: #f8fafc;
        }

        .stat {
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 16px;
            padding: 26px 22px;
            background: rgba(255, 255, 255, 0.06);
            backdrop-filter: blur(3px);
            text-align: left;
            transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
            opacity: 1;
            transform: translateY(0);
        }

        .stat:hover {
            transform: translateY(-6px);
            border-color: rgba(255, 154, 108, 0.7);
            box-shadow: 0 16px 28px rgba(0, 0, 0, 0.35);
        }

        #chiffres .stat.visible {
            opacity: 1;
            transform: translateY(0);
        }

        #chiffres .stat:nth-child(1) {
            transition-delay: 0.04s;
        }

        #chiffres .stat:nth-child(2) {
            transition-delay: 0.12s;
        }

        #chiffres .stat:nth-child(3) {
            transition-delay: 0.2s;
        }

        #chiffres .stat:nth-child(4) {
            transition-delay: 0.28s;
        }

        .stat-label-top {
            font-size: 12px;
            letter-spacing: 1.2px;
            text-transform: uppercase;
            color: #cbd5e1;
            margin-bottom: 10px;
            font-weight: 700;
        }

        .stat .v {
            font-family: "Syne", sans-serif;
            color: #ff9a6c;
            font-size: clamp(24px, 3vw, 34px);
            margin-bottom: 6px;
        }

        .stat p {
            color: #e2e8f0;
            font-weight: 500;
            margin-bottom: 0;
        }

        #contact {
            text-align: center;
            background: #fff;
        }

        #contact .title {
            margin-bottom: 10px;
        }

        #contact .sub {
            margin: 0 auto 26px;
        }

        footer {
            background: #06090d;
            color: #cbd5e1;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            padding: 62px 0 28px;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.8fr 1fr 1fr 1fr;
            gap: 34px;
            margin-bottom: 28px;
        }

        .footer-brand .brand {
            display: inline-block;
            color: #fff;
            margin-bottom: 14px;
        }

        .footer-brand p {
            color: #9ca3af;
            max-width: 360px;
            margin-bottom: 20px;
        }

        .footer-flags {
            display: flex;
            gap: 10px;
            color: #d1d5db;
            font-size: 14px;
            letter-spacing: 0.5px;
        }

        .footer-col h4 {
            color: #fff;
            font-size: 17px;
            margin-bottom: 12px;
        }

        .footer-col a {
            display: block;
            color: #9ca3af;
            margin-bottom: 8px;
            transition: color 0.2s ease;
        }

        .footer-col a:hover {
            color: #fff;
        }

        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.09);
            padding-top: 18px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #9ca3af;
            font-size: 14px;
            gap: 12px;
        }

        .whatsapp-float {
            position: fixed;
            right: 22px;
            bottom: 22px;
            width: 58px;
            height: 58px;
            border-radius: 999px;
            background: #0b5f2a;
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 12px 24px rgba(37, 211, 102, 0.38);
            z-index: 300;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .whatsapp-float:hover {
            transform: translateY(-3px) scale(1.03);
            box-shadow: 0 14px 28px rgba(37, 211, 102, 0.45);
        }

        .whatsapp-float svg {
            width: 28px;
            height: 28px;
            fill: currentColor;
        }

        @media (max-width: 1024px) {
            .nav-mobile-toggle {
                display: inline-flex;
            }

            .nav-links {
                display: none;
                position: absolute;
                top: calc(100% + 8px);
                left: 4%;
                right: 4%;
                background: #fff;
                border: 1px solid var(--line);
                border-radius: 12px;
                box-shadow: 0 12px 28px rgba(16, 24, 40, 0.12);
                padding: 10px;
                flex-direction: column;
                align-items: stretch;
                gap: 4px;
                opacity: 0;
                transform: translateY(-6px);
                pointer-events: none;
                visibility: hidden;
                z-index: 210;
                transition: opacity 0.2s ease, transform 0.2s ease;
            }

            .nav-links.open {
                display: flex;
                opacity: 1;
                transform: translateY(0);
                pointer-events: auto;
                visibility: visible;
            }

            .nav-links>a,
            .nav-dropdown-toggle {
                width: 100%;
                text-align: left;
            }

            .nav-dropdown {
                width: 100%;
            }

            .nav-dropdown-toggle {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin: 0;
            }

            .nav-dropdown-menu {
                position: static;
                opacity: 0;
                transform: translateY(-4px);
                pointer-events: none;
                visibility: hidden;
                box-shadow: none;
                border: 0;
                padding: 0;
                min-width: 100%;
                max-height: 0;
                overflow: hidden;
                transition: opacity 0.18s ease, transform 0.18s ease;
            }

            .nav-dropdown.open .nav-dropdown-menu {
                opacity: 1;
                transform: none;
                pointer-events: auto;
                visibility: visible;
                max-height: 240px;
                padding-top: 6px;
            }

            .brand-logo {
                height: 78px;
            }

            #valeur .grid,
            #solutions .grid,
            #process .timeline,
            #chiffres .grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .footer-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 768px) {
            #accueil {
                min-height: auto;
                padding: 90px 0 70px;
            }

            #valeur .grid,
            #solutions .grid,
            #process .timeline,
            #chiffres .grid {
                grid-template-columns: 1fr;
            }

            .slider-controls {
                justify-content: center;
                flex-wrap: wrap;
            }

            .slider-controls button {
                min-width: 54px;
            }

            .stat {
                padding: 20px;
            }

            .footer-grid {
                grid-template-columns: 1fr;
                gap: 24px;
            }

            .footer-bottom {
                flex-direction: column;
                text-align: center;
            }

            .whatsapp-float {
                width: 54px;
                height: 54px;
                right: 16px;
                bottom: 16px;
            }
        }

    </style>
</head>
<body>
    <nav>
        <div class="container nav-wrap">
            <a class="brand" href="#accueil" aria-label="Pirras'Associe">
                <img src="{{ asset('images/logo2.png') }}" alt="Pirras'Associe" class="brand-logo">
            </a>
            <button type="button" class="nav-mobile-toggle" id="homeNavMobileToggle" aria-expanded="false" aria-controls="homeMainNavLinks" aria-label="Ouvrir le menu">
                <span aria-hidden="true"></span>
            </button>
            <div class="nav-links" id="homeMainNavLinks">
                <a href="/" data-home-nav="accueil" class="is-active">Accueil</a>
                <a href="/a-propos">A propos</a>
                <div class="nav-dropdown" id="servicesDropdown">
                    <button class="nav-dropdown-toggle" id="servicesDropdownToggle" aria-expanded="false" aria-controls="servicesDropdownMenu">Services</button>
                    <div class="nav-dropdown-menu" id="servicesDropdownMenu">
                        <a href="/centrale-achat">Centrale d'achat</a>
                        <a href="/logistique-groupage">Logistique et groupage</a>
                        <a href="/centrale-vente-abidjan">Centrale de vente</a>
                        <a href="#trip">China Business Trip</a>
                    </div>
                </div>
                <a href="/secteurs">Secteurs</a>
                <a href="/ressources">Ressources</a>
                <a href="#temoignages" data-home-nav="temoignages">Temoignages</a>
                <a href="#process" data-home-nav="process">Comment ça marche ?</a>
                <a href="/contact">Contact</a>
            </div>
        </div>
    </nav>

    <section id="accueil">
        <div class="container">
            {{-- <div class="kicker">Section 1 - Hero</div>  --}}
            <h1 class="hero-title">Votre passerelle strategique entre la Chine et l'Afrique</h1>
            <p class="hero-sub">Sourcing - Logistique - Vente - Investissement</p>
            <div class="hero-actions">
                <a href="/contact" class="btn btn-primary">Demander un accompagnement</a>
                <a href="#trip" class="btn btn-outline">Rejoindre le China Business Trip</a>
            </div>
        </div>
    </section>

    <section id="valeur">
        <div class="container">
            <div class="kicker">Section 2 - Proposition de valeur</div>
            <h2 class="title">Une execution claire, fiable et orientee résultat</h2>
            <div class="grid">
                <article class="value-card">
                    <div class="value-icon" aria-hidden="true">
                        <svg viewBox="0 0 24 24">
                            <circle cx="11" cy="11" r="7"></circle>
                            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                            <path d="M8.5 11h5"></path>
                        </svg>
                    </div>
                    <h3>Sourcing sécurisé</h3>
                    <p>Vérification des fournisseurs, contrôle qualité et transparence des process.</p>
                </article>
                <article class="value-card">
                    <div class="value-icon" aria-hidden="true">
                        <svg viewBox="0 0 24 24">
                            <path d="M3 18l3-2 3 2 3-2 3 2 3-2 3 2"></path>
                            <path d="M5 16V9h14v7"></path>
                            <path d="M9 9V6h6v3"></path>
                            <line x1="5" y1="12" x2="19" y2="12"></line>
                        </svg>
                    </div>
                    <h3>Logistique optimisée</h3>
                    <p>Groupage intelligent, pilotage des délais et flux maîtrise jusqu'à destination.</p>
                </article>
                <article class="value-card">
                    <div class="value-icon" aria-hidden="true">
                        <svg viewBox="0 0 24 24">
                            <line x1="4" y1="20" x2="4" y2="10"></line>
                            <line x1="10" y1="20" x2="10" y2="6"></line>
                            <line x1="16" y1="20" x2="16" y2="13"></line>
                            <polyline points="4,9 10,5 16,12 21,7"></polyline>
                            <polyline points="18,7 21,7 21,10"></polyline>
                        </svg>
                    </div>
                    <h3>Développement business</h3>
                    <p>Accompagnement pour transformer vos opérations en croissance durable.</p>
                </article>
            </div>
            <p class="strong-line">Nous ne transportons pas des marchandises. Nous construisons des entreprises.</p>
        </div>
    </section>

    <section id="solutions">
        <div class="container">
            <div class="kicker">Section 3 - Nos solutions</div>
            <h2 class="title">Nos 3 piliers opérationnels</h2>
            <p class="sub">Des cartes cliquables qui orientent vers la solution adaptée à votre besoin.</p>
            <div class="grid">
                <a class="solution-card" href="/contact">
                    <div class="n">01</div>
                    <h3>Centrale d'achat</h3>
                    <p>Sélection des fournisseurs, négociation et consolidation de commandes.</p>
                </a>
                <a class="solution-card" href="/contact">
                    <div class="n">02</div>
                    <h3>Logistique &amp; groupage</h3>
                    <p>Transport optimisé selon vos volumes, coûts et objectifs de délai.</p>
                </a>
                <a class="solution-card" href="/contact">
                    <div class="n">03</div>
                    <h3>Centrale de vente Abidjan</h3>
                    <p>Mise en marche locale et accélération de la distribution terrain.</p>
                </a>
            </div>
            <div style="margin-top: 28px;">
                <a class="btn btn-primary" href="/contact">Découvrir nos services</a>
            </div>
        </div>
    </section>

    <section id="trip">
        <div class="container">
            <div class="kicker">Section 4 - China Business Trip</div>
            <h2 class="title">Une immersion premium au coeur de la Chine business</h2>
            <p class="sub">Accompagnement sur place, visites fournisseurs, rendez-vous qualifiés et cadrage des opportunités d'investissement.</p>
            <div style="margin-top: 26px;">
                <a href="/contact" class="btn btn-primary">Voir les prochaines dates</a>
            </div>
        </div>
    </section>

    <section id="process">
        <div class="container">
            <div class="kicker">Section 5 - Comment ça marche</div>
            <h2 class="title">Un parcours simple en 4 étapes</h2>
            <div class="timeline">
                <article class="step">
                    <div class="num">1</div>
                    <h3>Analyse projet</h3>
                    <p>Audit de vos besoins, budget, produits cibles et objectifs.</p>
                </article>
                <article class="step">
                    <div class="num">2</div>
                    <h3>Sourcing</h3>
                    <p>Recherche, qualification et validation des meilleurs fournisseurs.</p>
                </article>
                <article class="step">
                    <div class="num">3</div>
                    <h3>Logistique</h3>
                    <p>Groupage, transport et suivi des flux de bout en bout.</p>
                </article>
                <article class="step">
                    <div class="num">4</div>
                    <h3>Livraison / vente</h3>
                    <p>Reception et accompagnement a la mise en marche commerciale.</p>
                </article>
            </div>
            <div style="margin-top: 28px;">
                <a href="/contact" class="btn btn-primary">Démarrer mon projet</a>
            </div>
        </div>
    </section>

    @php
    $homeTestimonials = isset($testimonials) ? $testimonials : collect();
    $slideCount = $homeTestimonials->isEmpty() ? 3 : $homeTestimonials->count();
    @endphp
    <section id="temoignages">
        <div class="container">
            <div class="kicker">Section 6 - Temoignages</div>
            <h2 class="title">Ce que disent nos clients</h2>
            <div class="slider-wrap">
                <div class="slider-track" id="sliderTrack" style="grid-template-columns: repeat({{ $slideCount }}, 100%);">
                    @forelse($homeTestimonials as $t)
                    <article class="testimonial">
                        @if($t->tag)
                        <div class="t-tag">{{ $t->tag }}</div>
                        @endif
                        <div class="stars">{{ $t->starsDisplay() }}</div>
                        <p>"{{ $t->quote }}"</p>
                        <div class="t-author">
                            <div class="t-avatar" aria-hidden="true">{{ $t->initials() }}</div>
                            <div>
                                <div class="t-name">{{ $t->author_name }}</div>
                                @if($t->author_role)
                                <div class="t-role">{{ $t->author_role }}</div>
                                @endif
                            </div>
                        </div>
                    </article>
                    @empty
                    <article class="testimonial">
                        <div class="t-tag">CBT</div>
                        <div class="stars">★★★★★</div>
                        <p>"Le trip etait structure, utile et tres rentable. Nous avons securise des contacts strategiques en Chine."</p>
                        <div class="t-author">
                            <div class="t-avatar" aria-hidden="true">AK</div>
                            <div>
                                <div class="t-name">Awa Kone</div>
                                <div class="t-role">Participante China Business Trip</div>
                            </div>
                        </div>
                    </article>
                    <article class="testimonial">
                        <div class="t-tag">Logistique</div>
                        <div class="stars">★★★★★</div>
                        <p>"Delais mieux maitrises et couts reduits. Le suivi est professionnel et rassurant."</p>
                        <div class="t-author">
                            <div class="t-avatar" aria-hidden="true">MB</div>
                            <div>
                                <div class="t-name">Mamadou Bah</div>
                                <div class="t-role">Responsable Import</div>
                            </div>
                        </div>
                    </article>
                    <article class="testimonial">
                        <div class="t-tag">Centrale d'achat</div>
                        <div class="stars">★★★★★</div>
                        <p>"Nous avons gagne en qualite fournisseur et en performance commerciale sur nos achats."</p>
                        <div class="t-author">
                            <div class="t-avatar" aria-hidden="true">FT</div>
                            <div>
                                <div class="t-name">Fatou Toure</div>
                                <div class="t-role">Directrice Commerciale</div>
                            </div>
                        </div>
                    </article>
                    @endforelse
                </div>
            </div>
            <div class="slider-controls">
                <button type="button" onclick="slidePrev()">←</button>
                <button type="button" onclick="slideNext()">→</button>
            </div>
        </div>
    </section>

    <section id="chiffres">
        <div class="container">
            <div class="kicker">Section 7 - Chiffres cles</div>
            <h2 class="title">Des indicateurs qui parlent</h2>
            <div class="grid">
                <article class="stat">
                    <div class="stat-label-top">Experience</div>
                    <div class="v counter" data-target="20" data-prefix="+" data-suffix=" ans">+20 ans</div>
                    <p>d'expertise sur le corridor Chine - Afrique.</p>
                </article>
                <article class="stat">
                    <div class="stat-label-top">Volumes</div>
                    <div class="v">+X</div>
                    <p>conteneurs traites et livres en toute securite.</p>
                </article>
                <article class="stat">
                    <div class="stat-label-top">Clients</div>
                    <div class="v">+X</div>
                    <p>clients accompagnes dans leur croissance.</p>
                </article>
                <article class="stat">
                    <div class="stat-label-top">Presence</div>
                    <div class="v">Chine + Afrique</div>
                    <p>double ancrage operationnel sur le terrain.</p>
                </article>
            </div>
        </div>
    </section>

    <section id="contact">
        <div class="container">
            <div class="kicker">Section 8 - CTA final</div>
            <h2 class="title">Parlons de votre projet</h2>
            <p class="sub">Un expert vous accompagne pour structurer une strategie concrete et rentable.</p>
            <a href="#" class="btn btn-primary">Demander un accompagnement</a>
        </div>
    </section>

    <footer>
        <div class="container">
            <div class="footer-grid">
                <div class="footer-brand">
                    <a href="#accueil" aria-label="Pirras'Associe">
                        <img src="{{ asset('images/logo2.png') }}" alt="Pirras'Associe" class="footer-logo">
                    </a>
                    <p>Votre partenaire strategique pour developper votre activite import-export entre la Chine et l'Afrique francophone.</p>
                    <div class="footer-flags">
                        <span>CI</span><span>CN</span><span>SN</span><span>ML</span><span>BF</span><span>GN</span>
                    </div>
                </div>
                <div class="footer-col">
                    <h4>Services</h4>
                    <a href="#solutions">Centrale d'achat</a>
                    <a href="#solutions">Logistique &amp; groupage</a>
                    <a href="/centrale-vente-abidjan">Centrale de vente</a>
                    <a href="#trip">China Business Trip</a>
                </div>
                <div class="footer-col">
                    <h4>Ressources</h4>
                    <a href="/ressources#blog">Blog</a>
                    <a href="/ressources#guides">Guides pratiques</a>
                    <a href="/ressources#actualites">Actualités</a>
                    <a href="#temoignages">Témoignages</a>
                </div>
                <div class="footer-col">
                    <h4>Entreprise</h4>
                    <a href="/a-propos">A propos</a>
                    <a href="#process">Comment ça marche ?</a>
                    <a href="/contact">Contact</a>
                    <a href="#javascript:void(0);">Mentions légales</a>
                </div>
            </div>
            <div class="footer-bottom">
                <span>© 2026 Pirras'Associe - Tous droits réservés - Designed by <a href="https://softsys.ci/" target="_blank" rel="noopener noreferrer">Softsys</a></span>
                <span>Chine · Afrique · Business</span>
            </div>
        </div>
    </footer>

    <a class="whatsapp-float" href="https://api.whatsapp.com/send?phone=22546114254" target="_blank" rel="noopener noreferrer" aria-label="Contacter sur WhatsApp">
        <svg viewBox="0 0 24 24" aria-hidden="true">
            <path d="M20.52 3.48A11.8 11.8 0 0 0 12.07 0C5.55 0 .24 5.31.24 11.83c0 2.08.54 4.11 1.56 5.9L0 24l6.45-1.69a11.79 11.79 0 0 0 5.62 1.43h.01c6.52 0 11.83-5.31 11.83-11.83 0-3.16-1.23-6.12-3.39-8.43Zm-8.45 18.3h-.01a9.86 9.86 0 0 1-5.03-1.38l-.36-.21-3.83 1 1.02-3.74-.23-.38a9.85 9.85 0 0 1-1.51-5.24c0-5.44 4.42-9.86 9.86-9.86 2.63 0 5.11 1.02 6.97 2.89a9.8 9.8 0 0 1 2.88 6.97c0 5.44-4.42 9.85-9.86 9.85Zm5.41-7.39c-.3-.15-1.78-.88-2.05-.98-.28-.1-.48-.15-.68.15-.2.3-.78.98-.95 1.18-.18.2-.35.22-.65.08-.3-.15-1.26-.46-2.4-1.47-.89-.79-1.49-1.77-1.67-2.07-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.53.15-.18.2-.3.3-.5.1-.2.05-.38-.02-.53-.08-.15-.68-1.63-.93-2.24-.24-.58-.49-.5-.68-.5h-.58c-.2 0-.53.08-.8.38-.28.3-1.05 1.03-1.05 2.5s1.08 2.88 1.23 3.08c.15.2 2.12 3.24 5.13 4.54.72.31 1.28.5 1.72.64.72.23 1.37.2 1.88.12.57-.08 1.78-.73 2.03-1.44.25-.7.25-1.3.17-1.43-.08-.13-.28-.2-.58-.35Z" />
        </svg>
    </a>

    <script>
        let currentSlide = 0;
        const totalSlides = {
            {
                (int) $slideCount
            }
        };
        const sliderTrack = document.getElementById("sliderTrack");
        const sliderWrap = document.querySelector("#temoignages .slider-wrap");
        let autoSlideTimer = null;

        function updateSlider() {
            if (!sliderTrack) return;
            sliderTrack.style.transform = `translateX(-${currentSlide * 100}%)`;
        }

        function slideNext() {
            currentSlide = (currentSlide + 1) % totalSlides;
            updateSlider();
        }

        function slidePrev() {
            currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
            updateSlider();
        }

        function startAutoSlide() {
            autoSlideTimer = setInterval(slideNext, 3500);
        }

        function stopAutoSlide() {
            clearInterval(autoSlideTimer);
        }

        if (sliderWrap && totalSlides > 0) {
            sliderWrap.addEventListener("mouseenter", stopAutoSlide);
            sliderWrap.addEventListener("mouseleave", startAutoSlide);
            startAutoSlide();
        }

        const homeNavMobileToggle = document.getElementById("homeNavMobileToggle");
        const homeMainNavLinks = document.getElementById("homeMainNavLinks");
        if (homeNavMobileToggle && homeMainNavLinks) {
            homeNavMobileToggle.addEventListener("click", (event) => {
                event.stopPropagation();
                const isOpen = homeMainNavLinks.classList.toggle("open");
                homeNavMobileToggle.setAttribute("aria-expanded", String(isOpen));
            });
        }

        const servicesDropdown = document.getElementById("servicesDropdown");
        const servicesDropdownToggle = document.getElementById("servicesDropdownToggle");

        if (servicesDropdown && servicesDropdownToggle) {
            servicesDropdownToggle.addEventListener("click", (event) => {
                event.stopPropagation();
                const isOpen = servicesDropdown.classList.toggle("open");
                servicesDropdownToggle.setAttribute("aria-expanded", String(isOpen));
            });
        }

        document.addEventListener("click", (event) => {
            if (homeMainNavLinks ? .classList.contains("open") && !homeMainNavLinks.contains(event.target) && !homeNavMobileToggle ? .contains(event.target)) {
                homeMainNavLinks.classList.remove("open");
                homeNavMobileToggle ? .setAttribute("aria-expanded", "false");
            }
            if (servicesDropdown && !servicesDropdown.contains(event.target)) {
                servicesDropdown.classList.remove("open");
                servicesDropdownToggle ? .setAttribute("aria-expanded", "false");
            }
        });

        servicesDropdown ? .querySelectorAll(".nav-dropdown-menu a").forEach((item) => {
            item.addEventListener("click", () => {
                servicesDropdown.classList.remove("open");
                servicesDropdownToggle ? .setAttribute("aria-expanded", "false");
                if (homeMainNavLinks ? .classList.contains("open")) {
                    homeMainNavLinks.classList.remove("open");
                    homeNavMobileToggle ? .setAttribute("aria-expanded", "false");
                }
            });
        });
        homeMainNavLinks ? .querySelectorAll("a").forEach((link) => {
            link.addEventListener("click", () => {
                if (homeMainNavLinks.classList.contains("open")) {
                    homeMainNavLinks.classList.remove("open");
                    homeNavMobileToggle ? .setAttribute("aria-expanded", "false");
                }
            });
        });

        // Active state for home anchors in navbar.
        const homeNavLinks = document.querySelectorAll('[data-home-nav]');
        const syncHomeHashActive = () => {
            homeNavLinks.forEach((link) => link.classList.remove("is-active"));
            const hash = window.location.hash || "#accueil";
            if (hash === "#temoignages") {
                document.querySelector('[data-home-nav="temoignages"]') ? .classList.add("is-active");
            } else if (hash === "#process") {
                document.querySelector('[data-home-nav="process"]') ? .classList.add("is-active");
            } else {
                document.querySelector('[data-home-nav="accueil"]') ? .classList.add("is-active");
            }
        };
        window.addEventListener("hashchange", syncHomeHashActive);
        syncHomeHashActive();

        const chiffreCards = document.querySelectorAll("#chiffres .stat");
        const counters = document.querySelectorAll("#chiffres .counter");
        let countersStarted = false;

        function animateCounters() {
            if (countersStarted) return;
            countersStarted = true;

            counters.forEach((counter) => {
                const target = Number(counter.dataset.target || 0);
                const prefix = counter.dataset.prefix || "";
                const suffix = counter.dataset.suffix || "";
                const duration = 1300;
                const startTime = performance.now();

                function step(now) {
                    const progress = Math.min((now - startTime) / duration, 1);
                    const eased = 1 - Math.pow(1 - progress, 3);
                    const value = Math.round(target * eased);
                    counter.textContent = `${prefix}${value}${suffix}`;
                    if (progress < 1) requestAnimationFrame(step);
                }

                requestAnimationFrame(step);
            });
        }
        const chiffreObserver = new IntersectionObserver((entries) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    entry.target.classList.add("visible");
                    animateCounters();
                    chiffreObserver.unobserve(entry.target);
                }
            });
        }, {
            threshold: 0.18
        });
        chiffreCards.forEach((card) => chiffreObserver.observe(card));

    </script>
</body>
</html>
