```{raw} html
<!-- Fenêtre modale avec slides -->
<div id="introModal" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center;
    z-index: 9999;">

  <div style="background:rgb(194, 196, 197); color: black; border-radius: 12px; padding: 2rem; 
      max-width: 1000px; width: 90%; text-align: center; position: relative; overflow: hidden;
      box-shadow: 0 0 20px rgba(0,0,0,0.3);">

      <button onclick="closeIntro()" style="
  position: absolute;
  top: 10px;
  right: 15px;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
  cursor: pointer;
  z-index: 10000;
" aria-label="Fermer">✖</button>

    <!-- Slides -->
    <div class="slide" id="slide1">

    <div style="position: absolute; top: 15px; right: 55px; color: red; font-weight: bold; font-size: 0.95rem;">
  Pour fermer si vous avez déjà vu ces slides &rarr;
</div>

      <h2> Accéder à l'outil LAQ</h2>
      <a href="https://dataecla.fr/laq/capteurs/accueil" target="_blank">
  <img src="_static/logo_LAQ_texte.png" alt="Logo LAQ" style="width: 150px;">
</a>
      <p>
        Cliquez sur le logo ci-dessus ou rendez-vous sur :<br>
        <a href="https://dataecla.fr/laq/capteurs/accueil" target="_blank">
          <b>dataecla.fr/laq/capteurs/accueil</b>
        </a>
      </p>
      <div id="progressIndicator" style="margin-top: 1rem; color: black; font-weight: bold;">Étape 1/5</div>
    </div>

    <div class="slide" id="slide2" style="display: none; text-align: center;">
    <h2> Navigation dans l'interface </h2>
      <img src="_static/page_acceuil_slide.png" style="width: 1000px; border-radius: 1em; height: auto;">
      <p style=" text-align: justify;">
 <img src="_static/1num.png" alt="image" style="height: 2em; vertical-align: middle; margin-right: 0.2em;"> Barre de nagivation (informatif) <br>

<img src="_static/2num.png" alt="image" style="height: 2em; vertical-align: middle; margin-right: 0.2em;"> Info-bulles : brèves explications du rôle de l'onglet et des élément essentiels à prendre en compte <br>

<img src="_static/3num.png" alt="image" style="height: 2em; vertical-align: middle; margin-right: 0.2em;"> Navigation  : Cliquez sur les numéros d’onglet pour avancer ou utilisez les boutons <b>« Précédent »</b> et <b>« Suivant »</b> en bas de la page <br>
     </p>
     <div id="progressIndicator" style="margin-top: 1rem; color: black; font-weight: bold;">Étape 2/5</div>
    </div>
     

<div class="slide" id="slide3" style="display: none; color: red;">
  <h2> Information importante </h2>
  <p style="text-align: center; color: black;">
    <b>
    À partir de l’onglet n°4 (« IMPORT »), les éléments que vous importez et que vous sélectionnez ne sont pas sauvegardés si vous revenez aux étapes précédentes. </b><br>
    <img src="_static/02_message_retour.png" style="width: 600px; border-radius: 1em; height: auto; padding-top: 1em;">
  </p>
    <div id="progressIndicator" style="margin-top: 1rem; color: black; font-weight: bold;">Étape 3/5</div>
</div>

<div class="slide" id="slide4" style="display: none; color: red;">
  <h2>Utilisation du guide</h2>
  <p style="text-align: center; color: black;">
  <b>
     Il est recommandé d’utiliser ce guide étape par étape, sur une page parallèle, surtout si vous utiliser cet outil pour la première fois. <br>
  </b>
  <img src="_static/02_interface_guide_LAQ.png" style="width: 800px; border-radius: 1em; height: auto; padding-top: 1em;">
  </p>
    <div id="progressIndicator" style="margin-top: 1rem; color: black; font-weight: bold;">Étape 4/5</div>
</div>

<div class="slide" id="slide5" style="display: none; text-align: center;">
  <button onclick="closeIntro()" style="
    padding: 1rem 2rem;
    font-size: 1.2rem;
    background-color:rgb(113, 116, 118);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  ">
    Commencer
  </button>
  <div id="progressIndicator" style="margin-top: 1rem; font-weight: bold;">Étape 5/5</div>
</div>

    <!-- Navigation -->
    <div style="margin-top: 1rem;">
      <button onclick="previousSlide()">← Précédent</button>
      <button onclick="nextSlide()">Suivant →</button>
    </div>

  </div>
</div>

<style>
  .slide { display: none; }
  .slide.active { display: block; }
</style>

<script>
  (function () {
    let currentSlide = 1;

    function showSlide(n) {
      document.querySelectorAll('.slide').forEach(s => s.style.display = 'none');
      const slide = document.getElementById('slide' + n);
      if (slide) slide.style.display = 'block';
    }

    window.nextSlide = function () {
      if (currentSlide < 5) currentSlide++;
      showSlide(currentSlide);
    };

    window.previousSlide = function () {
      if (currentSlide > 1) currentSlide--;
      showSlide(currentSlide);
    };

    window.closeIntro = function () {
      document.getElementById('introModal').remove();
    };

    document.addEventListener('DOMContentLoaded', () => {
      showSlide(currentSlide);
    });
  })();
</script>
```

```{raw} html
<div style="text-align: right; margin-top: 1em;">
  <button onclick="window.print()" style="background-color: #2196F3; color: white; padding: 10px 15px; border: none; border-radius: 6px; cursor: pointer;">
    📄 Télécharger cette page en PDF
  </button>
</div>
```

Avant de démarrer
=================

<div style="text-align: justify;">

Lorsque vous accédez à l'application LAQ, la première page sur laquelle vous arrivez est la page d'accueil. Celle-ci présente le contexte de l'outil ainsi que les prérequis essentiels avant de commencer la procédure. En effet, l'absence de certains éléments peut entraîner un blocage temporaire de la procédure de bancarisation. Cette page a donc pour but de garantir la fluidité du processus, en précisant les trois prérequis indispensables :

<style>
    .custom-list {
        list-style: none;
        padding-left: 0;
    }
    .custom-list li::before {
        content: "› ";
        color: black;
        font-weight: bold;
        margin-right: 6px;
    }
    .bloquant {
        color: red;
        font-weight: bold;
    }
</style>

<ol class="custom-list">
    <li><span class="bloquant">Le référencement de votre site et de votre station dans la base de données</span> (bloquant)</li>
    <li><span class="bloquant">Le respect des conventions de nommage requises pour vos fichiers</span> (bloquant)</li>
    <li><b>Le référencement de votre modèle de capteur</b> (non bloquant)</li>
</ol>

#### I. Le site et la station
<hr style="border:2px solid gray">

Votre site d’étude correspond ici à l’entité hydrographique (plan d’eau) dans laquelle une ou plusieurs stations de mesure sont installées. 

![image](_static/00_schema_lexique.png)

Un grand nombre de plans d’eau en France sont déjà référencés dans LAQ. Pour vérifier si votre plan d’eau figure bien dans la base de données, il faut aller à l’onglet n°2 (Station) et rechercher dans le menu déroulant «<b> Site </b>».

Si votre site d’étude n’y apparaît pas, vous pouvez en créer un nouveau via le bouton « Ajouter un nouveau site » (procédure expliquée <a href="station.html" target="_blank" rel="noopener noreferrer"><b>ici</b></a>). Cette opération nécessite cependant une validation par les gestionnaires de la base de données (pôle ECLA), afin d’éviter les doublons et de garantir la conformité des noms. Ce processus peut prendre un certain délai, d’où l’importance de s’en assurer dès la phase d’accueil. Il en va de même pour l’ajout d’une nouvelle station, même si le plan d’eau est déjà référencé.

Il est recommandé de <a href="mailto:thermie-pe-aix@inrae.fr" target="_blank" rel="noopener noreferrer"><b>nous contacter</b></a> (thermie-pe-aix@inrae.fr) si votre station n’existe pas encore dans la base de données. Cela permettra de créer un nom de station homogène par rapport aux autres (ou d’utiliser un nom en lien avec l’entité hydrographique de votre station). Nous recommandons un nom de station court qui précise l’entité hydrographique et la station. 


<div style="border: 1px solid #ccc; background-color: #d4edda; padding: 10px; border-radius: 6px; color:rgb(0, 0, 0);">
  <strong>Par exemple :</strong> <code>GDL44-03</code> désigne la station n°3 du plan d’eau de Grand Lieu (<code>GDL44</code>), situé en Loire-Atlantique (44).
</div>

#### II. Comment nommer les fichiers ?
<hr style="border:2px solid gray">

Pour organiser la base de données et suivre une logique similaire pour chaque bancarisation, l'objectif est de nommer les fichiers selons cette même convention de nommage : 

> <b> <span style="color: green;">nom-de-la-station_</span><span style="color: blue;">emplacement-capteur_</span><span style="color: purple;">SN.000000</span>(.txt ou .csv)</b> 

###### <b> <span style="color: green;"> nom-de-la-station_ </span> </b>

Lorsque le site et la station ont été crée ou sont déjà référencés dans la base, le code à mettre dans le fichier se retrouve à l'aide du menu déroulant : <b> « Site » </b>. En sélectionnant le plan d'eau et la station souhaité, la carte (sur la droite) s'ajuste et affiche le code du plan d'eau et de la station <b> (à renseigner sur dans le nom du fichier) </b>. Lorsque vous avez plusieurs stations dans un plan d'eau (site), nous recommendons de mettre le code du site suivi d'un (<b>-</b>) tiret (évitez les <b>_</b> car déjà contenu dans la grammaire du fichier) et d'un numéro ou d'un nom de station (Exemples : ALL04-1 ; ALL04-2 ; ALL04-nord ; ALL04-sud).

![image](_static/recherche_nom_station_02.png)

###### <b> <span style="color: blue;">emplacement-capteur_ </span> </b>

Pour l'emplacement, il va s'agir d'une<b> profondeur</b> ou d’une <b> côte</b>. Si des capteurs sont installés à différentes profondeurs, l'application va permettre de lire les différents fichiers en fonction de ces profondeurs/côtes spécifiés. Dans ce cas, il faut la renseigner en <b>centimètres</b>, en utilisant en tout 5 caractères. 

<div style="border: 1px solid #ccc; background-color: #d4edda; padding: 10px; border-radius: 6px; color: #000;">
  <b>Voici quelques exemples :</b><br><br>

  <table style="width: 100%; border-collapse: collapse; color: #000;">
    <thead style="background-color: #eaf5ea;">
      <tr>
        <th style="border: 1px solid #000; padding: 8px;">Nom de fichier</th>
        <th style="border: 1px solid #000; padding: 8px;">Entité hydrographique</th>
        <th style="border: 1px solid #000; padding: 8px;">Station</th>
        <th style="border: 1px solid #000; padding: 8px;">Emplacement du capteur</th>
        <th style="border: 1px solid #000; padding: 8px;">Caractéristique de l’emplacement</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="border: 1px solid #000; padding: 8px;">BIM13_00050.txt</td>
        <td style="border: 1px solid #000; padding: 8px;">BIM13</td>
        <td style="border: 1px solid #000; padding: 8px;">BIM13</td>
        <td style="border: 1px solid #000; padding: 8px;">0.5 m</td>
        <td style="border: 1px solid #000; padding: 8px;">profondeur</td>
      </tr>
      <tr>
        <td style="border: 1px solid #000; padding: 8px;">GDL44-03_00030.txt</td>
        <td style="border: 1px solid #000; padding: 8px;">GDL44</td>
        <td style="border: 1px solid #000; padding: 8px;">GDL44-03</td>
        <td style="border: 1px solid #000; padding: 8px;">0.3 m</td>
        <td style="border: 1px solid #000; padding: 8px;">profondeur</td>
      </tr>
      <tr>
        <td style="border: 1px solid #000; padding: 8px;">GDL44-11_00030f.txt</td>
        <td style="border: 1px solid #000; padding: 8px;">GDL44</td>
        <td style="border: 1px solid #000; padding: 8px;">GDL44-11</td>
        <td style="border: 1px solid #000; padding: 8px;">0.3 m</td>
        <td style="border: 1px solid #000; padding: 8px;">côte</td>
      </tr>
      <tr>
        <td style="border: 1px solid #000; padding: 8px;">GDL44-aff_00030f.txt</td>
        <td style="border: 1px solid #000; padding: 8px;">GDL44</td>
        <td style="border: 1px solid #000; padding: 8px;">GDL44-11</td>
        <td style="border: 1px solid #000; padding: 8px;">affluent</td>
        <td style="border: 1px solid #000; padding: 8px;">côte</td>
      </tr>
    </tbody>
  </table>
</div>

Par défaut, LAQ interprète une séquence de 5 chiffres comme une profondeur. Si la séquence est suivie d’un **f**, elle sera interprétée comme une hauteur à partir du fond. Si la séquence est suivie d’un **aff**, elle sera interprétée comme un affluent.

<div style="border: 1px solid #ccc; background-color: #d4edda; padding: 10px; border-radius: 6px; color:rgb(0, 0, 0);">
  <strong>Par exemple :</strong> un capteur à 1.25 m aura pour code 00125 ; un capteur à 110 m aura pour code 11000.<br>
  <strong> ↳ Exemple des fichiers du lac d'Allos :</strong> <br>
  <img src="_static/01_exemple_fichiers_allos.png" style="padding-top: 5px; max-width: 40%; height: auto;">
</div>

###### <b> <span style="color: purple;">	SN.000000 </span> </b>

<b>Optionnel</b> – Cette information peut être saisie manuellement dans l’application si elle n’est pas présente dans le nom du fichier. Pour les capteurs Hobo, LAQ parvient généralement à lire le numéro de série directement dans le fichier. Cette information est importante pour assurer le suivi du cycle de vie des capteurs. 

Si elle est absente, il est possible de demander un <b> UUID </b>(Identifiant Unique Universel).

#### III. Le modèle de capteur
<hr style="border:2px solid gray">

La plupart des capteurs environnementaux étant déjà enregistrés, et leur diversité sur le marché relativement limitée, l’ajout d’un nouveau modèle de capteur est rarement nécessaire. Contrairement à l’ajout d’un site ou d'une station, cette opération ne requiert pas de validation et n'est donc pas bloquante. Vous trouverez, dans l’onglet 4 « Chargement de données », une section dédiée vous permettant d’ajouter un capteur si besoin (procédure expliquée <a href="chargement.html#ajouter-capteur" target="_blank" rel="noopener noreferrer"><b>ici</b></a>).

Voici la liste des capteurs référencées dans la base (dernière mise à jour : 31/07/2025) :

<style>
.two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
</style>

<div class="two-columns">
    <ul>
        <li>Hobo Pendant temp</li>
        <li>HOBO TidbiT MX Temperature 400</li>
        <li>Hobo Water Level</li>
        <li>Hobo Water Level 250</li>
        <li>Hobo Water Temp</li>
        <li>Hobo Water Temp Pro V2</li>
        <li>iButton DS1921G-F5#</li>
    </ul>
    <ul>
        <li>LevelSCOUT (modèle à confirmer)</li>
        <li>miniDOT</li>
        <li>Rugged TROLL 200</li>
        <li>Tinytag Aquatic 2</li>
        <li>TinyTag Plus</li>
        <li>TinyTag Plus 2</li>
    </ul>
</div>

<div style="border: 1px solid #ccc; background-color: rgb(0, 0, 0); padding: 10px; border-radius: 20px; color: rgb(255, 255, 255); display: flex; align-items: center; gap: 15px;">
  <span>
    Dès lors que les deux critères bloquants (site et station) ont été vérifiés, passez à la première étape de la bancarisation à l'onglet <b> « STATION » </b>, en cliquant sur :  
  </span>
  <img src="_static/00_suivant.png" style="max-width: 120px; height: auto; border-radius: 10px;">
</div>

<hr style="border:2px solid gray">
<p>Pour avoir la liste des abréviations et du lexique : <a href="glossaire.html" target="_blank" rel="noopener noreferrer"><b>cliquez ici</b></a></p>