<!doctype html>

<html lang="fr">
  <head>
    <meta charset="utf-8">
    <link rel="icon" href="/img/favicon/favicon-16.ico" sizes="16x16">
    <link rel="icon" href="/img/favicon/favicon-32.ico" sizes="32x32">
    <link rel="icon" href="/img/favicon/favicon-64.ico" sizes="64x64">
    <link rel="icon" href="/img/favicon/favicon-128.png" sizes="128x128">
    {# heavy and maybe not usefull #}
    {# <link rel="icon" href="/img/favicon/favicon-152.png" sizes="152x152"> 
    <link rel="icon" href="/img/favicon/favicon-167.png" sizes="167x167">
    <link rel="icon" href="/img/favicon/favicon-180.png" sizes="180x180">
    <link rel="icon" href="/img/favicon/favicon-192.png" sizes="192x192">
    <link rel="icon" href="/img/favicon/favicon-196.png" sizes="196x196">
    <link rel="icon" href="/img/favicon/favicon-256.png" sizes="256x256">
    <link rel="icon" href="/img/favicon/favicon-512.png" sizes="512x512"> #}


    <title>{{ page }} | {{ site_name }}</title>

    <link rel="stylesheet" href="/css/frombulma.css">
    <link rel="stylesheet" href="/css/styles.css">
    {% block head %}
    {% endblock %}
  </head>
  <body class="has-navbar-fixed-top">
    <nav class="navbar is-fixed-top has-grad is-dark" role="navigation" aria-label="main navigation">
      <div class="navbar-brand">
        <a class="navbar-item" href="/Accueil.html">
          <img src="/img/logo-128.png" alt="logo" class="logo"/>
          {{ site_name }}
        </a>
        <label for="menu-toggle" role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </label>
      </div>
      <input type="checkbox" id="menu-toggle"/>
      <div id="generic-navbar" class="navbar-menu">
        <div class="navbar-start">
          <a href="/Accueil.html" class="navbar-item">
            Accueil
          </a>

          <div class="navbar-item has-dropdown is-hoverable">
            <a href="" class="navbar-link">
              Services
            </a>
            <div class="navbar-dropdown">
              <a href="/services/Bitwarden.html" class="navbar-item">
                Coffre-fort numérique
              </a>
              <a href="/services/Nextcloud.html" class="navbar-item">
                Cloud personnel
              </a>
            </div>
          </div>
          <div class="navbar-item has-dropdown is-hoverable">
            <a href="" class="navbar-link">
              Informations techniques
            </a>
            <div class="navbar-dropdown">
              <a href="/Informations-techniques/Auto-hébergement.html" class="navbar-item">
                Auto-hébergement
              </a>
              <a href="/Informations-techniques/Matériel.html" class="navbar-item">
                Matériel
              </a>
              <a href="/Informations-techniques/Logiciels.html" class="navbar-item">
                Logiciels
              </a>
              <a href="/Informations-techniques/Sauvegardes.html" class="navbar-item">
                Sauvegardes
              </a>
            </div>
          </div>
          <div class="navbar-item has-dropdown is-hoverable">
            <a href="" class="navbar-link">
              À propos
            </a>
            <div class="navbar-dropdown">
              {#<a href="/a-propos/Association.html" class="navbar-item">
                L'association
              </a>#}
              <a href="/a-propos/CGU.html" class="navbar-item">
                Conditions d'utilisation
              </a>
              <a href="/a-propos/Mentions%20légales.html" class="navbar-item">
                Mentions légales
              </a>
            </div>
          </div>
        <a class="navbar-item" href="https://status.katzei.fr" target="_blank">
          État des services
        </a>
        </div>
        <div class="navbar-end">
          <a href="/a-propos/Nous%20contacter.html" class="navbar-item mail" title="Nous contacter par mail">
            ✉
          </a>
          <a rel="me" href="https://mamot.fr/@katzei" class="navbar-item logo" title="Nous contacter sur mastodon">
            <img class="mastodon" src="/img/logo_mastodon.svg">
          </a>
        </div>
      </div>
    </nav>
    <div id="main" class="container">
      {% block main %}
      {% endblock %}
    </div>
  </body>
</html>


