Header minimal
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<a href="/" title="Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-logo">
Intitulé
<br>officiel
</p>
</a>
</div>
<div class="fr-header__navbar">
<button data-fr-opened="false" aria-controls="modal-2553" id="button-2554" title="Menu" class="fr-btn--menu fr-btn">Menu</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2553" aria-labelledby="button-2554">
<div class="fr-container">
<button aria-controls="modal-2553" id="button-2556" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2557" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-2558">accès direct nav-2558</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-2559">accès direct nav-2559</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-2560">accès direct nav-2560</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-2561">accès direct nav-2561</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
Header sans navigation
Intitulé
officiel
Nom du site / service
baseline - précisions sur l‘organisation
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<p class="fr-logo">
Intitulé
<br>officiel
</p>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-header__service-title">
Nom du site / service
</p>
</a>
<p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
</div>
</div>
</div>
</header>
Header sans navigation avec un seul raccourci
Intitulé
officiel
Nom du site / service
baseline - précisions sur l‘organisation
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<p class="fr-logo">
Intitulé
<br>officiel
</p>
</div>
<div class="fr-header__navbar">
<button data-fr-opened="false" aria-controls="modal-2568" id="button-2569" title="Menu" class="fr-btn--menu fr-btn">Menu</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-header__service-title">
Nom du site / service
</p>
</a>
<p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<a id="button-2570" href="[url - à modifier]" class="fr-btn--account fr-btn fr-btn">Espace particulier</a>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2568" aria-labelledby="button-2569">
<div class="fr-container">
<button aria-controls="modal-2568" id="button-2571" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
</div>
</div>
</div>
</header>
Header sans navigation avec une liste de raccourcis
Intitulé
officiel
Nom du site / service
baseline - précisions sur l‘organisation
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<p class="fr-logo">
Intitulé
<br>officiel
</p>
</div>
<div class="fr-header__navbar">
<button data-fr-opened="false" aria-controls="modal-2579" id="button-2580" title="Menu" class="fr-btn--menu fr-btn">Menu</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-header__service-title">
Nom du site / service
</p>
</a>
<p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-btns-group">
<li>
<a id="button-2581" href="[url - à modifier]" class="fr-btn--team fr-btn">Contact</a>
</li>
<li>
<a id="button-2582" href="[url - à modifier]" class="fr-btn--briefcase fr-btn">Espace recruteur</a>
</li>
<li>
<a id="button-2583" href="[url - à modifier]" class="fr-btn--account fr-btn">Espace particulier</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2579" aria-labelledby="button-2580">
<div class="fr-container">
<button aria-controls="modal-2579" id="button-2584" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
</div>
</div>
</div>
</header>
Header avec Navigation complète
Intitulé
officiel
Nom du site / service
baseline - précisions sur l‘organisation
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<p class="fr-logo">
Intitulé
<br>officiel
</p>
</div>
<div class="fr-header__navbar">
<button data-fr-opened="false" aria-controls="modal-2750" id="button-2751" title="Rechercher" class="fr-btn--search fr-btn">Rechercher</button>
<button data-fr-opened="false" aria-controls="modal-2752" id="button-2753" title="Menu" class="fr-btn--menu fr-btn">Menu</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-header__service-title">
Nom du site / service
</p>
</a>
<p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-btns-group">
<li>
<a id="button-2755" href="[url - à modifier]" class="fr-btn--team fr-btn">Contact</a>
</li>
<li>
<a id="button-2756" href="[url - à modifier]" class="fr-btn--briefcase fr-btn">Espace recruteur</a>
</li>
<li>
<a id="button-2757" href="[url - à modifier]" class="fr-btn--account fr-btn">Espace particulier</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-2750" aria-labelledby="button-2751">
<div class="fr-container fr-container-lg--fluid">
<button aria-controls="modal-2750" id="button-2758" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-search-bar" id="search-2749" role="search">
<label class="fr-label" for="search-2749-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-2749-input-messages" placeholder="Rechercher" id="search-2749-input" type="search">
<div class="fr-messages-group" id="search-2749-input-messages" aria-live="polite">
</div>
<button id="search-btn-2760" title="Rechercher" class="fr-btn">Rechercher</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2752" aria-labelledby="button-2753">
<div class="fr-container">
<button aria-controls="modal-2752" id="button-2761" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2754" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2763">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2763">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2764">Lien de navigation nav-2764</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2765">Lien de navigation nav-2765</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2766">Lien de navigation nav-2766</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2767">Lien de navigation nav-2767</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2768">Lien de navigation nav-2768</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2769">Lien de navigation nav-2769</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2770">Lien de navigation nav-2770</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2771">Lien de navigation nav-2771</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2773">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2773">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button aria-controls="collapse-2773" id="button-2909" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-2774">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2775">Lien de navigation nav-2775</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2776">Lien de navigation nav-2776</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2777">Lien de navigation nav-2777</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2778">Lien de navigation nav-2778</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2779">Lien de navigation nav-2779</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2780">Lien de navigation nav-2780</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2781">Lien de navigation nav-2781</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2782">Lien de navigation nav-2782</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-2783">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2784">Lien de navigation nav-2784</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2785">Lien de navigation nav-2785</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2786">Lien de navigation nav-2786</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2787">Lien de navigation nav-2787</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2788">Lien de navigation nav-2788</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2789">Lien de navigation nav-2789</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2790">Lien de navigation nav-2790</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2791">Lien de navigation nav-2791</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-2792">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2793">Lien de navigation nav-2793</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2794">Lien de navigation nav-2794</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2795" aria-current="page">Lien de navigation nav-2795</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2796">Lien de navigation nav-2796</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2797">Lien de navigation nav-2797</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2798">Lien de navigation nav-2798</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2799">Lien de navigation nav-2799</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2800">Lien de navigation nav-2800</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-2801">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2802">Lien de navigation nav-2802</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2803">Lien de navigation nav-2803</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2804">Lien de navigation nav-2804</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2805">Lien de navigation nav-2805</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2806">Lien de navigation nav-2806</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2807">Lien de navigation nav-2807</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2808">Lien de navigation nav-2808</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2809">Lien de navigation nav-2809</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-2810">accès direct nav-2810</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2812" aria-current="true">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2812">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2813">Lien de navigation nav-2813</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2814">Lien de navigation nav-2814</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2815" aria-current="page">Lien de navigation nav-2815</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2816">Lien de navigation nav-2816</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2817">Lien de navigation nav-2817</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2818">Lien de navigation nav-2818</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2819">Lien de navigation nav-2819</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2820">Lien de navigation nav-2820</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2822">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2822">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button aria-controls="collapse-2822" id="button-2910" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-col-12 fr-col-lg-8 fr-col-offset-lg-4--right">
<div class="fr-mega-menu__leader">
<h4 class="fr-h4 fr-mb-2v">Titre éditorialisé</h4>
<p class="fr-hidden fr-unhidden-lg">Lorem [...] elit ut.</p>
<a id="link-2823" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Voir toute la rubrique</a>
</div>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-2824">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2825">Lien de navigation nav-2825</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2826">Lien de navigation nav-2826</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2827">Lien de navigation nav-2827</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2828">Lien de navigation nav-2828</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2829">Lien de navigation nav-2829</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2830">Lien de navigation nav-2830</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2831">Lien de navigation nav-2831</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2832">Lien de navigation nav-2832</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-2833">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2834">Lien de navigation nav-2834</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2835">Lien de navigation nav-2835</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2836">Lien de navigation nav-2836</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2837">Lien de navigation nav-2837</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2838">Lien de navigation nav-2838</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2839">Lien de navigation nav-2839</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2840">Lien de navigation nav-2840</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2841">Lien de navigation nav-2841</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-2842">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2843">Lien de navigation nav-2843</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2844">Lien de navigation nav-2844</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2845" aria-current="page">Lien de navigation nav-2845</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2846">Lien de navigation nav-2846</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2847">Lien de navigation nav-2847</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2848">Lien de navigation nav-2848</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2849">Lien de navigation nav-2849</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2850">Lien de navigation nav-2850</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-2851">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2852">Lien de navigation nav-2852</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2853">Lien de navigation nav-2853</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2854">Lien de navigation nav-2854</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2855">Lien de navigation nav-2855</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2856">Lien de navigation nav-2856</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2857">Lien de navigation nav-2857</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2858">Lien de navigation nav-2858</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2859">Lien de navigation nav-2859</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-2860">accès direct nav-2860</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2862">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2862">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button aria-controls="collapse-2862" id="button-2911" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-2863">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2864">Lien de navigation nav-2864</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2865">Lien de navigation nav-2865</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2866">Lien de navigation nav-2866</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2867">Lien de navigation nav-2867</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2868">Lien de navigation nav-2868</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2869">Lien de navigation nav-2869</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2870">Lien de navigation nav-2870</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2871">Lien de navigation nav-2871</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-2872">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2873">Lien de navigation nav-2873</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2874">Lien de navigation nav-2874</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2875">Lien de navigation nav-2875</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2876">Lien de navigation nav-2876</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2877">Lien de navigation nav-2877</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2878">Lien de navigation nav-2878</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2879">Lien de navigation nav-2879</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2880">Lien de navigation nav-2880</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-2881">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2882">Lien de navigation nav-2882</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2883">Lien de navigation nav-2883</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2884" aria-current="page">Lien de navigation nav-2884</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2885">Lien de navigation nav-2885</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2886">Lien de navigation nav-2886</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2887">Lien de navigation nav-2887</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2888">Lien de navigation nav-2888</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2889">Lien de navigation nav-2889</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-2890">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2891">Lien de navigation nav-2891</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2892">Lien de navigation nav-2892</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2893">Lien de navigation nav-2893</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2894">Lien de navigation nav-2894</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2895">Lien de navigation nav-2895</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2896">Lien de navigation nav-2896</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2897">Lien de navigation nav-2897</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2898">Lien de navigation nav-2898</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2900">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2900">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2901">Lien de navigation nav-2901</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2902">Lien de navigation nav-2902</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2903">Lien de navigation nav-2903</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2904">Lien de navigation nav-2904</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2905">Lien de navigation nav-2905</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2906">Lien de navigation nav-2906</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2907">Lien de navigation nav-2907</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2908">Lien de navigation nav-2908</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
</header>
Header avec selecteur de langues
Intitulé
officiel
Nom du site / service
baseline - précisions sur l‘organisation
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<p class="fr-logo">
Intitulé
<br>officiel
</p>
</div>
<div class="fr-header__navbar">
<button data-fr-opened="false" aria-controls="modal-3077" id="button-3078" title="Menu" class="fr-btn--menu fr-btn">Menu</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-header__service-title">
Nom du site / service
</p>
</a>
<p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<nav role="navigation" class="fr-translate fr-nav" id="translate-3080">
<div class="fr-nav__item">
<button aria-controls="translate-3076" aria-expanded="false" title="Sélectionner une langue" id="button-3081" class="fr-translate__btn fr-btn">FR<span class="fr-hidden-lg"> - Français</span>
</button>
<div class="fr-collapse fr-translate__menu fr-menu" id="translate-3076">
<ul class="fr-menu__list">
<li>
<a class="fr-translate__language fr-nav__link" hreflang="fr" lang="fr" href="#" id="language-3082" aria-current="true">FR - Français</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="en" lang="en" href="#" id="language-3083">EN - English</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="es" lang="es" href="#" id="language-3084">ES - Español</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="de" lang="de" href="#" id="language-3085">DE - Deutsch</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="tr" lang="tr" href="#" id="language-3086">TR - Türkçe</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="ro" lang="ro" href="#" id="language-3087">RO - Română</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3077" aria-labelledby="button-3078">
<div class="fr-container">
<button aria-controls="modal-3077" id="button-3088" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3079" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3090">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3090">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3091">Lien de navigation nav-3091</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3092">Lien de navigation nav-3092</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3093">Lien de navigation nav-3093</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3094">Lien de navigation nav-3094</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3095">Lien de navigation nav-3095</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3096">Lien de navigation nav-3096</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3097">Lien de navigation nav-3097</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3098">Lien de navigation nav-3098</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3100">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3100">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button aria-controls="collapse-3100" id="button-3236" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3101">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3102">Lien de navigation nav-3102</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3103">Lien de navigation nav-3103</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3104">Lien de navigation nav-3104</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3105">Lien de navigation nav-3105</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3106">Lien de navigation nav-3106</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3107">Lien de navigation nav-3107</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3108">Lien de navigation nav-3108</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3109">Lien de navigation nav-3109</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3110">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3111">Lien de navigation nav-3111</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3112">Lien de navigation nav-3112</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3113">Lien de navigation nav-3113</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3114">Lien de navigation nav-3114</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3115">Lien de navigation nav-3115</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3116">Lien de navigation nav-3116</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3117">Lien de navigation nav-3117</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3118">Lien de navigation nav-3118</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3119">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3120">Lien de navigation nav-3120</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3121">Lien de navigation nav-3121</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3122" aria-current="page">Lien de navigation nav-3122</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3123">Lien de navigation nav-3123</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3124">Lien de navigation nav-3124</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3125">Lien de navigation nav-3125</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3126">Lien de navigation nav-3126</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3127">Lien de navigation nav-3127</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3128">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3129">Lien de navigation nav-3129</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3130">Lien de navigation nav-3130</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3131">Lien de navigation nav-3131</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3132">Lien de navigation nav-3132</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3133">Lien de navigation nav-3133</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3134">Lien de navigation nav-3134</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3135">Lien de navigation nav-3135</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3136">Lien de navigation nav-3136</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3137">accès direct nav-3137</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3139" aria-current="true">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3139">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3140">Lien de navigation nav-3140</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3141">Lien de navigation nav-3141</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3142" aria-current="page">Lien de navigation nav-3142</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3143">Lien de navigation nav-3143</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3144">Lien de navigation nav-3144</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3145">Lien de navigation nav-3145</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3146">Lien de navigation nav-3146</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3147">Lien de navigation nav-3147</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3149">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3149">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button aria-controls="collapse-3149" id="button-3237" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-col-12 fr-col-lg-8 fr-col-offset-lg-4--right">
<div class="fr-mega-menu__leader">
<h4 class="fr-h4 fr-mb-2v">Titre éditorialisé</h4>
<p class="fr-hidden fr-unhidden-lg">Lorem [...] elit ut.</p>
<a id="link-3150" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Voir toute la rubrique</a>
</div>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3151">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3152">Lien de navigation nav-3152</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3153">Lien de navigation nav-3153</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3154">Lien de navigation nav-3154</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3155">Lien de navigation nav-3155</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3156">Lien de navigation nav-3156</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3157">Lien de navigation nav-3157</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3158">Lien de navigation nav-3158</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3159">Lien de navigation nav-3159</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3160">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3161">Lien de navigation nav-3161</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3162">Lien de navigation nav-3162</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3163">Lien de navigation nav-3163</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3164">Lien de navigation nav-3164</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3165">Lien de navigation nav-3165</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3166">Lien de navigation nav-3166</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3167">Lien de navigation nav-3167</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3168">Lien de navigation nav-3168</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3169">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3170">Lien de navigation nav-3170</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3171">Lien de navigation nav-3171</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3172" aria-current="page">Lien de navigation nav-3172</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3173">Lien de navigation nav-3173</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3174">Lien de navigation nav-3174</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3175">Lien de navigation nav-3175</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3176">Lien de navigation nav-3176</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3177">Lien de navigation nav-3177</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3178">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3179">Lien de navigation nav-3179</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3180">Lien de navigation nav-3180</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3181">Lien de navigation nav-3181</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3182">Lien de navigation nav-3182</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3183">Lien de navigation nav-3183</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3184">Lien de navigation nav-3184</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3185">Lien de navigation nav-3185</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3186">Lien de navigation nav-3186</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3187">accès direct nav-3187</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3189">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3189">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button aria-controls="collapse-3189" id="button-3238" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3190">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3191">Lien de navigation nav-3191</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3192">Lien de navigation nav-3192</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3193">Lien de navigation nav-3193</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3194">Lien de navigation nav-3194</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3195">Lien de navigation nav-3195</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3196">Lien de navigation nav-3196</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3197">Lien de navigation nav-3197</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3198">Lien de navigation nav-3198</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3199">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3200">Lien de navigation nav-3200</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3201">Lien de navigation nav-3201</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3202">Lien de navigation nav-3202</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3203">Lien de navigation nav-3203</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3204">Lien de navigation nav-3204</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3205">Lien de navigation nav-3205</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3206">Lien de navigation nav-3206</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3207">Lien de navigation nav-3207</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3208">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3209">Lien de navigation nav-3209</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3210">Lien de navigation nav-3210</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3211" aria-current="page">Lien de navigation nav-3211</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3212">Lien de navigation nav-3212</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3213">Lien de navigation nav-3213</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3214">Lien de navigation nav-3214</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3215">Lien de navigation nav-3215</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3216">Lien de navigation nav-3216</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3217">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3218">Lien de navigation nav-3218</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3219">Lien de navigation nav-3219</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3220">Lien de navigation nav-3220</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3221">Lien de navigation nav-3221</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3222">Lien de navigation nav-3222</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3223">Lien de navigation nav-3223</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3224">Lien de navigation nav-3224</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3225">Lien de navigation nav-3225</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3227">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3227">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3228">Lien de navigation nav-3228</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3229">Lien de navigation nav-3229</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3230">Lien de navigation nav-3230</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3231">Lien de navigation nav-3231</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3232">Lien de navigation nav-3232</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3233">Lien de navigation nav-3233</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3234">Lien de navigation nav-3234</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3235">Lien de navigation nav-3235</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
</header>
Header avec selecteur de langues et raccourcis
Intitulé
officiel
Nom du site / service
baseline - précisions sur l‘organisation
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<p class="fr-logo">
Intitulé
<br>officiel
</p>
</div>
<div class="fr-header__navbar">
<button data-fr-opened="false" aria-controls="modal-3407" id="button-3408" title="Menu" class="fr-btn--menu fr-btn">Menu</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-header__service-title">
Nom du site / service
</p>
</a>
<p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-btns-group">
<li>
<a id="button-3410" href="[url - à modifier]" class="fr-btn--team fr-btn">Contact</a>
</li>
<li>
<a id="button-3411" href="[url - à modifier]" class="fr-btn--briefcase fr-btn">Espace recruteur</a>
</li>
<li>
<a id="button-3412" href="[url - à modifier]" class="fr-btn--account fr-btn">Espace particulier</a>
</li>
</ul>
<nav role="navigation" class="fr-translate fr-nav" id="translate-3413">
<div class="fr-nav__item">
<button aria-controls="translate-3406" aria-expanded="false" title="Sélectionner une langue" id="button-3414" class="fr-translate__btn fr-btn">FR<span class="fr-hidden-lg"> - Français</span>
</button>
<div class="fr-collapse fr-translate__menu fr-menu" id="translate-3406">
<ul class="fr-menu__list">
<li>
<a class="fr-translate__language fr-nav__link" hreflang="fr" lang="fr" href="#" id="language-3415" aria-current="true">FR - Français</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="en" lang="en" href="#" id="language-3416">EN - English</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="es" lang="es" href="#" id="language-3417">ES - Español</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="de" lang="de" href="#" id="language-3418">DE - Deutsch</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="tr" lang="tr" href="#" id="language-3419">TR - Türkçe</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="ro" lang="ro" href="#" id="language-3420">RO - Română</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3407" aria-labelledby="button-3408">
<div class="fr-container">
<button aria-controls="modal-3407" id="button-3421" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3409" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3423">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3423">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3424">Lien de navigation nav-3424</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3425">Lien de navigation nav-3425</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3426">Lien de navigation nav-3426</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3427">Lien de navigation nav-3427</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3428">Lien de navigation nav-3428</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3429">Lien de navigation nav-3429</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3430">Lien de navigation nav-3430</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3431">Lien de navigation nav-3431</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3433">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3433">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button aria-controls="collapse-3433" id="button-3569" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3434">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3435">Lien de navigation nav-3435</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3436">Lien de navigation nav-3436</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3437">Lien de navigation nav-3437</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3438">Lien de navigation nav-3438</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3439">Lien de navigation nav-3439</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3440">Lien de navigation nav-3440</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3441">Lien de navigation nav-3441</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3442">Lien de navigation nav-3442</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3443">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3444">Lien de navigation nav-3444</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3445">Lien de navigation nav-3445</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3446">Lien de navigation nav-3446</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3447">Lien de navigation nav-3447</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3448">Lien de navigation nav-3448</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3449">Lien de navigation nav-3449</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3450">Lien de navigation nav-3450</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3451">Lien de navigation nav-3451</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3452">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3453">Lien de navigation nav-3453</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3454">Lien de navigation nav-3454</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3455" aria-current="page">Lien de navigation nav-3455</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3456">Lien de navigation nav-3456</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3457">Lien de navigation nav-3457</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3458">Lien de navigation nav-3458</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3459">Lien de navigation nav-3459</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3460">Lien de navigation nav-3460</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3461">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3462">Lien de navigation nav-3462</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3463">Lien de navigation nav-3463</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3464">Lien de navigation nav-3464</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3465">Lien de navigation nav-3465</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3466">Lien de navigation nav-3466</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3467">Lien de navigation nav-3467</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3468">Lien de navigation nav-3468</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3469">Lien de navigation nav-3469</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3470">accès direct nav-3470</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3472" aria-current="true">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3472">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3473">Lien de navigation nav-3473</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3474">Lien de navigation nav-3474</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3475" aria-current="page">Lien de navigation nav-3475</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3476">Lien de navigation nav-3476</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3477">Lien de navigation nav-3477</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3478">Lien de navigation nav-3478</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3479">Lien de navigation nav-3479</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3480">Lien de navigation nav-3480</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3482">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3482">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button aria-controls="collapse-3482" id="button-3570" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-col-12 fr-col-lg-8 fr-col-offset-lg-4--right">
<div class="fr-mega-menu__leader">
<h4 class="fr-h4 fr-mb-2v">Titre éditorialisé</h4>
<p class="fr-hidden fr-unhidden-lg">Lorem [...] elit ut.</p>
<a id="link-3483" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Voir toute la rubrique</a>
</div>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3484">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3485">Lien de navigation nav-3485</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3486">Lien de navigation nav-3486</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3487">Lien de navigation nav-3487</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3488">Lien de navigation nav-3488</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3489">Lien de navigation nav-3489</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3490">Lien de navigation nav-3490</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3491">Lien de navigation nav-3491</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3492">Lien de navigation nav-3492</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3493">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3494">Lien de navigation nav-3494</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3495">Lien de navigation nav-3495</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3496">Lien de navigation nav-3496</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3497">Lien de navigation nav-3497</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3498">Lien de navigation nav-3498</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3499">Lien de navigation nav-3499</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3500">Lien de navigation nav-3500</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3501">Lien de navigation nav-3501</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3502">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3503">Lien de navigation nav-3503</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3504">Lien de navigation nav-3504</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3505" aria-current="page">Lien de navigation nav-3505</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3506">Lien de navigation nav-3506</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3507">Lien de navigation nav-3507</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3508">Lien de navigation nav-3508</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3509">Lien de navigation nav-3509</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3510">Lien de navigation nav-3510</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3511">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3512">Lien de navigation nav-3512</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3513">Lien de navigation nav-3513</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3514">Lien de navigation nav-3514</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3515">Lien de navigation nav-3515</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3516">Lien de navigation nav-3516</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3517">Lien de navigation nav-3517</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3518">Lien de navigation nav-3518</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3519">Lien de navigation nav-3519</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3520">accès direct nav-3520</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3522">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3522">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button aria-controls="collapse-3522" id="button-3571" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3523">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3524">Lien de navigation nav-3524</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3525">Lien de navigation nav-3525</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3526">Lien de navigation nav-3526</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3527">Lien de navigation nav-3527</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3528">Lien de navigation nav-3528</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3529">Lien de navigation nav-3529</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3530">Lien de navigation nav-3530</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3531">Lien de navigation nav-3531</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3532">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3533">Lien de navigation nav-3533</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3534">Lien de navigation nav-3534</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3535">Lien de navigation nav-3535</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3536">Lien de navigation nav-3536</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3537">Lien de navigation nav-3537</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3538">Lien de navigation nav-3538</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3539">Lien de navigation nav-3539</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3540">Lien de navigation nav-3540</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3541">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3542">Lien de navigation nav-3542</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3543">Lien de navigation nav-3543</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3544" aria-current="page">Lien de navigation nav-3544</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3545">Lien de navigation nav-3545</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3546">Lien de navigation nav-3546</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3547">Lien de navigation nav-3547</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3548">Lien de navigation nav-3548</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3549">Lien de navigation nav-3549</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3550">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3551">Lien de navigation nav-3551</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3552">Lien de navigation nav-3552</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3553">Lien de navigation nav-3553</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3554">Lien de navigation nav-3554</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3555">Lien de navigation nav-3555</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3556">Lien de navigation nav-3556</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3557">Lien de navigation nav-3557</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3558">Lien de navigation nav-3558</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3560">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3560">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3561">Lien de navigation nav-3561</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3562">Lien de navigation nav-3562</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3563">Lien de navigation nav-3563</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3564">Lien de navigation nav-3564</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3565">Lien de navigation nav-3565</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3566">Lien de navigation nav-3566</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3567">Lien de navigation nav-3567</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3568">Lien de navigation nav-3568</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
</header>
Header avec selecteur de langues et paramètre d'affichage
Intitulé
officiel
Nom du site / service
baseline - précisions sur l‘organisation
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<p class="fr-logo">
Intitulé
<br>officiel
</p>
</div>
<div class="fr-header__navbar">
<button data-fr-opened="false" aria-controls="modal-3739" id="button-3740" title="Menu" class="fr-btn--menu fr-btn">Menu</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-header__service-title">
Nom du site / service
</p>
</a>
<p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-btns-group">
<li>
<button aria-controls="fr-theme-modal" data-fr-opened="false" id="button-3742" class="fr-icon-theme-fill fr-btn--icon-left fr-btn fr-btn">Paramètres d'affichage</button>
</li>
<li>
<a id="button-3743" href="[url - à modifier]" class="fr-btn--account fr-btn fr-btn">Espace particulier</a>
</li>
</ul>
<nav role="navigation" class="fr-translate fr-nav" id="translate-3744">
<div class="fr-nav__item">
<button aria-controls="translate-3738" aria-expanded="false" title="Sélectionner une langue" id="button-3745" class="fr-translate__btn fr-btn">FR<span class="fr-hidden-lg"> - Français</span>
</button>
<div class="fr-collapse fr-translate__menu fr-menu" id="translate-3738">
<ul class="fr-menu__list">
<li>
<a class="fr-translate__language fr-nav__link" hreflang="fr" lang="fr" href="#" id="language-3746" aria-current="true">FR - Français</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="en" lang="en" href="#" id="language-3747">EN - English</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="es" lang="es" href="#" id="language-3748">ES - Español</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="de" lang="de" href="#" id="language-3749">DE - Deutsch</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="tr" lang="tr" href="#" id="language-3750">TR - Türkçe</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="ro" lang="ro" href="#" id="language-3751">RO - Română</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3739" aria-labelledby="button-3740">
<div class="fr-container">
<button aria-controls="modal-3739" id="button-3752" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3741" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3754">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3754">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3755">Lien de navigation nav-3755</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3756">Lien de navigation nav-3756</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3757">Lien de navigation nav-3757</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3758">Lien de navigation nav-3758</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3759">Lien de navigation nav-3759</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3760">Lien de navigation nav-3760</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3761">Lien de navigation nav-3761</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3762">Lien de navigation nav-3762</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3764">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3764">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button aria-controls="collapse-3764" id="button-3900" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3765">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3766">Lien de navigation nav-3766</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3767">Lien de navigation nav-3767</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3768">Lien de navigation nav-3768</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3769">Lien de navigation nav-3769</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3770">Lien de navigation nav-3770</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3771">Lien de navigation nav-3771</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3772">Lien de navigation nav-3772</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3773">Lien de navigation nav-3773</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3774">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3775">Lien de navigation nav-3775</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3776">Lien de navigation nav-3776</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3777">Lien de navigation nav-3777</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3778">Lien de navigation nav-3778</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3779">Lien de navigation nav-3779</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3780">Lien de navigation nav-3780</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3781">Lien de navigation nav-3781</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3782">Lien de navigation nav-3782</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3783">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3784">Lien de navigation nav-3784</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3785">Lien de navigation nav-3785</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3786" aria-current="page">Lien de navigation nav-3786</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3787">Lien de navigation nav-3787</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3788">Lien de navigation nav-3788</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3789">Lien de navigation nav-3789</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3790">Lien de navigation nav-3790</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3791">Lien de navigation nav-3791</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3792">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3793">Lien de navigation nav-3793</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3794">Lien de navigation nav-3794</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3795">Lien de navigation nav-3795</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3796">Lien de navigation nav-3796</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3797">Lien de navigation nav-3797</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3798">Lien de navigation nav-3798</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3799">Lien de navigation nav-3799</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3800">Lien de navigation nav-3800</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3801">accès direct nav-3801</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3803" aria-current="true">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3803">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3804">Lien de navigation nav-3804</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3805">Lien de navigation nav-3805</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3806" aria-current="page">Lien de navigation nav-3806</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3807">Lien de navigation nav-3807</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3808">Lien de navigation nav-3808</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3809">Lien de navigation nav-3809</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3810">Lien de navigation nav-3810</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3811">Lien de navigation nav-3811</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3813">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3813">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button aria-controls="collapse-3813" id="button-3901" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-col-12 fr-col-lg-8 fr-col-offset-lg-4--right">
<div class="fr-mega-menu__leader">
<h4 class="fr-h4 fr-mb-2v">Titre éditorialisé</h4>
<p class="fr-hidden fr-unhidden-lg">Lorem [...] elit ut.</p>
<a id="link-3814" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Voir toute la rubrique</a>
</div>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3815">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3816">Lien de navigation nav-3816</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3817">Lien de navigation nav-3817</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3818">Lien de navigation nav-3818</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3819">Lien de navigation nav-3819</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3820">Lien de navigation nav-3820</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3821">Lien de navigation nav-3821</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3822">Lien de navigation nav-3822</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3823">Lien de navigation nav-3823</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3824">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3825">Lien de navigation nav-3825</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3826">Lien de navigation nav-3826</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3827">Lien de navigation nav-3827</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3828">Lien de navigation nav-3828</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3829">Lien de navigation nav-3829</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3830">Lien de navigation nav-3830</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3831">Lien de navigation nav-3831</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3832">Lien de navigation nav-3832</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3833">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3834">Lien de navigation nav-3834</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3835">Lien de navigation nav-3835</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3836" aria-current="page">Lien de navigation nav-3836</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3837">Lien de navigation nav-3837</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3838">Lien de navigation nav-3838</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3839">Lien de navigation nav-3839</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3840">Lien de navigation nav-3840</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3841">Lien de navigation nav-3841</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3842">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3843">Lien de navigation nav-3843</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3844">Lien de navigation nav-3844</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3845">Lien de navigation nav-3845</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3846">Lien de navigation nav-3846</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3847">Lien de navigation nav-3847</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3848">Lien de navigation nav-3848</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3849">Lien de navigation nav-3849</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3850">Lien de navigation nav-3850</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3851">accès direct nav-3851</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3853">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3853">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button aria-controls="collapse-3853" id="button-3902" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3854">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3855">Lien de navigation nav-3855</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3856">Lien de navigation nav-3856</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3857">Lien de navigation nav-3857</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3858">Lien de navigation nav-3858</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3859">Lien de navigation nav-3859</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3860">Lien de navigation nav-3860</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3861">Lien de navigation nav-3861</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3862">Lien de navigation nav-3862</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3863">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3864">Lien de navigation nav-3864</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3865">Lien de navigation nav-3865</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3866">Lien de navigation nav-3866</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3867">Lien de navigation nav-3867</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3868">Lien de navigation nav-3868</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3869">Lien de navigation nav-3869</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3870">Lien de navigation nav-3870</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3871">Lien de navigation nav-3871</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3872">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3873">Lien de navigation nav-3873</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3874">Lien de navigation nav-3874</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3875" aria-current="page">Lien de navigation nav-3875</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3876">Lien de navigation nav-3876</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3877">Lien de navigation nav-3877</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3878">Lien de navigation nav-3878</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3879">Lien de navigation nav-3879</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3880">Lien de navigation nav-3880</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3881">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3882">Lien de navigation nav-3882</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3883">Lien de navigation nav-3883</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3884">Lien de navigation nav-3884</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3885">Lien de navigation nav-3885</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3886">Lien de navigation nav-3886</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3887">Lien de navigation nav-3887</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3888">Lien de navigation nav-3888</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3889">Lien de navigation nav-3889</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3891">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3891">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3892">Lien de navigation nav-3892</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3893">Lien de navigation nav-3893</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3894">Lien de navigation nav-3894</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3895">Lien de navigation nav-3895</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3896">Lien de navigation nav-3896</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3897">Lien de navigation nav-3897</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3898">Lien de navigation nav-3898</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3899">Lien de navigation nav-3899</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
</header>
Header avec nom de service, lien d’accès
Intitulé
officiel
Nom du site / service
baseline - précisions sur l‘organisation
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<p class="fr-logo">
Intitulé
<br>officiel
</p>
</div>
<div class="fr-header__navbar">
<button data-fr-opened="false" aria-controls="modal-3916" id="button-3917" title="Menu" class="fr-btn--menu fr-btn">Menu</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-header__service-title">
Nom du site / service
</p>
</a>
<p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-btns-group">
<li>
<a id="button-3919" href="[url - à modifier]" class="fr-btn--team fr-btn">Contact</a>
</li>
<li>
<a id="button-3920" href="[url - à modifier]" class="fr-btn--briefcase fr-btn">Espace recruteur</a>
</li>
<li>
<a id="button-3921" href="[url - à modifier]" class="fr-btn--account fr-btn">Espace particulier</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3916" aria-labelledby="button-3917">
<div class="fr-container">
<button aria-controls="modal-3916" id="button-3922" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3923" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3924">accès direct nav-3924</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3925">accès direct nav-3925</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3926">accès direct nav-3926</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3927">accès direct nav-3927</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
Header avec nom de service, recherche
Intitulé
officiel
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<p class="fr-logo">
Intitulé
<br>officiel
</p>
</div>
<div class="fr-header__navbar">
<button data-fr-opened="false" aria-controls="modal-3945" id="button-3946" title="Rechercher" class="fr-btn--search fr-btn">Rechercher</button>
<button data-fr-opened="false" aria-controls="modal-3947" id="button-3948" title="Menu" class="fr-btn--menu fr-btn">Menu</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-header__service-title">
Nom du site / service
</p>
</a>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__search fr-modal" id="modal-3945" aria-labelledby="button-3946">
<div class="fr-container fr-container-lg--fluid">
<button aria-controls="modal-3945" id="button-3950" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-search-bar" id="search-3944" role="search">
<label class="fr-label" for="search-3944-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-3944-input-messages" placeholder="Rechercher" id="search-3944-input" type="search">
<div class="fr-messages-group" id="search-3944-input-messages" aria-live="polite">
</div>
<button id="search-btn-3952" title="Rechercher" class="fr-btn">Rechercher</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3947" aria-labelledby="button-3948">
<div class="fr-container">
<button aria-controls="modal-3947" id="button-3953" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3954" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3955">accès direct nav-3955</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3956">accès direct nav-3956</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3957">accès direct nav-3957</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3958">accès direct nav-3958</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
Header avec logo opérateur vertical, recherche
République
Française
![[À MODIFIER - texte alternatif de l’image]](../../../example/img/placeholder.3x4.png)
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<p class="fr-logo">
République
<br>Française
</p>
</div>
<div class="fr-header__operator">
<a href="/" title="Accueil - [À MODIFIER - texte alternatif de l’image : nom de l'opérateur ou du site serviciel] - République Française">
<img class="fr-responsive-img" style="max-width:3.5rem;" src="../../../example/img/placeholder.3x4.png" alt="[À MODIFIER - texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans l’image -->
</a>
</div>
<div class="fr-header__navbar">
<button data-fr-opened="false" aria-controls="modal-3976" id="button-3977" title="Rechercher" class="fr-btn--search fr-btn">Rechercher</button>
<button data-fr-opened="false" aria-controls="modal-3978" id="button-3979" title="Menu" class="fr-btn--menu fr-btn">Menu</button>
</div>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__search fr-modal" id="modal-3976" aria-labelledby="button-3977">
<div class="fr-container fr-container-lg--fluid">
<button aria-controls="modal-3976" id="button-3981" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-search-bar" id="search-3975" role="search">
<label class="fr-label" for="search-3975-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-3975-input-messages" placeholder="Rechercher" id="search-3975-input" type="search">
<div class="fr-messages-group" id="search-3975-input-messages" aria-live="polite">
</div>
<button id="search-btn-3983" title="Rechercher" class="fr-btn">Rechercher</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3978" aria-labelledby="button-3979">
<div class="fr-container">
<button aria-controls="modal-3978" id="button-3984" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3985" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3986">accès direct nav-3986</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3987">accès direct nav-3987</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3988">accès direct nav-3988</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3989">accès direct nav-3989</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
Header avec logo opérateur horizontal, nom de service, lien d’accès, recherche
République
Française
![[À MODIFIER - texte alternatif de l’image]](../../../example/img/placeholder.16x9.png)
Nom du site / service
baseline - précisions sur l‘organisation
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<p class="fr-logo">
République
<br>Française
</p>
</div>
<div class="fr-header__operator">
<img class="fr-responsive-img" style="max-width:8rem;" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans l’image -->
</div>
<div class="fr-header__navbar">
<button data-fr-opened="false" aria-controls="modal-4010" id="button-4011" title="Rechercher" class="fr-btn--search fr-btn">Rechercher</button>
<button data-fr-opened="false" aria-controls="modal-4012" id="button-4013" title="Menu" class="fr-btn--menu fr-btn">Menu</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - [À MODIFIER - texte alternatif de l’image : nom de l'opérateur ou du site serviciel] - République Française">
<p class="fr-header__service-title">
Nom du site / service
</p>
</a>
<p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-btns-group">
<li>
<a id="button-4015" href="[url - à modifier]" class="fr-btn--team fr-btn">Contact</a>
</li>
<li>
<a id="button-4016" href="[url - à modifier]" class="fr-btn--briefcase fr-btn">Espace recruteur</a>
</li>
<li>
<a id="button-4017" href="[url - à modifier]" class="fr-btn--account fr-btn">Espace particulier</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-4010" aria-labelledby="button-4011">
<div class="fr-container fr-container-lg--fluid">
<button aria-controls="modal-4010" id="button-4018" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-search-bar" id="search-4009" role="search">
<label class="fr-label" for="search-4009-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-4009-input-messages" placeholder="Rechercher" id="search-4009-input" type="search">
<div class="fr-messages-group" id="search-4009-input-messages" aria-live="polite">
</div>
<button id="search-btn-4020" title="Rechercher" class="fr-btn">Rechercher</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-4012" aria-labelledby="button-4013">
<div class="fr-container">
<button aria-controls="modal-4012" id="button-4021" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-4022" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-4023">accès direct nav-4023</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-4024">accès direct nav-4024</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-4025">accès direct nav-4025</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-4026">accès direct nav-4026</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
Header avec raccourcis dupliqués, pour Angular, React et Vue
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<a href="/" title="Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-logo">
Intitulé
<br>officiel
</p>
</a>
</div>
<div class="fr-header__navbar">
<button data-fr-opened="false" aria-controls="modal-4034" id="button-4035" title="Menu" class="fr-btn--menu fr-btn">Menu</button>
</div>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-btns-group">
<li>
<a id="button-4036" href="[url - à modifier]" class="fr-btn--team fr-btn">Contact</a>
</li>
<li>
<a id="button-4037" href="[url - à modifier]" class="fr-btn--briefcase fr-btn">Espace recruteur</a>
</li>
<li>
<a id="button-4038" href="[url - à modifier]" class="fr-btn--account fr-btn">Espace particulier</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-4034" aria-labelledby="button-4035">
<div class="fr-container">
<button aria-controls="modal-4034" id="button-4039" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
<ul class="fr-btns-group">
</ul>
</div>
</div>
</div>
</header>
Header avec bandeau BETA
Intitulé
officiel
Nom du site / service BETA
baseline - précisions sur l‘organisation
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<p class="fr-logo">
Intitulé
<br>officiel
</p>
</div>
<div class="fr-header__navbar">
<button data-fr-opened="false" aria-controls="modal-4060" id="button-4061" title="Rechercher" class="fr-btn--search fr-btn">Rechercher</button>
<button data-fr-opened="false" aria-controls="modal-4062" id="button-4063" title="Menu" class="fr-btn--menu fr-btn">Menu</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-header__service-title">
Nom du site / service
<span class="fr-badge fr-badge--sm fr-badge--green-emeraude">BETA</span>
</p>
</a>
<p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-btns-group">
<li>
<a id="button-4065" href="[url - à modifier]" class="fr-btn--team fr-btn">Contact</a>
</li>
<li>
<a id="button-4066" href="[url - à modifier]" class="fr-btn--briefcase fr-btn">Espace recruteur</a>
</li>
<li>
<a id="button-4067" href="[url - à modifier]" class="fr-btn--account fr-btn">Espace particulier</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-4060" aria-labelledby="button-4061">
<div class="fr-container fr-container-lg--fluid">
<button aria-controls="modal-4060" id="button-4068" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-search-bar" id="search-4059" role="search">
<label class="fr-label" for="search-4059-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-4059-input-messages" placeholder="Rechercher" id="search-4059-input" type="search">
<div class="fr-messages-group" id="search-4059-input-messages" aria-live="polite">
</div>
<button id="search-btn-4070" title="Rechercher" class="fr-btn">Rechercher</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-4062" aria-labelledby="button-4063">
<div class="fr-container">
<button aria-controls="modal-4062" id="button-4071" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-4072" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-4073">accès direct nav-4073</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-4074">accès direct nav-4074</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-4075">accès direct nav-4075</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-4076">accès direct nav-4076</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
Header logo opérateur + bandeau BETA
République
Française
Nom du site / service BETA
baseline - précisions sur l‘organisation
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<p class="fr-logo">
République
<br>Française
</p>
</div>
<div class="fr-header__operator">
<img class="fr-responsive-img" style="max-width:8rem;" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans l’image -->
</div>
<div class="fr-header__navbar">
<button data-fr-opened="false" aria-controls="modal-4097" id="button-4098" title="Rechercher" class="fr-btn--search fr-btn">Rechercher</button>
<button data-fr-opened="false" aria-controls="modal-4099" id="button-4100" title="Menu" class="fr-btn--menu fr-btn">Menu</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - [À MODIFIER - texte alternatif de l’image : nom de l'opérateur ou du site serviciel] - République Française">
<p class="fr-header__service-title">
Nom du site / service
<span class="fr-badge fr-badge--sm fr-badge--green-emeraude">BETA</span>
</p>
</a>
<p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-btns-group">
<li>
<a id="button-4102" href="[url - à modifier]" class="fr-btn--team fr-btn">Contact</a>
</li>
<li>
<a id="button-4103" href="[url - à modifier]" class="fr-btn--briefcase fr-btn">Espace recruteur</a>
</li>
<li>
<a id="button-4104" href="[url - à modifier]" class="fr-btn--account fr-btn">Espace particulier</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-4097" aria-labelledby="button-4098">
<div class="fr-container fr-container-lg--fluid">
<button aria-controls="modal-4097" id="button-4105" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-search-bar" id="search-4096" role="search">
<label class="fr-label" for="search-4096-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-4096-input-messages" placeholder="Rechercher" id="search-4096-input" type="search">
<div class="fr-messages-group" id="search-4096-input-messages" aria-live="polite">
</div>
<button id="search-btn-4107" title="Rechercher" class="fr-btn">Rechercher</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-4099" aria-labelledby="button-4100">
<div class="fr-container">
<button aria-controls="modal-4099" id="button-4108" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-4109" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-4110">accès direct nav-4110</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-4111">accès direct nav-4111</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-4112">accès direct nav-4112</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-4113">accès direct nav-4113</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
Header min avec bandeau BETA
BETA
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<a href="/" title="Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-logo">
Intitulé
<br>officiel
</p>
</a>
</div>
<div class="fr-header__navbar">
<button data-fr-opened="false" aria-controls="modal-4124" id="button-4125" title="Menu" class="fr-btn--menu fr-btn">Menu</button>
</div>
</div>
<div class="fr-header__service">
<p class="fr-header__service-title">
<span class="fr-badge fr-badge--sm fr-badge--green-emeraude">BETA</span>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-4124" aria-labelledby="button-4125">
<div class="fr-container">
<button aria-controls="modal-4124" id="button-4127" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-4128" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-4129">accès direct nav-4129</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-4130">accès direct nav-4130</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-4131">accès direct nav-4131</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-4132">accès direct nav-4132</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
Dépréciation
Les exemples suivants sont dépréciés, ne pas utiliser comme référence
Pour support des versions précédentes
Header déprécié
Intitulé
officiel
Nom du site / service
baseline - précisions sur l‘organisation
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<p class="fr-logo">
Intitulé
<br>officiel
</p>
</div>
<div class="fr-header__navbar">
<button data-fr-opened="false" aria-controls="modal-4296" id="button-4297" title="Rechercher" class="fr-btn--search fr-btn">Rechercher</button>
<button data-fr-opened="false" aria-controls="modal-4298" id="button-4299" title="Menu" class="fr-btn--menu fr-btn">Menu</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - [À MODIFIER - nom de l’entité (ministère, secrétariat d‘état, gouvernement)]">
<p class="fr-header__service-title">Nom du site / service</p>
</a>
<p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-links-group">
<li>
<a id="link-4301" href="[url - à modifier]" class="fr-link fr-icon-add-circle-line">Créer un espace</a>
</li>
<li>
<a id="link-4302" href="[url - à modifier]" class="fr-link fr-icon-lock-line">Se connecter</a>
</li>
<li>
<a id="link-4303" href="[url - à modifier]" class="fr-link fr-icon-account-line">S’enregistrer</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-4296" aria-labelledby="button-4297">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-link--close fr-link" aria-controls="modal-4296">Fermer</button>
<div class="fr-search-bar" id="search-4295" role="search">
<label class="fr-label" for="search-4295-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-4295-input-messages" placeholder="Rechercher" id="search-4295-input" type="search">
<div class="fr-messages-group" id="search-4295-input-messages" aria-live="polite">
</div>
<button id="search-btn-4305" title="Rechercher" class="fr-btn">Rechercher</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-4298" aria-labelledby="button-4299">
<div class="fr-container">
<button class="fr-link--close fr-link" aria-controls="modal-4298">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-4300" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-4307">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-4307">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-4308">Lien de navigation nav-4308</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4309">Lien de navigation nav-4309</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4310">Lien de navigation nav-4310</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4311">Lien de navigation nav-4311</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4312">Lien de navigation nav-4312</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4313">Lien de navigation nav-4313</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4314">Lien de navigation nav-4314</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4315">Lien de navigation nav-4315</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-4317">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-4317">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button aria-controls="collapse-4317" id="button-4453" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-4318">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-4319">Lien de navigation nav-4319</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4320">Lien de navigation nav-4320</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4321">Lien de navigation nav-4321</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4322">Lien de navigation nav-4322</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4323">Lien de navigation nav-4323</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4324">Lien de navigation nav-4324</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4325">Lien de navigation nav-4325</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4326">Lien de navigation nav-4326</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-4327">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-4328">Lien de navigation nav-4328</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4329">Lien de navigation nav-4329</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4330">Lien de navigation nav-4330</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4331">Lien de navigation nav-4331</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4332">Lien de navigation nav-4332</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4333">Lien de navigation nav-4333</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4334">Lien de navigation nav-4334</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4335">Lien de navigation nav-4335</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-4336">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-4337">Lien de navigation nav-4337</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4338">Lien de navigation nav-4338</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4339" aria-current="page">Lien de navigation nav-4339</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4340">Lien de navigation nav-4340</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4341">Lien de navigation nav-4341</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4342">Lien de navigation nav-4342</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4343">Lien de navigation nav-4343</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4344">Lien de navigation nav-4344</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-4345">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-4346">Lien de navigation nav-4346</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4347">Lien de navigation nav-4347</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4348">Lien de navigation nav-4348</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4349">Lien de navigation nav-4349</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4350">Lien de navigation nav-4350</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4351">Lien de navigation nav-4351</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4352">Lien de navigation nav-4352</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4353">Lien de navigation nav-4353</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-4354">accès direct nav-4354</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-4356" aria-current="true">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-4356">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-4357">Lien de navigation nav-4357</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4358">Lien de navigation nav-4358</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4359" aria-current="page">Lien de navigation nav-4359</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4360">Lien de navigation nav-4360</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4361">Lien de navigation nav-4361</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4362">Lien de navigation nav-4362</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4363">Lien de navigation nav-4363</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4364">Lien de navigation nav-4364</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-4366">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-4366">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button aria-controls="collapse-4366" id="button-4454" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-col-12 fr-col-lg-8 fr-col-offset-lg-4--right">
<div class="fr-mega-menu__leader">
<h4 class="fr-h4 fr-mb-2v">Titre éditorialisé</h4>
<p class="fr-hidden fr-unhidden-lg">Lorem [...] elit ut.</p>
<a id="link-4367" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Voir toute la rubrique</a>
</div>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-4368">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-4369">Lien de navigation nav-4369</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4370">Lien de navigation nav-4370</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4371">Lien de navigation nav-4371</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4372">Lien de navigation nav-4372</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4373">Lien de navigation nav-4373</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4374">Lien de navigation nav-4374</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4375">Lien de navigation nav-4375</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4376">Lien de navigation nav-4376</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-4377">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-4378">Lien de navigation nav-4378</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4379">Lien de navigation nav-4379</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4380">Lien de navigation nav-4380</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4381">Lien de navigation nav-4381</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4382">Lien de navigation nav-4382</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4383">Lien de navigation nav-4383</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4384">Lien de navigation nav-4384</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4385">Lien de navigation nav-4385</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-4386">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-4387">Lien de navigation nav-4387</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4388">Lien de navigation nav-4388</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4389" aria-current="page">Lien de navigation nav-4389</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4390">Lien de navigation nav-4390</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4391">Lien de navigation nav-4391</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4392">Lien de navigation nav-4392</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4393">Lien de navigation nav-4393</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4394">Lien de navigation nav-4394</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-4395">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-4396">Lien de navigation nav-4396</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4397">Lien de navigation nav-4397</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4398">Lien de navigation nav-4398</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4399">Lien de navigation nav-4399</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4400">Lien de navigation nav-4400</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4401">Lien de navigation nav-4401</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4402">Lien de navigation nav-4402</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4403">Lien de navigation nav-4403</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-4404">accès direct nav-4404</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-4406">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-4406">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button aria-controls="collapse-4406" id="button-4455" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-4407">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-4408">Lien de navigation nav-4408</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4409">Lien de navigation nav-4409</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4410">Lien de navigation nav-4410</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4411">Lien de navigation nav-4411</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4412">Lien de navigation nav-4412</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4413">Lien de navigation nav-4413</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4414">Lien de navigation nav-4414</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4415">Lien de navigation nav-4415</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-4416">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-4417">Lien de navigation nav-4417</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4418">Lien de navigation nav-4418</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4419">Lien de navigation nav-4419</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4420">Lien de navigation nav-4420</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4421">Lien de navigation nav-4421</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4422">Lien de navigation nav-4422</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4423">Lien de navigation nav-4423</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4424">Lien de navigation nav-4424</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-4425">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-4426">Lien de navigation nav-4426</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4427">Lien de navigation nav-4427</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4428" aria-current="page">Lien de navigation nav-4428</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4429">Lien de navigation nav-4429</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4430">Lien de navigation nav-4430</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4431">Lien de navigation nav-4431</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4432">Lien de navigation nav-4432</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4433">Lien de navigation nav-4433</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-4434">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-4435">Lien de navigation nav-4435</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4436">Lien de navigation nav-4436</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4437">Lien de navigation nav-4437</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4438">Lien de navigation nav-4438</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4439">Lien de navigation nav-4439</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4440">Lien de navigation nav-4440</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4441">Lien de navigation nav-4441</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4442">Lien de navigation nav-4442</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-4444">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-4444">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-4445">Lien de navigation nav-4445</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4446">Lien de navigation nav-4446</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4447">Lien de navigation nav-4447</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4448">Lien de navigation nav-4448</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4449">Lien de navigation nav-4449</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4450">Lien de navigation nav-4450</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4451">Lien de navigation nav-4451</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4452">Lien de navigation nav-4452</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
</header>