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 role="presentation">officiel
</p>
</a>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-2324" id="button-2325" title="Menu">
Menu
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2324" aria-labelledby="button-2325">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2324" id="button-2327" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2328" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-2329">accès direct nav-2329</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-2330">accès direct nav-2330</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-2331">accès direct nav-2331</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-2332">accès direct nav-2332</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 role="presentation">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 role="presentation">officiel
</p>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-2339" id="button-2340" title="Menu">
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 class="fr-btn--account fr-btn fr-btn" id="button-2341" href="#[url - à modifier]">
Espace particulier
</a>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2339" aria-labelledby="button-2340">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2339" id="button-2342" title="Fermer">
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 role="presentation">officiel
</p>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-2350" id="button-2351" title="Menu">
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 class="fr-btn--team fr-btn" id="button-2352" href="#[url - à modifier]">
Contact
</a>
</li>
<li>
<a class="fr-btn--briefcase fr-btn" id="button-2353" href="#[url - à modifier]">
Espace recruteur
</a>
</li>
<li>
<a class="fr-btn--account fr-btn" id="button-2354" href="#[url - à modifier]">
Espace particulier
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2350" aria-labelledby="button-2351">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2350" id="button-2355" title="Fermer">
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 role="presentation">officiel
</p>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="modal-2521" id="button-2522" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-2523" id="button-2524" title="Menu">
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 class="fr-btn--team fr-btn" id="button-2526" href="#[url - à modifier]">
Contact
</a>
</li>
<li>
<a class="fr-btn--briefcase fr-btn" id="button-2527" href="#[url - à modifier]">
Espace recruteur
</a>
</li>
<li>
<a class="fr-btn--account fr-btn" id="button-2528" href="#[url - à modifier]">
Espace particulier
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-2521" aria-labelledby="button-2522">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-2521" id="button-2529" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-2520" role="search">
<label class="fr-label" for="search-2520-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-2520-input-messages" placeholder="Rechercher" id="search-2520-input" type="search">
<div class="fr-messages-group" id="search-2520-input-messages" aria-live="polite">
</div>
<button class="fr-btn" id="search-btn-2531" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2523" aria-labelledby="button-2524">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2523" id="button-2532" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2525" 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-2534">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2534">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2535">Lien de navigation nav-2535</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2536">Lien de navigation nav-2536</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2537">Lien de navigation nav-2537</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2538">Lien de navigation nav-2538</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2539">Lien de navigation nav-2539</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2540">Lien de navigation nav-2540</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2541">Lien de navigation nav-2541</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2542">Lien de navigation nav-2542</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2544">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2544">
<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 class="fr-btn--close fr-btn" aria-controls="collapse-2544" id="button-2680" title="Fermer">
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-2545">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2546">Lien de navigation nav-2546</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2547">Lien de navigation nav-2547</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2548">Lien de navigation nav-2548</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2549">Lien de navigation nav-2549</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2550">Lien de navigation nav-2550</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2551">Lien de navigation nav-2551</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2552">Lien de navigation nav-2552</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2553">Lien de navigation nav-2553</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-2554">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2555">Lien de navigation nav-2555</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2556">Lien de navigation nav-2556</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2557">Lien de navigation nav-2557</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2558">Lien de navigation nav-2558</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2559">Lien de navigation nav-2559</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2560">Lien de navigation nav-2560</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2561">Lien de navigation nav-2561</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2562">Lien de navigation nav-2562</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-2563">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2564">Lien de navigation nav-2564</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2565">Lien de navigation nav-2565</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2566" aria-current="page">Lien de navigation nav-2566</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2567">Lien de navigation nav-2567</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2568">Lien de navigation nav-2568</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2569">Lien de navigation nav-2569</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2570">Lien de navigation nav-2570</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2571">Lien de navigation nav-2571</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-2572">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2573">Lien de navigation nav-2573</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2574">Lien de navigation nav-2574</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2575">Lien de navigation nav-2575</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2576">Lien de navigation nav-2576</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2577">Lien de navigation nav-2577</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2578">Lien de navigation nav-2578</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2579">Lien de navigation nav-2579</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2580">Lien de navigation nav-2580</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-2581">accès direct nav-2581</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2583" aria-current="true">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2583">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2584">Lien de navigation nav-2584</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2585">Lien de navigation nav-2585</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2586" aria-current="page">Lien de navigation nav-2586</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2587">Lien de navigation nav-2587</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2588">Lien de navigation nav-2588</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2589">Lien de navigation nav-2589</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2590">Lien de navigation nav-2590</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2591">Lien de navigation nav-2591</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2593">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2593">
<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 class="fr-btn--close fr-btn" aria-controls="collapse-2593" id="button-2681" title="Fermer">
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 class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-2594" href="#">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-2595">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2596">Lien de navigation nav-2596</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2597">Lien de navigation nav-2597</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2598">Lien de navigation nav-2598</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2599">Lien de navigation nav-2599</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2600">Lien de navigation nav-2600</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2601">Lien de navigation nav-2601</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2602">Lien de navigation nav-2602</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2603">Lien de navigation nav-2603</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-2604">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2605">Lien de navigation nav-2605</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2606">Lien de navigation nav-2606</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2607">Lien de navigation nav-2607</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2608">Lien de navigation nav-2608</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2609">Lien de navigation nav-2609</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2610">Lien de navigation nav-2610</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2611">Lien de navigation nav-2611</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2612">Lien de navigation nav-2612</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-2613">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2614">Lien de navigation nav-2614</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2615">Lien de navigation nav-2615</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2616" aria-current="page">Lien de navigation nav-2616</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2617">Lien de navigation nav-2617</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2618">Lien de navigation nav-2618</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2619">Lien de navigation nav-2619</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2620">Lien de navigation nav-2620</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2621">Lien de navigation nav-2621</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-2622">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2623">Lien de navigation nav-2623</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2624">Lien de navigation nav-2624</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2625">Lien de navigation nav-2625</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2626">Lien de navigation nav-2626</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2627">Lien de navigation nav-2627</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2628">Lien de navigation nav-2628</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2629">Lien de navigation nav-2629</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2630">Lien de navigation nav-2630</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-2631">accès direct nav-2631</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2633">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2633">
<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 class="fr-btn--close fr-btn" aria-controls="collapse-2633" id="button-2682" title="Fermer">
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-2634">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2635">Lien de navigation nav-2635</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2636">Lien de navigation nav-2636</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2637">Lien de navigation nav-2637</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2638">Lien de navigation nav-2638</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2639">Lien de navigation nav-2639</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2640">Lien de navigation nav-2640</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2641">Lien de navigation nav-2641</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2642">Lien de navigation nav-2642</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-2643">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2644">Lien de navigation nav-2644</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2645">Lien de navigation nav-2645</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2646">Lien de navigation nav-2646</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2647">Lien de navigation nav-2647</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2648">Lien de navigation nav-2648</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2649">Lien de navigation nav-2649</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2650">Lien de navigation nav-2650</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2651">Lien de navigation nav-2651</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-2652">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2653">Lien de navigation nav-2653</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2654">Lien de navigation nav-2654</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2655" aria-current="page">Lien de navigation nav-2655</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2656">Lien de navigation nav-2656</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2657">Lien de navigation nav-2657</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2658">Lien de navigation nav-2658</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2659">Lien de navigation nav-2659</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2660">Lien de navigation nav-2660</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-2661">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2662">Lien de navigation nav-2662</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2663">Lien de navigation nav-2663</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2664">Lien de navigation nav-2664</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2665">Lien de navigation nav-2665</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2666">Lien de navigation nav-2666</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2667">Lien de navigation nav-2667</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2668">Lien de navigation nav-2668</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2669">Lien de navigation nav-2669</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2671">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2671">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2672">Lien de navigation nav-2672</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2673">Lien de navigation nav-2673</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2674">Lien de navigation nav-2674</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2675">Lien de navigation nav-2675</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2676">Lien de navigation nav-2676</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2677">Lien de navigation nav-2677</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2678">Lien de navigation nav-2678</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2679">Lien de navigation nav-2679</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 role="presentation">officiel
</p>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-2848" id="button-2849" title="Menu">
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-2851">
<div class="fr-nav__item">
<button class="fr-translate__btn fr-btn" aria-controls="translate-2847" aria-expanded="false" title="Sélectionner une langue" id="button-2852">
FR<span class="fr-hidden-lg"> - Français</span>
</button>
<div class="fr-collapse fr-translate__menu fr-menu" id="translate-2847">
<ul class="fr-menu__list">
<li>
<a class="fr-translate__language fr-nav__link" hreflang="fr" lang="fr" href="#" id="language-2853" aria-current="true">FR - Français</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="en" lang="en" href="#" id="language-2854">EN - English</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="es" lang="es" href="#" id="language-2855">ES - Español</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="de" lang="de" href="#" id="language-2856">DE - Deutsch</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="tr" lang="tr" href="#" id="language-2857">TR - Türkçe</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="ro" lang="ro" href="#" id="language-2858">RO - Română</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2848" aria-labelledby="button-2849">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2848" id="button-2859" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2850" 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-2861">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2861">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2862">Lien de navigation nav-2862</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2863">Lien de navigation nav-2863</a>
</li>
<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>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2871">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2871">
<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 class="fr-btn--close fr-btn" aria-controls="collapse-2871" id="button-3007" title="Fermer">
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-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">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" aria-current="page">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 class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-2899">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2900">Lien de navigation nav-2900</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-2908">accès direct nav-2908</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2910" aria-current="true">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2910">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2911">Lien de navigation nav-2911</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2912">Lien de navigation nav-2912</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2913" aria-current="page">Lien de navigation nav-2913</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2914">Lien de navigation nav-2914</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2915">Lien de navigation nav-2915</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2916">Lien de navigation nav-2916</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2917">Lien de navigation nav-2917</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2918">Lien de navigation nav-2918</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2920">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2920">
<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 class="fr-btn--close fr-btn" aria-controls="collapse-2920" id="button-3008" title="Fermer">
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 class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-2921" href="#">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-2922">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2923">Lien de navigation nav-2923</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2924">Lien de navigation nav-2924</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2925">Lien de navigation nav-2925</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2926">Lien de navigation nav-2926</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2927">Lien de navigation nav-2927</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2928">Lien de navigation nav-2928</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2929">Lien de navigation nav-2929</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2930">Lien de navigation nav-2930</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-2931">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2932">Lien de navigation nav-2932</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2933">Lien de navigation nav-2933</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2934">Lien de navigation nav-2934</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2935">Lien de navigation nav-2935</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2936">Lien de navigation nav-2936</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2937">Lien de navigation nav-2937</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2938">Lien de navigation nav-2938</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2939">Lien de navigation nav-2939</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-2940">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2941">Lien de navigation nav-2941</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2942">Lien de navigation nav-2942</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2943" aria-current="page">Lien de navigation nav-2943</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2944">Lien de navigation nav-2944</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2945">Lien de navigation nav-2945</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2946">Lien de navigation nav-2946</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2947">Lien de navigation nav-2947</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2948">Lien de navigation nav-2948</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-2949">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2950">Lien de navigation nav-2950</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2951">Lien de navigation nav-2951</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2952">Lien de navigation nav-2952</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2953">Lien de navigation nav-2953</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2954">Lien de navigation nav-2954</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2955">Lien de navigation nav-2955</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2956">Lien de navigation nav-2956</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2957">Lien de navigation nav-2957</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-2958">accès direct nav-2958</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2960">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2960">
<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 class="fr-btn--close fr-btn" aria-controls="collapse-2960" id="button-3009" title="Fermer">
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-2961">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2962">Lien de navigation nav-2962</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2963">Lien de navigation nav-2963</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2964">Lien de navigation nav-2964</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2965">Lien de navigation nav-2965</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2966">Lien de navigation nav-2966</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2967">Lien de navigation nav-2967</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2968">Lien de navigation nav-2968</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2969">Lien de navigation nav-2969</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-2970">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2971">Lien de navigation nav-2971</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2972">Lien de navigation nav-2972</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2973">Lien de navigation nav-2973</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2974">Lien de navigation nav-2974</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2975">Lien de navigation nav-2975</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2976">Lien de navigation nav-2976</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2977">Lien de navigation nav-2977</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2978">Lien de navigation nav-2978</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-2979">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2980">Lien de navigation nav-2980</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2981">Lien de navigation nav-2981</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2982" aria-current="page">Lien de navigation nav-2982</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2983">Lien de navigation nav-2983</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2984">Lien de navigation nav-2984</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2985">Lien de navigation nav-2985</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2986">Lien de navigation nav-2986</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2987">Lien de navigation nav-2987</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-2988">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2989">Lien de navigation nav-2989</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2990">Lien de navigation nav-2990</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2991">Lien de navigation nav-2991</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2992">Lien de navigation nav-2992</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2993">Lien de navigation nav-2993</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2994">Lien de navigation nav-2994</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2995">Lien de navigation nav-2995</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2996">Lien de navigation nav-2996</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2998">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2998">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2999">Lien de navigation nav-2999</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3000">Lien de navigation nav-3000</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3001">Lien de navigation nav-3001</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3002">Lien de navigation nav-3002</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3003">Lien de navigation nav-3003</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3004">Lien de navigation nav-3004</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3005">Lien de navigation nav-3005</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3006">Lien de navigation nav-3006</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 role="presentation">officiel
</p>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-3178" id="button-3179" title="Menu">
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 class="fr-btn--team fr-btn" id="button-3181" href="#[url - à modifier]">
Contact
</a>
</li>
<li>
<a class="fr-btn--briefcase fr-btn" id="button-3182" href="#[url - à modifier]">
Espace recruteur
</a>
</li>
<li>
<a class="fr-btn--account fr-btn" id="button-3183" href="#[url - à modifier]">
Espace particulier
</a>
</li>
</ul>
<nav role="navigation" class="fr-translate fr-nav" id="translate-3184">
<div class="fr-nav__item">
<button class="fr-translate__btn fr-btn" aria-controls="translate-3177" aria-expanded="false" title="Sélectionner une langue" id="button-3185">
FR<span class="fr-hidden-lg"> - Français</span>
</button>
<div class="fr-collapse fr-translate__menu fr-menu" id="translate-3177">
<ul class="fr-menu__list">
<li>
<a class="fr-translate__language fr-nav__link" hreflang="fr" lang="fr" href="#" id="language-3186" aria-current="true">FR - Français</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="en" lang="en" href="#" id="language-3187">EN - English</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="es" lang="es" href="#" id="language-3188">ES - Español</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="de" lang="de" href="#" id="language-3189">DE - Deutsch</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="tr" lang="tr" href="#" id="language-3190">TR - Türkçe</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="ro" lang="ro" href="#" id="language-3191">RO - Română</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3178" aria-labelledby="button-3179">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-3178" id="button-3192" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3180" 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-3194">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3194">
<ul class="fr-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" id="nav-3199">Lien de navigation nav-3199</a>
</li>
<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>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3204">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3204">
<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 class="fr-btn--close fr-btn" aria-controls="collapse-3204" id="button-3340" title="Fermer">
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-3205">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" id="nav-3208">Lien de navigation nav-3208</a>
</li>
<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">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>
</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-3214">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" id="nav-3217">Lien de navigation nav-3217</a>
</li>
<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>
</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-3223">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" id="nav-3226" aria-current="page">Lien de navigation nav-3226</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3227">Lien de navigation nav-3227</a>
</li>
<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>
</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-3232">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" id="nav-3236">Lien de navigation nav-3236</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3237">Lien de navigation nav-3237</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3238">Lien de navigation nav-3238</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3239">Lien de navigation nav-3239</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3240">Lien de navigation nav-3240</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3241">accès direct nav-3241</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3243" aria-current="true">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3243">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3244">Lien de navigation nav-3244</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3245">Lien de navigation nav-3245</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3246" aria-current="page">Lien de navigation nav-3246</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3247">Lien de navigation nav-3247</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3248">Lien de navigation nav-3248</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3249">Lien de navigation nav-3249</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3250">Lien de navigation nav-3250</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3251">Lien de navigation nav-3251</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3253">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3253">
<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 class="fr-btn--close fr-btn" aria-controls="collapse-3253" id="button-3341" title="Fermer">
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 class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3254" href="#">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-3255">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3256">Lien de navigation nav-3256</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3257">Lien de navigation nav-3257</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3258">Lien de navigation nav-3258</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3259">Lien de navigation nav-3259</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3260">Lien de navigation nav-3260</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3261">Lien de navigation nav-3261</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3262">Lien de navigation nav-3262</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3263">Lien de navigation nav-3263</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-3264">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3265">Lien de navigation nav-3265</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3266">Lien de navigation nav-3266</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3267">Lien de navigation nav-3267</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3268">Lien de navigation nav-3268</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3269">Lien de navigation nav-3269</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3270">Lien de navigation nav-3270</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3271">Lien de navigation nav-3271</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3272">Lien de navigation nav-3272</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-3273">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3274">Lien de navigation nav-3274</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3275">Lien de navigation nav-3275</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3276" aria-current="page">Lien de navigation nav-3276</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3277">Lien de navigation nav-3277</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3278">Lien de navigation nav-3278</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3279">Lien de navigation nav-3279</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3280">Lien de navigation nav-3280</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3281">Lien de navigation nav-3281</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-3282">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3283">Lien de navigation nav-3283</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3284">Lien de navigation nav-3284</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3285">Lien de navigation nav-3285</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3286">Lien de navigation nav-3286</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3287">Lien de navigation nav-3287</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3288">Lien de navigation nav-3288</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3289">Lien de navigation nav-3289</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3290">Lien de navigation nav-3290</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3291">accès direct nav-3291</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3293">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3293">
<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 class="fr-btn--close fr-btn" aria-controls="collapse-3293" id="button-3342" title="Fermer">
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-3294">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3295">Lien de navigation nav-3295</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3296">Lien de navigation nav-3296</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3297">Lien de navigation nav-3297</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3298">Lien de navigation nav-3298</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3299">Lien de navigation nav-3299</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3300">Lien de navigation nav-3300</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3301">Lien de navigation nav-3301</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3302">Lien de navigation nav-3302</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-3303">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3304">Lien de navigation nav-3304</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3305">Lien de navigation nav-3305</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3306">Lien de navigation nav-3306</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3307">Lien de navigation nav-3307</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3308">Lien de navigation nav-3308</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3309">Lien de navigation nav-3309</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3310">Lien de navigation nav-3310</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3311">Lien de navigation nav-3311</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-3312">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3313">Lien de navigation nav-3313</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3314">Lien de navigation nav-3314</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3315" aria-current="page">Lien de navigation nav-3315</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3316">Lien de navigation nav-3316</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3317">Lien de navigation nav-3317</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3318">Lien de navigation nav-3318</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3319">Lien de navigation nav-3319</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3320">Lien de navigation nav-3320</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-3321">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3322">Lien de navigation nav-3322</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3323">Lien de navigation nav-3323</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3324">Lien de navigation nav-3324</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3325">Lien de navigation nav-3325</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3326">Lien de navigation nav-3326</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3327">Lien de navigation nav-3327</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3328">Lien de navigation nav-3328</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3329">Lien de navigation nav-3329</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3331">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3331">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3332">Lien de navigation nav-3332</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3333">Lien de navigation nav-3333</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3334">Lien de navigation nav-3334</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3335">Lien de navigation nav-3335</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3336">Lien de navigation nav-3336</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3337">Lien de navigation nav-3337</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3338">Lien de navigation nav-3338</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3339">Lien de navigation nav-3339</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 role="presentation">officiel
</p>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-3510" id="button-3511" title="Menu">
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 class="fr-icon-theme-fill fr-btn--icon-left fr-btn fr-btn" aria-controls="fr-theme-modal" data-fr-opened="false" id="button-3513">
Paramètres d'affichage
</button>
</li>
<li>
<a class="fr-btn--account fr-btn fr-btn" id="button-3514" href="#[url - à modifier]">
Espace particulier
</a>
</li>
</ul>
<nav role="navigation" class="fr-translate fr-nav" id="translate-3515">
<div class="fr-nav__item">
<button class="fr-translate__btn fr-btn" aria-controls="translate-3509" aria-expanded="false" title="Sélectionner une langue" id="button-3516">
FR<span class="fr-hidden-lg"> - Français</span>
</button>
<div class="fr-collapse fr-translate__menu fr-menu" id="translate-3509">
<ul class="fr-menu__list">
<li>
<a class="fr-translate__language fr-nav__link" hreflang="fr" lang="fr" href="#" id="language-3517" aria-current="true">FR - Français</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="en" lang="en" href="#" id="language-3518">EN - English</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="es" lang="es" href="#" id="language-3519">ES - Español</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="de" lang="de" href="#" id="language-3520">DE - Deutsch</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="tr" lang="tr" href="#" id="language-3521">TR - Türkçe</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="ro" lang="ro" href="#" id="language-3522">RO - Română</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3510" aria-labelledby="button-3511">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-3510" id="button-3523" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3512" 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-3525">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3525">
<ul class="fr-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" id="nav-3532">Lien de navigation nav-3532</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3533">Lien de navigation nav-3533</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3535">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3535">
<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 class="fr-btn--close fr-btn" aria-controls="collapse-3535" id="button-3671" title="Fermer">
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-3536">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" id="nav-3541">Lien de navigation nav-3541</a>
</li>
<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">Lien de navigation nav-3544</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-3545">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" id="nav-3550">Lien de navigation nav-3550</a>
</li>
<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>
</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-3554">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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" aria-current="page">Lien de navigation nav-3557</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3558">Lien de navigation nav-3558</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3559">Lien de navigation nav-3559</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3560">Lien de navigation nav-3560</a>
</li>
<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>
</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-3563">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" id="nav-3569">Lien de navigation nav-3569</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3570">Lien de navigation nav-3570</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3571">Lien de navigation nav-3571</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3572">accès direct nav-3572</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3574" aria-current="true">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3574">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3575">Lien de navigation nav-3575</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3576">Lien de navigation nav-3576</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3577" aria-current="page">Lien de navigation nav-3577</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3578">Lien de navigation nav-3578</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3579">Lien de navigation nav-3579</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3580">Lien de navigation nav-3580</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3581">Lien de navigation nav-3581</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3582">Lien de navigation nav-3582</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3584">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3584">
<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 class="fr-btn--close fr-btn" aria-controls="collapse-3584" id="button-3672" title="Fermer">
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 class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3585" href="#">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-3586">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3587">Lien de navigation nav-3587</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3588">Lien de navigation nav-3588</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3589">Lien de navigation nav-3589</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3590">Lien de navigation nav-3590</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3591">Lien de navigation nav-3591</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3592">Lien de navigation nav-3592</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3593">Lien de navigation nav-3593</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3594">Lien de navigation nav-3594</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-3595">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3596">Lien de navigation nav-3596</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3597">Lien de navigation nav-3597</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3598">Lien de navigation nav-3598</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3599">Lien de navigation nav-3599</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3600">Lien de navigation nav-3600</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3601">Lien de navigation nav-3601</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3602">Lien de navigation nav-3602</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3603">Lien de navigation nav-3603</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-3604">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3605">Lien de navigation nav-3605</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3606">Lien de navigation nav-3606</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3607" aria-current="page">Lien de navigation nav-3607</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3608">Lien de navigation nav-3608</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3609">Lien de navigation nav-3609</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3610">Lien de navigation nav-3610</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3611">Lien de navigation nav-3611</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3612">Lien de navigation nav-3612</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-3613">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3614">Lien de navigation nav-3614</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3615">Lien de navigation nav-3615</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3616">Lien de navigation nav-3616</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3617">Lien de navigation nav-3617</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3618">Lien de navigation nav-3618</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3619">Lien de navigation nav-3619</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3620">Lien de navigation nav-3620</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3621">Lien de navigation nav-3621</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3622">accès direct nav-3622</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3624">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3624">
<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 class="fr-btn--close fr-btn" aria-controls="collapse-3624" id="button-3673" title="Fermer">
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-3625">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3626">Lien de navigation nav-3626</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3627">Lien de navigation nav-3627</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3628">Lien de navigation nav-3628</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3629">Lien de navigation nav-3629</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3630">Lien de navigation nav-3630</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3631">Lien de navigation nav-3631</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3632">Lien de navigation nav-3632</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3633">Lien de navigation nav-3633</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-3634">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3635">Lien de navigation nav-3635</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3636">Lien de navigation nav-3636</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3637">Lien de navigation nav-3637</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3638">Lien de navigation nav-3638</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3639">Lien de navigation nav-3639</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3640">Lien de navigation nav-3640</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3641">Lien de navigation nav-3641</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3642">Lien de navigation nav-3642</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-3643">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3644">Lien de navigation nav-3644</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3645">Lien de navigation nav-3645</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3646" aria-current="page">Lien de navigation nav-3646</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3647">Lien de navigation nav-3647</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3648">Lien de navigation nav-3648</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3649">Lien de navigation nav-3649</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3650">Lien de navigation nav-3650</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3651">Lien de navigation nav-3651</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-3652">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3653">Lien de navigation nav-3653</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3654">Lien de navigation nav-3654</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3655">Lien de navigation nav-3655</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3656">Lien de navigation nav-3656</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3657">Lien de navigation nav-3657</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3658">Lien de navigation nav-3658</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3659">Lien de navigation nav-3659</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3660">Lien de navigation nav-3660</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3662">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3662">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3663">Lien de navigation nav-3663</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3664">Lien de navigation nav-3664</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3665">Lien de navigation nav-3665</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3666">Lien de navigation nav-3666</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3667">Lien de navigation nav-3667</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3668">Lien de navigation nav-3668</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3669">Lien de navigation nav-3669</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3670">Lien de navigation nav-3670</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 role="presentation">officiel
</p>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-3687" id="button-3688" title="Menu">
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 class="fr-btn--team fr-btn" id="button-3690" href="#[url - à modifier]">
Contact
</a>
</li>
<li>
<a class="fr-btn--briefcase fr-btn" id="button-3691" href="#[url - à modifier]">
Espace recruteur
</a>
</li>
<li>
<a class="fr-btn--account fr-btn" id="button-3692" href="#[url - à modifier]">
Espace particulier
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3687" aria-labelledby="button-3688">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-3687" id="button-3693" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3694" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3695">accès direct nav-3695</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3696">accès direct nav-3696</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3697">accès direct nav-3697</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3698">accès direct nav-3698</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 role="presentation">officiel
</p>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="modal-3716" id="button-3717" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-3718" id="button-3719" title="Menu">
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-3716" aria-labelledby="button-3717">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-3716" id="button-3721" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-3715" role="search">
<label class="fr-label" for="search-3715-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-3715-input-messages" placeholder="Rechercher" id="search-3715-input" type="search">
<div class="fr-messages-group" id="search-3715-input-messages" aria-live="polite">
</div>
<button class="fr-btn" id="search-btn-3723" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3718" aria-labelledby="button-3719">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-3718" id="button-3724" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3725" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3726">accès direct nav-3726</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3727">accès direct nav-3727</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3728">accès direct nav-3728</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3729">accès direct nav-3729</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 role="presentation">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 class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="modal-3747" id="button-3748" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-3749" id="button-3750" title="Menu">
Menu
</button>
</div>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__search fr-modal" id="modal-3747" aria-labelledby="button-3748">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-3747" id="button-3752" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-3746" role="search">
<label class="fr-label" for="search-3746-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-3746-input-messages" placeholder="Rechercher" id="search-3746-input" type="search">
<div class="fr-messages-group" id="search-3746-input-messages" aria-live="polite">
</div>
<button class="fr-btn" id="search-btn-3754" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3749" aria-labelledby="button-3750">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-3749" id="button-3755" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3756" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3757">accès direct nav-3757</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3758">accès direct nav-3758</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3759">accès direct nav-3759</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3760">accès direct nav-3760</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 role="presentation">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 class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="modal-3781" id="button-3782" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-3783" id="button-3784" title="Menu">
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 class="fr-btn--team fr-btn" id="button-3786" href="#[url - à modifier]">
Contact
</a>
</li>
<li>
<a class="fr-btn--briefcase fr-btn" id="button-3787" href="#[url - à modifier]">
Espace recruteur
</a>
</li>
<li>
<a class="fr-btn--account fr-btn" id="button-3788" href="#[url - à modifier]">
Espace particulier
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-3781" aria-labelledby="button-3782">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-3781" id="button-3789" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-3780" role="search">
<label class="fr-label" for="search-3780-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-3780-input-messages" placeholder="Rechercher" id="search-3780-input" type="search">
<div class="fr-messages-group" id="search-3780-input-messages" aria-live="polite">
</div>
<button class="fr-btn" id="search-btn-3791" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3783" aria-labelledby="button-3784">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-3783" id="button-3792" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3793" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3794">accès direct nav-3794</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3795">accès direct nav-3795</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3796">accès direct nav-3796</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3797">accès direct nav-3797</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 role="presentation">officiel
</p>
</a>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-3805" id="button-3806" title="Menu">
Menu
</button>
</div>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-btns-group">
<li>
<a class="fr-btn--team fr-btn" id="button-3807" href="#[url - à modifier]">
Contact
</a>
</li>
<li>
<a class="fr-btn--briefcase fr-btn" id="button-3808" href="#[url - à modifier]">
Espace recruteur
</a>
</li>
<li>
<a class="fr-btn--account fr-btn" id="button-3809" href="#[url - à modifier]">
Espace particulier
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3805" aria-labelledby="button-3806">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-3805" id="button-3810" title="Fermer">
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 role="presentation">officiel
</p>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="modal-3831" id="button-3832" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-3833" id="button-3834" title="Menu">
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 class="fr-btn--team fr-btn" id="button-3836" href="#[url - à modifier]">
Contact
</a>
</li>
<li>
<a class="fr-btn--briefcase fr-btn" id="button-3837" href="#[url - à modifier]">
Espace recruteur
</a>
</li>
<li>
<a class="fr-btn--account fr-btn" id="button-3838" href="#[url - à modifier]">
Espace particulier
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-3831" aria-labelledby="button-3832">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-3831" id="button-3839" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-3830" role="search">
<label class="fr-label" for="search-3830-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-3830-input-messages" placeholder="Rechercher" id="search-3830-input" type="search">
<div class="fr-messages-group" id="search-3830-input-messages" aria-live="polite">
</div>
<button class="fr-btn" id="search-btn-3841" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3833" aria-labelledby="button-3834">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-3833" id="button-3842" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3843" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3844">accès direct nav-3844</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3845">accès direct nav-3845</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3846">accès direct nav-3846</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3847">accès direct nav-3847</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 role="presentation">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 class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="modal-3868" id="button-3869" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-3870" id="button-3871" title="Menu">
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 class="fr-btn--team fr-btn" id="button-3873" href="#[url - à modifier]">
Contact
</a>
</li>
<li>
<a class="fr-btn--briefcase fr-btn" id="button-3874" href="#[url - à modifier]">
Espace recruteur
</a>
</li>
<li>
<a class="fr-btn--account fr-btn" id="button-3875" href="#[url - à modifier]">
Espace particulier
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-3868" aria-labelledby="button-3869">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-3868" id="button-3876" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-3867" role="search">
<label class="fr-label" for="search-3867-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-3867-input-messages" placeholder="Rechercher" id="search-3867-input" type="search">
<div class="fr-messages-group" id="search-3867-input-messages" aria-live="polite">
</div>
<button class="fr-btn" id="search-btn-3878" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3870" aria-labelledby="button-3871">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-3870" id="button-3879" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3880" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3881">accès direct nav-3881</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3882">accès direct nav-3882</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3883">accès direct nav-3883</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3884">accès direct nav-3884</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 role="presentation">officiel
</p>
</a>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-3895" id="button-3896" title="Menu">
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-3895" aria-labelledby="button-3896">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-3895" id="button-3898" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3899" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3900">accès direct nav-3900</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3901">accès direct nav-3901</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3902">accès direct nav-3902</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3903">accès direct nav-3903</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 role="presentation">officiel
</p>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="modal-4067" id="button-4068" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-4069" id="button-4070" title="Menu">
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 class="fr-link fr-icon-add-circle-line" id="link-4072" href="[url - à modifier]">Créer un espace</a>
</li>
<li>
<a class="fr-link fr-icon-lock-line" id="link-4073" href="[url - à modifier]">Se connecter</a>
</li>
<li>
<a class="fr-link fr-icon-account-line" id="link-4074" href="[url - à modifier]">S’enregistrer</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-4067" aria-labelledby="button-4068">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-link--close fr-link" aria-controls="modal-4067">Fermer</button>
<div class="fr-search-bar" id="search-4066" role="search">
<label class="fr-label" for="search-4066-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-4066-input-messages" placeholder="Rechercher" id="search-4066-input" type="search">
<div class="fr-messages-group" id="search-4066-input-messages" aria-live="polite">
</div>
<button class="fr-btn" id="search-btn-4076" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-4069" aria-labelledby="button-4070">
<div class="fr-container">
<button class="fr-link--close fr-link" aria-controls="modal-4069">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-4071" 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-4078">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-4078">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-4079">Lien de navigation nav-4079</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4080">Lien de navigation nav-4080</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4081">Lien de navigation nav-4081</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4082">Lien de navigation nav-4082</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4083">Lien de navigation nav-4083</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4084">Lien de navigation nav-4084</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4085">Lien de navigation nav-4085</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4086">Lien de navigation nav-4086</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-4088">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-4088">
<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 class="fr-btn--close fr-btn" aria-controls="collapse-4088" id="button-4224" title="Fermer">
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-4089">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-4090">Lien de navigation nav-4090</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4091">Lien de navigation nav-4091</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4092">Lien de navigation nav-4092</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4093">Lien de navigation nav-4093</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4094">Lien de navigation nav-4094</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4095">Lien de navigation nav-4095</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4096">Lien de navigation nav-4096</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4097">Lien de navigation nav-4097</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-4098">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-4099">Lien de navigation nav-4099</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4100">Lien de navigation nav-4100</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4101">Lien de navigation nav-4101</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4102">Lien de navigation nav-4102</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4103">Lien de navigation nav-4103</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4104">Lien de navigation nav-4104</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4105">Lien de navigation nav-4105</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4106">Lien de navigation nav-4106</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-4107">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-4108">Lien de navigation nav-4108</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4109">Lien de navigation nav-4109</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4110" aria-current="page">Lien de navigation nav-4110</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4111">Lien de navigation nav-4111</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4112">Lien de navigation nav-4112</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4113">Lien de navigation nav-4113</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4114">Lien de navigation nav-4114</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4115">Lien de navigation nav-4115</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-4116">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-4117">Lien de navigation nav-4117</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4118">Lien de navigation nav-4118</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4119">Lien de navigation nav-4119</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4120">Lien de navigation nav-4120</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4121">Lien de navigation nav-4121</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4122">Lien de navigation nav-4122</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4123">Lien de navigation nav-4123</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4124">Lien de navigation nav-4124</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-4125">accès direct nav-4125</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-4127" aria-current="true">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-4127">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-4128">Lien de navigation nav-4128</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4129">Lien de navigation nav-4129</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4130" aria-current="page">Lien de navigation nav-4130</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4131">Lien de navigation nav-4131</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4132">Lien de navigation nav-4132</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4133">Lien de navigation nav-4133</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4134">Lien de navigation nav-4134</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4135">Lien de navigation nav-4135</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-4137">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-4137">
<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 class="fr-btn--close fr-btn" aria-controls="collapse-4137" id="button-4225" title="Fermer">
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 class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4138" href="#">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-4139">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-4140">Lien de navigation nav-4140</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4141">Lien de navigation nav-4141</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4142">Lien de navigation nav-4142</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4143">Lien de navigation nav-4143</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4144">Lien de navigation nav-4144</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4145">Lien de navigation nav-4145</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4146">Lien de navigation nav-4146</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4147">Lien de navigation nav-4147</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-4148">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-4149">Lien de navigation nav-4149</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4150">Lien de navigation nav-4150</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4151">Lien de navigation nav-4151</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4152">Lien de navigation nav-4152</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4153">Lien de navigation nav-4153</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4154">Lien de navigation nav-4154</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4155">Lien de navigation nav-4155</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4156">Lien de navigation nav-4156</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-4157">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-4158">Lien de navigation nav-4158</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4159">Lien de navigation nav-4159</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4160" aria-current="page">Lien de navigation nav-4160</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4161">Lien de navigation nav-4161</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4162">Lien de navigation nav-4162</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4163">Lien de navigation nav-4163</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4164">Lien de navigation nav-4164</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4165">Lien de navigation nav-4165</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-4166">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-4167">Lien de navigation nav-4167</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4168">Lien de navigation nav-4168</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4169">Lien de navigation nav-4169</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4170">Lien de navigation nav-4170</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4171">Lien de navigation nav-4171</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4172">Lien de navigation nav-4172</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4173">Lien de navigation nav-4173</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4174">Lien de navigation nav-4174</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-4175">accès direct nav-4175</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-4177">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-4177">
<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 class="fr-btn--close fr-btn" aria-controls="collapse-4177" id="button-4226" title="Fermer">
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-4178">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-4179">Lien de navigation nav-4179</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4180">Lien de navigation nav-4180</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4181">Lien de navigation nav-4181</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4182">Lien de navigation nav-4182</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4183">Lien de navigation nav-4183</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4184">Lien de navigation nav-4184</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4185">Lien de navigation nav-4185</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4186">Lien de navigation nav-4186</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-4187">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-4188">Lien de navigation nav-4188</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4189">Lien de navigation nav-4189</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4190">Lien de navigation nav-4190</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4191">Lien de navigation nav-4191</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4192">Lien de navigation nav-4192</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4193">Lien de navigation nav-4193</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4194">Lien de navigation nav-4194</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4195">Lien de navigation nav-4195</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-4196">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-4197">Lien de navigation nav-4197</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4198">Lien de navigation nav-4198</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4199" aria-current="page">Lien de navigation nav-4199</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4200">Lien de navigation nav-4200</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4201">Lien de navigation nav-4201</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4202">Lien de navigation nav-4202</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4203">Lien de navigation nav-4203</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4204">Lien de navigation nav-4204</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-4205">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-4206">Lien de navigation nav-4206</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4207">Lien de navigation nav-4207</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4208">Lien de navigation nav-4208</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4209">Lien de navigation nav-4209</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4210">Lien de navigation nav-4210</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4211">Lien de navigation nav-4211</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4212">Lien de navigation nav-4212</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4213">Lien de navigation nav-4213</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-4215">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-4215">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-4216">Lien de navigation nav-4216</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4217">Lien de navigation nav-4217</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4218">Lien de navigation nav-4218</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4219">Lien de navigation nav-4219</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4220">Lien de navigation nav-4220</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4221">Lien de navigation nav-4221</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4222">Lien de navigation nav-4222</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-4223">Lien de navigation nav-4223</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
</header>