<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pirras'Associé — Passerelle Chine · Afrique</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Instrument+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
    <style>
        :root {
            --orange: #E8521A;
            --orange2: #FF6B35;
            --orange-pale: #FFF4EF;
            --orange-mid: rgba(232, 82, 26, 0.10);
            --black: #0F0F0F;
            --ink: #1A1A1A;
            --ink2: #2E2E2E;
            --gray: #6B6B6B;
            --gray2: #9B9B9B;
            --gray-line: #E8E8E8;
            --white: #FFFFFF;
            --off: #F8F6F3;
            --off2: #F2EEE9;
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            background: var(--white);
            color: var(--ink);
            font-family: 'Instrument Sans', sans-serif;
            font-size: 16px;
            line-height: 1.65;
            overflow-x: hidden;
        }

        h1,
        h2,
        h3,
        h4,
        h5 {
            font-family: 'Syne', sans-serif;
            line-height: 1.1;
        }

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

        ::-webkit-scrollbar {
            width: 3px;
        }

        ::-webkit-scrollbar-thumb {
            background: var(--orange);
        }

        /* ── NAV ── */
        nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 999;
            height: 68px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 5%;
            background: rgba(255, 255, 255, 0.97);
            backdrop-filter: blur(16px);
            border-bottom: 1px solid var(--gray-line);
            transition: box-shadow 0.3s;
        }

        nav.scrolled {
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.07);
        }

        .logo {
            font-family: 'Syne', sans-serif;
            font-size: 19px;
            font-weight: 800;
            color: var(--ink);
            letter-spacing: -0.3px;
        }

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

        .nav-links {
            display: flex;
            align-items: center;
            gap: 2px;
        }

        .nav-links>a,
        .ndrop>span {
            font-size: 13.5px;
            font-weight: 500;
            color: var(--gray);
            padding: 7px 12px;
            border-radius: 7px;
            cursor: pointer;
            transition: color 0.18s, background 0.18s;
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .nav-links>a:hover,
        .ndrop>span:hover {
            color: var(--ink);
            background: var(--off);
        }

        .nav-links>a.act {
            color: var(--orange);
        }

        .ndrop {
            position: relative;
        }

        .ndrop>span::after {
            content: '▾';
            font-size: 9px;
            opacity: 0.5;
        }

        .dmenu {
            position: absolute;
            top: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%) translateY(-4px);
            background: var(--white);
            border: 1px solid var(--gray-line);
            border-radius: 12px;
            padding: 6px;
            min-width: 200px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.18s, transform 0.18s;
        }

        .ndrop:hover .dmenu {
            opacity: 1;
            pointer-events: all;
            transform: translateX(-50%) translateY(0);
        }

        .dmenu a {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 13px;
            border-radius: 7px;
            font-size: 13.5px;
            color: var(--gray);
            transition: background 0.15s, color 0.15s;
        }

        .dmenu a:hover {
            background: var(--off);
            color: var(--ink);
        }

        .nav-cta {
            background: var(--orange) !important;
            color: var(--white) !important;
            padding: 9px 18px !important;
            border-radius: 8px !important;
            font-weight: 600 !important;
            font-size: 13.5px !important;
            transition: background 0.2s, transform 0.15s !important;
            margin-left: 6px;
        }

        .nav-cta:hover {
            background: var(--orange2) !important;
            transform: translateY(-1px);
        }

        .burger {
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
            padding: 6px;
        }

        .burger span {
            width: 22px;
            height: 2px;
            background: var(--ink);
            border-radius: 2px;
            display: block;
        }

        /* ── MOBILE MENU ── */
        .mmenu {
            display: none;
            position: fixed;
            top: 68px;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--white);
            z-index: 998;
            padding: 24px 5%;
            overflow-y: auto;
        }

        .mmenu.open {
            display: block;
        }

        .mmenu a,
        .mmenu .mh {
            display: block;
            padding: 13px 0;
            font-size: 16px;
            font-weight: 500;
            border-bottom: 1px solid var(--gray-line);
            color: var(--ink);
            cursor: pointer;
        }

        .mmenu a.mo {
            color: var(--orange);
            font-weight: 700;
        }

        .mmenu .msub a {
            padding-left: 18px;
            font-size: 14.5px;
            color: var(--gray);
        }

        /* ── HERO ── */
        #accueil {
            min-height: 100vh;
            padding: 110px 5% 80px;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
        }

        .hero-bg-shape {
            position: absolute;
            top: 0;
            right: 0;
            width: 52%;
            height: 100%;
            background: var(--off);
            clip-path: polygon(8% 0, 100% 0, 100% 100%, 0% 100%);
            z-index: 0;
        }

        .hero-bg-dots {
            position: absolute;
            top: 0;
            right: 0;
            width: 52%;
            height: 100%;
            opacity: 0.3;
            z-index: 1;
            background-image: radial-gradient(circle, var(--gray2) 1px, transparent 1px);
            background-size: 26px 26px;
        }

        .hero-bottom-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--orange) 0%, var(--orange2) 60%, transparent 100%);
            z-index: 2;
        }

        .hero-inner {
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 64px;
            align-items: center;
            position: relative;
            z-index: 3;
        }

        .hero-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--orange-pale);
            border: 1px solid rgba(232, 82, 26, 0.22);
            border-radius: 100px;
            padding: 5px 14px 5px 8px;
            font-size: 12px;
            color: var(--orange);
            font-weight: 600;
            margin-bottom: 22px;
        }

        .hero-pill-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--orange);
            animation: blink 2s infinite;
        }

        @keyframes blink {

            0%,
            100% {
                opacity: 1
            }

            50% {
                opacity: 0.25
            }
        }

        .hero-title {
            font-size: clamp(36px, 4.8vw, 60px);
            font-weight: 800;
            letter-spacing: -1.5px;
            margin-bottom: 18px;
            color: var(--ink);
        }

        .hero-title em {
            color: var(--orange);
            font-style: normal;
        }

        .hero-services {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 24px;
        }

        .hs {
            font-size: 13px;
            font-weight: 600;
            color: var(--gray2);
            padding: 5px 12px;
            border-radius: 6px;
            background: var(--off2);
        }

        .hs.on {
            color: var(--orange);
            background: var(--orange-pale);
        }

        .hero-sub {
            font-size: 16.5px;
            color: var(--gray);
            line-height: 1.78;
            margin-bottom: 36px;
            max-width: 460px;
        }

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

        .btn-orange {
            background: var(--orange);
            color: var(--white);
            padding: 13px 24px;
            border-radius: 9px;
            font-weight: 700;
            font-size: 14.5px;
            font-family: 'Syne', sans-serif;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: background 0.2s, transform 0.15s;
            border: none;
            cursor: pointer;
        }

        .btn-orange:hover {
            background: var(--orange2);
            transform: translateY(-2px);
        }

        .btn-border {
            background: transparent;
            color: var(--ink);
            padding: 12px 24px;
            border-radius: 9px;
            font-weight: 600;
            font-size: 14.5px;
            font-family: 'Syne', sans-serif;
            border: 2px solid var(--gray-line);
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: border-color 0.2s, color 0.2s;
            cursor: pointer;
        }

        .btn-border:hover {
            border-color: var(--orange);
            color: var(--orange);
        }

        /* hero card */
        .hv-card {
            background: var(--white);
            border: 1.5px solid var(--gray-line);
            border-radius: 20px;
            padding: 28px;
            box-shadow: 0 6px 40px rgba(0, 0, 0, 0.08);
        }

        .hv-route {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 22px;
        }

        .hv-city {
            text-align: center;
        }

        .hv-flag {
            font-size: 32px;
            margin-bottom: 4px;
        }

        .hv-cname {
            font-family: 'Syne', sans-serif;
            font-size: 11.5px;
            font-weight: 700;
            color: var(--ink2);
        }

        .hv-line {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3px;
        }

        .hv-dashes {
            width: 100%;
            height: 1px;
            position: relative;
            background: repeating-linear-gradient(90deg, var(--orange) 0, var(--orange) 6px, transparent 6px, transparent 13px);
        }

        .hv-plane {
            font-size: 16px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: var(--white);
            padding: 0 4px;
        }

        .hv-t {
            font-size: 11px;
            color: var(--gray2);
        }

        .hv-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
            margin-bottom: 16px;
        }

        .hvt {
            font-size: 12px;
            padding: 4px 10px;
            border-radius: 6px;
            background: var(--off);
            color: var(--gray);
            border: 1px solid var(--gray-line);
        }

        .hvt.on {
            background: var(--orange-pale);
            color: var(--orange);
            border-color: rgba(232, 82, 26, 0.2);
        }

        .hv-stat {
            background: var(--off);
            border-radius: 10px;
            padding: 14px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .hv-stat-l {
            font-size: 12.5px;
            color: var(--gray);
        }

        .hv-stat-r {
            font-family: 'Syne', sans-serif;
            font-size: 20px;
            font-weight: 800;
            color: var(--orange);
        }

        .hv-float {
            background: var(--orange);
            color: var(--white);
            border-radius: 12px;
            padding: 12px 16px;
            font-family: 'Syne', sans-serif;
            font-size: 13px;
            font-weight: 700;
            box-shadow: 0 4px 20px rgba(232, 82, 26, 0.28);
            margin-top: 14px;
            display: inline-block;
        }

        .hv-float small {
            display: block;
            font-size: 11px;
            font-weight: 400;
            opacity: 0.78;
        }

        /* ── SECTIONS ── */
        .sec {
            padding: 90px 5%;
        }

        .sec-inner {
            max-width: 1200px;
            margin: 0 auto;
        }

        .sec-alt {
            background: var(--off);
        }

        .sec-dark {
            background: var(--black);
            color: var(--white);
        }

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

        .sec-title {
            font-size: clamp(26px, 3vw, 42px);
            font-weight: 800;
            letter-spacing: -0.8px;
            margin-bottom: 14px;
            color: var(--ink);
        }

        .sec-title em {
            color: var(--orange);
            font-style: normal;
        }

        .sec-sub {
            font-size: 16px;
            color: var(--gray);
            max-width: 520px;
            margin-bottom: 52px;
            line-height: 1.75;
        }

        .sec-title-white {
            color: var(--white) !important;
        }

        /* ── S2 VALEUR ── */
        .valeur-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2px;
            background: var(--gray-line);
            border: 1px solid var(--gray-line);
            border-radius: 16px;
            overflow: hidden;
        }

        .val-bloc {
            background: var(--white);
            padding: 40px 30px;
            transition: background 0.2s;
        }

        .val-bloc:hover {
            background: var(--off);
        }

        .val-ico {
            width: 54px;
            height: 54px;
            border-radius: 14px;
            background: var(--orange-pale);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            margin-bottom: 18px;
        }

        .val-title {
            font-family: 'Syne', sans-serif;
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 10px;
            color: var(--ink);
        }

        .val-text {
            font-size: 14.5px;
            color: var(--gray);
            line-height: 1.7;
        }

        .valeur-quote {
            text-align: center;
            margin-top: 44px;
            font-family: 'Syne', sans-serif;
            font-size: clamp(17px, 2.2vw, 26px);
            font-weight: 700;
            color: var(--ink);
            max-width: 620px;
            margin-left: auto;
            margin-right: auto;
            padding: 30px 28px;
            background: var(--off);
            border-radius: 14px;
            border-left: 4px solid var(--orange);
        }

        .valeur-quote em {
            color: var(--orange);
            font-style: normal;
        }

        /* ── S3 SOLUTIONS ── */
        .sol-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-bottom: 36px;
        }

        .sol-card {
            background: var(--white);
            border: 1.5px solid var(--gray-line);
            border-radius: 16px;
            padding: 32px 26px;
            cursor: pointer;
            transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
            position: relative;
            overflow: hidden;
        }

        .sol-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--orange);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.3s;
        }

        .sol-card:hover {
            border-color: rgba(232, 82, 26, 0.3);
            transform: translateY(-5px);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
        }

        .sol-card:hover::after {
            transform: scaleX(1);
        }

        .sol-num {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            font-weight: 700;
            color: var(--orange);
            margin-bottom: 12px;
        }

        .sol-ico {
            font-size: 30px;
            margin-bottom: 14px;
        }

        .sol-title {
            font-family: 'Syne', sans-serif;
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 10px;
            color: var(--ink);
        }

        .sol-text {
            font-size: 14px;
            color: var(--gray);
            line-height: 1.7;
            margin-bottom: 18px;
        }

        .sol-arr {
            font-size: 18px;
            color: var(--orange);
            transition: transform 0.2s;
            display: block;
        }

        .sol-card:hover .sol-arr {
            transform: translateX(6px);
        }

        /* ── S4 CHINA TRIP ── */
        #china-trip {
            background: var(--black);
            overflow: hidden;
            padding: 0;
        }

        .trip-grid {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            min-height: 540px;
        }

        .trip-left {
            padding: 80px 60px 80px 5%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .trip-tag {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 2.5px;
            text-transform: uppercase;
            color: var(--orange);
            margin-bottom: 16px;
        }

        .trip-title {
            font-size: clamp(28px, 3.8vw, 50px);
            font-weight: 800;
            letter-spacing: -1px;
            color: var(--white);
            margin-bottom: 18px;
            line-height: 1.08;
        }

        .trip-title em {
            color: var(--orange);
            font-style: normal;
        }

        .trip-text {
            font-size: 15.5px;
            color: rgba(255, 255, 255, 0.62);
            line-height: 1.8;
            margin-bottom: 28px;
            max-width: 400px;
        }

        .trip-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 34px;
        }

        .trip-item {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.8);
        }

        .trip-item::before {
            content: '✓';
            width: 20px;
            height: 20px;
            min-width: 20px;
            border-radius: 50%;
            background: var(--orange);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: 800;
            color: var(--white);
        }

        .btn-trip {
            background: transparent;
            color: var(--white);
            border: 2px solid var(--orange);
            padding: 13px 24px;
            border-radius: 9px;
            font-weight: 700;
            font-size: 15px;
            font-family: 'Syne', sans-serif;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: background 0.2s;
            cursor: pointer;
            width: fit-content;
        }

        .btn-trip:hover {
            background: var(--orange);
        }

        .trip-right {
            background: linear-gradient(160deg, #1a0a02 0%, #2b1005 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 50px 40px;
            position: relative;
            overflow: hidden;
        }

        .trip-right::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 70% 55% at 50% 35%, rgba(232, 82, 26, 0.16) 0%, transparent 70%);
        }

        .trip-art {
            position: relative;
            z-index: 1;
            text-align: center;
            width: 100%;
        }

        .trip-art .tf {
            font-size: 72px;
            margin-bottom: 18px;
            display: block;
        }

        .trip-cities {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .tc {
            background: rgba(255, 255, 255, 0.07);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 11px 18px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 13.5px;
            color: rgba(255, 255, 255, 0.78);
        }

        .tc span {
            color: var(--orange);
            font-size: 12px;
            font-weight: 600;
        }

        /* ── S5 TIMELINE ── */
        .tl-wrap {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0;
            position: relative;
        }

        .tl-line {
            position: absolute;
            top: 27px;
            left: 12.5%;
            right: 12.5%;
            height: 2px;
            background: var(--gray-line);
            z-index: 0;
        }

        .tl-fill {
            position: absolute;
            top: 27px;
            left: 12.5%;
            width: 0;
            height: 2px;
            background: var(--orange);
            z-index: 1;
            transition: width 1.3s ease;
        }

        .tl-fill.go {
            width: 75%;
        }

        .ts {
            text-align: center;
            padding: 0 18px;
            position: relative;
            z-index: 2;
        }

        .ts-ico {
            width: 54px;
            height: 54px;
            border-radius: 50%;
            background: var(--white);
            border: 2px solid var(--gray-line);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 18px;
            font-size: 20px;
            position: relative;
            transition: border-color 0.3s, background 0.3s;
        }

        .ts-ico .tsn {
            position: absolute;
            top: -6px;
            right: -6px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--orange);
            color: var(--white);
            font-family: 'Syne', sans-serif;
            font-size: 10px;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .ts.act .ts-ico {
            border-color: var(--orange);
            background: var(--orange-pale);
        }

        .ts-title {
            font-family: 'Syne', sans-serif;
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 8px;
            color: var(--ink);
        }

        .ts-txt {
            font-size: 13.5px;
            color: var(--gray);
            line-height: 1.65;
        }

        /* ── S6 TÉMOIGNAGES ── */
        .slider-wrap {
            overflow: hidden;
        }

        .slider-track {
            display: flex;
            transition: transform 0.5s cubic-bezier(.4, 0, .2, 1);
        }

        .slide {
            min-width: 100%;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        .tc-card {
            background: var(--white);
            border: 1.5px solid var(--gray-line);
            border-radius: 16px;
            padding: 28px;
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        .tc-card:hover {
            border-color: rgba(232, 82, 26, 0.25);
            box-shadow: 0 6px 28px rgba(0, 0, 0, 0.07);
        }

        .tc-type {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: var(--orange);
            background: var(--orange-pale);
            padding: 4px 10px;
            border-radius: 6px;
            margin-bottom: 14px;
        }

        .stars {
            color: var(--orange);
            font-size: 13px;
            letter-spacing: 2px;
            margin-bottom: 12px;
        }

        .tc-text {
            font-size: 14.5px;
            color: var(--gray);
            line-height: 1.75;
            font-style: italic;
            margin-bottom: 18px;
        }

        .tc-author {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .tc-av {
            width: 40px;
            height: 40px;
            min-width: 40px;
            border-radius: 50%;
            background: var(--orange);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Syne', sans-serif;
            font-size: 13px;
            font-weight: 800;
            color: var(--white);
        }

        .tc-name {
            font-family: 'Syne', sans-serif;
            font-size: 14px;
            font-weight: 700;
            color: var(--ink);
        }

        .tc-role {
            font-size: 12.5px;
            color: var(--gray2);
        }

        .slider-dots {
            display: flex;
            gap: 8px;
            justify-content: center;
            margin-top: 28px;
        }

        .sdot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--gray-line);
            cursor: pointer;
            border: none;
            transition: background 0.2s, width 0.2s;
        }

        .sdot.on {
            background: var(--orange);
            width: 24px;
            border-radius: 4px;
        }

        /* ── S7 CHIFFRES ── */
        #chiffres {
            background: var(--black);
        }

        .chiffres-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2px;
            background: rgba(255, 255, 255, 0.07);
            border: 1px solid rgba(255, 255, 255, 0.07);
            border-radius: 16px;
            overflow: hidden;
        }

        .c-bloc {
            background: #1a1a1a;
            padding: 44px 28px;
            text-align: center;
            transition: background 0.2s;
        }

        .c-bloc:hover {
            background: #221008;
        }

        .c-ico {
            font-size: 26px;
            margin-bottom: 10px;
        }

        .c-num {
            font-family: 'Syne', sans-serif;
            font-size: clamp(30px, 4vw, 48px);
            font-weight: 800;
            color: var(--orange);
            line-height: 1;
            margin-bottom: 8px;
        }

        .c-label {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.5);
        }

        /* ── S8 CTA FINAL ── */
        #cta-final {
            background: linear-gradient(135deg, var(--orange) 0%, #C03A08 100%);
            padding: 96px 5%;
            text-align: center;
            color: var(--white);
            position: relative;
            overflow: hidden;
        }

        #cta-final::before {
            content: '';
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 28px);
        }

        .ctaf {
            position: relative;
            z-index: 1;
            max-width: 640px;
            margin: 0 auto;
        }

        .ctaf h2 {
            font-size: clamp(28px, 4vw, 48px);
            font-weight: 800;
            letter-spacing: -1px;
            margin-bottom: 18px;
        }

        .ctaf p {
            font-size: 17px;
            color: rgba(255, 255, 255, 0.75);
            margin-bottom: 38px;
            line-height: 1.7;
        }

        .ctaf-btns {
            display: flex;
            gap: 14px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .btn-white {
            background: var(--white);
            color: var(--orange);
            padding: 14px 28px;
            border-radius: 9px;
            font-weight: 700;
            font-size: 15px;
            font-family: 'Syne', sans-serif;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: transform 0.15s, box-shadow 0.2s;
            border: none;
            cursor: pointer;
        }

        .btn-white:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
        }

        .btn-wout {
            background: transparent;
            color: var(--white);
            border: 2px solid rgba(255, 255, 255, 0.38);
            padding: 13px 28px;
            border-radius: 9px;
            font-weight: 600;
            font-size: 15px;
            font-family: 'Syne', sans-serif;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: border-color 0.2s, background 0.2s;
            cursor: pointer;
        }

        .btn-wout:hover {
            border-color: rgba(255, 255, 255, 0.9);
            background: rgba(255, 255, 255, 0.1);
        }

        /* ── FOOTER ── */
        footer {
            background: var(--black);
            color: rgba(255, 255, 255, 0.55);
            padding: 60px 5% 28px;
        }

        .fg {
            display: grid;
            grid-template-columns: 2.2fr 1fr 1fr 1fr;
            gap: 40px;
            max-width: 1200px;
            margin: 0 auto 36px;
        }

        .fb-logo {
            font-family: 'Syne', sans-serif;
            font-size: 20px;
            font-weight: 800;
            color: var(--white);
            margin-bottom: 12px;
            display: block;
        }

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

        .fb p {
            font-size: 13.5px;
            line-height: 1.75;
            max-width: 240px;
        }

        .fflags {
            display: flex;
            gap: 8px;
            margin-top: 14px;
            font-size: 18px;
        }

        .fc h4 {
            font-family: 'Syne', sans-serif;
            font-size: 13px;
            font-weight: 700;
            color: var(--white);
            margin-bottom: 16px;
        }

        .fc a {
            display: block;
            font-size: 13.5px;
            margin-bottom: 9px;
            transition: color 0.18s;
        }

        .fc a:hover {
            color: var(--orange);
        }

        .fbot {
            max-width: 1200px;
            margin: 0 auto;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 8px;
            font-size: 12.5px;
        }

        /* ── CONTACT SECTION ── */
        .contact-grid {
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 60px;
            align-items: start;
        }

        .cinfo-item {
            display: flex;
            align-items: center;
            gap: 14px;
            background: var(--off);
            border-radius: 10px;
            padding: 14px 18px;
            border: 1px solid var(--gray-line);
            margin-bottom: 12px;
        }

        .cinfo-ico {
            font-size: 18px;
        }

        .cinfo-label {
            font-size: 12px;
            color: var(--gray2);
            margin-bottom: 2px;
        }

        .cinfo-val {
            font-size: 14px;
            font-weight: 500;
            color: var(--ink);
        }

        .cform {
            background: var(--off);
            border-radius: 18px;
            padding: 34px;
        }

        .cf-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px;
            margin-bottom: 14px;
        }

        .cf-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .cf-group label {
            font-size: 12.5px;
            color: var(--gray);
            font-weight: 600;
        }

        .cf-group input,
        .cf-group select,
        .cf-group textarea {
            background: var(--white);
            border: 1.5px solid var(--gray-line);
            border-radius: 9px;
            padding: 11px 14px;
            font-size: 14px;
            color: var(--ink);
            font-family: 'Instrument Sans', sans-serif;
            outline: none;
            transition: border-color 0.2s;
            width: 100%;
        }

        .cf-group input:focus,
        .cf-group select:focus,
        .cf-group textarea:focus {
            border-color: var(--orange);
        }

        .cf-group textarea {
            resize: vertical;
            min-height: 108px;
        }

        .cf-submit {
            width: 100%;
            background: var(--orange);
            color: var(--white);
            padding: 14px;
            border-radius: 9px;
            font-weight: 700;
            font-size: 15px;
            font-family: 'Syne', sans-serif;
            border: none;
            cursor: pointer;
            transition: background 0.2s, transform 0.15s;
            margin-top: 14px;
        }

        .cf-submit:hover {
            background: var(--orange2);
            transform: translateY(-1px);
        }

        /* ── ANIMATIONS ── */
        .fu {
            opacity: 0;
            transform: translateY(26px);
            transition: opacity 0.58s ease, transform 0.58s ease;
        }

        .fu.vis {
            opacity: 1;
            transform: none;
        }

        .fu.d1 {
            transition-delay: 0.1s;
        }

        .fu.d2 {
            transition-delay: 0.2s;
        }

        .fu.d3 {
            transition-delay: 0.3s;
        }

        /* ── RESPONSIVE ── */
        @media(max-width:1024px) {

            .hero-inner,
            .contact-grid {
                grid-template-columns: 1fr;
            }

            .hero-visual {
                display: none;
            }

            .sol-grid,
            .chiffres-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .tl-wrap {
                grid-template-columns: repeat(2, 1fr);
                gap: 32px;
            }

            .tl-line,
            .tl-fill {
                display: none;
            }

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

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

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

            .trip-left {
                padding: 60px 5%;
            }
        }

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

            .burger {
                display: flex;
            }

            .sol-grid,
            .chiffres-grid,
            .tl-wrap,
            .slide {
                grid-template-columns: 1fr;
            }

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

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

            .cf-row {
                grid-template-columns: 1fr;
            }

            .trip-right {
                display: none;
            }
        }

    </style>
</head>
<body>

    <!-- ═══ NAV ═══ -->
    <nav id="nav">
        <a href="#accueil" class="logo">Pirras<span>'</span>Associé</a>
        <div class="nav-links">
            <a href="#accueil" class="act">Accueil</a>
            <a href="#a-propos">À propos</a>
            <div class="ndrop">
                <span>Services</span>
                <div class="dmenu">
                    <a href="#solutions">🏪 Centrale d'achat</a>
                    <a href="#solutions">🚢 Logistique & groupage</a>
                    <a href="#solutions">📊 Centrale de vente</a>
                    <a href="#china-trip">✈️ China Business Trip</a>
                </div>
            </div>
            <a href="#secteurs">Secteurs</a>
            <div class="ndrop">
                <span>Ressources</span>
                <div class="dmenu">
                    <a href="#ressources">✍️ Blog</a>
                    <a href="#ressources">📘 Guides</a>
                    <a href="#ressources">📰 Actualités</a>
                </div>
            </div>
            <a href="#temoignages">Témoignages</a>
            <a href="#comment-ca-marche">Comment ça marche</a>
            <a href="#contact" class="nav-cta">Demander un accompagnement →</a>
        </div>
        <div class="burger" id="burger" onclick="toggleMenu()"><span></span><span></span><span></span></div>
    </nav>

    <!-- ═══ MOBILE MENU ═══ -->
    <div class="mmenu" id="mmenu">
        <a href="#accueil" onclick="closeMenu()">Accueil</a>
        <a href="#a-propos" onclick="closeMenu()">À propos</a>
        <div class="mh">Services</div>
        <div class="msub">
            <a href="#solutions" onclick="closeMenu()">Centrale d'achat</a>
            <a href="#solutions" onclick="closeMenu()">Logistique & groupage</a>
            <a href="#solutions" onclick="closeMenu()">Centrale de vente</a>
            <a href="#china-trip" onclick="closeMenu()">China Business Trip</a>
        </div>
        <a href="#secteurs" onclick="closeMenu()">Secteurs</a>
        <a href="#temoignages" onclick="closeMenu()">Témoignages</a>
        <a href="#comment-ca-marche" onclick="closeMenu()">Comment ça marche</a>
        <a href="#contact" class="mo" onclick="closeMenu()">→ Demander un accompagnement</a>
    </div>

    <!-- ══════════════════════════════════════════ -->
    <!-- SECTION 1 — HERO                           -->
    <!-- ══════════════════════════════════════════ -->
    <section id="accueil">
        <div class="hero-bg-shape"></div>
        <div class="hero-bg-dots"></div>
        <div class="hero-bottom-bar"></div>
        <div class="hero-inner">
            <!-- LEFT -->
            <div>
                <div class="hero-pill fu">
                    <div class="hero-pill-dot"></div>Votre pont stratégique Chine · Afrique
                </div>
                <h1 class="hero-title fu d1">Votre passerelle<br><em>stratégique</em><br>entre la Chine<br>et l'Afrique</h1>
                <div class="hero-services fu d2">
                    <span class="hs on">Sourcing</span>
                    <span class="hs on">Logistique</span>
                    <span class="hs on">Vente</span>
                    <span class="hs">Investissement</span>
                </div>
                <p class="hero-sub fu d2">Nous accompagnons les entrepreneurs africains dans leurs échanges avec la Chine — de l'achat groupé jusqu'à la distribution locale et l'investissement stratégique.</p>
                <div class="hero-btns fu d3">
                    <a href="#contact" class="btn-orange">Demander un accompagnement →</a>
                    <a href="#china-trip" class="btn-border">✈️ Rejoindre le China Business Trip</a>
                </div>
            </div>
            <!-- RIGHT CARD -->
            <div class="hero-visual fu d2">
                <div class="hv-card">
                    <div class="hv-route">
                        <div class="hv-city">
                            <div class="hv-flag">🇨🇳</div>
                            <div class="hv-cname">Guangzhou</div>
                        </div>
                        <div class="hv-line">
                            <div class="hv-dashes"><span class="hv-plane">✈️</span></div>
                            <div class="hv-t">Vol direct · ~10h</div>
                        </div>
                        <div class="hv-city">
                            <div class="hv-flag">🌍</div>
                            <div class="hv-cname">Abidjan</div>
                        </div>
                    </div>
                    <div class="hv-tags">
                        <span class="hvt on">Centrale d'achat</span>
                        <span class="hvt on">Groupage</span>
                        <span class="hvt">Distribution</span>
                        <span class="hvt on">Business Trip</span>
                    </div>
                    <div class="hv-stat">
                        <span class="hv-stat-l">Économie moyenne client</span>
                        <span class="hv-stat-r">jusqu'à 40%</span>
                    </div>
                </div>
                <div class="hv-float">+200 clients accompagnés <small>depuis 2018 · Abidjan</small></div>
            </div>
        </div>
    </section>

    <!-- ══════════════════════════════════════════ -->
    <!-- SECTION 2 — PROPOSITION DE VALEUR          -->
    <!-- ══════════════════════════════════════════ -->
    <section class="sec sec-alt" id="valeur">
        <div class="sec-inner">
            <div style="text-align:center;margin-bottom:48px;" class="fu">
                <div class="sec-tag">Notre proposition de valeur</div>
                <h2 class="sec-title">Pourquoi choisir <em>Pirras'Associé</em> ?</h2>
            </div>
            <div class="valeur-grid fu">
                <div class="val-bloc">
                    <div class="val-ico">🔍</div>
                    <div class="val-title">Sourcing sécurisé</div>
                    <div class="val-text">Accès direct aux meilleurs fournisseurs chinois vérifiés. Contrôle qualité sur place, négociation des prix et gestion des paiements en toute sécurité.</div>
                </div>
                <div class="val-bloc">
                    <div class="val-ico">🚢</div>
                    <div class="val-title">Logistique optimisée</div>
                    <div class="val-text">Groupage maritime et aérien, dédouanement, suivi en temps réel. De Guangzhou jusqu'à votre entrepôt en Afrique francophone.</div>
                </div>
                <div class="val-bloc">
                    <div class="val-ico">📈</div>
                    <div class="val-title">Développement business</div>
                    <div class="val-text">Au-delà de l'import, nous vous aidons à vendre. Réseau de distribution, stratégie commerciale et accompagnement à la croissance.</div>
                </div>
            </div>
            <div class="valeur-quote fu">
                "Nous ne transportons pas des marchandises.<br>Nous <em>construisons des business.</em>"
            </div>
        </div>
    </section>

    <!-- ══════════════════════════════════════════ -->
    <!-- SECTION 3 — NOS SOLUTIONS                  -->
    <!-- ══════════════════════════════════════════ -->
    <section class="sec" id="solutions">
        <div class="sec-inner">
            <div class="sec-tag fu">Nos solutions</div>
            <h2 class="sec-title fu">3 piliers pour <em>faire grandir</em><br>votre activité</h2>
            <p class="sec-sub fu">Des services complémentaires conçus pour couvrir l'intégralité de votre chaîne de valeur.</p>
            <div class="sol-grid">
                <div class="sol-card fu">
                    <div class="sol-num">01 —</div>
                    <div class="sol-ico">🏪</div>
                    <div class="sol-title">Centrale d'achat</div>
                    <div class="sol-text">Accédez aux fournisseurs chinois les plus fiables. Nous négocions, vérifions la qualité et consolidons vos commandes pour maximiser votre pouvoir d'achat.</div>
                    <span class="sol-arr">→</span>
                </div>
                <div class="sol-card fu d1">
                    <div class="sol-num">02 —</div>
                    <div class="sol-ico">🚢</div>
                    <div class="sol-title">Logistique & groupage</div>
                    <div class="sol-text">Expédition groupée ou conteneur complet, gestion douanière, et livraison porte-à-porte depuis la Chine vers toute l'Afrique francophone.</div>
                    <span class="sol-arr">→</span>
                </div>
                <div class="sol-card fu d2">
                    <div class="sol-num">03 —</div>
                    <div class="sol-ico">📊</div>
                    <div class="sol-title">Centrale de vente Abidjan</div>
                    <div class="sol-text">Distribution locale, mise en marché et réseau de revendeurs à Abidjan et en Afrique de l'Ouest. Nous vendons vos produits pour vous.</div>
                    <span class="sol-arr">→</span>
                </div>
            </div>
            <div style="text-align:center;" class="fu">
                <a href="#contact" class="btn-orange">Découvrir nos services →</a>
            </div>
        </div>
    </section>

    <!-- ══════════════════════════════════════════ -->
    <!-- SECTION 4 — CHINA BUSINESS TRIP           -->
    <!-- ══════════════════════════════════════════ -->
    <section id="china-trip">
        <div class="trip-grid">
            <div class="trip-left fu">
                <div class="trip-tag">✈️ SERVICE PREMIUM</div>
                <h2 class="trip-title">China<br><em>Business Trip</em></h2>
                <p class="trip-text">Voyagez en Chine avec une équipe expérimentée. Rencontrez les bons fournisseurs, visitez les foires, et signez des contrats — sans perdre ni temps ni argent.</p>
                <div class="trip-list">
                    <div class="trip-item">Visa & logistique de voyage inclus</div>
                    <div class="trip-item">Interprète professionnel mandarin/français</div>
                    <div class="trip-item">Rendez-vous fournisseurs pré-qualifiés</div>
                    <div class="trip-item">Visite Foire de Canton & marchés grossistes</div>
                    <div class="trip-item">Accompagnement négociation & contrats</div>
                </div>
                <a href="#contact" class="btn-trip">Voir les prochaines dates →</a>
            </div>
            <div class="trip-right">
                <div class="trip-art">
                    <span class="tf">🇨🇳</span>
                    <div class="trip-cities">
                        <div class="tc">Guangzhou — Marché Yiwu <span>Incontournable</span></div>
                        <div class="tc">Shenzhen — Électronique <span>High-tech</span></div>
                        <div class="tc">Foire de Canton <span>2× / an</span></div>
                        <div class="tc">Hangzhou — Textile & mode <span>Premium</span></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ══════════════════════════════════════════ -->
    <!-- SECTION 5 — COMMENT ÇA MARCHE             -->
    <!-- ══════════════════════════════════════════ -->
    <section class="sec sec-alt" id="comment-ca-marche">
        <div class="sec-inner">
            <div style="text-align:center;margin-bottom:54px;">
                <div class="sec-tag fu">Notre processus</div>
                <h2 class="sec-title fu">Comment <em>ça marche</em> ?</h2>
                <p class="sec-sub fu" style="margin:0 auto;">Un parcours simple et transparent, de votre idée jusqu'à la livraison — et au-delà.</p>
            </div>
            <div class="tl-wrap" id="tlWrap">
                <div class="tl-line"></div>
                <div class="tl-fill" id="tlFill"></div>
                <div class="ts act fu">
                    <div class="ts-ico">🎯<div class="tsn">1</div>
                    </div>
                    <div class="ts-title">Analyse projet</div>
                    <div class="ts-txt">Consultation gratuite pour cadrer votre besoin, vos volumes et vos objectifs de rentabilité.</div>
                </div>
                <div class="ts act fu d1">
                    <div class="ts-ico">🔍<div class="tsn">2</div>
                    </div>
                    <div class="ts-title">Sourcing</div>
                    <div class="ts-txt">Identification des meilleurs fournisseurs, devis comparatifs et contrôle qualité sur place.</div>
                </div>
                <div class="ts act fu d2">
                    <div class="ts-ico">🚢<div class="tsn">3</div>
                    </div>
                    <div class="ts-title">Logistique</div>
                    <div class="ts-txt">Groupage, expédition, dédouanement et suivi en temps réel jusqu'à votre entrepôt.</div>
                </div>
                <div class="ts act fu d3">
                    <div class="ts-ico">🎁<div class="tsn">4</div>
                    </div>
                    <div class="ts-title">Livraison / Vente</div>
                    <div class="ts-txt">Réception des marchandises et accompagnement à la mise en marché si souhaité.</div>
                </div>
            </div>
            <div style="text-align:center;margin-top:44px;" class="fu">
                <a href="#contact" class="btn-orange">Démarrer mon projet →</a>
            </div>
        </div>
    </section>

    <!-- ══════════════════════════════════════════ -->
    <!-- SECTION 6 — TÉMOIGNAGES                   -->
    <!-- ══════════════════════════════════════════ -->
    <section class="sec" id="temoignages">
        <div class="sec-inner">
            <div class="sec-tag fu">Témoignages</div>
            <h2 class="sec-title fu">Ils nous font <em>confiance</em></h2>
            <p class="sec-sub fu">Entrepreneurs, importateurs, distributeurs — ils ont transformé leur activité avec Pirras'Associé.</p>
            <div class="slider-wrap fu">
                <div class="slider-track" id="sliderTrack">
                    <!-- Slide 1 -->
                    <div class="slide">
                        <div class="tc-card">
                            <div class="tc-type">✈️ China Business Trip</div>
                            <div class="stars">★★★★★</div>
                            <p class="tc-text">"8 jours à Guangzhou parfaitement organisés. J'ai rencontré 12 fournisseurs qualifiés et signé 3 contrats. Seul, je n'aurais jamais pu faire ça."</p>
                            <div class="tc-author">
                                <div class="tc-av">MB</div>
                                <div>
                                    <div class="tc-name">Mamadou Bah</div>
                                    <div class="tc-role">Distribution BTP · Dakar</div>
                                </div>
                            </div>
                        </div>
                        <div class="tc-card">
                            <div class="tc-type">🚢 Logistique</div>
                            <div class="stars">★★★★★</div>
                            <p class="tc-text">"Premier conteneur reçu sans aucun problème. Suivi en temps réel, dédouanement géré, livraison à mon entrepôt. Exactement comme promis."</p>
                            <div class="tc-author">
                                <div class="tc-av" style="background:#2a6049;">AK</div>
                                <div>
                                    <div class="tc-name">Awa Koné</div>
                                    <div class="tc-role">Textile & mode · Abidjan</div>
                                </div>
                            </div>
                        </div>
                        <div class="tc-card">
                            <div class="tc-type">🏪 Centrale d'achat</div>
                            <div class="stars">★★★★★</div>
                            <p class="tc-text">"J'ai économisé 35% sur mes achats. La qualité est supérieure à mes anciens fournisseurs et les délais respectés. Pirras c'est vraiment mon associé."</p>
                            <div class="tc-author">
                                <div class="tc-av" style="background:#555;">FT</div>
                                <div>
                                    <div class="tc-name">Fatou Touré</div>
                                    <div class="tc-role">Électronique · Bamako</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Slide 2 -->
                    <div class="slide">
                        <div class="tc-card">
                            <div class="tc-type">📊 Centrale de vente</div>
                            <div class="stars">★★★★★</div>
                            <p class="tc-text">"Grâce à leur réseau de distribution à Abidjan, mes produits sont en rayon dans 40 points de vente en 3 semaines seulement."</p>
                            <div class="tc-author">
                                <div class="tc-av" style="background:#7a3a10;">KD</div>
                                <div>
                                    <div class="tc-name">Kofi Diallo</div>
                                    <div class="tc-role">Cosmétiques · Accra</div>
                                </div>
                            </div>
                        </div>
                        <div class="tc-card">
                            <div class="tc-type">✈️ China Business Trip</div>
                            <div class="stars">★★★★★</div>
                            <p class="tc-text">"L'interprète était top, les fournisseurs sérieux. Pirras nous a guidés sur toutes les négociations. Le ROI du voyage était là dès le 1er mois."</p>
                            <div class="tc-author">
                                <div class="tc-av" style="background:#1a4a6a;">SC</div>
                                <div>
                                    <div class="tc-name">Sékou Camara</div>
                                    <div class="tc-role">Import-export · Conakry</div>
                                </div>
                            </div>
                        </div>
                        <div class="tc-card">
                            <div class="tc-type">🚢 Logistique</div>
                            <div class="stars">★★★★★</div>
                            <p class="tc-text">"Le groupage m'a permis de démarrer avec un budget réduit. Je n'avais pas besoin d'un conteneur entier. Solution parfaite pour les petits volumes."</p>
                            <div class="tc-author">
                                <div class="tc-av" style="background:#3a5a2a;">NK</div>
                                <div>
                                    <div class="tc-name">Nadia Kouyaté</div>
                                    <div class="tc-role">Quincaillerie · Lomé</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slider-dots">
                    <button class="sdot on" onclick="goSlide(0)"></button>
                    <button class="sdot" onclick="goSlide(1)"></button>
                </div>
            </div>
        </div>
    </section>

    <!-- ══════════════════════════════════════════ -->
    <!-- SECTION 7 — CHIFFRES CLÉS                 -->
    <!-- ══════════════════════════════════════════ -->
    <section id="chiffres">
        <div class="sec-inner">
            <div style="text-align:center;margin-bottom:48px;" class="fu">
                <div class="sec-tag" style="color:var(--orange2);">En chiffres</div>
                <h2 class="sec-title sec-title-white">Notre <em>impact</em> en quelques chiffres</h2>
            </div>
            <div class="chiffres-grid fu">
                <div class="c-bloc">
                    <div class="c-ico">🏆</div>
                    <div class="c-num">+20 ans</div>
                    <div class="c-label">d'expérience Chine-Afrique</div>
                </div>
                <div class="c-bloc">
                    <div class="c-ico">📦</div>
                    <div class="c-num">+500</div>
                    <div class="c-label">conteneurs traités</div>
                </div>
                <div class="c-bloc">
                    <div class="c-ico">🤝</div>
                    <div class="c-num">+200</div>
                    <div class="c-label">clients accompagnés</div>
                </div>
                <div class="c-bloc">
                    <div class="c-ico">🌍</div>
                    <div class="c-num">2</div>
                    <div class="c-label">continents · Chine + Afrique</div>
                </div>
            </div>
        </div>
    </section>

    <!-- ══════════════════════════════════════════ -->
    <!-- SECTION 8 — CTA FINAL                     -->
    <!-- ══════════════════════════════════════════ -->
    <section id="cta-final">
        <div class="ctaf fu">
            <h2>Parlons de votre projet</h2>
            <p>Que vous souhaitiez importer, vendre, voyager en Chine ou développer votre réseau — un expert Pirras'Associé vous répond sous 24h.</p>
            <div class="ctaf-btns">
                <a href="#contact" class="btn-white">Demander un accompagnement →</a>
                <a href="#china-trip" class="btn-wout">✈️ Rejoindre le China Business Trip</a>
            </div>
        </div>
    </section>

    <!-- ══════════════════════════════════════════ -->
    <!-- À PROPOS                                   -->
    <!-- ══════════════════════════════════════════ -->
    <section class="sec" style="background:var(--off2);" id="a-propos">
        <div class="sec-inner">
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;">
                <div class="fu">
                    <div class="sec-tag">Qui sommes-nous</div>
                    <h2 class="sec-title">Votre <em>partenaire</em><br>de confiance</h2>
                    <p style="color:var(--gray);margin-bottom:16px;line-height:1.8;">Pirras'Associé est né d'une conviction forte : les entrepreneurs africains méritent un accès direct, sécurisé et rentable aux marchés asiatiques — sans intermédiaires inutiles.</p>
                    <p style="color:var(--gray);margin-bottom:32px;line-height:1.8;">Nous opérons depuis l'Afrique francophone avec des équipes et partenaires en Chine. Pirras'Associé, c'est votre associé, pas un simple prestataire.</p>
                    <a href="#contact" class="btn-orange">Nous contacter →</a>
                </div>
                <div class="fu" style="background:var(--white);border:1.5px solid var(--gray-line);border-radius:18px;padding:32px;box-shadow:0 4px 28px rgba(0,0,0,0.06);">
                    <h4 style="font-family:'Syne',sans-serif;font-size:14px;font-weight:700;margin-bottom:22px;color:var(--ink2);">Notre parcours</h4>
                    <div style="position:relative;padding-left:26px;">
                        <div style="position:absolute;left:8px;top:0;bottom:0;width:1px;background:var(--gray-line);"></div>
                        <div style="position:relative;margin-bottom:22px;">
                            <div style="position:absolute;left:-22px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 3px var(--orange-pale);"></div>
                            <div style="font-size:11px;color:var(--orange);font-weight:700;margin-bottom:2px;">2018</div>
                            <div style="font-size:14px;color:var(--ink2);">Création à Abidjan. Premiers voyages d'exploration en Chine.</div>
                        </div>
                        <div style="position:relative;margin-bottom:22px;">
                            <div style="position:absolute;left:-22px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 3px var(--orange-pale);"></div>
                            <div style="font-size:11px;color:var(--orange);font-weight:700;margin-bottom:2px;">2020</div>
                            <div style="font-size:14px;color:var(--ink2);">Lancement de la centrale d'achat. 50+ clients la 1ère année.</div>
                        </div>
                        <div style="position:relative;margin-bottom:22px;">
                            <div style="position:absolute;left:-22px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 3px var(--orange-pale);"></div>
                            <div style="font-size:11px;color:var(--orange);font-weight:700;margin-bottom:2px;">2022</div>
                            <div style="font-size:14px;color:var(--ink2);">Ouverture du service logistique & groupage Guangzhou → Afrique.</div>
                        </div>
                        <div style="position:relative;">
                            <div style="position:absolute;left:-22px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 3px var(--orange-pale);"></div>
                            <div style="font-size:11px;color:var(--orange);font-weight:700;margin-bottom:2px;">2024</div>
                            <div style="font-size:14px;color:var(--ink2);">Centrale de vente Abidjan + China Business Trips structurés.</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ══════════════════════════════════════════ -->
    <!-- SECTEURS                                   -->
    <!-- ══════════════════════════════════════════ -->
    <section class="sec sec-alt" id="secteurs">
        <div class="sec-inner">
            <div class="sec-tag fu">Secteurs d'activité</div>
            <h2 class="sec-title fu">Nous intervenons dans<br><em>tous les secteurs</em> porteurs</h2>
            <p class="sec-sub fu">Les marchés les plus dynamiques de l'économie africaine.</p>
            <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:14px;" class="fu">
                <div style="background:var(--white);border-radius:12px;padding:20px;border:1.5px solid var(--gray-line);transition:border-color 0.2s,transform 0.2s;" onmouseover="this.style.borderColor='rgba(232,82,26,0.3)';this.style.transform='translateY(-3px)'" onmouseout="this.style.borderColor='var(--gray-line)';this.style.transform=''">
                    <div style="font-size:24px;margin-bottom:10px;">👗</div>
                    <div style="font-family:'Syne',sans-serif;font-size:15px;font-weight:700;margin-bottom:5px;color:var(--ink);">Textile & mode</div>
                    <div style="font-size:13px;color:var(--gray);">Prêt-à-porter, tissus, accessoires.</div>
                </div>
                <div style="background:var(--white);border-radius:12px;padding:20px;border:1.5px solid var(--gray-line);transition:border-color 0.2s,transform 0.2s;" onmouseover="this.style.borderColor='rgba(232,82,26,0.3)';this.style.transform='translateY(-3px)'" onmouseout="this.style.borderColor='var(--gray-line)';this.style.transform=''">
                    <div style="font-size:24px;margin-bottom:10px;">📱</div>
                    <div style="font-family:'Syne',sans-serif;font-size:15px;font-weight:700;margin-bottom:5px;color:var(--ink);">Électronique</div>
                    <div style="font-size:13px;color:var(--gray);">Smartphones, accessoires, high-tech.</div>
                </div>
                <div style="background:var(--white);border-radius:12px;padding:20px;border:1.5px solid var(--gray-line);transition:border-color 0.2s,transform 0.2s;" onmouseover="this.style.borderColor='rgba(232,82,26,0.3)';this.style.transform='translateY(-3px)'" onmouseout="this.style.borderColor='var(--gray-line)';this.style.transform=''">
                    <div style="font-size:24px;margin-bottom:10px;">🏗️</div>
                    <div style="font-family:'Syne',sans-serif;font-size:15px;font-weight:700;margin-bottom:5px;color:var(--ink);">BTP & matériaux</div>
                    <div style="font-size:13px;color:var(--gray);">Construction, outillage, sanitaire.</div>
                </div>
                <div style="background:var(--white);border-radius:12px;padding:20px;border:1.5px solid var(--gray-line);transition:border-color 0.2s,transform 0.2s;" onmouseover="this.style.borderColor='rgba(232,82,26,0.3)';this.style.transform='translateY(-3px)'" onmouseout="this.style.borderColor='var(--gray-line)';this.style.transform=''">
                    <div style="font-size:24px;margin-bottom:10px;">⚡</div>
                    <div style="font-family:'Syne',sans-serif;font-size:15px;font-weight:700;margin-bottom:5px;color:var(--ink);">Énergie solaire</div>
                    <div style="font-size:13px;color:var(--gray);">Panneaux, batteries, onduleurs.</div>
                </div>
                <div style="background:var(--white);border-radius:12px;padding:20px;border:1.5px solid var(--gray-line);transition:border-color 0.2s,transform 0.2s;" onmouseover="this.style.borderColor='rgba(232,82,26,0.3)';this.style.transform='translateY(-3px)'" onmouseout="this.style.borderColor='var(--gray-line)';this.style.transform=''">
                    <div style="font-size:24px;margin-bottom:10px;">🚗</div>
                    <div style="font-family:'Syne',sans-serif;font-size:15px;font-weight:700;margin-bottom:5px;color:var(--ink);">Auto & moto</div>
                    <div style="font-size:13px;color:var(--gray);">Pièces détachées, accessoires.</div>
                </div>
                <div style="background:var(--white);border-radius:12px;padding:20px;border:1.5px solid var(--gray-line);transition:border-color 0.2s,transform 0.2s;" onmouseover="this.style.borderColor='rgba(232,82,26,0.3)';this.style.transform='translateY(-3px)'" onmouseout="this.style.borderColor='var(--gray-line)';this.style.transform=''">
                    <div style="font-size:24px;margin-bottom:10px;">🌾</div>
                    <div style="font-family:'Syne',sans-serif;font-size:15px;font-weight:700;margin-bottom:5px;color:var(--ink);">Agro-industrie</div>
                    <div style="font-size:13px;color:var(--gray);">Équipements, intrants, machines.</div>
                </div>
            </div>
        </div>
    </section>

    <!-- ══════════════════════════════════════════ -->
    <!-- RESSOURCES                                 -->
    <!-- ══════════════════════════════════════════ -->
    <section class="sec" id="ressources">
        <div class="sec-inner">
            <div class="sec-tag fu">Ressources</div>
            <h2 class="sec-title fu">Blog · Guides · <em>Actualités</em></h2>
            <p class="sec-sub fu">Conseils terrain, guides pratiques et actualités marché pour réussir vos échanges Chine-Afrique.</p>
            <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:20px;" class="fu">
                <div style="background:var(--white);border:1.5px solid var(--gray-line);border-radius:14px;overflow:hidden;cursor:pointer;transition:transform 0.2s,box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-4px)';this.style.boxShadow='0 10px 30px rgba(0,0,0,0.09)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
                    <div style="height:130px;background:linear-gradient(135deg,var(--orange-pale),#fff);display:flex;align-items:center;justify-content:center;font-size:38px;">✍️</div>
                    <div style="padding:20px;">
                        <div style="font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--orange);margin-bottom:8px;">Blog</div>
                        <div style="font-family:'Syne',sans-serif;font-size:15px;font-weight:700;margin-bottom:7px;line-height:1.4;color:var(--ink);">Comment éviter les arnaques fournisseurs en Chine</div>
                        <div style="font-size:12.5px;color:var(--gray2);">5 min · Import & Sourcing</div>
                    </div>
                </div>
                <div style="background:var(--white);border:1.5px solid var(--gray-line);border-radius:14px;overflow:hidden;cursor:pointer;transition:transform 0.2s,box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-4px)';this.style.boxShadow='0 10px 30px rgba(0,0,0,0.09)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
                    <div style="height:130px;background:linear-gradient(135deg,#eef5ff,#fff);display:flex;align-items:center;justify-content:center;font-size:38px;">📘</div>
                    <div style="padding:20px;">
                        <div style="font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#378ADD;margin-bottom:8px;">Guide PDF</div>
                        <div style="font-family:'Syne',sans-serif;font-size:15px;font-weight:700;margin-bottom:7px;line-height:1.4;color:var(--ink);">Guide complet du groupage maritime Chine → Afrique</div>
                        <div style="font-size:12.5px;color:var(--gray2);">Guide PDF · Logistique</div>
                    </div>
                </div>
                <div style="background:var(--white);border:1.5px solid var(--gray-line);border-radius:14px;overflow:hidden;cursor:pointer;transition:transform 0.2s,box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-4px)';this.style.boxShadow='0 10px 30px rgba(0,0,0,0.09)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
                    <div style="height:130px;background:linear-gradient(135deg,#eefff5,#fff);display:flex;align-items:center;justify-content:center;font-size:38px;">📰</div>
                    <div style="padding:20px;">
                        <div style="font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#1D9E75;margin-bottom:8px;">Actualité</div>
                        <div style="font-family:'Syne',sans-serif;font-size:15px;font-weight:700;margin-bottom:7px;line-height:1.4;color:var(--ink);">Foire de Canton 2025 : ce qu'il faut savoir</div>
                        <div style="font-size:12.5px;color:var(--gray2);">Mise à jour · Événements</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ══════════════════════════════════════════ -->
    <!-- CONTACT                                    -->
    <!-- ══════════════════════════════════════════ -->
    <section class="sec sec-alt" id="contact">
        <div class="sec-inner">
            <div class="contact-grid">
                <div class="fu">
                    <div class="sec-tag">Contact</div>
                    <h2 class="sec-title">Parlons de votre<br><em>projet ensemble</em></h2>
                    <p style="color:var(--gray);margin-bottom:28px;line-height:1.8;">Notre équipe vous répond sous 24h pour étudier votre projet et proposer la solution la plus adaptée.</p>
                    <div class="cinfo-item"><span class="cinfo-ico">📧</span>
                        <div>
                            <div class="cinfo-label">Email</div>
                            <div class="cinfo-val">contact@pirras-associe.com</div>
                        </div>
                    </div>
                    <div class="cinfo-item"><span class="cinfo-ico">📱</span>
                        <div>
                            <div class="cinfo-label">WhatsApp</div>
                            <div class="cinfo-val">+225 XX XX XX XX XX</div>
                        </div>
                    </div>
                    <div class="cinfo-item"><span class="cinfo-ico">📍</span>
                        <div>
                            <div class="cinfo-label">Siège</div>
                            <div class="cinfo-val">Abidjan, Côte d'Ivoire</div>
                        </div>
                    </div>
                    <div class="cinfo-item"><span class="cinfo-ico">🕐</span>
                        <div>
                            <div class="cinfo-label">Disponibilité</div>
                            <div class="cinfo-val">Lun–Sam · 8h00 – 18h00 GMT</div>
                        </div>
                    </div>
                </div>
                <div class="fu">
                    <div class="cform">
                        <div class="cf-row">
                            <div class="cf-group"><label>Prénom & Nom</label><input type="text" placeholder="Jean Dupont"></div>
                            <div class="cf-group"><label>Email</label><input type="email" placeholder="jean@exemple.com"></div>
                        </div>
                        <div class="cf-row" style="margin-bottom:14px;">
                            <div class="cf-group"><label>Téléphone</label><input type="tel" placeholder="+225 ..."></div>
                            <div class="cf-group"><label>Pays</label><input type="text" placeholder="Côte d'Ivoire"></div>
                        </div>
                        <div class="cf-group" style="margin-bottom:14px;">
                            <label>Service souhaité</label>
                            <select>
                                <option value="">Sélectionnez un service...</option>
                                <option>Centrale d'achat</option>
                                <option>Logistique & groupage</option>
                                <option>Centrale de vente Abidjan</option>
                                <option>China Business Trip</option>
                                <option>Plusieurs services</option>
                            </select>
                        </div>
                        <div class="cf-group">
                            <label>Votre message</label>
                            <textarea placeholder="Décrivez votre projet, vos produits, vos volumes estimés..."></textarea>
                        </div>
                        <button class="cf-submit" onclick="handleSubmit(this)">Envoyer ma demande →</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ══════════════════════════════════════════ -->
    <!-- FOOTER                                     -->
    <!-- ══════════════════════════════════════════ -->
    <footer>
        <div class="fg">
            <div>
                <span class="fb-logo">Pirras<span>'</span>Associé</span>
                <p>Votre partenaire stratégique pour développer votre activité import-export entre la Chine et l'Afrique francophone.</p>
                <div class="fflags">🇨🇮 🇨🇳 🇸🇳 🇲🇱 🇧🇫 🇬🇳</div>
            </div>
            <div class="fc">
                <h4>Services</h4>
                <a href="#solutions">Centrale d'achat</a>
                <a href="#solutions">Logistique & groupage</a>
                <a href="#solutions">Centrale de vente</a>
                <a href="#china-trip">China Business Trip</a>
            </div>
            <div class="fc">
                <h4>Ressources</h4>
                <a href="#ressources">Blog</a>
                <a href="#ressources">Guides pratiques</a>
                <a href="#ressources">Actualités</a>
                <a href="#temoignages">Témoignages</a>
            </div>
            <div class="fc">
                <h4>Entreprise</h4>
                <a href="#a-propos">À propos</a>
                <a href="#comment-ca-marche">Comment ça marche</a>
                <a href="#contact">Contact</a>
                <a href="#">Mentions légales</a>
            </div>
        </div>
        <div class="fbot">
            <span>© 2025 Pirras'Associé — Tous droits réservés</span>
            <span>Chine · Afrique · Business 🧡</span>
        </div>
    </footer>

    <script>
        // Nav scroll
        window.addEventListener('scroll', () => {
            document.getElementById('nav').classList.toggle('scrolled', window.scrollY > 20);
            const secs = document.querySelectorAll('section[id]');
            let cur = '';
            secs.forEach(s => {
                if (window.scrollY >= s.offsetTop - 90) cur = s.id;
            });
            document.querySelectorAll('.nav-links > a[href^="#"]').forEach(a => {
                a.classList.toggle('act', a.getAttribute('href') === '#' + cur);
            });
        });

        // Mobile menu
        function toggleMenu() {
            document.getElementById('mmenu').classList.toggle('open');
        }

        function closeMenu() {
            document.getElementById('mmenu').classList.remove('open');
        }

        // Fade-up
        const obs = new IntersectionObserver(entries => {
            entries.forEach(e => {
                if (e.isIntersecting) e.target.classList.add('vis');
            });
        }, {
            threshold: 0.1
        });
        document.querySelectorAll('.fu').forEach(el => obs.observe(el));

        // Timeline fill
        const tlObs = new IntersectionObserver(entries => {
            entries.forEach(e => {
                if (e.isIntersecting) document.getElementById('tlFill') ? .classList.add('go');
            });
        }, {
            threshold: 0.3
        });
        const tlw = document.getElementById('tlWrap');
        if (tlw) tlObs.observe(tlw);

        // Slider
        let cur = 0;

        function goSlide(n) {
            cur = n;
            document.getElementById('sliderTrack').style.transform = `translateX(-${n*100}%)`;
            document.querySelectorAll('.sdot').forEach((d, i) => d.classList.toggle('on', i === n));
        }
        setInterval(() => goSlide((cur + 1) % 2), 5500);

        // Form
        function handleSubmit(btn) {
            btn.textContent = '✓ Demande envoyée ! On vous contacte sous 24h.';
            btn.style.background = '#1D9E75';
            setTimeout(() => {
                btn.textContent = 'Envoyer ma demande →';
                btn.style.background = 'var(--orange)';
            }, 4000);
        }

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