<header role="banner" class="fr-header">
    <div class="fr-header__body">
        <div class="fr-container">
            <div class="fr-header__body-row">
                <div class="fr-header__brand fr-enlarge-link">
                    <div class="fr-header__brand-top">
                        <div class="fr-header__logo">
                            <p class="fr-logo">
                                Intitulé
                                <br>officiel
                            </p>
                        </div>
                        <div class="fr-header__navbar">
                            <button class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="modal-400" id="button-401" title="Rechercher">
                                Rechercher
                            </button>
                            <button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-402" aria-haspopup="menu" id="button-403" title="Menu">
                                Menu
                            </button>
                        </div>
                    </div>
                    <div class="fr-header__service">
                        <a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - [À MODIFIER - nom de l’entité (ministère, secrétariat d‘état, gouvernement)]">
                            <p class="fr-header__service-title">Nom du site / service</p>
                        </a>
                        <p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
                    </div>
                </div>
                <div class="fr-header__tools">
                    <div class="fr-header__tools-links">
                        <ul class="fr-links-group">
                            <li>
                                <a class="fr-link fr-fi-add-circle-line" href="#">Créer un espace</a>
                            </li>
                            <li>
                                <a class="fr-link fr-fi-lock-line" href="#">Se connecter</a>
                            </li>
                            <li>
                                <a class="fr-link fr-fi-account-line" href="#">S’enregistrer</a>
                            </li>
                        </ul>
                    </div>
                    <div class="fr-header__search fr-modal" id="modal-400">
                        <div class="fr-container fr-container-lg--fluid">
                            <button class="fr-link--close fr-link" aria-controls="modal-400">Fermer</button>
                            <div class="fr-search-bar" id="search-399" role="search">
                                <label class="fr-label" for="search-399-input">
                                    Rechercher
                                </label>
                                <input class="fr-input" placeholder="Rechercher" type="search" id="search-399-input" name="search-399-input">
                                <button class="fr-btn" title="Rechercher">
                                    Rechercher
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="fr-header__menu fr-modal" id="modal-402" aria-labelledby="button-403">
        <div class="fr-container">
            <button class="fr-link--close fr-link" aria-controls="modal-402">Fermer</button>
            <div class="fr-header__menu-links">
            </div>
            <nav class="fr-nav" id="navigation-404" role="navigation" aria-label="Menu principal">
                <ul class="fr-nav__list">
                    <li class="fr-nav__item">
                        <button class="fr-nav__btn" aria-expanded="false" aria-controls="menu-406">Entrée menu</button>
                        <div class="fr-collapse fr-menu" id="menu-406">
                            <ul class="fr-menu__list">
                                <li>
                                    <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="fr-nav__item">
                        <button class="fr-nav__btn" aria-expanded="false" aria-controls="mega-menu-407">Entrée mega menu</button>
                        <div class="fr-collapse fr-mega-menu" id="mega-menu-407">
                            <div class="fr-container fr-container--fluid fr-container-lg">
                                <div class="fr-grid-row fr-grid-row-lg--gutters">
                                    <div class="fr-col-12 fr-mb-n3v">
                                        <button class="fr-link--close fr-link" aria-controls="mega-menu-407">Fermer</button>
                                    </div>
                                    <div class="fr-col-12 fr-col-lg-8 fr-col-offset-lg-4--right fr-mb-4v">
                                        <div class="fr-mega-menu__leader">
                                            <h4 class="fr-h4 fr-mb-2v">Titre éditorialisé</h4>
                                            <p class="fr-hidden fr-displayed-lg">Lorem [...] elit ut.</p>
                                            <a class="fr-link fr-fi-arrow-right-line fr-link--icon-right fr-link--align-on-content" href="#">Voir toute la rubrique</a>
                                        </div>
                                    </div>
                                    <div class="fr-col-12 fr-col-lg-3">
                                        <h5 class="fr-mega-menu__category">
                                            <a class="fr-nav__link" href="#" target="_self">Nom de catégorie</a>
                                        </h5>
                                        <ul class="fr-mega-menu__list">
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="fr-col-12 fr-col-lg-3">
                                        <h5 class="fr-mega-menu__category">
                                            <a class="fr-nav__link" href="#" target="_self">Nom de catégorie</a>
                                        </h5>
                                        <ul class="fr-mega-menu__list">
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="fr-col-12 fr-col-lg-3">
                                        <h5 class="fr-mega-menu__category">
                                            <a class="fr-nav__link" href="#" target="_self">Nom de catégorie</a>
                                        </h5>
                                        <ul class="fr-mega-menu__list">
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self" aria-current="page">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="fr-col-12 fr-col-lg-3">
                                        <h5 class="fr-mega-menu__category">
                                            <a class="fr-nav__link" href="#" target="_self">Nom de catégorie</a>
                                        </h5>
                                        <ul class="fr-mega-menu__list">
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="fr-nav__item">
                        <a class="fr-nav__link" href="#" target="_self">accès direct</a>
                    </li>
                    <li class="fr-nav__item">
                        <button class="fr-nav__btn" aria-expanded="false" aria-controls="menu-408" aria-current="true">Entrée menu active</button>
                        <div class="fr-collapse fr-menu" id="menu-408">
                            <ul class="fr-menu__list">
                                <li>
                                    <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" target="_self" aria-current="page">Lien de navigation</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="fr-nav__item">
                        <button class="fr-nav__btn" aria-expanded="false" aria-controls="mega-menu-409">Entrée mega menu</button>
                        <div class="fr-collapse fr-mega-menu" id="mega-menu-409">
                            <div class="fr-container fr-container--fluid fr-container-lg">
                                <div class="fr-grid-row fr-grid-row-lg--gutters">
                                    <div class="fr-col-12 fr-mb-n3v">
                                        <button class="fr-link--close fr-link" aria-controls="mega-menu-409">Fermer</button>
                                    </div>
                                    <div class="fr-col-12 fr-col-lg-8 fr-col-offset-lg-4--right fr-mb-4v">
                                        <div class="fr-mega-menu__leader">
                                            <h4 class="fr-h4 fr-mb-2v">Titre éditorialisé</h4>
                                            <p class="fr-hidden fr-displayed-lg">Lorem [...] elit ut.</p>
                                            <a class="fr-link fr-fi-arrow-right-line fr-link--icon-right fr-link--align-on-content" href="#">Voir toute la rubrique</a>
                                        </div>
                                    </div>
                                    <div class="fr-col-12 fr-col-lg-3">
                                        <h5 class="fr-mega-menu__category">
                                            <a class="fr-nav__link" href="#" target="_self">Nom de catégorie</a>
                                        </h5>
                                        <ul class="fr-mega-menu__list">
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="fr-col-12 fr-col-lg-3">
                                        <h5 class="fr-mega-menu__category">
                                            <a class="fr-nav__link" href="#" target="_self">Nom de catégorie</a>
                                        </h5>
                                        <ul class="fr-mega-menu__list">
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="fr-col-12 fr-col-lg-3">
                                        <h5 class="fr-mega-menu__category">
                                            <a class="fr-nav__link" href="#" target="_self">Nom de catégorie</a>
                                        </h5>
                                        <ul class="fr-mega-menu__list">
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self" aria-current="page">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="fr-col-12 fr-col-lg-3">
                                        <h5 class="fr-mega-menu__category">
                                            <a class="fr-nav__link" href="#" target="_self">Nom de catégorie</a>
                                        </h5>
                                        <ul class="fr-mega-menu__list">
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="fr-nav__item">
                        <a class="fr-nav__link" href="#" target="_self">accès direct</a>
                    </li>
                    <li class="fr-nav__item">
                        <button class="fr-nav__btn" aria-expanded="false" aria-controls="mega-menu-410">Entrée mega menu</button>
                        <div class="fr-collapse fr-mega-menu" id="mega-menu-410">
                            <div class="fr-container fr-container--fluid fr-container-lg">
                                <div class="fr-grid-row fr-grid-row-lg--gutters">
                                    <div class="fr-col-12 fr-mb-n3v">
                                        <button class="fr-link--close fr-link" aria-controls="mega-menu-410">Fermer</button>
                                    </div>
                                    <div class="fr-col-12 fr-col-lg-3">
                                        <h5 class="fr-mega-menu__category">
                                            <a class="fr-nav__link" href="#" target="_self">Nom de catégorie</a>
                                        </h5>
                                        <ul class="fr-mega-menu__list">
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="fr-col-12 fr-col-lg-3">
                                        <h5 class="fr-mega-menu__category">
                                            <a class="fr-nav__link" href="#" target="_self">Nom de catégorie</a>
                                        </h5>
                                        <ul class="fr-mega-menu__list">
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="fr-col-12 fr-col-lg-3">
                                        <h5 class="fr-mega-menu__category">
                                            <a class="fr-nav__link" href="#" target="_self" aria-current="true">Nom de catégorie</a>
                                        </h5>
                                        <ul class="fr-mega-menu__list">
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self" aria-current="page">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="fr-col-12 fr-col-lg-3">
                                        <h5 class="fr-mega-menu__category">
                                            <a class="fr-nav__link" href="#" target="_self">Nom de catégorie</a>
                                        </h5>
                                        <ul class="fr-mega-menu__list">
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                            <li>
                                                <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="fr-nav__item">
                        <button class="fr-nav__btn" aria-expanded="false" aria-controls="menu-411">Entrée menu</button>
                        <div class="fr-collapse fr-menu" id="menu-411">
                            <ul class="fr-menu__list">
                                <li>
                                    <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</header>

<header role="banner" class="fr-header">
    <div class="fr-header__body">
        <div class="fr-container">
            <div class="fr-header__body-row">
                <div class="fr-header__brand fr-enlarge-link">
                    <div class="fr-header__brand-top">
                        <div class="fr-header__logo">
                            <a href="/" title="Accueil - [À MODIFIER - nom de l’entité (ministère, secrétariat d‘état, gouvernement)]">
                                <p class="fr-logo">
                                    Intitulé
                                    <br>officiel
                                </p>
                            </a>
                        </div>
                        <div class="fr-header__navbar">
                            <button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-417" aria-haspopup="menu" id="button-418" title="Menu">
                                Menu
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="fr-header__menu fr-modal" id="modal-417" aria-labelledby="button-418">
        <div class="fr-container">
            <button class="fr-link--close fr-link" aria-controls="modal-417">Fermer</button>
            <div class="fr-header__menu-links">
            </div>
            <nav class="fr-nav" id="navigation-420" role="navigation" aria-label="Menu principal">
                <ul class="fr-nav__list">
                    <li class="fr-nav__item">
                        <a class="fr-nav__link" href="#" target="_self">accès direct</a>
                    </li>
                    <li class="fr-nav__item">
                        <a class="fr-nav__link" href="#" target="_self">accès direct</a>
                    </li>
                    <li class="fr-nav__item">
                        <a class="fr-nav__link" href="#" target="_self">accès direct</a>
                    </li>
                    <li class="fr-nav__item">
                        <a class="fr-nav__link" href="#" target="_self">accès direct</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</header>

<header role="banner" class="fr-header">
    <div class="fr-header__body">
        <div class="fr-container">
            <div class="fr-header__body-row">
                <div class="fr-header__brand fr-enlarge-link">
                    <div class="fr-header__brand-top">
                        <div class="fr-header__logo">
                            <p class="fr-logo">
                                Intitulé
                                <br>officiel
                            </p>
                        </div>
                    </div>
                    <div class="fr-header__service">
                        <a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - [À MODIFIER - nom de l’entité (ministère, secrétariat d‘état, gouvernement)]">
                            <p class="fr-header__service-title">Nom du site / service</p>
                        </a>
                        <p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

<header role="banner" class="fr-header">
    <div class="fr-header__body">
        <div class="fr-container">
            <div class="fr-header__body-row">
                <div class="fr-header__brand fr-enlarge-link">
                    <div class="fr-header__brand-top">
                        <div class="fr-header__logo">
                            <p class="fr-logo">
                                Intitulé
                                <br>officiel
                            </p>
                        </div>
                        <div class="fr-header__navbar">
                            <button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-425" aria-haspopup="menu" id="button-426" title="Menu">
                                Menu
                            </button>
                        </div>
                    </div>
                    <div class="fr-header__service">
                        <a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - [À MODIFIER - nom de l’entité (ministère, secrétariat d‘état, gouvernement)]">
                            <p class="fr-header__service-title">Nom du site / service</p>
                        </a>
                        <p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
                    </div>
                </div>
                <div class="fr-header__tools">
                    <div class="fr-header__tools-links">
                        <ul class="fr-links-group">
                            <li>
                                <a class="fr-link fr-fi-add-circle-line" href="#">Créer un espace</a>
                            </li>
                            <li>
                                <a class="fr-link fr-fi-lock-line" href="#">Se connecter</a>
                            </li>
                            <li>
                                <a class="fr-link fr-fi-account-line" href="#">S’enregistrer</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="fr-header__menu fr-modal" id="modal-425" aria-labelledby="button-426">
        <div class="fr-container">
            <button class="fr-link--close fr-link" aria-controls="modal-425">Fermer</button>
            <div class="fr-header__menu-links">
            </div>
        </div>
    </div>
</header>

<header role="banner" class="fr-header">
    <div class="fr-header__body">
        <div class="fr-container">
            <div class="fr-header__body-row">
                <div class="fr-header__brand fr-enlarge-link">
                    <div class="fr-header__brand-top">
                        <div class="fr-header__logo">
                            <p class="fr-logo">
                                Ministère
                                <br>de l’europe
                                <br>et des affaires
                                <br>étrangères
                            </p>
                        </div>
                        <div class="fr-header__navbar">
                            <button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-432" aria-haspopup="menu" id="button-433" title="Menu">
                                Menu
                            </button>
                        </div>
                    </div>
                    <div class="fr-header__service">
                        <a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - [À MODIFIER - nom de l’entité (ministère, secrétariat d‘état, gouvernement)]">
                            <p class="fr-header__service-title">Nom du site / service</p>
                        </a>
                        <p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
                    </div>
                </div>
                <div class="fr-header__tools">
                    <div class="fr-header__tools-links">
                        <ul class="fr-links-group">
                            <li>
                                <a class="fr-link fr-fi-add-circle-line" href="#">Créer un espace</a>
                            </li>
                            <li>
                                <a class="fr-link fr-fi-lock-line" href="#">Se connecter</a>
                            </li>
                            <li>
                                <a class="fr-link fr-fi-account-line" href="#">S’enregistrer</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="fr-header__menu fr-modal" id="modal-432" aria-labelledby="button-433">
        <div class="fr-container">
            <button class="fr-link--close fr-link" aria-controls="modal-432">Fermer</button>
            <div class="fr-header__menu-links">
            </div>
            <nav class="fr-nav" id="navigation-435" role="navigation" aria-label="Menu principal">
                <ul class="fr-nav__list">
                    <li class="fr-nav__item">
                        <a class="fr-nav__link" href="#" target="_self">accès direct</a>
                    </li>
                    <li class="fr-nav__item">
                        <a class="fr-nav__link" href="#" target="_self">accès direct</a>
                    </li>
                    <li class="fr-nav__item">
                        <a class="fr-nav__link" href="#" target="_self">accès direct</a>
                    </li>
                    <li class="fr-nav__item">
                        <a class="fr-nav__link" href="#" target="_self">accès direct</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</header>

<header role="banner" class="fr-header">
    <div class="fr-header__body">
        <div class="fr-container">
            <div class="fr-header__body-row">
                <div class="fr-header__brand fr-enlarge-link">
                    <div class="fr-header__brand-top">
                        <div class="fr-header__logo">
                            <p class="fr-logo">
                                Intitulé
                                <br>officiel
                            </p>
                        </div>
                        <div class="fr-header__navbar">
                            <button class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="modal-446" id="button-447" title="Rechercher">
                                Rechercher
                            </button>
                            <button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-448" aria-haspopup="menu" id="button-449" title="Menu">
                                Menu
                            </button>
                        </div>
                    </div>
                    <div class="fr-header__service">
                        <a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - [À MODIFIER - nom de l’entité (ministère, secrétariat d‘état, gouvernement)]">
                            <p class="fr-header__service-title">Nom du site / service</p>
                        </a>
                    </div>
                </div>
                <div class="fr-header__tools">
                    <div class="fr-header__search fr-modal" id="modal-446">
                        <div class="fr-container fr-container-lg--fluid">
                            <button class="fr-link--close fr-link" aria-controls="modal-446">Fermer</button>
                            <div class="fr-search-bar" id="search-445" role="search">
                                <label class="fr-label" for="search-445-input">
                                    Rechercher
                                </label>
                                <input class="fr-input" placeholder="Rechercher" type="search" id="search-445-input" name="search-445-input">
                                <button class="fr-btn" title="Rechercher">
                                    Rechercher
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="fr-header__menu fr-modal" id="modal-448" aria-labelledby="button-449">
        <div class="fr-container">
            <button class="fr-link--close fr-link" aria-controls="modal-448">Fermer</button>
            <div class="fr-header__menu-links">
            </div>
            <nav class="fr-nav" id="navigation-452" role="navigation" aria-label="Menu principal">
                <ul class="fr-nav__list">
                    <li class="fr-nav__item">
                        <a class="fr-nav__link" href="#" target="_self">accès direct</a>
                    </li>
                    <li class="fr-nav__item">
                        <a class="fr-nav__link" href="#" target="_self">accès direct</a>
                    </li>
                    <li class="fr-nav__item">
                        <a class="fr-nav__link" href="#" target="_self">accès direct</a>
                    </li>
                    <li class="fr-nav__item">
                        <a class="fr-nav__link" href="#" target="_self">accès direct</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</header>

<header role="banner" class="fr-header">
    <div class="fr-header__body">
        <div class="fr-container">
            <div class="fr-header__body-row">
                <div class="fr-header__brand fr-enlarge-link">
                    <div class="fr-header__brand-top">
                        <div class="fr-header__logo">
                            <p class="fr-logo">
                                République
                                <br>Française
                            </p>
                        </div>
                        <div class="fr-header__operator">
                            <a href="/" title="Accueil - [À MODIFIER - texte alternatif de l’image]">
                                <img class="fr-responsive-img" style="width:3.5rem;" src="../../../example/img/placeholder.9x16.png" alt="[À MODIFIER - texte alternatif de l’image]" />
                                <!-- L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans l’image -->
                            </a>
                        </div>
                        <div class="fr-header__navbar">
                            <button class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="modal-463" id="button-464" title="Rechercher">
                                Rechercher
                            </button>
                            <button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-465" aria-haspopup="menu" id="button-466" title="Menu">
                                Menu
                            </button>
                        </div>
                    </div>
                </div>
                <div class="fr-header__tools">
                    <div class="fr-header__search fr-modal" id="modal-463">
                        <div class="fr-container fr-container-lg--fluid">
                            <button class="fr-link--close fr-link" aria-controls="modal-463">Fermer</button>
                            <div class="fr-search-bar" id="search-462" role="search">
                                <label class="fr-label" for="search-462-input">
                                    Rechercher
                                </label>
                                <input class="fr-input" placeholder="Rechercher" type="search" id="search-462-input" name="search-462-input">
                                <button class="fr-btn" title="Rechercher">
                                    Rechercher
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="fr-header__menu fr-modal" id="modal-465" aria-labelledby="button-466">
        <div class="fr-container">
            <button class="fr-link--close fr-link" aria-controls="modal-465">Fermer</button>
            <div class="fr-header__menu-links">
            </div>
            <nav class="fr-nav" id="navigation-469" role="navigation" aria-label="Menu principal">
                <ul class="fr-nav__list">
                    <li class="fr-nav__item">
                        <a class="fr-nav__link" href="#" target="_self">accès direct</a>
                    </li>
                    <li class="fr-nav__item">
                        <a class="fr-nav__link" href="#" target="_self">accès direct</a>
                    </li>
                    <li class="fr-nav__item">
                        <a class="fr-nav__link" href="#" target="_self">accès direct</a>
                    </li>
                    <li class="fr-nav__item">
                        <a class="fr-nav__link" href="#" target="_self">accès direct</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</header>

<header role="banner" class="fr-header">
    <div class="fr-header__body">
        <div class="fr-container">
            <div class="fr-header__body-row">
                <div class="fr-header__brand fr-enlarge-link">
                    <div class="fr-header__brand-top">
                        <div class="fr-header__logo">
                            <p class="fr-logo">
                                République
                                <br>Française
                            </p>
                        </div>
                        <div class="fr-header__operator">
                            <img class="fr-responsive-img" style="max-width:9.0625rem;" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - texte alternatif de l’image]" />
                            <!-- L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans l’image -->
                        </div>
                        <div class="fr-header__navbar">
                            <button class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="modal-480" id="button-481" title="Rechercher">
                                Rechercher
                            </button>
                            <button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-482" aria-haspopup="menu" id="button-483" title="Menu">
                                Menu
                            </button>
                        </div>
                    </div>
                    <div class="fr-header__service">
                        <a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - [À MODIFIER - nom de l’entité (ministère, secrétariat d‘état, gouvernement)]">
                            <p class="fr-header__service-title">Nom du site / service</p>
                        </a>
                        <p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
                    </div>
                </div>
                <div class="fr-header__tools">
                    <div class="fr-header__tools-links">
                        <ul class="fr-links-group">
                            <li>
                                <a class="fr-link fr-fi-add-circle-line" href="#">Créer un espace</a>
                            </li>
                            <li>
                                <a class="fr-link fr-fi-lock-line" href="#">Se connecter</a>
                            </li>
                            <li>
                                <a class="fr-link fr-fi-account-line" href="#">S’enregistrer</a>
                            </li>
                        </ul>
                    </div>
                    <div class="fr-header__search fr-modal" id="modal-480">
                        <div class="fr-container fr-container-lg--fluid">
                            <button class="fr-link--close fr-link" aria-controls="modal-480">Fermer</button>
                            <div class="fr-search-bar" id="search-479" role="search">
                                <label class="fr-label" for="search-479-input">
                                    Rechercher
                                </label>
                                <input class="fr-input" placeholder="Rechercher" type="search" id="search-479-input" name="search-479-input">
                                <button class="fr-btn" title="Rechercher">
                                    Rechercher
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="fr-header__menu fr-modal" id="modal-482" aria-labelledby="button-483">
        <div class="fr-container">
            <button class="fr-link--close fr-link" aria-controls="modal-482">Fermer</button>
            <div class="fr-header__menu-links">
            </div>
            <nav class="fr-nav" id="navigation-486" role="navigation" aria-label="Menu principal">
                <ul class="fr-nav__list">
                    <li class="fr-nav__item">
                        <a class="fr-nav__link" href="#" target="_self">accès direct</a>
                    </li>
                    <li class="fr-nav__item">
                        <a class="fr-nav__link" href="#" target="_self">accès direct</a>
                    </li>
                    <li class="fr-nav__item">
                        <a class="fr-nav__link" href="#" target="_self">accès direct</a>
                    </li>
                    <li class="fr-nav__item">
                        <a class="fr-nav__link" href="#" target="_self">accès direct</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</header>

<header role="banner" class="fr-header">
    <div class="fr-header__body">
        <div class="fr-container">
            <div class="fr-header__body-row">
                <div class="fr-header__brand fr-enlarge-link">
                    <div class="fr-header__brand-top">
                        <div class="fr-header__logo">
                            <a href="/" title="Accueil - [À MODIFIER - nom de l’entité (ministère, secrétariat d‘état, gouvernement)]">
                                <p class="fr-logo">
                                    Intitulé
                                    <br>officiel
                                </p>
                            </a>
                        </div>
                        <div class="fr-header__navbar">
                            <button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-490" aria-haspopup="menu" id="button-491" title="Menu">
                                Menu
                            </button>
                        </div>
                    </div>
                </div>
                <div class="fr-header__tools">
                    <div class="fr-header__tools-links">
                        <ul class="fr-links-group">
                            <li>
                                <a class="fr-link fr-fi-add-circle-line" href="#">Créer un espace</a>
                            </li>
                            <li>
                                <a class="fr-link fr-fi-lock-line" href="#">Se connecter</a>
                            </li>
                            <li>
                                <a class="fr-link fr-fi-account-line" href="#">S’enregistrer</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="fr-header__menu fr-modal" id="modal-490" aria-labelledby="button-491">
        <div class="fr-container">
            <button class="fr-link--close fr-link" aria-controls="modal-490">Fermer</button>
            <div class="fr-header__menu-links">
                <ul class="fr-links-group">
                    <li>
                        <a class="fr-link fr-fi-add-circle-line" href="#">Créer un espace</a>
                    </li>
                    <li>
                        <a class="fr-link fr-fi-lock-line" href="#">Se connecter</a>
                    </li>
                    <li>
                        <a class="fr-link fr-fi-account-line" href="#">S’enregistrer</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</header>