{% extends "base.html" %}

{% block content %}

<!-- FIL NARRATIF -->

<section class="narrative-intro panel" aria-label="Fil narratif">
    <article>
        <span>Fil rouge</span>
        <p>
            Revenir sur l'évolution des prélèvements et des risques inondation,
            dresser l'état des lieux des usages et de la qualité de la ressource,
            anticiper l'exposition aux risques, puis explorer les trajectoires
            démographiques, de consommation et de prix de l'eau à l'horizon des
            prochaines décennies.
        </p>
    </article>
</section>


<!-- SECTION RÉTROSPECTIVE -->

<section class="panel" id="retro" aria-labelledby="retroTitle">

    <div class="section-heading">
        <div>
            <span>1 · Rétrospective</span>
            <h2 id="retroTitle">Comprendre l'évolution passée des prélèvements et des risques</h2>
        </div>
    </div>

    <h3>
    Comment les prélèvements d'eau ont-ils évolué depuis 1982 ?
    </h3>
    <p class="source">source : AEAP (2026) - réalisation : AULA</p>

    <div class="card chart-card">
        <canvas id="chart-evolution-prelevements"></canvas>
    </div>


    <h3>
    Y a-t-il plus d'arrêtés CATNAT inondation aujourd'hui ?
    </h3>
    <p class="source">source : GASPAR (2025) - réalisation : AULA</p>

    <div class="card chart-card-medium">
        <canvas id="chart-evolution-catnat-inondation"></canvas>
    </div>

    <h3>
    Combien d'arrêtés CATNAT inondation ont été pris depuis 1987 ?
    </h3>
    <p class="source">source : GASPAR (2025) - réalisation : AULA</p>

    <div class="kpi-block">
        <div id="nombre-catnat-inondation"></div>
    </div>

</section>



<!-- SECTION ÉTAT DES LIEUX -->

<section class="panel" id="etat" aria-labelledby="etatTitle">

    <div class="section-heading">
        <div>
            <span>2 · État des lieux</span>
            <h2 id="etatTitle">Identifier les usages et la disponibilité de la ressource</h2>
        </div>
    </div>

    <h3>
    Quels volumes d'eau sont prélevés actuellement (2023*) ?
    </h3>
    <p class="source">source : AEAP (2026) - réalisation : AULA</p>

    <div class="card chart-card-medium">
        <canvas id="chart-volumes"></canvas>
    </div>

    <h3>
    D'où provient cette eau actuellement (2023*) ?
    </h3>
    <p class="source">source : AEAP (2026) - réalisation : AULA</p>

    <div class="card chart-card-medium">
        <canvas id="chart-provenance"></canvas>
    </div>

    <h3>
    Où est-elle captée sur le territoire ?
    </h3>
    <p class="source">source : AEAP (2026) - réalisation : AULA</p>

    <div class="card chart-card">
        <div id="map-captages" style="height:100%"></div>
    </div>

    <h3>
    Y a-t-il de nombreuses portes d'entrée à la pollution ?
    </h3>
    <p class="source">source : AEAP (2026) - réalisation : AULA</p>

    <div class="kpi-block">
        <div id="captages-abandonnes"></div>
        <p><i>Les captages abandonnées, moins suivis et surveillés, sont des points d'entrée de polluants dans les nappes.</i></p>
    </div>

    <h3>
    Quelle est la qualité des eaux souterraines ?
    </h3>
    <p class="annotation"><b>L'état quantitatif</b> d'une eau souterraine est considéré comme bon lorsque, sur a minima 10 ans,
            les prélèvements ne dépassent pas la capacité de renouvellement de la ressource disponible.
    </p>
   <p class="source">source : AEAP (2019) - réalisation : AULA <br><br></p>

    <div class="card chart-card">
        <div id="map-masses-eau" style="height:100%"></div>
    </div>

    <h3>
    Quelle est la qualité des cours d'eau (*2023) ?
    </h3>

    <p class="source">source : AEAP (2026) - réalisation : AULA</p>

    <div class="card chart-card">
        <div id="map-qualite-eco" style="height:100%"></div>
    </div>

    <h3>
    Où sont traitées les eaux usées (stations d'épuration) ?
    </h3>

    <p class="source">source : AEAP (2026) - réalisation : AULA</p>

    <div class="card chart-card">
        <div id="map-step" style="height:100%"></div>
    </div>

    <h3>
    Les stations d'épuration sont-elles conformes ?
    </h3>

    <p class="source">source : MTE (2024) - réalisation : AULA</p>

    <div class="kpi-block">
        <div id="step-chiffres-cles"></div>
    </div>

    <h3>
    Quelle est la facture d'eau des ménages (2025*) ?
    </h3>

    <p class="source">source : AEAP (2026)</p>

    <div class="indicator">

        <div id="facture-eau-menages"></div>

    </div>

</section>



<!-- SECTION ANTICIPER -->

<section class="panel" id="anticiper" aria-labelledby="anticiperTitle">

    <div class="section-heading">
        <div>
            <span>3 · Anticiper</span>
            <h2 id="anticiperTitle">Identifier les leviers d'action pour la gestion du risque</h2>
        </div>
    </div>

    <h3> Combien d'habitants vivent dans ou à proximité immédiate d'un périmètre de Plan de Prévention du Risque inondation (PPRi) ?</h3>

    <p class="source">sources : FILOSOFI (2019), DDTM62 - réalisation : AULA</p>

    <div class="kpi-block">
        <div id="population-ppri"></div>
    </div>

    <h3> Combien d'habitation sont situées au sein d'un périmètre de Plan de Prévention du Risque inondation (PPRi) ?</h3>

    <p class="source">sources : Fichiers Fonciers (2025), DDTM62 - réalisation : AULA</p>

    <div class="kpi-block">
        <div id="habitations-ppri"></div>
    </div>

</section>



<!-- SECTION TRAJECTOIRE -->

<section class="panel" id="trajectoire" aria-labelledby="trajectoireTitle">

    <div class="section-heading">
        <div>
            <span>4 · Trajectoire</span>
            <h2 id="trajectoireTitle">Identifier les risques futurs et les évolutions possibles de la ressource</h2>
        </div>
    </div>

    <h3>
    Comment évolue la population et quelles sont les projections ? (échelle EPCI)
    </h3>

    <p class="source">sources : OMPHALE (2020) - réalisation : AULA</p>


    <div class="card chart-card">
        <canvas id="projection-population" style="height:100%"></canvas>
    </div>

    <h3>
    Comment pourrait évoluer la quantité d'eau consommée ? (échelle EPCI)
    </h3>
    <p class="annotation">En France, une personne consomme en moyenne 150 L d'eau par jour.</p>
    <p class="source">calcul : AULA - sources : OMPHALE (2020), Observatoire national des services d'eau et d'assainissement - réalisation : AULA</p>

    <div class="card chart-card">
        <canvas id="projection-conso-eau" style="height:100%"></canvas>

    </div>

    <h3>
    Quelles économies d'eau sont à prévoir (échelle EPCI) ?
    </h3>
    <p class="annotation">Le Plan Eau, annoncé par le Président de la République en mars 2023, comprends 53 mesures pour l'eau.
        Il fixe un objectif de 10% de réduction de prélèvements d'eau à décliner localement par usager.</p>

    <div class="kpi-block">
        <div id="economie-eau"></div>
    </div>

    <h3>
    Combien coûtent les services liés à l'eau potable actuellement (2024*) ?
    </h3>
    <p class="source">sources : AEAP (2026) - réalisation : AULA</p>

    <div class="card chart-card">
        <canvas id="chart-prix-repartition"></canvas>
    </div>

    <h3>
    Comment évoluent ces tarifs ?
    </h3>
    <p class="source">sources : AEAP (2026) - réalisation : AULA</p>

    <div class="card chart-card">
        <canvas id="chart-prix-evolution"></canvas>
    </div>

</section>

{% endblock %}