<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio Professionnel | Direction de Projets & Ingénierie</title>
    <style>
        :root {
            --bg-color: #0f172a;
            --card-bg: #1e293b;
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
            --accent: #38bdf8;
            --accent-hover: #0284c7;
            --border: #334155;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-main);
            line-height: 1.6;
            padding: 2rem 1rem;
        }

        .container {
            max-width: 900px;
            margin: 0 auto;
        }

        /* Header / Hero */
        header {
            margin-bottom: 3rem;
            padding-bottom: 2rem;
            border-bottom: 1px solid var(--border);
        }

        h1 {
            font-size: 2.5rem;
            font-weight: 700;
            letter-spacing: -0.025em;
            color: var(--text-main);
            margin-bottom: 0.5rem;
        }

        .subtitle {
            font-size: 1.25rem;
            color: var(--accent);
            font-weight: 500;
            margin-bottom: 1rem;
        }

        .bio {
            color: var(--text-muted);
            font-size: 1.05rem;
            max-width: 750px;
        }

        /* Sections */
        section {
            margin-bottom: 3rem;
        }

        h2 {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            color: var(--text-main);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        h2::before {
            content: "";
            display: inline-block;
            width: 4px;
            height: 1.2rem;
            background-color: var(--accent);
            border-radius: 2px;
        }

        /* Grid pour expertises */
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
        }

        .card {
            background-color: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 1.5rem;
            transition: transform 0.2s ease, border-color 0.2s ease;
        }

        .card:hover {
            transform: translateY(-2px);
            border-color: var(--accent);
        }

        .card h3 {
            font-size: 1.1rem;
            color: var(--text-main);
            margin-bottom: 0.75rem;
        }

        .card p {
            color: var(--text-muted);
            font-size: 0.95rem;
        }

        /* Timeline / Parcreus */
        .timeline {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .item {
            background-color: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 1.5rem;
        }

        .item-header {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-bottom: 0.5rem;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .role {
            font-weight: 600;
            font-size: 1.1rem;
            color: var(--accent);
        }

        .date {
            font-size: 0.875rem;
            color: var(--text-muted);
        }

        .list {
            list-style-type: none;
            margin-top: 0.75rem;
        }

        .list li {
            position: relative;
            padding-left: 1.25rem;
            color: var(--text-muted);
            font-size: 0.95rem;
            margin-bottom: 0.5rem;
        }

        .list li::before {
            content: "•";
            position: absolute;
            left: 0;
            color: var(--accent);
        }

        /* Contact CTA */
        .contact-box {
            background-color: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 2rem;
            text-align: center;
        }

        .btn {
            display: inline-block;
            background-color: var(--accent);
            color: #000;
            font-weight: 600;
            padding: 0.75rem 1.5rem;
            border-radius: 6px;
            text-decoration: none;
            margin-top: 1rem;
            transition: background-color 0.2s ease;
        }

        .btn:hover {
            background-color: var(--accent-hover);
            color: #fff;
        }
    </style>
</head>
<body>

    <div class="container">
        
        <!-- Header / Présentation -->
        <header>
            <h1>Oussama [Ton Nom]</h1>
            <div class="subtitle">Direction de Projets & Ingénierie d'Offres Stratégiques</div>
            <p class="bio">
                Expert en sécurisation opérationnelle et cadrage de projets complexes. Spécialiste de la jonction entre exigences commerciales, soutenabilité technique et rentabilité financière (EBITDA).
            </p>
        </header>

        <!-- Ce que je peux faire (Domaines d'intervention) -->
        <section>
            <h2>Ce que je peux apporter</h2>
            <div class="grid">
                <div class="card">
                    <h3>Cadrage & Avant-Vente Complex</h3>
                    <p>Analyse critique des CCTP, évaluation des risques d'exécution, structuration financière des réponses aux grands appels d'offres.</p>
                </div>
                <div class="card">
                    <h3>Direction de Projets & Delivery</h3>
                    <p>Pilotage de portefeuilles multi-millions d'euros, garant du respect des jalons, des marges brutes et de la satisfaction client.</p>
                </div>
                <div class="card">
                    <h3>Sécurisation des Marges</h3>
                    <p>Mise en place de filtres d'arbitrage technique pour éliminer les dérives contractuelles et fiabiliser la rentabilité des opérations.</p>
                </div>
            </div>
        </section>

        <!-- Parcours & Réalisations clés -->
        <section>
            <h2>Parcours & Réalisations</h2>
            <div class="timeline">
                
                <div class="item">
                    <div class="item-header">
                        <span class="role">Directeur de Projets Senior</span>
                        <span class="date">Présent</span>
                    </div>
                    <ul class="list">
                        <li>Management d'un portefeuille de projets stratégiques (secteur public & grands comptes).</li>
                        <li>Sécurisation des déploiements complexes et arbitrage des ressources Delivery.</li>
                        <li>Protection continue des marges opérationnelles et maîtrise des risques d'exécution.</li>
                    </ul>
                </div>

                <div class="item">
                    <div class="item-header">
                        <span class="role">Expertise Avant-Vente & Ingénierie</span>
                        <span class="date">Historique</span>
                    </div>
                    <ul class="list">
                        <li>Audit technique et cadrage des opportunités commerciales à fort enjeu.</li>
                        <li>Interface stratégique entre équipes Commerciales, Direction Générale et Services.</li>
                    </ul>
                </div>

            </div>
        </section>

        <!-- Contact / Call to Action -->
        <section>
            <div class="contact-box">
                <h2>Envie de structurer vos projets complexes ?</h2>
                <p style="color: var(--text-muted);">Disponible pour échanger sur des enjeux de direction de projet ou de cadrage stratégique.</p>
                <a href="mailto:ton.email@exemple.com" class="btn">Me contacter par email</a>
            </div>
        </section>

    </div>

</body>
</html>
