<!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 {
            height: 74px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
        }

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

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

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

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

        .nav-links a:hover {
            background: #f2f4f7;
            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(30px, 4.2vw, 52px);
            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(36px, 6vw, 68px);
            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 var(--line);
            border-radius: 16px;
            padding: 26px;
            background: #fff;
            box-shadow: var(--shadow);
            transition: 0.2s ease;
        }

        .value-card:hover {
            transform: translateY(-4px);
        }

        .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 var(--line);
            border-radius: 16px;
            background: #fff;
            box-shadow: var(--shadow);
            padding: 26px;
            transition: 0.2s ease;
            display: block;
        }

        .solution-card:hover {
            transform: translateY(-4px);
            border-color: #ffd7c5;
        }

        .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 var(--line);
            border-radius: 16px;
            padding: 22px;
            background: #fff;
            box-shadow: var(--shadow);
            position: relative;
        }

        .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;
            grid-template-columns: repeat(3, 100%);
            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%;
            object-fit: cover;
            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));
        }

        .stat {
            border: 1px solid var(--line);
            border-radius: 16px;
            padding: 26px 22px;
            background: #fff;
            text-align: left;
            transition: 0.2s ease;
        }

        .stat:hover {
            transform: translateY(-3px);
            border-color: #ffd7c5;
            box-shadow: 0 10px 24px rgba(16, 24, 40, 0.06);
        }

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

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

        .stat p {
            color: var(--muted);
            font-weight: 500;
            margin-bottom: 0;
        }

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

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

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

        footer {
            padding: 30px 0;
            text-align: center;
            color: var(--muted);
            font-size: 14px;
        }

        @media (max-width: 1024px) {
            .nav-links {
                gap: 8px;
                font-size: 13px;
            }

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

        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }

            #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;
            }
        }

    </style>
</head>
<body>
    <nav>
        <div class="container nav-wrap">
            <a class="brand" href="#accueil">Pirras<span>'</span>Associe</a>
            <div class="nav-links">
                <a href="#accueil">Accueil</a>
                <a href="#valeur">A propos</a>
                <a href="#solutions">Services</a>
                <a href="#chiffres">Secteurs</a>
                <a href="#trip">Ressources</a>
                <a href="#temoignages">Temoignages</a>
                <a href="#process">Comment ca 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 resultat</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 securise</h3>
                    <p>Verification des fournisseurs, controle qualite 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 optimisee</h3>
                    <p>Groupage intelligent, pilotage des delais et flux maitrise jusqu'a 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>Developpement business</h3>
                    <p>Accompagnement pour transformer vos operations en croissance durable.</p>
                </article>
            </div>
            <p class="strong-line">Nous ne transportons pas des marchandises. Nous construisons des business.</p>
        </div>
    </section>

    <section id="solutions">
        <div class="container">
            <div class="kicker">Section 3 - Nos solutions</div>
            <h2 class="title">Nos 3 piliers operationnels</h2>
            <p class="sub">Des cartes cliquables qui orientent vers la solution adaptee a votre besoin.</p>
            <div class="grid">
                <a class="solution-card" href="#contact">
                    <div class="n">01</div>
                    <h3>Centrale d'achat</h3>
                    <p>Selection fournisseurs, negociation et consolidation de commandes.</p>
                </a>
                <a class="solution-card" href="#contact">
                    <div class="n">02</div>
                    <h3>Logistique &amp; groupage</h3>
                    <p>Transport optimise selon vos volumes, couts et objectifs de delai.</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 acceleration de la distribution terrain.</p>
                </a>
            </div>
            <div style="margin-top: 28px;">
                <a class="btn btn-primary" href="#contact">Decouvrir 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 qualifies et cadrage des opportunites 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 ca marche</div>
            <h2 class="title">Un parcours simple en 4 etapes</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>
    </section>

    <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">
                    <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">
                            <img class="t-avatar" src="https://i.pravatar.cc/120?img=32" alt="Client CBT">
                            <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">
                            <img class="t-avatar" src="https://i.pravatar.cc/120?img=14" alt="Client logistique">
                            <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">
                            <img class="t-avatar" src="https://i.pravatar.cc/120?img=47" alt="Client centrale achat">
                            <div>
                                <div class="t-name">Fatou Toure</div>
                                <div class="t-role">Directrice Commerciale</div>
                            </div>
                        </div>
                    </article>
                </div>
            </div>
            <div class="slider-controls">
                <button onclick="slidePrev()">←</button>
                <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">+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">© 2026 Pirras'Associe - Votre passerelle strategique Chine-Afrique</div>
    </footer>

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

        function updateSlider() {
            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);
        }

        sliderWrap.addEventListener("mouseenter", stopAutoSlide);
        sliderWrap.addEventListener("mouseleave", startAutoSlide);
        startAutoSlide();

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