En-tête & Pied de page

Les deux composants d'encadrement majeurs (.ml-header et .ml-footer) qui assurent la conformité visuelle et l'identité de l'État sur tous les sites publics maliens.

01. En-tête Institutionnel (Header)

L'en-tête (.ml-header) regroupe l'identité officielle de la République du Mali, la barre tricolore, la barre de recherche globale ainsi que la navigation principale. Il s'adapte dynamiquement en réduisant sa taille au défilement (.ml-header-shrinkable) et bascule sous forme de tiroir burger sur mobile (< 860px).

Éléments de marque de l'en-tête

Armoiries nationales (logo-mali.svg) : Les armoiries officielles de l'État malien.
Logo de l’AES (logo-aes.svg) : Le logo officiel de l'Alliance des États du Sahel (optionnel).
Titre de la marque (.brand-title) : Fixé de manière réglementaire à RÉPUBLIQUE DU MALI.
Titre du site (.site-title) : Nom de l'administration ou du service public.
Soulignement tricolore (.ml-tricolor-bar) : Le drapeau du Mali (Vert, Jaune, Rouge).

    
HTML

<!-- En-tête officiel standard (Non-fixe / Sticky / Shrinkable) -->
<header class="ml-header ml-header-sticky ml-header-shrinkable" id="site-header">
  <div class="container">
    <div class="header-top">
      <a href="/" class="brand-block">
        <img src="/dsml/assets/logo-mali.svg" alt="Armoiries du Mali" class="ml-header-logo" width="42" height="42">
        <div class="brand-text">
          <div class="brand-title">RÉPUBLIQUE DU MALI</div>
          <div class="site-title">Nom de l'Administration</div>
          <div class="ml-tricolor-bar">
            <div class="green"></div>
            <div class="yellow"></div>
            <div class="red"></div>
          </div>
        </div>
      </a>
      <div class="header-actions">
        <button class="ml-header-burger" id="header-burger" aria-label="Menu principal">
          <svg viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16"></path></svg>
        </button>
      </div>
    </div>
    <nav class="ml-header-nav" id="header-nav" aria-label="Menu principal">
      <a href="/" class="ml-nav-item active">Accueil</a>
      <a href="/demarches/" class="ml-nav-item">Démarches</a>
      <a href="/actualites/" class="ml-nav-item">Actualités</a>
    </nav>
  </div>
</header>

02. Pied de Page Officiel (Footer)

Le pied de page (.ml-footer) conclut la structure de la page. Il présente obligatoirement le bloc de marque de l'État, la devise nationale (Un Peuple – Un But – Une Foi), les coordonnées de l’administration, les accès rapides et la mention d'accessibilité.

Aperçu du Pied de Page Officiel (.ml-footer) Conforme DSML v0.1

    
HTML

<!-- Pied de page officiel du DSML -->
<footer class="ml-footer" aria-label="Pied de page">
  <div class="container">
    <div class="footer-top">
      <div class="footer-brand">
        <div class="brand-block">
          <div class="ml-flag" aria-hidden="true">
            <div class="green"></div>
            <div class="yellow"></div>
            <div class="red"></div>
          </div>
          <div class="brand-text">
            <div class="brand-title">RÉPUBLIQUE DU MALI</div>
            <div class="brand-motto">Un Peuple – Un But – Une Foi</div>
          </div>
        </div>
        <div class="footer-coords">
          <strong>Nom du Ministère / Direction</strong><br>
          Adresse physique, Bamako, Mali<br>
          Contact : contact@malihub.digital
        </div>
      </div>
      <div class="footer-links-container">
        <nav class="footer-col" aria-label="Liens utiles">
          <div class="footer-col-title">Rubrique</div>
          <a href="#">Lien utile 1</a>
          <a href="#">Lien utile 2</a>
        </nav>
      </div>
    </div>
    <div class="footer-bottom">
      <div class="footer-bottom-links">
        <a href="/mentions-legales/">Mentions légales</a>
        <a href="/accessibilite/">Accessibilité : partiellement conforme</a>
      </div>
      <div class="footer-credits">
        © 2026 République du Mali
      </div>
    </div>
  </div>
</footer>