{% extends "base.html" %}

{% block content %}

<!-- INTRODUCTION SECTIONS -->

<section class="intro section-intro active" id="intro-retro">

    <h2>RÉTROSPECTIVE</h2>

    <p>
        La <b>rétrospective</b> aide à comprendre l'évolution
        de la consommation et des usages pour mieux définir
        les stratégies territoriales de gestion de la ressource Eau.
    </p>

</section>


<section class="intro section-intro" id="intro-etat">

    <h2>ÉTAT DES LIEUX</h2>

    <p>
        L'état des lieux permet d'identifier les usages et la
        disponibilité de la ressource en eau.
    </p>

</section>


<section class="intro section-intro" id="intro-anticiper">

    <h2>ANTICIPER</h2>

    <p>
        Anticiper permet d'identifier les leviers d'action
        pour améliorer la gestion de l'eau.
    </p>

</section>


<section class="intro section-intro" id="intro-trajectoire">

    <h2>TRAJECTOIRE</h2>

    <p>
        La trajectoire aide à identifier les risques futurs
        et les évolutions possibles de la ressource.
    </p>

</section>


<!-- NAVIGATION DOTS -->

<div class="section-nav">

    <button class="dot active" data-section="retro"></button>
    <button class="dot" data-section="etat"></button>
    <button class="dot" data-section="anticiper"></button>
    <button class="dot" data-section="trajectoire"></button>

</div>


<!-- TRANSITION VAGUE -->

<div class="wave">
    <svg viewBox="0 0 1440 120" preserveAspectRatio="none">
        <path d="M0,64L60,74.7C120,85,240,107,360,106.7C480,107,600,85,720,69.3C840,53,960,43,1080,48C1200,53,1320,75,1380,85.3L1440,96L1440,120L0,120Z"></path>
    </svg>
</div>



<!-- SECTION RÉTROSPECTIVE -->

<section class="content section active" id="retro">

    <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="card chart-card-small">
        <div id="nombre-catnat-inondation"></div>
    </div>

</section>



<!-- SECTION ÉTAT -->

<section class="content section" id="etat">

    <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="card chart-card-medium">
        <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="card chart-card-small">
        <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="content section" id="anticiper">

    <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="card chart-card-small">
        <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="card chart-card-small">
        <div id="habitations-ppri"></div>
    </div>

</section>



<!-- SECTION TRAJECTOIRE -->

<section class="content section" id="trajectoire">

    <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>
    Comment évolue le nombre d'ouvertures / d'extensions d'industries ?
    </h3>
    <p class="source">sources : CAPFI - réalisation : AULA</p>

    <div class="card chart-card">
        ... En cours de construction ...
        <canvas id="" 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="card chart-card-small">
        <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 %}