{% extends "global/Page.html" %}
{% load otree %}

{% block title %}Partie 3 de l'expérience{% endblock %}

{% block content %}

<style>
    /* Same spacing system as your reference page */
    .p1-wrap{
        max-width: 980px;
        margin: 0 auto;
    }
    .p1-wrap p{
        margin-bottom: 14px;
        line-height: 1.35;
    }
    .p1-section{
        margin-top: 24px;
        margin-bottom: 24px;
    }
    .p1-wrap ol,
    .p1-wrap ul{
        margin-top: 0;
        margin-bottom: 14px;
    }
    .p1-wrap li{
        margin-bottom: 8px;
        line-height: 1.35;
    }

    /* Match EXACT box design from your Part 1 page */
    .p1-subtitle-card{
        display: inline-block;
        background: #f4f4f4;
        border: 1px solid #e6e6e6;
        border-radius: 8px;
        padding: 10px 18px;
        margin: 10px 0 14px 0;
    }
    .p1-subtitle-card h5{
        margin: 0;
    }

    /* Table styling consistent with the other pages */
    .p1-table{
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
        margin-bottom: 14px;
    }
    .p1-table th,
    .p1-table td{
        border: 1px solid #e6e6e6;
        padding: 10px;
        vertical-align: top;
    }
    .p1-table thead th{
        background: #fafafa;
        font-weight: 600;
        text-align: center;
        vertical-align: middle;
    }
    .p1-table td{
        text-align: center;
        vertical-align: middle;
    }
    .p1-table td:first-child{
        text-align: left;
        width: 240px;
    }

    /* Slightly tighter header wrapping on small screens */
    .p1-table th{
        line-height: 1.2;
    }
</style>

<div class="p1-wrap">

    <div class="p1-section">

        <div class="p1-subtitle-card">
            <h5>Votre mission</h5>
        </div>

        <p>
            Résoudre une tâche de prédiction dans laquelle vous allez <strong>répondre à 13 questions</strong>.
        </p>
        <p>
          Pour chaque question, votre réponse sera <strong>comparée à une valeur réellement observée dans les données</strong>.
        </p>

        <div class="p1-subtitle-card">
            <h5>Paiement</h5>
        </div>
            <p>
            Si cette partie est sélectionnée pour votre paiement final, une de ces 13 questions sera tirée au sort.
            </p>
            <p>
                Si votre réponse à cette question tirée au sort est correcte, <strong>vous gagnerez 5,0€ supplémentaires</strong>.
            </p>
            <p>
            Ce montant s’ajoutera aux 6,0€ garantis que vous recevrez pour votre participation, ainsi qu'à un bonus de participation supplémentaire de {{ bonus_participation }}€.
            </p>
        </p>
        <div style="text-align:right;">
            {{ next_button }}
        </div>

    </div>

</div>

{% endblock %}