//
<style>
  body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f8f9fa;
  }

  .contenedor {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding: 10px;
    box-sizing: border-box;
  }

  form {
    width: 100%;
    max-width: 800px;
    margin: 10px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  form select, form input, form button {
    padding: 8px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 6px;
  }

  /* 🔹 Imagen de la gráfica (adaptable) */
  img {
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    margin: 10px 0;
  }

  .grafico {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }

  /* 🔸 Responsive */
  @media (max-width: 768px) {
    form {
      flex-direction: column;
      align-items: stretch;
    }
    form select, form input, form button {
      width: 100%;
    }
  }
</style>

<div class="contenedor"><p>
<a href="rapports-mensuels.php">Informes mensuales</a> | 
<a href="rapports-annuels.php">Informes anuales</a> | 
<a href="comparaison-mensuels.php">Comparativas mensuales</a> | 
<a href="comparaison-annuels.php">Comparativas anuales</a>
</p><form method="get" action=""><table><tr><td>Primer a&ntilde;o para comparar: </td><td><select name="fichier1"><option value="2026/2026_NOAA">l'année 2026</option><option value="2025/2025_NOAA">l'année 2025</option><option value="2024/2024_NOAA">l'année 2024</option><option value="2023/2023_NOAA">l'année 2023</option><option value="2022/2022_NOAA">l'année 2022</option><option value="2021/2021_NOAA">l'année 2021</option><option value="2020/2020_NOAA">l'année 2020</option><option value="2019/2019_NOAA">l'année 2019</option><option value="2018/2018_NOAA">l'année 2018</option><option value="2017/2017_NOAA">l'année 2017</option><option value="2016/2016_NOAA">l'année 2016</option><option value="2015/2015_NOAA">l'année 2015</option><option value="2014/2014_NOAA">l'année 2014</option><option value="2013/2013_NOAA">l'année 2013</option></select></td></tr><tr><td> Segundo a&ntilde;o para comparar: </td><td><select name="fichier2"><option value="2026/2026_NOAA">l'année 2026</option><option value="2025/2025_NOAA">l'année 2025</option><option value="2024/2024_NOAA">l'année 2024</option><option value="2023/2023_NOAA">l'année 2023</option><option value="2022/2022_NOAA">l'année 2022</option><option value="2021/2021_NOAA">l'année 2021</option><option value="2020/2020_NOAA">l'année 2020</option><option value="2019/2019_NOAA">l'année 2019</option><option value="2018/2018_NOAA">l'année 2018</option><option value="2017/2017_NOAA">l'année 2017</option><option value="2016/2016_NOAA">l'année 2016</option><option value="2015/2015_NOAA">l'année 2015</option><option value="2014/2014_NOAA">l'année 2014</option><option value="2013/2013_NOAA">l'année 2013</option></select></td></tr><tr><td>Valores para comparar: </td><td><select name="data"><option value="tn">temperaturas min</option><option value="tx">temperaturas max</option><option value="tnm">media de la temperatura min</option><option value="txm">media de la temperatura max</option><option value="tm">temperatura media</option><option value="precipitations">precipitaciones</option><option value="precipmax">lluvia max en una hora</option><option value="ventmoyen">media del viento</option><option value="ventmax">rafagas max</option></select></td></tr><tr><td colspan="2" style="text-align:center"><input type="submit" value="Ver grafica"/></form></td></tr></table></div>