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

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

{% block content %}
<style>
    /* Page container */
    .p1-wrap {
        max-width: 980px;
        margin: 0 auto;
    }

    /* Text blocks */
    .p1-wrap p {
        margin-bottom: 14px;
        line-height: 1.35;
    }

    /* Subtitle card (same as previous page) */
    .p1-subtitle-card {
        display: inline-block;
        background: #f4f4f4;
        border: 1px solid #e6e6e6;
        border-radius: 8px;
        padding: 10px 18px;
        margin: 28px 0 14px 0;
    }

    .p1-subtitle-card h5 {
        margin: 0;
    }

    .p1-section {
        margin-top: 0px;
        margin-bottom: 24px;
    }

    .p1-final-instruction {
        margin-top: 48px;   /* increase or decrease to taste */
    }

    /* Responsive (kept consistent even if not used here) */
    @media (max-width: 768px) {
        .p1-wrap {
            max-width: 100%;
        }
    }
</style>

<div class="p1-subtitle-card">
    <h5 xmlns="http://www.w3.org/1999/html">Paiement</h5>
</div>

<div class="p1-wrap">

    <p>
    Si cette partie est sélectionnée pour votre paiement final, vous gagnerez :
    </p>
    <ul>
        <li><strong>{{ piece_rate }}€ pour chaque bonne réponse</strong> obtenue pendant ces 5 minutes</li>
        <li>un bonus de participation supplémentaire de {{ bonus }}€</li>
    </ul>
    <p>
    Ces montants s’ajouteront aux 6,0€ garantis que vous recevrez pour votre participation.
    </p>


    <div class="p1-subtitle-card">
        <h5 xmlns="http://www.w3.org/1999/html">Avant de commencer</h5>
    </div>

    <div class="p1-section">
        <p>
            Chaque exercice a un niveau de difficulté similaire se situant entre les deux exemples précédents.
        </p>

        <p>
            Pour favoriser une réflexion attentive, la validation de votre réponse ne sera possible qu’après 10 secondes.
        </p>

        <p>
            Un minuteur apparaîtra en haut à droite de l’écran lorsqu’il restera 30 secondes.
        </p>

        <p>
            <strong>Les résultats dans ce type d’exercices sont souvent liés à la réussite scolaire et aux revenus futurs.</strong>
        </p>
    </div>

    <div class="p1-final-instruction">
        <p>
            Dès que vous êtes prêt, veuillez cliquer sur le bouton "Suivant" pour faire apparaitre le premier exercice et ainsi commencer cette première partie de l'expérience.
        </p>
    </div>

<div style="margin-top:18px; display:flex; justify-content:space-between; align-items:center;">

    {{ back_button }}
    {{ next_button }}

</div>

{% endblock %}