Header minimal
<header role="banner" class="village-header">
<div class="village-header__menu village-modal" id="modal-2324" aria-labelledby="button-2325">
<div class="village-container">
<button class="village-btn--close village-btn" aria-controls="modal-2324" id="button-2327" title="Fermer">
Fermer
</button>
<div class="village-header__menu-logo">
<a href="/" title="Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<img src="../../../dist/artwork/logo/logo.svg" class="village-logo" alt="logo" />
</a>
</div>
<div class="village-header__menu-links">
</div>
<nav class="village-nav" id="navigation-2328" role="navigation" aria-label="Menu principal">
<ul class="village-nav__list">
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-2329">accès direct nav-2329</a>
</li>
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-2330">accès direct nav-2330</a>
</li>
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-2331">accès direct nav-2331</a>
</li>
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-2332">accès direct nav-2332</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="village-header__body">
<div class="village-container">
<div class="village-header__body-row">
<div class="village-header__brand village-enlarge-link">
<div class="village-header__brand-top">
<div class="village-header__navbar">
<button class="village-btn--menu village-btn" data-village-opened="false" aria-controls="modal-2324" id="button-2325" title="Menu">
Menu
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
Header sans navigation
Nom du site / service
baseline - précisions sur l‘organisation
<header role="banner" class="village-header">
<div class="village-header__body">
<div class="village-container">
<div class="village-header__body-row">
<div class="village-header__brand village-enlarge-link">
<div class="village-header__brand-top">
</div>
<div class="village-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="village-header__service-title">
Nom du site / service
</p>
</a>
<p class="village-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
</div>
</div>
</div>
</header>
Header sans navigation avec un seul raccourci
Nom du site / service
baseline - précisions sur l‘organisation
<header role="banner" class="village-header">
<div class="village-header__menu village-modal" id="modal-2339" aria-labelledby="button-2340">
<div class="village-container">
<button class="village-btn--close village-btn" aria-controls="modal-2339" id="button-2341" title="Fermer">
Fermer
</button>
<div class="village-header__menu-logo">
<img src="../../../dist/artwork/logo/logo.svg" class="village-logo" alt="logo" />
</div>
<div class="village-header__menu-links">
</div>
</div>
</div>
<div class="village-header__body">
<div class="village-container">
<div class="village-header__body-row">
<div class="village-header__brand village-enlarge-link">
<div class="village-header__brand-top">
<div class="village-header__navbar">
<button class="village-btn--menu village-btn" data-village-opened="false" aria-controls="modal-2339" id="button-2340" title="Menu">
Menu
</button>
</div>
</div>
<div class="village-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="village-header__service-title">
Nom du site / service
</p>
</a>
<p class="village-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="village-header__tools">
<div class="village-header__tools-links">
<a class="village-btn--account village-btn village-btn" id="button-2342" href="#[url - à modifier]">
Espace particulier
</a>
</div>
</div>
</div>
</div>
</div>
</header>
Header sans navigation avec une liste de raccourcis
Nom du site / service
baseline - précisions sur l‘organisation
<header role="banner" class="village-header">
<div class="village-header__menu village-modal" id="modal-2350" aria-labelledby="button-2351">
<div class="village-container">
<button class="village-btn--close village-btn" aria-controls="modal-2350" id="button-2352" title="Fermer">
Fermer
</button>
<div class="village-header__menu-logo">
<img src="../../../dist/artwork/logo/logo.svg" class="village-logo" alt="logo" />
</div>
<div class="village-header__menu-links">
</div>
</div>
</div>
<div class="village-header__body">
<div class="village-container">
<div class="village-header__body-row">
<div class="village-header__brand village-enlarge-link">
<div class="village-header__brand-top">
<div class="village-header__navbar">
<button class="village-btn--menu village-btn" data-village-opened="false" aria-controls="modal-2350" id="button-2351" title="Menu">
Menu
</button>
</div>
</div>
<div class="village-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="village-header__service-title">
Nom du site / service
</p>
</a>
<p class="village-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="village-header__tools">
<div class="village-header__tools-links">
<ul class="village-btns-group">
<li>
<a class="village-btn--team village-btn" id="button-2353" href="#[url - à modifier]">
Contact
</a>
</li>
<li>
<a class="village-btn--briefcase village-btn" id="button-2354" href="#[url - à modifier]">
Espace recruteur
</a>
</li>
<li>
<a class="village-btn--account village-btn" id="button-2355" href="#[url - à modifier]">
Espace particulier
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
Header avec Navigation complète
Nom du site / service
baseline - précisions sur l‘organisation
<header role="banner" class="village-header">
<div class="village-header__menu village-modal" id="modal-2523" aria-labelledby="button-2524">
<div class="village-container">
<button class="village-btn--close village-btn" aria-controls="modal-2523" id="button-2526" title="Fermer">
Fermer
</button>
<div class="village-header__menu-logo">
<img src="../../../dist/artwork/logo/logo.svg" class="village-logo" alt="logo" />
</div>
<div class="village-header__menu-links">
</div>
<nav class="village-nav" id="navigation-2525" role="navigation" aria-label="Menu principal">
<ul class="village-nav__list">
<li class="village-nav__item">
<button class="village-nav__btn" aria-expanded="false" aria-controls="collapse-2528">Entrée menu</button>
<div class="village-collapse village-menu" id="collapse-2528">
<ul class="village-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-2529">Lien de navigation nav-2529</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2530">Lien de navigation nav-2530</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2531">Lien de navigation nav-2531</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2532">Lien de navigation nav-2532</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2533">Lien de navigation nav-2533</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2534">Lien de navigation nav-2534</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2535">Lien de navigation nav-2535</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2536">Lien de navigation nav-2536</a>
</li>
</ul>
</div>
</li>
<li class="village-nav__item">
<button class="village-nav__btn" aria-expanded="false" aria-controls="collapse-2538">Entrée mega menu</button>
<div class="village-collapse village-mega-menu" id="collapse-2538">
<div class="village-container village-container--fluid village-container-lg">
<div class="village-grid-row village-grid-row-lg--gutters">
<div class="village-col-12 village-mb-n3v">
<button class="village-btn--close village-btn" aria-controls="collapse-2538" id="button-2674" title="Fermer">
Fermer
</button>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-2539">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-2540">Lien de navigation nav-2540</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2541">Lien de navigation nav-2541</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2542">Lien de navigation nav-2542</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2543">Lien de navigation nav-2543</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2544">Lien de navigation nav-2544</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2545">Lien de navigation nav-2545</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2546">Lien de navigation nav-2546</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2547">Lien de navigation nav-2547</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-2548">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-2549">Lien de navigation nav-2549</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2550">Lien de navigation nav-2550</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2551">Lien de navigation nav-2551</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2552">Lien de navigation nav-2552</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2553">Lien de navigation nav-2553</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2554">Lien de navigation nav-2554</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2555">Lien de navigation nav-2555</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2556">Lien de navigation nav-2556</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-2557">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-2558">Lien de navigation nav-2558</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2559">Lien de navigation nav-2559</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2560" aria-current="page">Lien de navigation nav-2560</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2561">Lien de navigation nav-2561</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2562">Lien de navigation nav-2562</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2563">Lien de navigation nav-2563</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2564">Lien de navigation nav-2564</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2565">Lien de navigation nav-2565</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-2566">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-2567">Lien de navigation nav-2567</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2568">Lien de navigation nav-2568</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2569">Lien de navigation nav-2569</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2570">Lien de navigation nav-2570</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2571">Lien de navigation nav-2571</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2572">Lien de navigation nav-2572</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2573">Lien de navigation nav-2573</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2574">Lien de navigation nav-2574</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-2575">accès direct nav-2575</a>
</li>
<li class="village-nav__item">
<button class="village-nav__btn" aria-expanded="false" aria-controls="collapse-2577" aria-current="true">Entrée menu</button>
<div class="village-collapse village-menu" id="collapse-2577">
<ul class="village-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-2578">Lien de navigation nav-2578</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2579">Lien de navigation nav-2579</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2580" aria-current="page">Lien de navigation nav-2580</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2581">Lien de navigation nav-2581</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2582">Lien de navigation nav-2582</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2583">Lien de navigation nav-2583</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2584">Lien de navigation nav-2584</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2585">Lien de navigation nav-2585</a>
</li>
</ul>
</div>
</li>
<li class="village-nav__item">
<button class="village-nav__btn" aria-expanded="false" aria-controls="collapse-2587">Entrée mega menu</button>
<div class="village-collapse village-mega-menu" id="collapse-2587">
<div class="village-container village-container--fluid village-container-lg">
<div class="village-grid-row village-grid-row-lg--gutters">
<div class="village-col-12 village-mb-n3v">
<button class="village-btn--close village-btn" aria-controls="collapse-2587" id="button-2675" title="Fermer">
Fermer
</button>
</div>
<div class="village-col-12 village-col-lg-8 village-col-offset-lg-4--right">
<div class="village-mega-menu__leader">
<h4 class="village-h4 village-mb-2v">Titre éditorialisé</h4>
<p class="village-hidden village-unhidden-lg">Lorem [...] elit ut.</p>
<a class="village-link village-icon-arrow-right-line village-link--icon-right" id="link-2588" href="#">Voir toute la rubrique</a>
</div>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-2589">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-2590">Lien de navigation nav-2590</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2591">Lien de navigation nav-2591</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2592">Lien de navigation nav-2592</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2593">Lien de navigation nav-2593</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2594">Lien de navigation nav-2594</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2595">Lien de navigation nav-2595</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2596">Lien de navigation nav-2596</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2597">Lien de navigation nav-2597</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-2598">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-2599">Lien de navigation nav-2599</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2600">Lien de navigation nav-2600</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2601">Lien de navigation nav-2601</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2602">Lien de navigation nav-2602</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2603">Lien de navigation nav-2603</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2604">Lien de navigation nav-2604</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2605">Lien de navigation nav-2605</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2606">Lien de navigation nav-2606</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-2607">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-2608">Lien de navigation nav-2608</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2609">Lien de navigation nav-2609</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2610" aria-current="page">Lien de navigation nav-2610</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2611">Lien de navigation nav-2611</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2612">Lien de navigation nav-2612</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2613">Lien de navigation nav-2613</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2614">Lien de navigation nav-2614</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2615">Lien de navigation nav-2615</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-2616">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-2617">Lien de navigation nav-2617</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2618">Lien de navigation nav-2618</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2619">Lien de navigation nav-2619</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2620">Lien de navigation nav-2620</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2621">Lien de navigation nav-2621</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2622">Lien de navigation nav-2622</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2623">Lien de navigation nav-2623</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2624">Lien de navigation nav-2624</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-2625">accès direct nav-2625</a>
</li>
<li class="village-nav__item">
<button class="village-nav__btn" aria-expanded="false" aria-controls="collapse-2627">Entrée mega menu</button>
<div class="village-collapse village-mega-menu" id="collapse-2627">
<div class="village-container village-container--fluid village-container-lg">
<div class="village-grid-row village-grid-row-lg--gutters">
<div class="village-col-12 village-mb-n3v">
<button class="village-btn--close village-btn" aria-controls="collapse-2627" id="button-2676" title="Fermer">
Fermer
</button>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-2628">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-2629">Lien de navigation nav-2629</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2630">Lien de navigation nav-2630</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2631">Lien de navigation nav-2631</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2632">Lien de navigation nav-2632</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2633">Lien de navigation nav-2633</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2634">Lien de navigation nav-2634</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2635">Lien de navigation nav-2635</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2636">Lien de navigation nav-2636</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-2637">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-2638">Lien de navigation nav-2638</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2639">Lien de navigation nav-2639</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2640">Lien de navigation nav-2640</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2641">Lien de navigation nav-2641</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2642">Lien de navigation nav-2642</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2643">Lien de navigation nav-2643</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2644">Lien de navigation nav-2644</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2645">Lien de navigation nav-2645</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-2646">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-2647">Lien de navigation nav-2647</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2648">Lien de navigation nav-2648</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2649" aria-current="page">Lien de navigation nav-2649</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2650">Lien de navigation nav-2650</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2651">Lien de navigation nav-2651</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2652">Lien de navigation nav-2652</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2653">Lien de navigation nav-2653</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2654">Lien de navigation nav-2654</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-2655">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-2656">Lien de navigation nav-2656</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2657">Lien de navigation nav-2657</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2658">Lien de navigation nav-2658</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2659">Lien de navigation nav-2659</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2660">Lien de navigation nav-2660</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2661">Lien de navigation nav-2661</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2662">Lien de navigation nav-2662</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2663">Lien de navigation nav-2663</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="village-nav__item">
<button class="village-nav__btn" aria-expanded="false" aria-controls="collapse-2665">Entrée menu</button>
<div class="village-collapse village-menu" id="collapse-2665">
<ul class="village-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-2666">Lien de navigation nav-2666</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2667">Lien de navigation nav-2667</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2668">Lien de navigation nav-2668</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2669">Lien de navigation nav-2669</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2670">Lien de navigation nav-2670</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2671">Lien de navigation nav-2671</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2672">Lien de navigation nav-2672</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2673">Lien de navigation nav-2673</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
<div class="village-header__body">
<div class="village-container">
<div class="village-header__body-row">
<div class="village-header__brand village-enlarge-link">
<div class="village-header__brand-top">
<div class="village-header__navbar">
<button class="village-btn--search village-btn" data-village-opened="false" aria-controls="modal-2521" id="button-2522" title="Rechercher">
Rechercher
</button>
<button class="village-btn--menu village-btn" data-village-opened="false" aria-controls="modal-2523" id="button-2524" title="Menu">
Menu
</button>
</div>
</div>
<div class="village-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="village-header__service-title">
Nom du site / service
</p>
</a>
<p class="village-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="village-header__tools">
<div class="village-header__search village-modal" id="modal-2521" aria-labelledby="button-2522">
<div class="village-container village-container-lg--fluid">
<button class="village-btn--close village-btn" aria-controls="modal-2521" id="button-2677" title="Fermer">
Fermer
</button>
<div class="village-search-bar" id="search-2520" role="search">
<label class="village-label" for="search-2520-input">
Rechercher
</label>
<input class="village-input" aria-describedby="search-2520-input-messages" placeholder="Rechercher" id="search-2520-input" type="search">
<div class="village-messages-group" id="search-2520-input-messages" aria-live="polite">
</div>
<button class="village-btn" id="search-btn-2679" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
<div class="village-header__tools-links">
<ul class="village-btns-group">
<li>
<a class="village-btn--team village-btn" id="button-2680" href="#[url - à modifier]">
Contact
</a>
</li>
<li>
<a class="village-btn--briefcase village-btn" id="button-2681" href="#[url - à modifier]">
Espace recruteur
</a>
</li>
<li>
<a class="village-btn--account village-btn" id="button-2682" href="#[url - à modifier]">
Espace particulier
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
Header avec selecteur de langues
Nom du site / service
baseline - précisions sur l‘organisation
<header role="banner" class="village-header">
<div class="village-header__menu village-modal" id="modal-2848" aria-labelledby="button-2849">
<div class="village-container">
<button class="village-btn--close village-btn" aria-controls="modal-2848" id="button-2851" title="Fermer">
Fermer
</button>
<div class="village-header__menu-logo">
<img src="../../../dist/artwork/logo/logo.svg" class="village-logo" alt="logo" />
</div>
<div class="village-header__menu-links">
</div>
<nav class="village-nav" id="navigation-2850" role="navigation" aria-label="Menu principal">
<ul class="village-nav__list">
<li class="village-nav__item">
<button class="village-nav__btn" aria-expanded="false" aria-controls="collapse-2853">Entrée menu</button>
<div class="village-collapse village-menu" id="collapse-2853">
<ul class="village-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-2854">Lien de navigation nav-2854</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2855">Lien de navigation nav-2855</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2856">Lien de navigation nav-2856</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2857">Lien de navigation nav-2857</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2858">Lien de navigation nav-2858</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2859">Lien de navigation nav-2859</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2860">Lien de navigation nav-2860</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2861">Lien de navigation nav-2861</a>
</li>
</ul>
</div>
</li>
<li class="village-nav__item">
<button class="village-nav__btn" aria-expanded="false" aria-controls="collapse-2863">Entrée mega menu</button>
<div class="village-collapse village-mega-menu" id="collapse-2863">
<div class="village-container village-container--fluid village-container-lg">
<div class="village-grid-row village-grid-row-lg--gutters">
<div class="village-col-12 village-mb-n3v">
<button class="village-btn--close village-btn" aria-controls="collapse-2863" id="button-2999" title="Fermer">
Fermer
</button>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-2864">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-2865">Lien de navigation nav-2865</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2866">Lien de navigation nav-2866</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2867">Lien de navigation nav-2867</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2868">Lien de navigation nav-2868</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2869">Lien de navigation nav-2869</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2870">Lien de navigation nav-2870</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2871">Lien de navigation nav-2871</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2872">Lien de navigation nav-2872</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-2873">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-2874">Lien de navigation nav-2874</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2875">Lien de navigation nav-2875</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2876">Lien de navigation nav-2876</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2877">Lien de navigation nav-2877</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2878">Lien de navigation nav-2878</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2879">Lien de navigation nav-2879</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2880">Lien de navigation nav-2880</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2881">Lien de navigation nav-2881</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-2882">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-2883">Lien de navigation nav-2883</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2884">Lien de navigation nav-2884</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2885" aria-current="page">Lien de navigation nav-2885</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2886">Lien de navigation nav-2886</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2887">Lien de navigation nav-2887</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2888">Lien de navigation nav-2888</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2889">Lien de navigation nav-2889</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2890">Lien de navigation nav-2890</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-2891">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-2892">Lien de navigation nav-2892</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2893">Lien de navigation nav-2893</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2894">Lien de navigation nav-2894</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2895">Lien de navigation nav-2895</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2896">Lien de navigation nav-2896</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2897">Lien de navigation nav-2897</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2898">Lien de navigation nav-2898</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2899">Lien de navigation nav-2899</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-2900">accès direct nav-2900</a>
</li>
<li class="village-nav__item">
<button class="village-nav__btn" aria-expanded="false" aria-controls="collapse-2902" aria-current="true">Entrée menu</button>
<div class="village-collapse village-menu" id="collapse-2902">
<ul class="village-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-2903">Lien de navigation nav-2903</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2904">Lien de navigation nav-2904</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2905" aria-current="page">Lien de navigation nav-2905</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2906">Lien de navigation nav-2906</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2907">Lien de navigation nav-2907</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2908">Lien de navigation nav-2908</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2909">Lien de navigation nav-2909</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2910">Lien de navigation nav-2910</a>
</li>
</ul>
</div>
</li>
<li class="village-nav__item">
<button class="village-nav__btn" aria-expanded="false" aria-controls="collapse-2912">Entrée mega menu</button>
<div class="village-collapse village-mega-menu" id="collapse-2912">
<div class="village-container village-container--fluid village-container-lg">
<div class="village-grid-row village-grid-row-lg--gutters">
<div class="village-col-12 village-mb-n3v">
<button class="village-btn--close village-btn" aria-controls="collapse-2912" id="button-3000" title="Fermer">
Fermer
</button>
</div>
<div class="village-col-12 village-col-lg-8 village-col-offset-lg-4--right">
<div class="village-mega-menu__leader">
<h4 class="village-h4 village-mb-2v">Titre éditorialisé</h4>
<p class="village-hidden village-unhidden-lg">Lorem [...] elit ut.</p>
<a class="village-link village-icon-arrow-right-line village-link--icon-right" id="link-2913" href="#">Voir toute la rubrique</a>
</div>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-2914">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-2915">Lien de navigation nav-2915</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2916">Lien de navigation nav-2916</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2917">Lien de navigation nav-2917</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2918">Lien de navigation nav-2918</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2919">Lien de navigation nav-2919</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2920">Lien de navigation nav-2920</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2921">Lien de navigation nav-2921</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2922">Lien de navigation nav-2922</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-2923">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-2924">Lien de navigation nav-2924</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2925">Lien de navigation nav-2925</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2926">Lien de navigation nav-2926</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2927">Lien de navigation nav-2927</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2928">Lien de navigation nav-2928</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2929">Lien de navigation nav-2929</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2930">Lien de navigation nav-2930</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2931">Lien de navigation nav-2931</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-2932">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-2933">Lien de navigation nav-2933</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2934">Lien de navigation nav-2934</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2935" aria-current="page">Lien de navigation nav-2935</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2936">Lien de navigation nav-2936</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2937">Lien de navigation nav-2937</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2938">Lien de navigation nav-2938</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2939">Lien de navigation nav-2939</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2940">Lien de navigation nav-2940</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-2941">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-2942">Lien de navigation nav-2942</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2943">Lien de navigation nav-2943</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2944">Lien de navigation nav-2944</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2945">Lien de navigation nav-2945</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2946">Lien de navigation nav-2946</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2947">Lien de navigation nav-2947</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2948">Lien de navigation nav-2948</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2949">Lien de navigation nav-2949</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-2950">accès direct nav-2950</a>
</li>
<li class="village-nav__item">
<button class="village-nav__btn" aria-expanded="false" aria-controls="collapse-2952">Entrée mega menu</button>
<div class="village-collapse village-mega-menu" id="collapse-2952">
<div class="village-container village-container--fluid village-container-lg">
<div class="village-grid-row village-grid-row-lg--gutters">
<div class="village-col-12 village-mb-n3v">
<button class="village-btn--close village-btn" aria-controls="collapse-2952" id="button-3001" title="Fermer">
Fermer
</button>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-2953">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-2954">Lien de navigation nav-2954</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2955">Lien de navigation nav-2955</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2956">Lien de navigation nav-2956</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2957">Lien de navigation nav-2957</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2958">Lien de navigation nav-2958</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2959">Lien de navigation nav-2959</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2960">Lien de navigation nav-2960</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2961">Lien de navigation nav-2961</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-2962">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-2963">Lien de navigation nav-2963</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2964">Lien de navigation nav-2964</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2965">Lien de navigation nav-2965</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2966">Lien de navigation nav-2966</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2967">Lien de navigation nav-2967</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2968">Lien de navigation nav-2968</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2969">Lien de navigation nav-2969</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2970">Lien de navigation nav-2970</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-2971">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-2972">Lien de navigation nav-2972</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2973">Lien de navigation nav-2973</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2974" aria-current="page">Lien de navigation nav-2974</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2975">Lien de navigation nav-2975</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2976">Lien de navigation nav-2976</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2977">Lien de navigation nav-2977</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2978">Lien de navigation nav-2978</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2979">Lien de navigation nav-2979</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-2980">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-2981">Lien de navigation nav-2981</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2982">Lien de navigation nav-2982</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2983">Lien de navigation nav-2983</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2984">Lien de navigation nav-2984</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2985">Lien de navigation nav-2985</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2986">Lien de navigation nav-2986</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2987">Lien de navigation nav-2987</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2988">Lien de navigation nav-2988</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="village-nav__item">
<button class="village-nav__btn" aria-expanded="false" aria-controls="collapse-2990">Entrée menu</button>
<div class="village-collapse village-menu" id="collapse-2990">
<ul class="village-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-2991">Lien de navigation nav-2991</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2992">Lien de navigation nav-2992</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2993">Lien de navigation nav-2993</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2994">Lien de navigation nav-2994</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2995">Lien de navigation nav-2995</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2996">Lien de navigation nav-2996</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2997">Lien de navigation nav-2997</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-2998">Lien de navigation nav-2998</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
<div class="village-header__body">
<div class="village-container">
<div class="village-header__body-row">
<div class="village-header__brand village-enlarge-link">
<div class="village-header__brand-top">
<div class="village-header__navbar">
<button class="village-btn--menu village-btn" data-village-opened="false" aria-controls="modal-2848" id="button-2849" title="Menu">
Menu
</button>
</div>
</div>
<div class="village-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="village-header__service-title">
Nom du site / service
</p>
</a>
<p class="village-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="village-header__tools">
<div class="village-header__tools-links">
<nav role="navigation" class="village-translate village-nav" id="translate-3002">
<div class="village-nav__item">
<button class="village-translate__btn village-btn" aria-controls="translate-2847" aria-expanded="false" title="Sélectionner une langue" id="button-3003">
FR<span class="village-hidden-lg"> - Français</span>
</button>
<div class="village-collapse village-translate__menu village-menu" id="translate-2847">
<ul class="village-menu__list">
<li>
<a class="village-translate__language village-nav__link" hreflang="fr" lang="fr" href="#" id="language-3004" aria-current="true">FR - Français</a>
</li>
<li>
<a class="village-translate__language village-nav__link" hreflang="en" lang="en" href="#" id="language-3005">EN - English</a>
</li>
<li>
<a class="village-translate__language village-nav__link" hreflang="es" lang="es" href="#" id="language-3006">ES - Español</a>
</li>
<li>
<a class="village-translate__language village-nav__link" hreflang="de" lang="de" href="#" id="language-3007">DE - Deutsch</a>
</li>
<li>
<a class="village-translate__language village-nav__link" hreflang="tr" lang="tr" href="#" id="language-3008">TR - Türkçe</a>
</li>
<li>
<a class="village-translate__language village-nav__link" hreflang="ro" lang="ro" href="#" id="language-3009">RO - Română</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
</header>
Header avec selecteur de langues et raccourcis
Nom du site / service
baseline - précisions sur l‘organisation
<header role="banner" class="village-header">
<div class="village-header__menu village-modal" id="modal-3178" aria-labelledby="button-3179">
<div class="village-container">
<button class="village-btn--close village-btn" aria-controls="modal-3178" id="button-3181" title="Fermer">
Fermer
</button>
<div class="village-header__menu-logo">
<img src="../../../dist/artwork/logo/logo.svg" class="village-logo" alt="logo" />
</div>
<div class="village-header__menu-links">
</div>
<nav class="village-nav" id="navigation-3180" role="navigation" aria-label="Menu principal">
<ul class="village-nav__list">
<li class="village-nav__item">
<button class="village-nav__btn" aria-expanded="false" aria-controls="collapse-3183">Entrée menu</button>
<div class="village-collapse village-menu" id="collapse-3183">
<ul class="village-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-3184">Lien de navigation nav-3184</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3185">Lien de navigation nav-3185</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3186">Lien de navigation nav-3186</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3187">Lien de navigation nav-3187</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3188">Lien de navigation nav-3188</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3189">Lien de navigation nav-3189</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3190">Lien de navigation nav-3190</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3191">Lien de navigation nav-3191</a>
</li>
</ul>
</div>
</li>
<li class="village-nav__item">
<button class="village-nav__btn" aria-expanded="false" aria-controls="collapse-3193">Entrée mega menu</button>
<div class="village-collapse village-mega-menu" id="collapse-3193">
<div class="village-container village-container--fluid village-container-lg">
<div class="village-grid-row village-grid-row-lg--gutters">
<div class="village-col-12 village-mb-n3v">
<button class="village-btn--close village-btn" aria-controls="collapse-3193" id="button-3329" title="Fermer">
Fermer
</button>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-3194">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-3195">Lien de navigation nav-3195</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3196">Lien de navigation nav-3196</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3197">Lien de navigation nav-3197</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3198">Lien de navigation nav-3198</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3199">Lien de navigation nav-3199</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3200">Lien de navigation nav-3200</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3201">Lien de navigation nav-3201</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3202">Lien de navigation nav-3202</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-3203">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-3204">Lien de navigation nav-3204</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3205">Lien de navigation nav-3205</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3206">Lien de navigation nav-3206</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3207">Lien de navigation nav-3207</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3208">Lien de navigation nav-3208</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3209">Lien de navigation nav-3209</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3210">Lien de navigation nav-3210</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3211">Lien de navigation nav-3211</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-3212">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-3213">Lien de navigation nav-3213</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3214">Lien de navigation nav-3214</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3215" aria-current="page">Lien de navigation nav-3215</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3216">Lien de navigation nav-3216</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3217">Lien de navigation nav-3217</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3218">Lien de navigation nav-3218</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3219">Lien de navigation nav-3219</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3220">Lien de navigation nav-3220</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-3221">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-3222">Lien de navigation nav-3222</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3223">Lien de navigation nav-3223</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3224">Lien de navigation nav-3224</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3225">Lien de navigation nav-3225</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3226">Lien de navigation nav-3226</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3227">Lien de navigation nav-3227</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3228">Lien de navigation nav-3228</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3229">Lien de navigation nav-3229</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-3230">accès direct nav-3230</a>
</li>
<li class="village-nav__item">
<button class="village-nav__btn" aria-expanded="false" aria-controls="collapse-3232" aria-current="true">Entrée menu</button>
<div class="village-collapse village-menu" id="collapse-3232">
<ul class="village-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-3233">Lien de navigation nav-3233</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3234">Lien de navigation nav-3234</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3235" aria-current="page">Lien de navigation nav-3235</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3236">Lien de navigation nav-3236</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3237">Lien de navigation nav-3237</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3238">Lien de navigation nav-3238</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3239">Lien de navigation nav-3239</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3240">Lien de navigation nav-3240</a>
</li>
</ul>
</div>
</li>
<li class="village-nav__item">
<button class="village-nav__btn" aria-expanded="false" aria-controls="collapse-3242">Entrée mega menu</button>
<div class="village-collapse village-mega-menu" id="collapse-3242">
<div class="village-container village-container--fluid village-container-lg">
<div class="village-grid-row village-grid-row-lg--gutters">
<div class="village-col-12 village-mb-n3v">
<button class="village-btn--close village-btn" aria-controls="collapse-3242" id="button-3330" title="Fermer">
Fermer
</button>
</div>
<div class="village-col-12 village-col-lg-8 village-col-offset-lg-4--right">
<div class="village-mega-menu__leader">
<h4 class="village-h4 village-mb-2v">Titre éditorialisé</h4>
<p class="village-hidden village-unhidden-lg">Lorem [...] elit ut.</p>
<a class="village-link village-icon-arrow-right-line village-link--icon-right" id="link-3243" href="#">Voir toute la rubrique</a>
</div>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-3244">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-3245">Lien de navigation nav-3245</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3246">Lien de navigation nav-3246</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3247">Lien de navigation nav-3247</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3248">Lien de navigation nav-3248</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3249">Lien de navigation nav-3249</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3250">Lien de navigation nav-3250</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3251">Lien de navigation nav-3251</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3252">Lien de navigation nav-3252</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-3253">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-3254">Lien de navigation nav-3254</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3255">Lien de navigation nav-3255</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3256">Lien de navigation nav-3256</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3257">Lien de navigation nav-3257</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3258">Lien de navigation nav-3258</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3259">Lien de navigation nav-3259</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3260">Lien de navigation nav-3260</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3261">Lien de navigation nav-3261</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-3262">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-3263">Lien de navigation nav-3263</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3264">Lien de navigation nav-3264</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3265" aria-current="page">Lien de navigation nav-3265</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3266">Lien de navigation nav-3266</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3267">Lien de navigation nav-3267</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3268">Lien de navigation nav-3268</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3269">Lien de navigation nav-3269</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3270">Lien de navigation nav-3270</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-3271">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-3272">Lien de navigation nav-3272</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3273">Lien de navigation nav-3273</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3274">Lien de navigation nav-3274</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3275">Lien de navigation nav-3275</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3276">Lien de navigation nav-3276</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3277">Lien de navigation nav-3277</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3278">Lien de navigation nav-3278</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3279">Lien de navigation nav-3279</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-3280">accès direct nav-3280</a>
</li>
<li class="village-nav__item">
<button class="village-nav__btn" aria-expanded="false" aria-controls="collapse-3282">Entrée mega menu</button>
<div class="village-collapse village-mega-menu" id="collapse-3282">
<div class="village-container village-container--fluid village-container-lg">
<div class="village-grid-row village-grid-row-lg--gutters">
<div class="village-col-12 village-mb-n3v">
<button class="village-btn--close village-btn" aria-controls="collapse-3282" id="button-3331" title="Fermer">
Fermer
</button>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-3283">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-3284">Lien de navigation nav-3284</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3285">Lien de navigation nav-3285</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3286">Lien de navigation nav-3286</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3287">Lien de navigation nav-3287</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3288">Lien de navigation nav-3288</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3289">Lien de navigation nav-3289</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3290">Lien de navigation nav-3290</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3291">Lien de navigation nav-3291</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-3292">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-3293">Lien de navigation nav-3293</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3294">Lien de navigation nav-3294</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3295">Lien de navigation nav-3295</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3296">Lien de navigation nav-3296</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3297">Lien de navigation nav-3297</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3298">Lien de navigation nav-3298</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3299">Lien de navigation nav-3299</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3300">Lien de navigation nav-3300</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-3301">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-3302">Lien de navigation nav-3302</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3303">Lien de navigation nav-3303</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3304" aria-current="page">Lien de navigation nav-3304</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3305">Lien de navigation nav-3305</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3306">Lien de navigation nav-3306</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3307">Lien de navigation nav-3307</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3308">Lien de navigation nav-3308</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3309">Lien de navigation nav-3309</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-3310">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-3311">Lien de navigation nav-3311</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3312">Lien de navigation nav-3312</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3313">Lien de navigation nav-3313</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3314">Lien de navigation nav-3314</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3315">Lien de navigation nav-3315</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3316">Lien de navigation nav-3316</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3317">Lien de navigation nav-3317</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3318">Lien de navigation nav-3318</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="village-nav__item">
<button class="village-nav__btn" aria-expanded="false" aria-controls="collapse-3320">Entrée menu</button>
<div class="village-collapse village-menu" id="collapse-3320">
<ul class="village-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-3321">Lien de navigation nav-3321</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3322">Lien de navigation nav-3322</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3323">Lien de navigation nav-3323</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3324">Lien de navigation nav-3324</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3325">Lien de navigation nav-3325</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3326">Lien de navigation nav-3326</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3327">Lien de navigation nav-3327</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3328">Lien de navigation nav-3328</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
<div class="village-header__body">
<div class="village-container">
<div class="village-header__body-row">
<div class="village-header__brand village-enlarge-link">
<div class="village-header__brand-top">
<div class="village-header__navbar">
<button class="village-btn--menu village-btn" data-village-opened="false" aria-controls="modal-3178" id="button-3179" title="Menu">
Menu
</button>
</div>
</div>
<div class="village-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="village-header__service-title">
Nom du site / service
</p>
</a>
<p class="village-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="village-header__tools">
<div class="village-header__tools-links">
<ul class="village-btns-group">
<li>
<a class="village-btn--team village-btn" id="button-3332" href="#[url - à modifier]">
Contact
</a>
</li>
<li>
<a class="village-btn--briefcase village-btn" id="button-3333" href="#[url - à modifier]">
Espace recruteur
</a>
</li>
<li>
<a class="village-btn--account village-btn" id="button-3334" href="#[url - à modifier]">
Espace particulier
</a>
</li>
</ul>
<nav role="navigation" class="village-translate village-nav" id="translate-3335">
<div class="village-nav__item">
<button class="village-translate__btn village-btn" aria-controls="translate-3177" aria-expanded="false" title="Sélectionner une langue" id="button-3336">
FR<span class="village-hidden-lg"> - Français</span>
</button>
<div class="village-collapse village-translate__menu village-menu" id="translate-3177">
<ul class="village-menu__list">
<li>
<a class="village-translate__language village-nav__link" hreflang="fr" lang="fr" href="#" id="language-3337" aria-current="true">FR - Français</a>
</li>
<li>
<a class="village-translate__language village-nav__link" hreflang="en" lang="en" href="#" id="language-3338">EN - English</a>
</li>
<li>
<a class="village-translate__language village-nav__link" hreflang="es" lang="es" href="#" id="language-3339">ES - Español</a>
</li>
<li>
<a class="village-translate__language village-nav__link" hreflang="de" lang="de" href="#" id="language-3340">DE - Deutsch</a>
</li>
<li>
<a class="village-translate__language village-nav__link" hreflang="tr" lang="tr" href="#" id="language-3341">TR - Türkçe</a>
</li>
<li>
<a class="village-translate__language village-nav__link" hreflang="ro" lang="ro" href="#" id="language-3342">RO - Română</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
</header>
Header avec selecteur de langues et paramètre d'affichage
Nom du site / service
baseline - précisions sur l‘organisation
<header role="banner" class="village-header">
<div class="village-header__menu village-modal" id="modal-3510" aria-labelledby="button-3511">
<div class="village-container">
<button class="village-btn--close village-btn" aria-controls="modal-3510" id="button-3513" title="Fermer">
Fermer
</button>
<div class="village-header__menu-logo">
<img src="../../../dist/artwork/logo/logo.svg" class="village-logo" alt="logo" />
</div>
<div class="village-header__menu-links">
</div>
<nav class="village-nav" id="navigation-3512" role="navigation" aria-label="Menu principal">
<ul class="village-nav__list">
<li class="village-nav__item">
<button class="village-nav__btn" aria-expanded="false" aria-controls="collapse-3515">Entrée menu</button>
<div class="village-collapse village-menu" id="collapse-3515">
<ul class="village-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-3516">Lien de navigation nav-3516</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3517">Lien de navigation nav-3517</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3518">Lien de navigation nav-3518</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3519">Lien de navigation nav-3519</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3520">Lien de navigation nav-3520</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3521">Lien de navigation nav-3521</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3522">Lien de navigation nav-3522</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3523">Lien de navigation nav-3523</a>
</li>
</ul>
</div>
</li>
<li class="village-nav__item">
<button class="village-nav__btn" aria-expanded="false" aria-controls="collapse-3525">Entrée mega menu</button>
<div class="village-collapse village-mega-menu" id="collapse-3525">
<div class="village-container village-container--fluid village-container-lg">
<div class="village-grid-row village-grid-row-lg--gutters">
<div class="village-col-12 village-mb-n3v">
<button class="village-btn--close village-btn" aria-controls="collapse-3525" id="button-3661" title="Fermer">
Fermer
</button>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-3526">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-3527">Lien de navigation nav-3527</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3528">Lien de navigation nav-3528</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3529">Lien de navigation nav-3529</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3530">Lien de navigation nav-3530</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3531">Lien de navigation nav-3531</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3532">Lien de navigation nav-3532</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3533">Lien de navigation nav-3533</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3534">Lien de navigation nav-3534</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-3535">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-3536">Lien de navigation nav-3536</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3537">Lien de navigation nav-3537</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3538">Lien de navigation nav-3538</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3539">Lien de navigation nav-3539</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3540">Lien de navigation nav-3540</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3541">Lien de navigation nav-3541</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3542">Lien de navigation nav-3542</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3543">Lien de navigation nav-3543</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-3544">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-3545">Lien de navigation nav-3545</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3546">Lien de navigation nav-3546</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3547" aria-current="page">Lien de navigation nav-3547</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3548">Lien de navigation nav-3548</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3549">Lien de navigation nav-3549</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3550">Lien de navigation nav-3550</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3551">Lien de navigation nav-3551</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3552">Lien de navigation nav-3552</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-3553">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-3554">Lien de navigation nav-3554</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3555">Lien de navigation nav-3555</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3556">Lien de navigation nav-3556</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3557">Lien de navigation nav-3557</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3558">Lien de navigation nav-3558</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3559">Lien de navigation nav-3559</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3560">Lien de navigation nav-3560</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3561">Lien de navigation nav-3561</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-3562">accès direct nav-3562</a>
</li>
<li class="village-nav__item">
<button class="village-nav__btn" aria-expanded="false" aria-controls="collapse-3564" aria-current="true">Entrée menu</button>
<div class="village-collapse village-menu" id="collapse-3564">
<ul class="village-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-3565">Lien de navigation nav-3565</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3566">Lien de navigation nav-3566</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3567" aria-current="page">Lien de navigation nav-3567</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3568">Lien de navigation nav-3568</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3569">Lien de navigation nav-3569</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3570">Lien de navigation nav-3570</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3571">Lien de navigation nav-3571</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3572">Lien de navigation nav-3572</a>
</li>
</ul>
</div>
</li>
<li class="village-nav__item">
<button class="village-nav__btn" aria-expanded="false" aria-controls="collapse-3574">Entrée mega menu</button>
<div class="village-collapse village-mega-menu" id="collapse-3574">
<div class="village-container village-container--fluid village-container-lg">
<div class="village-grid-row village-grid-row-lg--gutters">
<div class="village-col-12 village-mb-n3v">
<button class="village-btn--close village-btn" aria-controls="collapse-3574" id="button-3662" title="Fermer">
Fermer
</button>
</div>
<div class="village-col-12 village-col-lg-8 village-col-offset-lg-4--right">
<div class="village-mega-menu__leader">
<h4 class="village-h4 village-mb-2v">Titre éditorialisé</h4>
<p class="village-hidden village-unhidden-lg">Lorem [...] elit ut.</p>
<a class="village-link village-icon-arrow-right-line village-link--icon-right" id="link-3575" href="#">Voir toute la rubrique</a>
</div>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-3576">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-3577">Lien de navigation nav-3577</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3578">Lien de navigation nav-3578</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3579">Lien de navigation nav-3579</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3580">Lien de navigation nav-3580</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3581">Lien de navigation nav-3581</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3582">Lien de navigation nav-3582</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3583">Lien de navigation nav-3583</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3584">Lien de navigation nav-3584</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-3585">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-3586">Lien de navigation nav-3586</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3587">Lien de navigation nav-3587</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3588">Lien de navigation nav-3588</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3589">Lien de navigation nav-3589</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3590">Lien de navigation nav-3590</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3591">Lien de navigation nav-3591</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3592">Lien de navigation nav-3592</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3593">Lien de navigation nav-3593</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-3594">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-3595">Lien de navigation nav-3595</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3596">Lien de navigation nav-3596</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3597" aria-current="page">Lien de navigation nav-3597</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3598">Lien de navigation nav-3598</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3599">Lien de navigation nav-3599</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3600">Lien de navigation nav-3600</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3601">Lien de navigation nav-3601</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3602">Lien de navigation nav-3602</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-3603">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-3604">Lien de navigation nav-3604</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3605">Lien de navigation nav-3605</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3606">Lien de navigation nav-3606</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3607">Lien de navigation nav-3607</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3608">Lien de navigation nav-3608</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3609">Lien de navigation nav-3609</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3610">Lien de navigation nav-3610</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3611">Lien de navigation nav-3611</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-3612">accès direct nav-3612</a>
</li>
<li class="village-nav__item">
<button class="village-nav__btn" aria-expanded="false" aria-controls="collapse-3614">Entrée mega menu</button>
<div class="village-collapse village-mega-menu" id="collapse-3614">
<div class="village-container village-container--fluid village-container-lg">
<div class="village-grid-row village-grid-row-lg--gutters">
<div class="village-col-12 village-mb-n3v">
<button class="village-btn--close village-btn" aria-controls="collapse-3614" id="button-3663" title="Fermer">
Fermer
</button>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-3615">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-3616">Lien de navigation nav-3616</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3617">Lien de navigation nav-3617</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3618">Lien de navigation nav-3618</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3619">Lien de navigation nav-3619</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3620">Lien de navigation nav-3620</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3621">Lien de navigation nav-3621</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3622">Lien de navigation nav-3622</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3623">Lien de navigation nav-3623</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-3624">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-3625">Lien de navigation nav-3625</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3626">Lien de navigation nav-3626</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3627">Lien de navigation nav-3627</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3628">Lien de navigation nav-3628</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3629">Lien de navigation nav-3629</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3630">Lien de navigation nav-3630</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3631">Lien de navigation nav-3631</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3632">Lien de navigation nav-3632</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-3633">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-3634">Lien de navigation nav-3634</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3635">Lien de navigation nav-3635</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3636" aria-current="page">Lien de navigation nav-3636</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3637">Lien de navigation nav-3637</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3638">Lien de navigation nav-3638</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3639">Lien de navigation nav-3639</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3640">Lien de navigation nav-3640</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3641">Lien de navigation nav-3641</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-3642">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-3643">Lien de navigation nav-3643</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3644">Lien de navigation nav-3644</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3645">Lien de navigation nav-3645</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3646">Lien de navigation nav-3646</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3647">Lien de navigation nav-3647</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3648">Lien de navigation nav-3648</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3649">Lien de navigation nav-3649</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3650">Lien de navigation nav-3650</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="village-nav__item">
<button class="village-nav__btn" aria-expanded="false" aria-controls="collapse-3652">Entrée menu</button>
<div class="village-collapse village-menu" id="collapse-3652">
<ul class="village-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-3653">Lien de navigation nav-3653</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3654">Lien de navigation nav-3654</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3655">Lien de navigation nav-3655</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3656">Lien de navigation nav-3656</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3657">Lien de navigation nav-3657</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3658">Lien de navigation nav-3658</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3659">Lien de navigation nav-3659</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-3660">Lien de navigation nav-3660</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
<div class="village-header__body">
<div class="village-container">
<div class="village-header__body-row">
<div class="village-header__brand village-enlarge-link">
<div class="village-header__brand-top">
<div class="village-header__navbar">
<button class="village-btn--menu village-btn" data-village-opened="false" aria-controls="modal-3510" id="button-3511" title="Menu">
Menu
</button>
</div>
</div>
<div class="village-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="village-header__service-title">
Nom du site / service
</p>
</a>
<p class="village-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="village-header__tools">
<div class="village-header__tools-links">
<ul class="village-btns-group">
<li>
<button class="village-icon-theme-fill village-btn--icon-left village-btn village-btn" aria-controls="village-theme-modal" data-village-opened="false" id="button-3664">
Paramètres d'affichage
</button>
</li>
<li>
<a class="village-btn--account village-btn village-btn" id="button-3665" href="#[url - à modifier]">
Espace particulier
</a>
</li>
</ul>
<nav role="navigation" class="village-translate village-nav" id="translate-3666">
<div class="village-nav__item">
<button class="village-translate__btn village-btn" aria-controls="translate-3509" aria-expanded="false" title="Sélectionner une langue" id="button-3667">
FR<span class="village-hidden-lg"> - Français</span>
</button>
<div class="village-collapse village-translate__menu village-menu" id="translate-3509">
<ul class="village-menu__list">
<li>
<a class="village-translate__language village-nav__link" hreflang="fr" lang="fr" href="#" id="language-3668" aria-current="true">FR - Français</a>
</li>
<li>
<a class="village-translate__language village-nav__link" hreflang="en" lang="en" href="#" id="language-3669">EN - English</a>
</li>
<li>
<a class="village-translate__language village-nav__link" hreflang="es" lang="es" href="#" id="language-3670">ES - Español</a>
</li>
<li>
<a class="village-translate__language village-nav__link" hreflang="de" lang="de" href="#" id="language-3671">DE - Deutsch</a>
</li>
<li>
<a class="village-translate__language village-nav__link" hreflang="tr" lang="tr" href="#" id="language-3672">TR - Türkçe</a>
</li>
<li>
<a class="village-translate__language village-nav__link" hreflang="ro" lang="ro" href="#" id="language-3673">RO - Română</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
</header>
Header avec nom de service, lien d’accès
Nom du site / service
baseline - précisions sur l‘organisation
<header role="banner" class="village-header">
<div class="village-header__menu village-modal" id="modal-3687" aria-labelledby="button-3688">
<div class="village-container">
<button class="village-btn--close village-btn" aria-controls="modal-3687" id="button-3690" title="Fermer">
Fermer
</button>
<div class="village-header__menu-logo">
<img src="../../../dist/artwork/logo/logo.svg" class="village-logo" alt="logo" />
</div>
<div class="village-header__menu-links">
</div>
<nav class="village-nav" id="navigation-3691" role="navigation" aria-label="Menu principal">
<ul class="village-nav__list">
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-3692">accès direct nav-3692</a>
</li>
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-3693">accès direct nav-3693</a>
</li>
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-3694">accès direct nav-3694</a>
</li>
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-3695">accès direct nav-3695</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="village-header__body">
<div class="village-container">
<div class="village-header__body-row">
<div class="village-header__brand village-enlarge-link">
<div class="village-header__brand-top">
<div class="village-header__navbar">
<button class="village-btn--menu village-btn" data-village-opened="false" aria-controls="modal-3687" id="button-3688" title="Menu">
Menu
</button>
</div>
</div>
<div class="village-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="village-header__service-title">
Nom du site / service
</p>
</a>
<p class="village-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="village-header__tools">
<div class="village-header__tools-links">
<ul class="village-btns-group">
<li>
<a class="village-btn--team village-btn" id="button-3696" href="#[url - à modifier]">
Contact
</a>
</li>
<li>
<a class="village-btn--briefcase village-btn" id="button-3697" href="#[url - à modifier]">
Espace recruteur
</a>
</li>
<li>
<a class="village-btn--account village-btn" id="button-3698" href="#[url - à modifier]">
Espace particulier
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
Header avec nom de service, recherche
<header role="banner" class="village-header">
<div class="village-header__menu village-modal" id="modal-3718" aria-labelledby="button-3719">
<div class="village-container">
<button class="village-btn--close village-btn" aria-controls="modal-3718" id="button-3721" title="Fermer">
Fermer
</button>
<div class="village-header__menu-logo">
<img src="../../../dist/artwork/logo/logo.svg" class="village-logo" alt="logo" />
</div>
<div class="village-header__menu-links">
</div>
<nav class="village-nav" id="navigation-3722" role="navigation" aria-label="Menu principal">
<ul class="village-nav__list">
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-3723">accès direct nav-3723</a>
</li>
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-3724">accès direct nav-3724</a>
</li>
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-3725">accès direct nav-3725</a>
</li>
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-3726">accès direct nav-3726</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="village-header__body">
<div class="village-container">
<div class="village-header__body-row">
<div class="village-header__brand village-enlarge-link">
<div class="village-header__brand-top">
<div class="village-header__navbar">
<button class="village-btn--search village-btn" data-village-opened="false" aria-controls="modal-3716" id="button-3717" title="Rechercher">
Rechercher
</button>
<button class="village-btn--menu village-btn" data-village-opened="false" aria-controls="modal-3718" id="button-3719" title="Menu">
Menu
</button>
</div>
</div>
<div class="village-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="village-header__service-title">
Nom du site / service
</p>
</a>
</div>
</div>
<div class="village-header__tools">
<div class="village-header__search village-modal" id="modal-3716" aria-labelledby="button-3717">
<div class="village-container village-container-lg--fluid">
<button class="village-btn--close village-btn" aria-controls="modal-3716" id="button-3727" title="Fermer">
Fermer
</button>
<div class="village-search-bar" id="search-3715" role="search">
<label class="village-label" for="search-3715-input">
Rechercher
</label>
<input class="village-input" aria-describedby="search-3715-input-messages" placeholder="Rechercher" id="search-3715-input" type="search">
<div class="village-messages-group" id="search-3715-input-messages" aria-live="polite">
</div>
<button class="village-btn" id="search-btn-3729" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
Header avec logo opérateur vertical, recherche
![[À MODIFIER - texte alternatif de l’image]](../../../example/img/placeholder.3x4.png)
<header role="banner" class="village-header">
<div class="village-header__menu village-modal" id="modal-3749" aria-labelledby="button-3750">
<div class="village-container">
<button class="village-btn--close village-btn" aria-controls="modal-3749" id="button-3752" title="Fermer">
Fermer
</button>
<div class="village-header__menu-logo">
<img src="../../../dist/artwork/logo/logo.svg" class="village-logo" alt="logo" />
</div>
<div class="village-header__menu-links">
</div>
<nav class="village-nav" id="navigation-3753" role="navigation" aria-label="Menu principal">
<ul class="village-nav__list">
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-3754">accès direct nav-3754</a>
</li>
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-3755">accès direct nav-3755</a>
</li>
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-3756">accès direct nav-3756</a>
</li>
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-3757">accès direct nav-3757</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="village-header__body">
<div class="village-container">
<div class="village-header__body-row">
<div class="village-header__brand village-enlarge-link">
<div class="village-header__brand-top">
<div class="village-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="village-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="village-header__navbar">
<button class="village-btn--search village-btn" data-village-opened="false" aria-controls="modal-3747" id="button-3748" title="Rechercher">
Rechercher
</button>
<button class="village-btn--menu village-btn" data-village-opened="false" aria-controls="modal-3749" id="button-3750" title="Menu">
Menu
</button>
</div>
</div>
</div>
<div class="village-header__tools">
<div class="village-header__search village-modal" id="modal-3747" aria-labelledby="button-3748">
<div class="village-container village-container-lg--fluid">
<button class="village-btn--close village-btn" aria-controls="modal-3747" id="button-3758" title="Fermer">
Fermer
</button>
<div class="village-search-bar" id="search-3746" role="search">
<label class="village-label" for="search-3746-input">
Rechercher
</label>
<input class="village-input" aria-describedby="search-3746-input-messages" placeholder="Rechercher" id="search-3746-input" type="search">
<div class="village-messages-group" id="search-3746-input-messages" aria-live="polite">
</div>
<button class="village-btn" id="search-btn-3760" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
Header avec logo opérateur horizontal, nom de service, lien d’accès, recherche
![[À 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="village-header">
<div class="village-header__menu village-modal" id="modal-3783" aria-labelledby="button-3784">
<div class="village-container">
<button class="village-btn--close village-btn" aria-controls="modal-3783" id="button-3786" title="Fermer">
Fermer
</button>
<div class="village-header__menu-logo">
<img src="../../../dist/artwork/logo/logo.svg" class="village-logo" alt="logo" />
</div>
<div class="village-header__menu-links">
</div>
<nav class="village-nav" id="navigation-3787" role="navigation" aria-label="Menu principal">
<ul class="village-nav__list">
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-3788">accès direct nav-3788</a>
</li>
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-3789">accès direct nav-3789</a>
</li>
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-3790">accès direct nav-3790</a>
</li>
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-3791">accès direct nav-3791</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="village-header__body">
<div class="village-container">
<div class="village-header__body-row">
<div class="village-header__brand village-enlarge-link">
<div class="village-header__brand-top">
<div class="village-header__operator">
<img class="village-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="village-header__navbar">
<button class="village-btn--search village-btn" data-village-opened="false" aria-controls="modal-3781" id="button-3782" title="Rechercher">
Rechercher
</button>
<button class="village-btn--menu village-btn" data-village-opened="false" aria-controls="modal-3783" id="button-3784" title="Menu">
Menu
</button>
</div>
</div>
<div class="village-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="village-header__service-title">
Nom du site / service
</p>
</a>
<p class="village-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="village-header__tools">
<div class="village-header__search village-modal" id="modal-3781" aria-labelledby="button-3782">
<div class="village-container village-container-lg--fluid">
<button class="village-btn--close village-btn" aria-controls="modal-3781" id="button-3792" title="Fermer">
Fermer
</button>
<div class="village-search-bar" id="search-3780" role="search">
<label class="village-label" for="search-3780-input">
Rechercher
</label>
<input class="village-input" aria-describedby="search-3780-input-messages" placeholder="Rechercher" id="search-3780-input" type="search">
<div class="village-messages-group" id="search-3780-input-messages" aria-live="polite">
</div>
<button class="village-btn" id="search-btn-3794" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
<div class="village-header__tools-links">
<ul class="village-btns-group">
<li>
<a class="village-btn--team village-btn" id="button-3795" href="#[url - à modifier]">
Contact
</a>
</li>
<li>
<a class="village-btn--briefcase village-btn" id="button-3796" href="#[url - à modifier]">
Espace recruteur
</a>
</li>
<li>
<a class="village-btn--account village-btn" id="button-3797" href="#[url - à modifier]">
Espace particulier
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
Header avec raccourcis dupliqués, pour Angular, React et Vue
<header role="banner" class="village-header">
<div class="village-header__menu village-modal" id="modal-3805" aria-labelledby="button-3806">
<div class="village-container">
<button class="village-btn--close village-btn" aria-controls="modal-3805" id="button-3807" title="Fermer">
Fermer
</button>
<div class="village-header__menu-logo">
<a href="/" title="Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<img src="../../../dist/artwork/logo/logo.svg" class="village-logo" alt="logo" />
</a>
</div>
<div class="village-header__menu-links">
<ul class="village-btns-group">
</ul>
</div>
</div>
</div>
<div class="village-header__body">
<div class="village-container">
<div class="village-header__body-row">
<div class="village-header__brand village-enlarge-link">
<div class="village-header__brand-top">
<div class="village-header__navbar">
<button class="village-btn--menu village-btn" data-village-opened="false" aria-controls="modal-3805" id="button-3806" title="Menu">
Menu
</button>
</div>
</div>
</div>
<div class="village-header__tools">
<div class="village-header__tools-links">
<ul class="village-btns-group">
<li>
<a class="village-btn--team village-btn" id="button-3808" href="#[url - à modifier]">
Contact
</a>
</li>
<li>
<a class="village-btn--briefcase village-btn" id="button-3809" href="#[url - à modifier]">
Espace recruteur
</a>
</li>
<li>
<a class="village-btn--account village-btn" id="button-3810" href="#[url - à modifier]">
Espace particulier
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
Header avec bandeau BETA
Nom du site / service BETA
baseline - précisions sur l‘organisation
<header role="banner" class="village-header">
<div class="village-header__menu village-modal" id="modal-3833" aria-labelledby="button-3834">
<div class="village-container">
<button class="village-btn--close village-btn" aria-controls="modal-3833" id="button-3836" title="Fermer">
Fermer
</button>
<div class="village-header__menu-logo">
<img src="../../../dist/artwork/logo/logo.svg" class="village-logo" alt="logo" />
</div>
<div class="village-header__menu-links">
</div>
<nav class="village-nav" id="navigation-3837" role="navigation" aria-label="Menu principal">
<ul class="village-nav__list">
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-3838">accès direct nav-3838</a>
</li>
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-3839">accès direct nav-3839</a>
</li>
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-3840">accès direct nav-3840</a>
</li>
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-3841">accès direct nav-3841</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="village-header__body">
<div class="village-container">
<div class="village-header__body-row">
<div class="village-header__brand village-enlarge-link">
<div class="village-header__brand-top">
<div class="village-header__navbar">
<button class="village-btn--search village-btn" data-village-opened="false" aria-controls="modal-3831" id="button-3832" title="Rechercher">
Rechercher
</button>
<button class="village-btn--menu village-btn" data-village-opened="false" aria-controls="modal-3833" id="button-3834" title="Menu">
Menu
</button>
</div>
</div>
<div class="village-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="village-header__service-title">
Nom du site / service
<span class="village-badge village-badge--sm village-badge--green-emeraude">BETA</span>
</p>
</a>
<p class="village-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="village-header__tools">
<div class="village-header__search village-modal" id="modal-3831" aria-labelledby="button-3832">
<div class="village-container village-container-lg--fluid">
<button class="village-btn--close village-btn" aria-controls="modal-3831" id="button-3842" title="Fermer">
Fermer
</button>
<div class="village-search-bar" id="search-3830" role="search">
<label class="village-label" for="search-3830-input">
Rechercher
</label>
<input class="village-input" aria-describedby="search-3830-input-messages" placeholder="Rechercher" id="search-3830-input" type="search">
<div class="village-messages-group" id="search-3830-input-messages" aria-live="polite">
</div>
<button class="village-btn" id="search-btn-3844" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
<div class="village-header__tools-links">
<ul class="village-btns-group">
<li>
<a class="village-btn--team village-btn" id="button-3845" href="#[url - à modifier]">
Contact
</a>
</li>
<li>
<a class="village-btn--briefcase village-btn" id="button-3846" href="#[url - à modifier]">
Espace recruteur
</a>
</li>
<li>
<a class="village-btn--account village-btn" id="button-3847" href="#[url - à modifier]">
Espace particulier
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
Header logo opérateur + bandeau BETA
Nom du site / service BETA
baseline - précisions sur l‘organisation
<header role="banner" class="village-header">
<div class="village-header__menu village-modal" id="modal-3870" aria-labelledby="button-3871">
<div class="village-container">
<button class="village-btn--close village-btn" aria-controls="modal-3870" id="button-3873" title="Fermer">
Fermer
</button>
<div class="village-header__menu-logo">
<img src="../../../dist/artwork/logo/logo.svg" class="village-logo" alt="logo" />
</div>
<div class="village-header__menu-links">
</div>
<nav class="village-nav" id="navigation-3874" role="navigation" aria-label="Menu principal">
<ul class="village-nav__list">
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-3875">accès direct nav-3875</a>
</li>
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-3876">accès direct nav-3876</a>
</li>
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-3877">accès direct nav-3877</a>
</li>
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-3878">accès direct nav-3878</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="village-header__body">
<div class="village-container">
<div class="village-header__body-row">
<div class="village-header__brand village-enlarge-link">
<div class="village-header__brand-top">
<div class="village-header__operator">
<img class="village-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="village-header__navbar">
<button class="village-btn--search village-btn" data-village-opened="false" aria-controls="modal-3868" id="button-3869" title="Rechercher">
Rechercher
</button>
<button class="village-btn--menu village-btn" data-village-opened="false" aria-controls="modal-3870" id="button-3871" title="Menu">
Menu
</button>
</div>
</div>
<div class="village-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="village-header__service-title">
Nom du site / service
<span class="village-badge village-badge--sm village-badge--green-emeraude">BETA</span>
</p>
</a>
<p class="village-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="village-header__tools">
<div class="village-header__search village-modal" id="modal-3868" aria-labelledby="button-3869">
<div class="village-container village-container-lg--fluid">
<button class="village-btn--close village-btn" aria-controls="modal-3868" id="button-3879" title="Fermer">
Fermer
</button>
<div class="village-search-bar" id="search-3867" role="search">
<label class="village-label" for="search-3867-input">
Rechercher
</label>
<input class="village-input" aria-describedby="search-3867-input-messages" placeholder="Rechercher" id="search-3867-input" type="search">
<div class="village-messages-group" id="search-3867-input-messages" aria-live="polite">
</div>
<button class="village-btn" id="search-btn-3881" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
<div class="village-header__tools-links">
<ul class="village-btns-group">
<li>
<a class="village-btn--team village-btn" id="button-3882" href="#[url - à modifier]">
Contact
</a>
</li>
<li>
<a class="village-btn--briefcase village-btn" id="button-3883" href="#[url - à modifier]">
Espace recruteur
</a>
</li>
<li>
<a class="village-btn--account village-btn" id="button-3884" href="#[url - à modifier]">
Espace particulier
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
Header min avec bandeau BETA
BETA
<header role="banner" class="village-header">
<div class="village-header__menu village-modal" id="modal-3895" aria-labelledby="button-3896">
<div class="village-container">
<button class="village-btn--close village-btn" aria-controls="modal-3895" id="button-3898" title="Fermer">
Fermer
</button>
<div class="village-header__menu-logo">
<a href="/" title="Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<img src="../../../dist/artwork/logo/logo.svg" class="village-logo" alt="logo" />
</a>
</div>
<div class="village-header__menu-links">
</div>
<nav class="village-nav" id="navigation-3899" role="navigation" aria-label="Menu principal">
<ul class="village-nav__list">
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-3900">accès direct nav-3900</a>
</li>
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-3901">accès direct nav-3901</a>
</li>
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-3902">accès direct nav-3902</a>
</li>
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-3903">accès direct nav-3903</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="village-header__body">
<div class="village-container">
<div class="village-header__body-row">
<div class="village-header__brand village-enlarge-link">
<div class="village-header__brand-top">
<div class="village-header__navbar">
<button class="village-btn--menu village-btn" data-village-opened="false" aria-controls="modal-3895" id="button-3896" title="Menu">
Menu
</button>
</div>
</div>
<div class="village-header__service">
<p class="village-header__service-title">
<span class="village-badge village-badge--sm village-badge--green-emeraude">BETA</span>
</p>
</div>
</div>
</div>
</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é
Nom du site / service
baseline - précisions sur l‘organisation
<header role="banner" class="village-header">
<div class="village-header__body">
<div class="village-container">
<div class="village-header__body-row">
<div class="village-header__brand village-enlarge-link">
<div class="village-header__brand-top">
<div class="village-header__logo">
<img src="../../../dist/artwork/logo/logo.svg" class="village-logo" alt="logo" />
</div>
<div class="village-header__navbar">
<button class="village-btn--search village-btn" data-village-opened="false" aria-controls="modal-4067" id="button-4068" title="Rechercher">
Rechercher
</button>
<button class="village-btn--menu village-btn" data-village-opened="false" aria-controls="modal-4069" id="button-4070" title="Menu">
Menu
</button>
</div>
</div>
<div class="village-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="village-header__service-title">Nom du site / service</p>
</a>
<p class="village-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="village-header__tools">
<div class="village-header__tools-links">
<ul class="village-links-group">
<li>
<a class="village-link village-icon-add-circle-line" id="link-4072" href="[url - à modifier]">Créer un espace</a>
</li>
<li>
<a class="village-link village-icon-lock-line" id="link-4073" href="[url - à modifier]">Se connecter</a>
</li>
<li>
<a class="village-link village-icon-account-line" id="link-4074" href="[url - à modifier]">S’enregistrer</a>
</li>
</ul>
</div>
<div class="village-header__search village-modal" id="modal-4067" aria-labelledby="button-4068">
<div class="village-container village-container-lg--fluid">
<button class="village-link--close village-link" aria-controls="modal-4067">Fermer</button>
<div class="village-search-bar" id="search-4066" role="search">
<label class="village-label" for="search-4066-input">
Rechercher
</label>
<input class="village-input" aria-describedby="search-4066-input-messages" placeholder="Rechercher" id="search-4066-input" type="search">
<div class="village-messages-group" id="search-4066-input-messages" aria-live="polite">
</div>
<button class="village-btn" id="search-btn-4076" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="village-header__menu village-modal" id="modal-4069" aria-labelledby="button-4070">
<div class="village-container">
<button class="village-link--close village-link" aria-controls="modal-4069">Fermer</button>
<div class="village-header__menu-links">
</div>
<nav class="village-nav" id="navigation-4071" role="navigation" aria-label="Menu principal">
<ul class="village-nav__list">
<li class="village-nav__item">
<button class="village-nav__btn" aria-expanded="false" aria-controls="collapse-4078">Entrée menu</button>
<div class="village-collapse village-menu" id="collapse-4078">
<ul class="village-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-4079">Lien de navigation nav-4079</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4080">Lien de navigation nav-4080</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4081">Lien de navigation nav-4081</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4082">Lien de navigation nav-4082</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4083">Lien de navigation nav-4083</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4084">Lien de navigation nav-4084</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4085">Lien de navigation nav-4085</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4086">Lien de navigation nav-4086</a>
</li>
</ul>
</div>
</li>
<li class="village-nav__item">
<button class="village-nav__btn" aria-expanded="false" aria-controls="collapse-4088">Entrée mega menu</button>
<div class="village-collapse village-mega-menu" id="collapse-4088">
<div class="village-container village-container--fluid village-container-lg">
<div class="village-grid-row village-grid-row-lg--gutters">
<div class="village-col-12 village-mb-n3v">
<button class="village-btn--close village-btn" aria-controls="collapse-4088" id="button-4224" title="Fermer">
Fermer
</button>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-4089">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-4090">Lien de navigation nav-4090</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4091">Lien de navigation nav-4091</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4092">Lien de navigation nav-4092</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4093">Lien de navigation nav-4093</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4094">Lien de navigation nav-4094</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4095">Lien de navigation nav-4095</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4096">Lien de navigation nav-4096</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4097">Lien de navigation nav-4097</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-4098">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-4099">Lien de navigation nav-4099</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4100">Lien de navigation nav-4100</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4101">Lien de navigation nav-4101</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4102">Lien de navigation nav-4102</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4103">Lien de navigation nav-4103</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4104">Lien de navigation nav-4104</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4105">Lien de navigation nav-4105</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4106">Lien de navigation nav-4106</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-4107">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-4108">Lien de navigation nav-4108</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4109">Lien de navigation nav-4109</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4110" aria-current="page">Lien de navigation nav-4110</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4111">Lien de navigation nav-4111</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4112">Lien de navigation nav-4112</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4113">Lien de navigation nav-4113</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4114">Lien de navigation nav-4114</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4115">Lien de navigation nav-4115</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-4116">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-4117">Lien de navigation nav-4117</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4118">Lien de navigation nav-4118</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4119">Lien de navigation nav-4119</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4120">Lien de navigation nav-4120</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4121">Lien de navigation nav-4121</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4122">Lien de navigation nav-4122</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4123">Lien de navigation nav-4123</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4124">Lien de navigation nav-4124</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-4125">accès direct nav-4125</a>
</li>
<li class="village-nav__item">
<button class="village-nav__btn" aria-expanded="false" aria-controls="collapse-4127" aria-current="true">Entrée menu</button>
<div class="village-collapse village-menu" id="collapse-4127">
<ul class="village-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-4128">Lien de navigation nav-4128</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4129">Lien de navigation nav-4129</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4130" aria-current="page">Lien de navigation nav-4130</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4131">Lien de navigation nav-4131</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4132">Lien de navigation nav-4132</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4133">Lien de navigation nav-4133</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4134">Lien de navigation nav-4134</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4135">Lien de navigation nav-4135</a>
</li>
</ul>
</div>
</li>
<li class="village-nav__item">
<button class="village-nav__btn" aria-expanded="false" aria-controls="collapse-4137">Entrée mega menu</button>
<div class="village-collapse village-mega-menu" id="collapse-4137">
<div class="village-container village-container--fluid village-container-lg">
<div class="village-grid-row village-grid-row-lg--gutters">
<div class="village-col-12 village-mb-n3v">
<button class="village-btn--close village-btn" aria-controls="collapse-4137" id="button-4225" title="Fermer">
Fermer
</button>
</div>
<div class="village-col-12 village-col-lg-8 village-col-offset-lg-4--right">
<div class="village-mega-menu__leader">
<h4 class="village-h4 village-mb-2v">Titre éditorialisé</h4>
<p class="village-hidden village-unhidden-lg">Lorem [...] elit ut.</p>
<a class="village-link village-icon-arrow-right-line village-link--icon-right" id="link-4138" href="#">Voir toute la rubrique</a>
</div>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-4139">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-4140">Lien de navigation nav-4140</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4141">Lien de navigation nav-4141</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4142">Lien de navigation nav-4142</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4143">Lien de navigation nav-4143</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4144">Lien de navigation nav-4144</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4145">Lien de navigation nav-4145</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4146">Lien de navigation nav-4146</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4147">Lien de navigation nav-4147</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-4148">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-4149">Lien de navigation nav-4149</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4150">Lien de navigation nav-4150</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4151">Lien de navigation nav-4151</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4152">Lien de navigation nav-4152</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4153">Lien de navigation nav-4153</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4154">Lien de navigation nav-4154</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4155">Lien de navigation nav-4155</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4156">Lien de navigation nav-4156</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-4157">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-4158">Lien de navigation nav-4158</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4159">Lien de navigation nav-4159</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4160" aria-current="page">Lien de navigation nav-4160</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4161">Lien de navigation nav-4161</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4162">Lien de navigation nav-4162</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4163">Lien de navigation nav-4163</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4164">Lien de navigation nav-4164</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4165">Lien de navigation nav-4165</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-4166">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-4167">Lien de navigation nav-4167</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4168">Lien de navigation nav-4168</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4169">Lien de navigation nav-4169</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4170">Lien de navigation nav-4170</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4171">Lien de navigation nav-4171</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4172">Lien de navigation nav-4172</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4173">Lien de navigation nav-4173</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4174">Lien de navigation nav-4174</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="village-nav__item">
<a class="village-nav__link" href="#" id="nav-4175">accès direct nav-4175</a>
</li>
<li class="village-nav__item">
<button class="village-nav__btn" aria-expanded="false" aria-controls="collapse-4177">Entrée mega menu</button>
<div class="village-collapse village-mega-menu" id="collapse-4177">
<div class="village-container village-container--fluid village-container-lg">
<div class="village-grid-row village-grid-row-lg--gutters">
<div class="village-col-12 village-mb-n3v">
<button class="village-btn--close village-btn" aria-controls="collapse-4177" id="button-4226" title="Fermer">
Fermer
</button>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-4178">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-4179">Lien de navigation nav-4179</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4180">Lien de navigation nav-4180</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4181">Lien de navigation nav-4181</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4182">Lien de navigation nav-4182</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4183">Lien de navigation nav-4183</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4184">Lien de navigation nav-4184</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4185">Lien de navigation nav-4185</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4186">Lien de navigation nav-4186</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-4187">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-4188">Lien de navigation nav-4188</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4189">Lien de navigation nav-4189</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4190">Lien de navigation nav-4190</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4191">Lien de navigation nav-4191</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4192">Lien de navigation nav-4192</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4193">Lien de navigation nav-4193</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4194">Lien de navigation nav-4194</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4195">Lien de navigation nav-4195</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-4196">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-4197">Lien de navigation nav-4197</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4198">Lien de navigation nav-4198</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4199" aria-current="page">Lien de navigation nav-4199</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4200">Lien de navigation nav-4200</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4201">Lien de navigation nav-4201</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4202">Lien de navigation nav-4202</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4203">Lien de navigation nav-4203</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4204">Lien de navigation nav-4204</a>
</li>
</ul>
</div>
<div class="village-col-12 village-col-lg-3">
<h5 class="village-mega-menu__category">
<a class="village-nav__link" href="#" id="category-4205">Nom de catégorie</a>
</h5>
<ul class="village-mega-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-4206">Lien de navigation nav-4206</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4207">Lien de navigation nav-4207</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4208">Lien de navigation nav-4208</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4209">Lien de navigation nav-4209</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4210">Lien de navigation nav-4210</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4211">Lien de navigation nav-4211</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4212">Lien de navigation nav-4212</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4213">Lien de navigation nav-4213</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="village-nav__item">
<button class="village-nav__btn" aria-expanded="false" aria-controls="collapse-4215">Entrée menu</button>
<div class="village-collapse village-menu" id="collapse-4215">
<ul class="village-menu__list">
<li>
<a class="village-nav__link" href="#" id="nav-4216">Lien de navigation nav-4216</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4217">Lien de navigation nav-4217</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4218">Lien de navigation nav-4218</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4219">Lien de navigation nav-4219</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4220">Lien de navigation nav-4220</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4221">Lien de navigation nav-4221</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4222">Lien de navigation nav-4222</a>
</li>
<li>
<a class="village-nav__link" href="#" id="nav-4223">Lien de navigation nav-4223</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
</header>