<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-399" id="button-400" title="Rechercher">
                                Rechercher
                            </button>
                            <button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-403" aria-haspopup="menu" id="button-404" 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-399">
                        <div class="fr-container fr-container-lg--fluid">
                            <button class="fr-link--close fr-link" aria-controls="modal-399">Fermer</button>
                            <div class="fr-search-bar" id="search-398" role="search">
                                <label class="fr-label" for="search-398-input">
                                    Rechercher
                                </label>
                                <input class="fr-input" placeholder="Rechercher" type="search" id="search-398-input" name="search-398-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-403" aria-labelledby="button-404">
        <div class="fr-container">
            <button class="fr-link--close fr-link" aria-controls="modal-403">Fermer</button>
            <div class="fr-header__menu-links">
            </div>
            <nav class="fr-nav" id="navigation-402" 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">
                                <button class="fr-link--close fr-link" aria-controls="mega-menu-407">Fermer</button>
                                <div class="fr-grid-row fr-grid-row-lg--gutters">
                                    <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">
                                <button class="fr-link--close fr-link" aria-controls="mega-menu-409">Fermer</button>
                                <div class="fr-grid-row fr-grid-row-lg--gutters">
                                    <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">
                                <button class="fr-link--close fr-link" aria-controls="mega-menu-410">Fermer</button>
                                <div class="fr-grid-row fr-grid-row-lg--gutters">
                                    <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-418" aria-haspopup="menu" id="button-419" title="Menu">
                                Menu
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="fr-header__menu fr-modal" id="modal-418" aria-labelledby="button-419">
        <div class="fr-container">
            <button class="fr-link--close fr-link" aria-controls="modal-418">Fermer</button>
            <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-433" aria-haspopup="menu" id="button-434" 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-433" aria-labelledby="button-434">
        <div class="fr-container">
            <button class="fr-link--close fr-link" aria-controls="modal-433">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-447" id="button-448" title="Rechercher">
                                Rechercher
                            </button>
                            <button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-451" aria-haspopup="menu" id="button-452" 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-447">
                        <div class="fr-container fr-container-lg--fluid">
                            <button class="fr-link--close fr-link" aria-controls="modal-447">Fermer</button>
                            <div class="fr-search-bar" id="search-446" role="search">
                                <label class="fr-label" for="search-446-input">
                                    Rechercher
                                </label>
                                <input class="fr-input" placeholder="Rechercher" type="search" id="search-446-input" name="search-446-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-451" aria-labelledby="button-452">
        <div class="fr-container">
            <button class="fr-link--close fr-link" aria-controls="modal-451">Fermer</button>
            <nav class="fr-nav" id="navigation-454" 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/../../../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-466" id="button-467" title="Rechercher">
                                Rechercher
                            </button>
                            <button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-470" aria-haspopup="menu" id="button-471" title="Menu">
                                Menu
                            </button>
                        </div>
                    </div>
                </div>
                <div class="fr-header__tools">
                    <div class="fr-header__search fr-modal" id="modal-466">
                        <div class="fr-container fr-container-lg--fluid">
                            <button class="fr-link--close fr-link" aria-controls="modal-466">Fermer</button>
                            <div class="fr-search-bar" id="search-465" role="search">
                                <label class="fr-label" for="search-465-input">
                                    Rechercher
                                </label>
                                <input class="fr-input" placeholder="Rechercher" type="search" id="search-465-input" name="search-465-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-470" aria-labelledby="button-471">
        <div class="fr-container">
            <button class="fr-link--close fr-link" aria-controls="modal-470">Fermer</button>
            <nav class="fr-nav" id="navigation-473" 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/../../../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-485" id="button-486" title="Rechercher">
                                Rechercher
                            </button>
                            <button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-489" aria-haspopup="menu" id="button-490" 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-485">
                        <div class="fr-container fr-container-lg--fluid">
                            <button class="fr-link--close fr-link" aria-controls="modal-485">Fermer</button>
                            <div class="fr-search-bar" id="search-484" role="search">
                                <label class="fr-label" for="search-484-input">
                                    Rechercher
                                </label>
                                <input class="fr-input" placeholder="Rechercher" type="search" id="search-484-input" name="search-484-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-489" aria-labelledby="button-490">
        <div class="fr-container">
            <button class="fr-link--close fr-link" aria-controls="modal-489">Fermer</button>
            <div class="fr-header__menu-links">
            </div>
            <nav class="fr-nav" id="navigation-492" 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-496" aria-haspopup="menu" id="button-497" 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-496" aria-labelledby="button-497">
        <div class="fr-container">
            <button class="fr-link--close fr-link" aria-controls="modal-496">Fermer</button>
            <div class="fr-header__menu-links">
            </div>
        </div>
    </div>
</header>