diff --git a/.gitignore b/.gitignore
index cc59e7a..f0966d3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,42 +1,70 @@
-__pycache__
+# Python
+__pycache__/
 *.py[cod]
 *.pyo
 *.pyd
-*.egg-info
+*.so
 *.egg
-*.whl
+*.egg-info/
+dist/
+build/
+
+# Environnements virtuels
+.venv/
+venv/
+env/
+ENV/
+
+# Variables d'environnement — ne jamais commiter
+.env
+!.env.example
 *.env
-*.venv
+!*.env.example
+
+# Secrets
+secret*
+*.key
+*.pem
+
+# Bases de données locales
 *.db
 *.sqlite3
+
+# Logs
 *.log
-*.DS_Store
-*.coverage
-*.mypy_cache
-*.pytest_cache
-*.tox
-*.coverage.*
-*.hypothesis
-*.coverage.*
-*.coverage.*
-*.coverage.*
-*.coverage.*
+logs/
+
+# IDEs
+.vscode/
+.idea/
+*.iml
+*.sublime-project
+*.sublime-workspace
+
+# OS
+.DS_Store
+Thumbs.db
+desktop.ini
+
+# Tests et données mock
+.coverage
+.pytest_cache/
+.mypy_cache/
+.tox/
+htmlcov/
+coverage.xml
+mock*
+fake*
 fake_data.py
-QRCODE
-env
 test.py
-pycontg25
-*cache*
+test*
+
+# Assets générés
+QRCODE/
 *.bak
 *.tmp
 *.swp
 *.swo
-*.idea
-.vscode
-*.iml
-test.py
-test*
-*.sublime-project
-db.sqlite3
 *.sql
 .gstack/
+pycontg25/
diff --git a/app/database/config.py b/app/database/config.py
index 39f6534..050037f 100644
--- a/app/database/config.py
+++ b/app/database/config.py
@@ -4,7 +4,7 @@
 
 load_dotenv()
 
-url: str = os.environ.get("SUPABASE_URL")
-key: str = os.environ.get("SUPABASE_KEY")
+url: str = os.environ.get("SUPABASE_URL", "")
+key: str = os.environ.get("SUPABASE_KEY", "")
 
-supabase: Client = create_client(url, key)
\ No newline at end of file
+supabase: Client | None = create_client(url, key) if url and key else None
diff --git a/app/routers/router_2025.py b/app/routers/router_2025.py
index 99738f3..1e740c4 100644
--- a/app/routers/router_2025.py
+++ b/app/routers/router_2025.py
@@ -60,18 +60,18 @@
     2025, 6, 30, 16).strftime("%d %B %Y at %H:%M UTC")
 
 
-API_ROOT = os.getenv("API_ROOT", "http://127.0.0.1:8000/api")
-speakers_list = requests.get(f"{API_ROOT}/speakers")
-if speakers_list.status_code == 200:
-    speakers_list = speakers_list.json()
-else:
-    speakers_list = []
+API_ROOT = os.getenv("API_ROOT", "")
 
+try:
+    _r = requests.get(f"{API_ROOT}/speakers", timeout=5) if API_ROOT else None
+    speakers_list = _r.json() if _r and _r.status_code == 200 else []
+except Exception:
+    speakers_list = []
 
-paidsponsors = requests.get(f"{API_ROOT}/sponsors")
-if paidsponsors.status_code == 200:
-    paidsponsors = paidsponsors.json()
-else:
+try:
+    _r = requests.get(f"{API_ROOT}/sponsors", timeout=5) if API_ROOT else None
+    paidsponsors = _r.json() if _r and _r.status_code == 200 else []
+except Exception:
     paidsponsors = []
 
 
diff --git a/app/routers/router_2026.py b/app/routers/router_2026.py
index a7e0ec2..3817159 100644
--- a/app/routers/router_2026.py
+++ b/app/routers/router_2026.py
@@ -1474,6 +1474,35 @@ def shop(request: Request):
     pass
 
 
+async def _fetch_job_offers() -> list[dict]:
+    event_code = getattr(settings, "python_togo_event_code", None)
+    if not event_code:
+        return []
+    headers = {"Authorization": f"Bearer {settings.python_togo_api_key}"}
+    url = _build_api_url(f"/job-offers/list/{event_code}")
+    try:
+        async with httpx.AsyncClient(timeout=settings.python_togo_api_timeout_seconds) as client:
+            response = await client.get(url, headers=headers)
+        if response.status_code < 400:
+            return _extract_partner_rows(response.json())
+    except Exception:
+        return []
+    return []
+
+
+@router.get("/jobs")
+async def jobs(request: Request):
+    job_offers = await _fetch_job_offers()
+    return await _render_page_with_event(
+        request=request,
+        name="2026_jobs.html",
+        active_page="jobs",
+        page_css="jobs.css",
+        page_title="PyCon Togo 2026 — Job Board",
+        extra_context={"job_offers": job_offers},
+    )
+
+
 @router.get("/30daysofpython")
 def _30daysofpython(request: Request):
     return RedirectResponse(url="https://fata.app/challenge/pycon-togo-2026", status_code=302)
diff --git a/app/static/2026/css/pages/jobs.css b/app/static/2026/css/pages/jobs.css
new file mode 100644
index 0000000..8394dbb
--- /dev/null
+++ b/app/static/2026/css/pages/jobs.css
@@ -0,0 +1,318 @@
+/* Jobs */
+
+/* ── FILTRES ──────────────────────────────────────────────── */
+.jobs-filters-section {
+    padding: 0;
+    background: #f4f8f7;
+    border-bottom: 1px solid #e2ede9;
+}
+
+.jobs-filters {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24px;
+    padding: 20px 0;
+}
+
+.filter-group { display: flex; flex-direction: column; gap: 10px; }
+
+.filter-label {
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: #6c757d;
+}
+
+.filter-btns { display: flex; flex-wrap: wrap; gap: 8px; }
+
+.filter-btn {
+    padding: 6px 16px;
+    border-radius: 20px;
+    border: 1.5px solid #c9dbd5;
+    background: transparent;
+    color: #444;
+    font-size: 0.85rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background 0.2s, border-color 0.2s, color 0.2s;
+    font-family: var(--font-sans, 'Inter', sans-serif);
+}
+.filter-btn:hover { border-color: var(--primary-color, #056d1e); color: var(--primary-color, #056d1e); }
+.filter-btn.active { background: var(--primary-color, #056d1e); border-color: var(--primary-color, #056d1e); color: #fff; }
+
+/* ── SECTION PRINCIPALE ───────────────────────────────────── */
+.jobs-section { padding-top: 40px; }
+
+/* ── SPLIT CONTAINER ──────────────────────────────────────── */
+.jobs-container {
+    display: flex;
+    align-items: flex-start;
+    gap: 0;
+}
+
+/* Sidebar */
+.jobs-sidebar {
+    flex: 1 1 100%;
+    min-width: 0;
+    transition: flex 0.35s cubic-bezier(.4,0,.2,1),
+                max-width 0.35s cubic-bezier(.4,0,.2,1);
+}
+
+/* Panneau de détail — fermé */
+.jobs-detail-panel {
+    flex: 0 0 0;
+    max-width: 0;
+    overflow: hidden;
+    opacity: 0;
+    transition: flex 0.35s cubic-bezier(.4,0,.2,1),
+                max-width 0.35s cubic-bezier(.4,0,.2,1),
+                opacity 0.25s ease;
+    position: relative;
+}
+
+/* Mode split activé */
+.jobs-container.has-selection .jobs-sidebar {
+    flex: 0 0 380px;
+    max-width: 380px;
+}
+
+.jobs-container.has-selection .jobs-detail-panel {
+    flex: 1 1 auto;
+    max-width: calc(100% - 380px - 28px);
+    overflow: visible;
+    margin-left: 28px;
+}
+
+.jobs-detail-panel.is-visible {
+    opacity: 1;
+}
+
+/* ── GRILLE DE CARDS ──────────────────────────────────────── */
+.jobs-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 20px;
+    transition: grid-template-columns 0.3s;
+}
+
+/* Mode split : 1 colonne */
+.jobs-container.has-selection .jobs-grid {
+    grid-template-columns: 1fr;
+    gap: 0;
+}
+
+/* ── CARD ─────────────────────────────────────────────────── */
+.job-card {
+    background: #fff;
+    border: 1px solid #e2ede9;
+    border-radius: 14px;
+    cursor: pointer;
+    transition: transform 0.2s ease, box-shadow 0.2s ease,
+                border-color 0.2s ease, border-radius 0.25s ease,
+                background 0.2s ease;
+    overflow: hidden;
+}
+
+/* Vue grille */
+.job-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 10px 28px rgba(5,109,30,.12);
+    border-color: #a8d5b9;
+}
+
+.job-card-grid-view { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
+.job-card-compact-view { display: none; }
+
+/* Vue compacte (mode split) */
+.jobs-container.has-selection .job-card {
+    border-radius: 0;
+    border-left: none;
+    border-right: none;
+    border-top: none;
+    transform: none !important;
+    box-shadow: none !important;
+}
+.jobs-container.has-selection .job-card:first-child { border-radius: 10px 10px 0 0; }
+.jobs-container.has-selection .job-card:last-child  { border-radius: 0 0 10px 10px; border-bottom: 1px solid #e2ede9; }
+
+.jobs-container.has-selection .job-card-grid-view    { display: none; }
+.jobs-container.has-selection .job-card-compact-view {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 16px;
+}
+
+/* Card sélectionnée */
+.jobs-container.has-selection .job-card:hover {
+    background: #f4f8f7;
+}
+.job-card.is-selected {
+    background: #f0f8f2 !important;
+    border-left: 3px solid var(--primary-color, #056d1e) !important;
+}
+
+/* ── ÉLÉMENTS VUE GRILLE ──────────────────────────────────── */
+.job-card-header { display: flex; align-items: center; gap: 16px; }
+
+.job-company-logo {
+    width: 56px; height: 56px;
+    object-fit: contain; border-radius: 10px;
+    border: 1px solid #e9ecef; background: #f8f9fa;
+    flex-shrink: 0;
+}
+.job-company-logo-fallback {
+    width: 56px; height: 56px; border-radius: 10px;
+    background: #edf4f2; color: var(--primary-color, #056d1e);
+    font-size: 1.1rem; font-weight: 800;
+    display: flex; align-items: center; justify-content: center;
+    flex-shrink: 0; border: 1px solid #c9dbd5;
+}
+.job-meta { min-width: 0; }
+.job-title { font-size: 1.05rem; font-weight: 700; color: #1d2630; line-height: 1.3; margin: 0 0 4px; }
+.job-company { font-size: 0.85rem; color: #6c757d; font-weight: 500; }
+
+.job-badges { display: flex; flex-wrap: wrap; gap: 8px; }
+
+.badge {
+    display: inline-flex; align-items: center;
+    padding: 4px 12px; border-radius: 20px;
+    font-size: 0.78rem; font-weight: 600; line-height: 1;
+}
+.badge-location.badge-remote  { background: #e8f4fd; color: #1a73e8; }
+.badge-location.badge-hybrid  { background: #fff3cd; color: #856404; }
+.badge-location.badge-onsite  { background: #d4edda; color: #155724; }
+.badge-contract               { background: #f0f0f0; color: #4a4a4a; }
+.badge-salary                 { background: #fef9ec; color: #8a6800; border: 1px solid #f5d76e; }
+
+.job-description { font-size: 0.9rem; color: #555; line-height: 1.65; flex-grow: 1; margin: 0; }
+
+.job-tags { display: flex; flex-wrap: wrap; gap: 6px; }
+.job-tag { font-size: 0.75rem; font-weight: 500; padding: 3px 10px; border-radius: 6px; background: #edf4f2; color: #056d1e; border: 1px solid #c9dbd5; }
+
+.job-card-footer { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; border-top: 1px solid #f0f0f0; }
+.job-discover { font-size: 0.82rem; font-weight: 600; color: var(--primary-color, #056d1e); text-transform: uppercase; letter-spacing: 0.05em; }
+.job-discover-arrow { color: var(--primary-color, #056d1e); font-size: 1rem; }
+
+/* ── VUE COMPACTE ─────────────────────────────────────────── */
+.job-logo-sm {
+    width: 44px; height: 44px;
+    object-fit: contain; border-radius: 8px;
+    border: 1px solid #e9ecef; background: #f8f9fa;
+    flex-shrink: 0;
+}
+.job-logo-sm-fallback {
+    width: 44px; height: 44px; border-radius: 8px;
+    background: #edf4f2; color: #056d1e;
+    font-size: 0.9rem; font-weight: 800;
+    display: flex; align-items: center; justify-content: center;
+    flex-shrink: 0; border: 1px solid #c9dbd5;
+}
+.job-compact-meta { flex: 1; min-width: 0; }
+.job-compact-title { font-size: 0.92rem; font-weight: 700; color: #1d2630; margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.job-compact-company { font-size: 0.8rem; color: #6c757d; }
+.job-compact-arrow { font-size: 1rem; color: #c9dbd5; flex-shrink: 0; transition: color 0.2s, transform 0.2s; }
+.job-card:hover .job-compact-arrow,
+.job-card.is-selected .job-compact-arrow { color: var(--primary-color, #056d1e); transform: translateX(3px); }
+
+/* ── PANNEAU DE DÉTAIL ────────────────────────────────────── */
+.jobs-detail-panel {
+    background: #fff;
+    border: 1px solid #e2ede9;
+    border-radius: 14px;
+    padding: 0;
+}
+
+.jobs-detail-panel.is-visible {
+    padding: 32px;
+}
+
+.panel-close-btn {
+    position: absolute;
+    top: 16px; right: 16px;
+    background: #f4f8f7;
+    border: 1px solid #e2ede9;
+    border-radius: 50%;
+    width: 32px; height: 32px;
+    display: flex; align-items: center; justify-content: center;
+    cursor: pointer;
+    font-size: 0.9rem;
+    color: #6c757d;
+    transition: background 0.2s, color 0.2s;
+    opacity: 0;
+    transition: opacity 0.2s;
+}
+.jobs-detail-panel.is-visible .panel-close-btn { opacity: 1; }
+.panel-close-btn:hover { background: #fdecea; color: #c0392b; border-color: #f5c6c2; }
+
+.panel-body { opacity: 0; transition: opacity 0.2s ease 0.15s; }
+.jobs-detail-panel.is-visible .panel-body { opacity: 1; }
+
+.panel-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
+
+.panel-logo {
+    width: 64px; height: 64px;
+    object-fit: contain; border-radius: 12px;
+    border: 1px solid #e9ecef; background: #f8f9fa;
+    flex-shrink: 0;
+}
+.panel-logo-fallback {
+    width: 64px; height: 64px; border-radius: 12px;
+    background: #edf4f2; color: #056d1e;
+    font-size: 1.2rem; font-weight: 800;
+    display: flex; align-items: center; justify-content: center;
+    flex-shrink: 0; border: 1px solid #c9dbd5;
+}
+.panel-title { font-size: 1.4rem; font-weight: 800; color: #1d2630; margin: 0 0 4px; line-height: 1.2; }
+.panel-company { font-size: 0.9rem; color: #6c757d; font-weight: 500; }
+
+.panel-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
+
+.panel-apply-btn { display: inline-block; margin-bottom: 24px; }
+
+.panel-divider { border: none; border-top: 1px solid #e9ecef; margin: 0 0 20px; }
+
+.panel-section-title { font-size: 1.1rem; font-weight: 700; color: #1d2630; margin: 0 0 12px; }
+
+.panel-description { font-size: 0.92rem; color: #444; line-height: 1.75; margin-bottom: 16px; white-space: pre-line; }
+
+.panel-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
+
+.panel-deadline { font-size: 0.85rem; color: #856404; background: #fff3cd; border-radius: 8px; padding: 8px 12px; margin-top: 8px; }
+
+/* ── ÉTAT VIDE ────────────────────────────────────────────── */
+.jobs-empty-filter { text-align: center; padding: 48px 24px; color: #6c757d; }
+.jobs-empty { text-align: center; padding: 80px 24px; max-width: 480px; margin: 0 auto; }
+.jobs-empty-icon { font-size: 3.5rem; margin-bottom: 16px; }
+.jobs-empty h2 { font-size: 1.5rem; color: #1d2630; margin-bottom: 12px; }
+.jobs-empty p  { color: #6c757d; line-height: 1.6; }
+
+/* ── CTA ──────────────────────────────────────────────────── */
+.jobs-cta-section { background: #f4f8f7; border-top: 1px solid #e2ede9; }
+.jobs-cta { text-align: center; max-width: 600px; margin: 0 auto; padding: 16px 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
+.jobs-cta h2 { font-size: 1.7rem; color: #1d2630; margin: 0; }
+.jobs-cta p  { color: #555; line-height: 1.6; margin: 0; }
+
+/* ── RESPONSIVE ───────────────────────────────────────────── */
+@media (max-width: 900px) {
+    .jobs-container.has-selection .jobs-sidebar    { flex: 0 0 300px; max-width: 300px; }
+    .jobs-container.has-selection .jobs-detail-panel { max-width: calc(100% - 300px - 20px); margin-left: 20px; }
+}
+
+@media (max-width: 768px) {
+    .jobs-container { flex-direction: column; }
+
+    .jobs-container.has-selection .jobs-sidebar {
+        flex: 0 0 auto;
+        max-width: 100%;
+        width: 100%;
+    }
+    .jobs-container.has-selection .jobs-detail-panel {
+        flex: 0 0 auto;
+        max-width: 100%;
+        width: 100%;
+        margin-left: 0;
+        margin-top: 16px;
+    }
+}
diff --git a/app/templates/2026/2026_jobs.html b/app/templates/2026/2026_jobs.html
new file mode 100644
index 0000000..27e1821
--- /dev/null
+++ b/app/templates/2026/2026_jobs.html
@@ -0,0 +1,370 @@
+{% extends "base.html" %}
+
+{% block content %}
+<main class="page active" id="page-jobs">
+
+    <!-- ── HERO ───────────────────────────────────────────────── -->
+    <section class="page-hero">
+        <div class="container">
+            <span class="eyebrow reveal" data-i18n-en="Careers" data-i18n-fr="Carrières">Carrières</span>
+            <h1 class="reveal reveal-d1"
+                data-i18n-html-en="Job <em>Board</em>"
+                data-i18n-html-fr="Offres <em>d'emploi</em>">Offres <em>d'emploi</em></h1>
+            <p class="page-hero-sub reveal reveal-d2"
+                data-i18n-en="Browse opportunities shared by our partners and sponsors."
+                data-i18n-fr="Consultez les opportunités partagées par nos partenaires et sponsors.">
+                Consultez les opportunités partagées par nos partenaires et sponsors.
+            </p>
+        </div>
+    </section>
+
+    {% set active_offers = job_offers | selectattr('is_active') | list if job_offers else [] %}
+
+    {% if active_offers %}
+
+    <!-- ── FILTRES ────────────────────────────────────────────── -->
+    <section class="jobs-filters-section">
+        <div class="container">
+            <div class="jobs-filters">
+                <div class="filter-group">
+                    <span class="filter-label" data-i18n-en="Location" data-i18n-fr="Lieu">Lieu</span>
+                    <div class="filter-btns" id="filter-location">
+                        <button class="filter-btn active" data-filter="location" data-value="all"
+                            data-i18n-en="All" data-i18n-fr="Tous">Tous</button>
+                        <button class="filter-btn" data-filter="location" data-value="remote"
+                            data-i18n-en="Remote" data-i18n-fr="À distance">À distance</button>
+                        <button class="filter-btn" data-filter="location" data-value="onsite"
+                            data-i18n-en="Onsite" data-i18n-fr="Sur site">Sur site</button>
+                        <button class="filter-btn" data-filter="location" data-value="hybrid"
+                            data-i18n-en="Hybrid" data-i18n-fr="Hybride">Hybride</button>
+                    </div>
+                </div>
+                <div class="filter-group">
+                    <span class="filter-label" data-i18n-en="Contract" data-i18n-fr="Contrat">Contrat</span>
+                    <div class="filter-btns" id="filter-contract">
+                        <button class="filter-btn active" data-filter="contract" data-value="all"
+                            data-i18n-en="All" data-i18n-fr="Tous">Tous</button>
+                        <button class="filter-btn" data-filter="contract" data-value="full-time"
+                            data-i18n-en="Full-time" data-i18n-fr="Temps plein">Temps plein</button>
+                        <button class="filter-btn" data-filter="contract" data-value="part-time"
+                            data-i18n-en="Part-time" data-i18n-fr="Temps partiel">Temps partiel</button>
+                        <button class="filter-btn" data-filter="contract" data-value="internship"
+                            data-i18n-en="Internship" data-i18n-fr="Stage">Stage</button>
+                        <button class="filter-btn" data-filter="contract" data-value="contract"
+                            data-i18n-en="Contract" data-i18n-fr="Freelance">Freelance</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- ── SPLIT LAYOUT ──────────────────────────────────────── -->
+    <section class="section jobs-section">
+        <div class="container">
+            <div class="jobs-container" id="jobs-container">
+
+                <!-- Colonne gauche : liste de cards -->
+                <div class="jobs-sidebar" id="jobs-sidebar">
+                    <div class="jobs-grid" id="jobs-grid">
+                        {% for job in active_offers %}
+                        <article class="job-card reveal"
+                            data-job-id="{{ loop.index0 }}"
+                            data-location="{{ job.location }}"
+                            data-contract="{{ job.contract_type }}">
+
+                            <!-- VUE GRILLE (défaut) -->
+                            <div class="job-card-grid-view">
+                                <div class="job-card-header">
+                                    {% if job.logo_url %}
+                                    <img class="job-company-logo" src="{{ job.logo_url }}" alt="{{ job.company }}" loading="lazy" />
+                                    {% else %}
+                                    <div class="job-company-logo-fallback">{{ job.company[:2] | upper }}</div>
+                                    {% endif %}
+                                    <div class="job-meta">
+                                        <h3 class="job-title">{{ job.title }}</h3>
+                                        <span class="job-company">{{ job.company }}</span>
+                                    </div>
+                                </div>
+                                <div class="job-badges">
+                                    <span class="badge badge-location badge-{{ job.location }}">{{ job.location | capitalize }}</span>
+                                    <span class="badge badge-contract">{{ job.contract_type | replace('-',' ') | title }}</span>
+                                    {% if job.salary_range %}<span class="badge badge-salary">{{ job.salary_range }}</span>{% endif %}
+                                </div>
+                                <p class="job-description">{{ job.description | truncate(140, True, '…') }}</p>
+                                {% if job.tags %}
+                                <div class="job-tags">
+                                    {% for tag in job.tags %}<span class="job-tag">{{ tag }}</span>{% endfor %}
+                                </div>
+                                {% endif %}
+                                <div class="job-card-footer">
+                                    <span class="job-discover" data-i18n-en="Discover more" data-i18n-fr="En savoir plus">En savoir plus</span>
+                                    <span class="job-discover-arrow">→</span>
+                                </div>
+                            </div>
+
+                            <!-- VUE COMPACTE (mode split) -->
+                            <div class="job-card-compact-view">
+                                {% if job.logo_url %}
+                                <img class="job-logo-sm" src="{{ job.logo_url }}" alt="{{ job.company }}" loading="lazy" />
+                                {% else %}
+                                <div class="job-logo-sm job-logo-sm-fallback">{{ job.company[:2] | upper }}</div>
+                                {% endif %}
+                                <div class="job-compact-meta">
+                                    <h3 class="job-compact-title">{{ job.title }}</h3>
+                                    <span class="job-compact-company">{{ job.company }}</span>
+                                </div>
+                                <span class="job-compact-arrow">→</span>
+                            </div>
+
+                        </article>
+                        {% endfor %}
+                    </div>
+
+                    <div class="jobs-empty-filter" id="jobs-empty-filter" style="display:none">
+                        <p data-i18n-en="No offers match your filters." data-i18n-fr="Aucune offre ne correspond.">Aucune offre ne correspond.</p>
+                    </div>
+                </div>
+
+                <!-- Colonne droite : panneau de détail -->
+                <div class="jobs-detail-panel" id="jobs-detail-panel" aria-live="polite">
+                    <button class="panel-close-btn" id="panel-close-btn" aria-label="Fermer">✕</button>
+                    <div class="panel-body" id="panel-body"></div>
+                </div>
+
+            </div>
+        </div>
+    </section>
+
+    <!-- Données JSON pour le panneau -->
+    <script id="jobs-data" type="application/json">
+    [{% for job in active_offers %}{
+        "id": {{ loop.index0 }},
+        "title": {{ job.title | tojson }},
+        "company": {{ job.company | tojson }},
+        "logo_url": {{ (job.logo_url or '') | tojson }},
+        "location": {{ job.location | tojson }},
+        "contract_type": {{ job.contract_type | tojson }},
+        "description": {{ job.description | tojson }},
+        "apply_url": {{ job.apply_url | tojson }},
+        "salary_range": {{ (job.salary_range or '') | tojson }},
+        "tags": {{ (job.tags or []) | tojson }},
+        "application_deadline": {{ (job.application_deadline | string if job.application_deadline else '') | tojson }}
+    }{% if not loop.last %},{% endif %}{% endfor %}]
+    </script>
+
+    {% else %}
+
+    <!-- ── ÉTAT VIDE ──────────────────────────────────────────── -->
+    <section class="section">
+        <div class="container">
+            <div class="jobs-empty reveal">
+                <div class="jobs-empty-icon">💼</div>
+                <h2 data-i18n-en="No job offers yet" data-i18n-fr="Aucune offre pour le moment">Aucune offre pour le moment</h2>
+                <p data-i18n-en="Our partners haven't posted any positions yet. Check back soon!"
+                   data-i18n-fr="Nos partenaires n'ont pas encore publié d'offres. Revenez bientôt !">
+                    Nos partenaires n'ont pas encore publié d'offres. Revenez bientôt !
+                </p>
+            </div>
+        </div>
+    </section>
+
+    {% endif %}
+
+    <!-- ── CTA ───────────────────────────────────────────────── -->
+    <section class="section jobs-cta-section">
+        <div class="container">
+            <div class="jobs-cta reveal">
+                <h2 data-i18n-en="Want to post a job offer?" data-i18n-fr="Vous souhaitez publier une offre ?">Vous souhaitez publier une offre ?</h2>
+                <p data-i18n-en="Become a partner and reach hundreds of Python developers in Togo and across Africa."
+                   data-i18n-fr="Devenez partenaire et touchez des centaines de développeurs Python au Togo et en Afrique.">
+                    Devenez partenaire et touchez des centaines de développeurs Python au Togo et en Afrique.
+                </p>
+                <a class="btn btn-primary" href="/sponsors"
+                   data-i18n-en="Become a Partner →" data-i18n-fr="Devenir Partenaire →">Devenir Partenaire →</a>
+            </div>
+        </div>
+    </section>
+
+</main>
+
+<script>
+(function () {
+    /* ── Données ── */
+    var jobsData = [];
+    try { jobsData = JSON.parse(document.getElementById('jobs-data').textContent); } catch(e) {}
+
+    /* ── Éléments ── */
+    var container  = document.getElementById('jobs-container');
+    var panel      = document.getElementById('jobs-detail-panel');
+    var panelBody  = document.getElementById('panel-body');
+    var closeBtn   = document.getElementById('panel-close-btn');
+    var grid       = document.getElementById('jobs-grid');
+    var selectedId = null;
+
+    /* ── Filtres ── */
+    var activeLocation = 'all';
+    var activeContract = 'all';
+
+    function applyFilters() {
+        var cards = grid.querySelectorAll('.job-card');
+        var visible = 0;
+        cards.forEach(function(card) {
+            var show = (activeLocation === 'all' || card.dataset.location === activeLocation)
+                    && (activeContract === 'all' || card.dataset.contract === activeContract);
+            card.style.display = show ? '' : 'none';
+            if (show) visible++;
+        });
+        document.getElementById('jobs-empty-filter').style.display =
+            (visible === 0 && cards.length > 0) ? '' : 'none';
+        if (selectedId !== null) {
+            var sel = grid.querySelector('.job-card[data-job-id="' + selectedId + '"]');
+            if (sel && sel.style.display === 'none') closePanel();
+        }
+    }
+
+    document.querySelectorAll('.filter-btn').forEach(function(btn) {
+        btn.addEventListener('click', function() {
+            btn.closest('.filter-btns').querySelectorAll('.filter-btn')
+               .forEach(function(b){ b.classList.remove('active'); });
+            btn.classList.add('active');
+            if (btn.dataset.filter === 'location') activeLocation = btn.dataset.value;
+            if (btn.dataset.filter === 'contract')  activeContract = btn.dataset.value;
+            applyFilters();
+        });
+    });
+
+    /* ── Helpers badges ── */
+    var LOC_LABELS = { remote: { en:'Remote', fr:'À distance' }, onsite: { en:'Onsite', fr:'Sur site' }, hybrid: { en:'Hybrid', fr:'Hybride' } };
+    var CON_LABELS = { 'full-time':{ en:'Full-time', fr:'Temps plein' }, 'part-time':{ en:'Part-time', fr:'Temps partiel' }, internship:{ en:'Internship', fr:'Stage' }, contract:{ en:'Contract', fr:'Freelance' } };
+    var currentLang = document.documentElement.lang || 'fr';
+
+    function badgeLocLabel(loc) { return (LOC_LABELS[loc] || {})[currentLang] || loc; }
+    function badgeConLabel(con) { return (CON_LABELS[con] || {})[currentLang] || con.replace(/-/g,' '); }
+
+    /* ── Rendu du panneau ── */
+    function renderPanel(job) {
+        var tagsHtml = '';
+        if (job.tags && job.tags.length) {
+            tagsHtml = '<div class="panel-tags">'
+                + job.tags.map(function(t){ return '<span class="job-tag">'+t+'</span>'; }).join('')
+                + '</div>';
+        }
+        var deadlineHtml = '';
+        if (job.application_deadline) {
+            var d = String(job.application_deadline).substring(0, 10);
+            deadlineHtml = '<p class="panel-deadline">⏰ <strong>Date limite :</strong> ' + d + '</p>';
+        }
+        var salaryHtml = job.salary_range
+            ? '<span class="badge badge-salary">'+job.salary_range+'</span>'
+            : '';
+        var logoHtml = job.logo_url
+            ? '<img class="panel-logo" src="'+job.logo_url+'" alt="'+job.company+'" />'
+            : '<div class="panel-logo panel-logo-fallback">'+job.company.substring(0,2).toUpperCase()+'</div>';
+
+        panelBody.innerHTML =
+            '<div class="panel-header">'
+            +   logoHtml
+            +   '<div>'
+            +     '<h2 class="panel-title">'+job.title+'</h2>'
+            +     '<span class="panel-company">'+job.company+'</span>'
+            +   '</div>'
+            + '</div>'
+            + '<div class="panel-badges">'
+            +   '<span class="badge badge-location badge-'+job.location+'">'+badgeLocLabel(job.location)+'</span>'
+            +   '<span class="badge badge-contract">'+badgeConLabel(job.contract_type)+'</span>'
+            +   salaryHtml
+            + '</div>'
+            + '<a class="btn btn-primary panel-apply-btn" href="'+job.apply_url+'" target="_blank" rel="noopener noreferrer"'
+            +    ' data-i18n-en="Apply Now →" data-i18n-fr="Postuler →">Postuler →</a>'
+            + '<hr class="panel-divider" />'
+            + '<h3 class="panel-section-title" data-i18n-en="Description &amp; Requirements" data-i18n-fr="Description &amp; Exigences">Description &amp; Exigences</h3>'
+            + '<p class="panel-description">'+job.description+'</p>'
+            + tagsHtml
+            + deadlineHtml;
+    }
+
+    /* ── Ouvrir le panneau ── */
+    function openPanel(id) {
+        var job = jobsData[id];
+        if (!job) return;
+
+        selectedId = id;
+        renderPanel(job);
+
+        /* Marquer la card sélectionnée */
+        grid.querySelectorAll('.job-card').forEach(function(c){
+            c.classList.toggle('is-selected', String(c.dataset.jobId) === String(id));
+        });
+
+        /* Activer le mode split */
+        container.classList.add('has-selection');
+
+        /* Déclencher l'animation du panneau avec un léger délai */
+        requestAnimationFrame(function() {
+            requestAnimationFrame(function() {
+                panel.classList.add('is-visible');
+            });
+        });
+
+        /* Toujours remonter au début du panneau (changement de card) */
+        panel.scrollTop = 0;
+
+        /* Scroll viewport → début du panneau après l'animation */
+        setTimeout(function() {
+            var isDesktopSplit = window.innerWidth >= 768 && container.classList.contains('has-selection');
+            if (isDesktopSplit) {
+                /* Desktop : scroll vers le haut de la section jobs pour que le panneau soit visible */
+                panel.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+            } else {
+                /* Mobile/tablette : panneau en dessous, scroll jusqu'à lui */
+                panel.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            }
+        }, 360);
+    }
+
+    /* ── Fermer le panneau ── */
+    function closePanel() {
+        selectedId = null;
+        panel.classList.remove('is-visible');
+        grid.querySelectorAll('.job-card').forEach(function(c){ c.classList.remove('is-selected'); });
+
+        /* Attendre la fin de l'animation avant de retirer has-selection */
+        setTimeout(function() {
+            container.classList.remove('has-selection');
+        }, 320);
+    }
+
+    /* ── Listeners ── */
+    grid.addEventListener('click', function(e) {
+        var card = e.target.closest('.job-card');
+        if (!card) return;
+        var id = parseInt(card.dataset.jobId, 10);
+        if (id === selectedId) { closePanel(); } else { openPanel(id); }
+    });
+
+    closeBtn.addEventListener('click', closePanel);
+
+    /* Fermer sur Escape */
+    document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape' && selectedId !== null) closePanel();
+    });
+
+    /* Sync langue — patch setLanguage après chargement de script.js */
+    window.addEventListener('load', function() {
+        var _orig = window.setLanguage;
+        if (typeof _orig === 'function') {
+            window.setLanguage = function(lang) {
+                _orig.call(this, lang);
+                currentLang = lang;
+                if (selectedId !== null) renderPanel(jobsData[selectedId]);
+            };
+        }
+        /* Lire la langue active au démarrage */
+        var activeLangBtn = document.getElementById('lang-fr');
+        if (activeLangBtn && activeLangBtn.classList.contains('active')) currentLang = 'fr';
+        var activeLangBtnEn = document.getElementById('lang-en');
+        if (activeLangBtnEn && activeLangBtnEn.classList.contains('active')) currentLang = 'en';
+    });
+})();
+</script>
+{% endblock %}
diff --git a/app/templates/2026/base.html b/app/templates/2026/base.html
index e64260c..02bb7c0 100644
--- a/app/templates/2026/base.html
+++ b/app/templates/2026/base.html
@@ -42,7 +42,7 @@
                 <a class="nav-link{% if active_page == 'home' %} active{% endif %}" data-i18n-en="Home"
                     data-i18n-fr="Accueil" href="/">Home</a>
                 <div class="nav-dropdown">
-                    <a class="nav-link nav-dropdown-trigger{% if active_page in ['about', 'team'] %} active{% endif %}"
+                    <a class="nav-link nav-dropdown-trigger{% if active_page in ['about', 'team', 'jobs'] %} active{% endif %}"
                         href="/about">
                         <span class="nav-dropdown-label" data-i18n-en="About" data-i18n-fr="À Propos">About</span>
                         <span class="nav-dropdown-arrow" aria-hidden="true">▾</span>
@@ -57,6 +57,8 @@
                         <a class="nav-dropdown-item" href="/team" data-i18n-en="Team" data-i18n-fr="Équipe">Team</a>
                         <a class="nav-dropdown-item" href="/visit" data-i18n-en="Visit Togo"
                             data-i18n-fr="Visiter Togo">Visit Togo</a>
+                        <a class="nav-dropdown-item{% if active_page == 'jobs' %} active{% endif %}" href="/jobs"
+                            data-i18n-en="Job Board" data-i18n-fr="Offres d'emploi">Job Board</a>
                     </div>
                 </div>
                 <a class="nav-link{% if active_page == 'partners' %} active{% endif %}" data-i18n-en="Sponsors"
@@ -114,6 +116,8 @@
                     Policy</a>
                 <a class="drawer-link drawer-sublink" href="/team" onclick="closeMenu()" data-i18n-en="Team"
                     data-i18n-fr="Équipe">Team</a>
+                <a class="drawer-link drawer-sublink" href="/jobs" onclick="closeMenu()"
+                    data-i18n-en="Job Board" data-i18n-fr="Offres d'emploi">Job Board</a>
             </div>
         </div>
         <div class="drawer-section">