{{ block title }}
    <h1>Partie 1 : Instructions - Page 3 / 9</h1>
    <h3>Informations statistiques</h3>
{{ endblock }}
{{ block content }}
    <div class="page">
        <p class="important">Au départ, chaque CV a autant de chances d'être bon que d'être mauvais.</p>
        <p>Pour vous aider à évaluer un CV, vous avez à votre disposition des fréquences concernant chaque type
            d’information qui seront à votre disposition. Ces fréquences décrivent :
            <ul>
                <li>le nombre d'individus qui possèdent cette caractéristique pour 100 mauvais CV (partie de gauche),</li>
                <li>le nombre d'individus qui possèdent cette caractéristique pour 100 bons CV (partie de droite).</li>
            </ul>
            Le tableau suivant présente un exemple d’ensemble de fréquences.</p>
    </div>
    <div id="tableau">
        <table id="criteres">
            <tr>
                <th class="left_col">Info</th>
                <th colspan="4" id="double_col">Fréquence de l'info pour 100 mauvais CV</th>
                <th colspan="4" id="double_col" class="partie2">Fréquence de l'info pour 100 bons CV</th>
            </tr>
            <tr>
                <td class="left_col">Diplome</td>
                <td class="txt">Pertinent</td><td class="middle_col">40</td>
                <td class="txt">Non pertinent</td><td>60</td>
                <td class="txt partie2">Pertinent</td><td class="middle_col">60</td>
                <td class="txt">Non pertinent</td><td>40</td>
            </tr>
            <tr>
                <td class="left_col">Experience</td>
                <td class="txt">Moins de deux ans</td><td class="middle_col">35</td>
                <td class="txt">Plus de trois ans</td><td>65</td>
                <td class="txt partie2">Moins de deux ans</td><td class="middle_col">65</td>
                <td class="txt">Plus de trois ans</td><td>35</td>
            </tr>
            <tr>
                <td class="left_col">Age</td>
                <td class="txt">Plus de cinquante ans</td><td class="middle_col">70</td>
                <td class="txt">Moins de cinquante ans</td><td>30</td>
                <td class="txt partie2">Plus de cinquante ans</td><td class="middle_col">30</td>
                <td class="txt">Moins de cinquante ans</td><td>70</td>
            </tr>
            <tr>
                <td class="left_col">Genre</td>
                <td class="txt">Femme</td><td class="middle_col">25</td>
                <td class="txt">Homme</td><td>75</td>
                <td class="txt partie2">Femme</td><td class="middle_col">75</td>
                <td class="txt">Homme</td><td>25</td>
            </tr>
        </table>
    </div>
    <div class="page">
        <p>Voici un exemple pour vous aider à comprendre comment lire le tableau :</p>
        <p>Supposons que l'information "Diplôme : Pertinent" soit présentée. La première ligne du tableau vous
            permet de voir que sur 100 bons CV, il y en a 60 qui ont un diplôme pertinent et sur 100 mauvais CV,
            il y en a 40 qui ont un diplôme pertinent.</p>
    </div>
    <div id="tableau">
        <table id="criteres">
            <tr>
                <th class="left_col">Info</th>
                <th colspan="4" id="double_col">Fréquence de l'info pour 100 mauvais CV</th>
                <th colspan="4" id="double_col" class="partie2">Fréquence de l'info pour 100 bons CV</th>
            </tr>
            <tr>
                <td class="left_col">Diplome</td>
                <td class="txt">Pertinent</td><td class="middle_col">40</td>
                <td class="txt">Non pertinent</td><td>60</td>
                <td class="txt partie2">Pertinent</td><td class="middle_col">60</td>
                <td class="txt">Non pertinent</td><td>40</td>
            </tr>
        </table>
    </div>
    <div class="page">
        <p>Pour chaque CV, votre objectif est de donner une estimation en pourcentage des chances du CV complet d'être
            BON ou MAUVAIS, en utilisant les fréquences de la TOTALITÉ des informations dont vous disposez.</p>
        <p>Les fréquences d'une information sont indépendantes des fréquences des autres informations. Par exemple sur
            100 bons CV, il y en 18 qui ont un diplôme pertinent et plus de cinquante ans (soit 100 CV x 60% x 30%).</p>
        <p class="important">Comme chaque CV est évalué pour un poste différent, les fréquences données sont susceptibles
            de changer pour chaque CV. Les fréquences resteront affichées en haut de l’écran pour chaque estimation.</p>
    </div>
    <button id="bouton">
        <span>Page suivante</span>
    </button>
{{ endblock }}

{{ block styles }}
    <style>
        h1 {
            margin-top: -50px;
            font-size: x-large;
            text-align:center;
            font-family: "Arial Rounded MT Bold";
        }

        h3 {
            font-size: large;
            text-align:center;
            font-family: "Arial Rounded MT Bold";
            color: darkred;
        }

        .important{
            font-style: italic;
            font-size: larger;
        }

        .page{
            text-align: justify;
            padding: 30px 20px;
            background-color: #f5f5f5;
            font-size: 19px;
            border-radius: 10px;
        }

        #bouton {
            border: none;
            border-radius: 3px;
            background-color: #4aaf0b;
            color: #FFFFFF;
            text-align: center;
            font-size: 16px;
            padding: 10px;
            width: 230px;
            transition: all 0.5s;
            cursor: pointer;
            margin: 20px 30px 0px 600px;
        }

        #bouton:hover{
            background-color: #307707;
        }

        #bouton span {
            cursor: pointer;
            display: inline-block;
            position: relative;
            transition: 0.5s;
        }

        #bouton span:after {
            content: '\00bb';
            position: absolute;
            opacity: 0;
            top: 0;
            right: -20px;
            transition: 0.5s;
        }

        #bouton:hover span {
            padding-right: 25px;
        }

        #bouton:hover span:after {
            opacity: 1;
            right: 0;
        }

        #tableau {
            margin: 20px 0px;
        }

        #criteres {
            border-collapse: collapse;
            border-style: groove;
            border-width: thin;
            width : 100%;
            margin : auto;
        }

        #criteres td, #criteres th{
            padding: 4px;
        }

        #criteres tr:nth-child(even){background-color: #a0dcff;}

        #criteres th {
            padding-top: 10px;
            padding-bottom: 10px;
            color: #000000;
            border-bottom: solid 1px black;
        }

        #double_col {
            text-align: center;
        }

        .left_col {
            border-right-style:solid;
            border-right-width:2px;
        }

        .middle_col {
            border-right: solid black 1px;
        }

        .txt {
            text-align: right;
        }

        .partie2 {
            border-left : solid black 2px;
        }

    </style>
{{ endblock }}


{{ block scripts }}

{{ endblock }}