<div class="c-nav">
    <nav class="o-container o-container--large c-nav__container" aria-label="Navigation principale">
        <div class="c-nav__logo">
            <div class="c-logo-header">
                <div class="c-logo-header__logo">
                    <img class="c-logo-vd" src="../../assets/vectors/logo.svg" />

                </div>
                <div class="c-logo-header__text">

                    Tribunal des baux

                </div>
            </div>

        </div>

        <!-- Menu icon -->
        <button class="c-nav__toggle" aria-label="Ouvrir le menu" aria-expanded="false">
            <span class="c-menu-icon c-menu-icon--cross">
                <span></span>
            </span>
        </button>

        <!-- Nav container -->
        <div class="c-nav__list-container">

            <!-- Nav alternative actions (search) -->
            <div class="c-nav__alt-actions">
                <a href="#nowhere" class="c-nav__button-search"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                        <circle cx="8" cy="8" r="7" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M19 19l-6-6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                    <span class="u-display-xl-none">Rechercher</span></a>
            </div>

            <!-- Nav Level indicator -->
            <ul class="c-nav__level-indicator" aria-hidden="true">
            </ul>

            <!-- Nav list wrapper -->
            <div class="c-nav__list-wrapper">

                <!-- Level 0 -->
                <ul class="c-nav__list" aria-label="Arborescence des pages">

                    <li class="c-nav__list-item c-nav__list-item-project" data-level="0">
                        <button class="c-nav__list-link c-nav__list-link--w-children" aria-haspopup="true" aria-expanded="false">
                            Projets
                        </button>
                        <ul class="c-nav__list c-nav__list--level c-nav__list--level-1 c-nav_list--level-project">
                            <li class="c-nav__list-item" data-level="1">
                                <div class="c-slider-js-nav">
                                    <div class="c-slider-js-nav-container">
                                        <div class="c-slider-js-nav__container-left">
                                            <h2 class="c-slider-js-nav__heading">Projets</h2>
                                            <div class="c-slider-js-nav__sidebar" aria-hidden="true">
                                                <ul class="c-slider-js-nav__sidebar-list">

                                                    <li class="c-slider-js-nav__sidebar-list-item">
                                                        <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Provident sed qui quaerat vel iste.</a>
                                                    </li>

                                                    <li class="c-slider-js-nav__sidebar-list-item">
                                                        <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Minima voluptate ex enim.</a>
                                                    </li>

                                                    <li class="c-slider-js-nav__sidebar-list-item">
                                                        <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Et odit non est autem nihil itaque sint facere at.</a>
                                                    </li>

                                                    <li class="c-slider-js-nav__sidebar-list-item">
                                                        <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Blanditiis incidunt quas autem sit.</a>
                                                    </li>

                                                    <li class="c-slider-js-nav__sidebar-list-item">
                                                        <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Nostrum perspiciatis rem in sit mollitia qui sit necessitatibus nulla.</a>
                                                    </li>

                                                    <li class="c-slider-js-nav__sidebar-list-item">
                                                        <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Aut quas ducimus ipsum tempora dolores.</a>
                                                    </li>

                                                    <li class="c-slider-js-nav__sidebar-list-item">
                                                        <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Veritatis rerum enim dicta est dicta assumenda incidunt et.</a>
                                                    </li>

                                                    <li class="c-slider-js-nav__sidebar-list-item">
                                                        <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Vero tempore nihil est qui.</a>
                                                    </li>

                                                    <li class="c-slider-js-nav__sidebar-list-item">
                                                        <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Est est non saepe sed ratione itaque atque recusandae ut.</a>
                                                    </li>

                                                    <li class="c-slider-js-nav__sidebar-list-item">
                                                        <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Temporibus doloremque ut ducimus.</a>
                                                    </li>

                                                    <li class="c-slider-js-nav__sidebar-list-item">
                                                        <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Quam reprehenderit dolorum cum assumenda esse quo sit.</a>
                                                    </li>

                                                    <li class="c-slider-js-nav__sidebar-list-item">
                                                        <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Explicabo velit occaecati eaque dolore omnis ducimus sint libero dolores.</a>
                                                    </li>

                                                    <li class="c-slider-js-nav__sidebar-list-item">
                                                        <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Amet asperiores eum nihil impedit optio doloremque nemo aut ut.</a>
                                                    </li>

                                                    <li class="c-slider-js-nav__sidebar-list-item">
                                                        <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Voluptas adipisci mollitia ipsum et.</a>
                                                    </li>

                                                    <li class="c-slider-js-nav__sidebar-list-item">
                                                        <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Earum facilis facere aut necessitatibus recusandae quam.</a>
                                                    </li>

                                                    <li class="c-slider-js-nav__sidebar-list-item">
                                                        <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Autem atque voluptas sit enim et.</a>
                                                    </li>

                                                    <li class="c-slider-js-nav__sidebar-list-item">
                                                        <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Et enim voluptatem et veritatis dolores dolores.</a>
                                                    </li>

                                                    <li class="c-slider-js-nav__sidebar-list-item">
                                                        <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Consequatur animi est molestias quisquam inventore dolorum.</a>
                                                    </li>

                                                    <li class="c-slider-js-nav__sidebar-list-item">
                                                        <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Maxime et consequatur magnam minima harum eligendi soluta est.</a>
                                                    </li>

                                                    <li class="c-slider-js-nav__sidebar-list-item">
                                                        <a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Sunt fuga quod quis dicta quia atque harum et.</a>
                                                    </li>

                                                </ul>
                                            </div>
                                        </div>
                                        <div class="c-slider-js-nav__container-right">
                                            <div class="c-slider-js-nav-carousel">

                                                <article class="o-card-link c-slider-js-nav__article carousel-cell">
                                                    <figure class="c-slider-js-nav__article-figure">
                                                        <img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x371?Mauritania" alt="ipsam modi enim" />
                                                    </figure>
                                                    <div class="c-slider-js-nav__article-text-container">
                                                        <div class="c-slider-js-nav__article-date">
                                                            <span class="u-visually-hidden">Date:</span>22 avril 2023
                                                        </div>
                                                        <h3 class="c-slider-js-nav__article-heading">Provident sed qui quaerat vel iste.</h3>
                                                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Provident sed qui quaerat vel iste.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                                            </svg>
                                                        </a>

                                                    </div>
                                                </article>

                                                <article class="o-card-link c-slider-js-nav__article carousel-cell">
                                                    <figure class="c-slider-js-nav__article-figure">
                                                        <img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x333?frictionless" alt="qui id laudantium" />
                                                    </figure>
                                                    <div class="c-slider-js-nav__article-text-container">
                                                        <div class="c-slider-js-nav__article-date">
                                                            <span class="u-visually-hidden">Date:</span>21 août 2023
                                                        </div>
                                                        <h3 class="c-slider-js-nav__article-heading">Minima voluptate ex enim.</h3>
                                                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Minima voluptate ex enim.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                                            </svg>
                                                        </a>

                                                    </div>
                                                </article>

                                                <article class="o-card-link c-slider-js-nav__article carousel-cell">
                                                    <figure class="c-slider-js-nav__article-figure">
                                                        <img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x333?reboot" alt="architecto ut placeat" />
                                                    </figure>
                                                    <div class="c-slider-js-nav__article-text-container">
                                                        <div class="c-slider-js-nav__article-date">
                                                            <span class="u-visually-hidden">Date:</span>14 septembre 2023
                                                        </div>
                                                        <h3 class="c-slider-js-nav__article-heading">Et odit non est autem nihil itaque sint facere at.</h3>
                                                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Et odit non est autem nihil itaque sint facere at.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                                            </svg>
                                                        </a>

                                                    </div>
                                                </article>

                                                <article class="o-card-link c-slider-js-nav__article carousel-cell">
                                                    <figure class="c-slider-js-nav__article-figure">
                                                        <img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x295?Hollow" alt="qui fugiat culpa" />
                                                    </figure>
                                                    <div class="c-slider-js-nav__article-text-container">
                                                        <div class="c-slider-js-nav__article-date">
                                                            <span class="u-visually-hidden">Date:</span>5 novembre 2023
                                                        </div>
                                                        <h3 class="c-slider-js-nav__article-heading">Blanditiis incidunt quas autem sit.</h3>
                                                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Blanditiis incidunt quas autem sit.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                                            </svg>
                                                        </a>

                                                    </div>
                                                </article>

                                                <article class="o-card-link c-slider-js-nav__article carousel-cell">
                                                    <figure class="c-slider-js-nav__article-figure">
                                                        <img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x371?Sleek" alt="hic deleniti aspernatur" />
                                                    </figure>
                                                    <div class="c-slider-js-nav__article-text-container">
                                                        <div class="c-slider-js-nav__article-date">
                                                            <span class="u-visually-hidden">Date:</span>6 juin 2023
                                                        </div>
                                                        <h3 class="c-slider-js-nav__article-heading">Nostrum perspiciatis rem in sit mollitia qui sit necessitatibus nulla.</h3>
                                                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Nostrum perspiciatis rem in sit mollitia qui sit necessitatibus nulla.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                                            </svg>
                                                        </a>

                                                    </div>
                                                </article>

                                                <article class="o-card-link c-slider-js-nav__article carousel-cell">
                                                    <figure class="c-slider-js-nav__article-figure">
                                                        <img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x295?Fantastic" alt="facilis harum est" />
                                                    </figure>
                                                    <div class="c-slider-js-nav__article-text-container">
                                                        <div class="c-slider-js-nav__article-date">
                                                            <span class="u-visually-hidden">Date:</span>2 mai 2023
                                                        </div>
                                                        <h3 class="c-slider-js-nav__article-heading">Aut quas ducimus ipsum tempora dolores.</h3>
                                                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Aut quas ducimus ipsum tempora dolores.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                                            </svg>
                                                        </a>

                                                    </div>
                                                </article>

                                                <article class="o-card-link c-slider-js-nav__article carousel-cell">
                                                    <figure class="c-slider-js-nav__article-figure">
                                                        <img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x295?auxiliary" alt="non necessitatibus possimus" />
                                                    </figure>
                                                    <div class="c-slider-js-nav__article-text-container">
                                                        <div class="c-slider-js-nav__article-date">
                                                            <span class="u-visually-hidden">Date:</span>5 août 2023
                                                        </div>
                                                        <h3 class="c-slider-js-nav__article-heading">Veritatis rerum enim dicta est dicta assumenda incidunt et.</h3>
                                                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Veritatis rerum enim dicta est dicta assumenda incidunt et.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                                            </svg>
                                                        </a>

                                                    </div>
                                                </article>

                                                <article class="o-card-link c-slider-js-nav__article carousel-cell">
                                                    <figure class="c-slider-js-nav__article-figure">
                                                        <img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x295?core" alt="assumenda quae consequatur" />
                                                    </figure>
                                                    <div class="c-slider-js-nav__article-text-container">
                                                        <div class="c-slider-js-nav__article-date">
                                                            <span class="u-visually-hidden">Date:</span>1 avril 2023
                                                        </div>
                                                        <h3 class="c-slider-js-nav__article-heading">Vero tempore nihil est qui.</h3>
                                                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Vero tempore nihil est qui.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                                            </svg>
                                                        </a>

                                                    </div>
                                                </article>

                                                <article class="o-card-link c-slider-js-nav__article carousel-cell">
                                                    <figure class="c-slider-js-nav__article-figure">
                                                        <img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x295?infrastructure" alt="nihil illum dicta" />
                                                    </figure>
                                                    <div class="c-slider-js-nav__article-text-container">
                                                        <div class="c-slider-js-nav__article-date">
                                                            <span class="u-visually-hidden">Date:</span>7 septembre 2023
                                                        </div>
                                                        <h3 class="c-slider-js-nav__article-heading">Est est non saepe sed ratione itaque atque recusandae ut.</h3>
                                                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Est est non saepe sed ratione itaque atque recusandae ut.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                                            </svg>
                                                        </a>

                                                    </div>
                                                </article>

                                                <article class="o-card-link c-slider-js-nav__article carousel-cell">
                                                    <figure class="c-slider-js-nav__article-figure">
                                                        <img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x295?markets" alt="beatae sit quisquam" />
                                                    </figure>
                                                    <div class="c-slider-js-nav__article-text-container">
                                                        <div class="c-slider-js-nav__article-date">
                                                            <span class="u-visually-hidden">Date:</span>13 février 2023
                                                        </div>
                                                        <h3 class="c-slider-js-nav__article-heading">Temporibus doloremque ut ducimus.</h3>
                                                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Temporibus doloremque ut ducimus.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                                            </svg>
                                                        </a>

                                                    </div>
                                                </article>

                                                <article class="o-card-link c-slider-js-nav__article carousel-cell">
                                                    <figure class="c-slider-js-nav__article-figure">
                                                        <img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x295?compressing" alt="voluptatem aut et" />
                                                    </figure>
                                                    <div class="c-slider-js-nav__article-text-container">
                                                        <div class="c-slider-js-nav__article-date">
                                                            <span class="u-visually-hidden">Date:</span>10 juillet 2023
                                                        </div>
                                                        <h3 class="c-slider-js-nav__article-heading">Quam reprehenderit dolorum cum assumenda esse quo sit.</h3>
                                                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Quam reprehenderit dolorum cum assumenda esse quo sit.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                                            </svg>
                                                        </a>

                                                    </div>
                                                </article>

                                                <article class="o-card-link c-slider-js-nav__article carousel-cell">
                                                    <figure class="c-slider-js-nav__article-figure">
                                                        <img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x333?Coordinator" alt="dolor illo officia" />
                                                    </figure>
                                                    <div class="c-slider-js-nav__article-text-container">
                                                        <div class="c-slider-js-nav__article-date">
                                                            <span class="u-visually-hidden">Date:</span>5 décembre 2022
                                                        </div>
                                                        <h3 class="c-slider-js-nav__article-heading">Explicabo velit occaecati eaque dolore omnis ducimus sint libero dolores.</h3>
                                                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Explicabo velit occaecati eaque dolore omnis ducimus sint libero dolores.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                                            </svg>
                                                        </a>

                                                    </div>
                                                </article>

                                                <article class="o-card-link c-slider-js-nav__article carousel-cell">
                                                    <figure class="c-slider-js-nav__article-figure">
                                                        <img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x371?transmitting" alt="rerum numquam cumque" />
                                                    </figure>
                                                    <div class="c-slider-js-nav__article-text-container">
                                                        <div class="c-slider-js-nav__article-date">
                                                            <span class="u-visually-hidden">Date:</span>28 janvier 2023
                                                        </div>
                                                        <h3 class="c-slider-js-nav__article-heading">Amet asperiores eum nihil impedit optio doloremque nemo aut ut.</h3>
                                                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Amet asperiores eum nihil impedit optio doloremque nemo aut ut.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                                            </svg>
                                                        </a>

                                                    </div>
                                                </article>

                                                <article class="o-card-link c-slider-js-nav__article carousel-cell">
                                                    <figure class="c-slider-js-nav__article-figure">
                                                        <img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x333?FTP" alt="vitae voluptatem aut" />
                                                    </figure>
                                                    <div class="c-slider-js-nav__article-text-container">
                                                        <div class="c-slider-js-nav__article-date">
                                                            <span class="u-visually-hidden">Date:</span>2 novembre 2023
                                                        </div>
                                                        <h3 class="c-slider-js-nav__article-heading">Voluptas adipisci mollitia ipsum et.</h3>
                                                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Voluptas adipisci mollitia ipsum et.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                                            </svg>
                                                        </a>

                                                    </div>
                                                </article>

                                                <article class="o-card-link c-slider-js-nav__article carousel-cell">
                                                    <figure class="c-slider-js-nav__article-figure">
                                                        <img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x333?Mobility" alt="nostrum ut voluptas" />
                                                    </figure>
                                                    <div class="c-slider-js-nav__article-text-container">
                                                        <div class="c-slider-js-nav__article-date">
                                                            <span class="u-visually-hidden">Date:</span>4 novembre 2023
                                                        </div>
                                                        <h3 class="c-slider-js-nav__article-heading">Earum facilis facere aut necessitatibus recusandae quam.</h3>
                                                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Earum facilis facere aut necessitatibus recusandae quam.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                                            </svg>
                                                        </a>

                                                    </div>
                                                </article>

                                                <article class="o-card-link c-slider-js-nav__article carousel-cell">
                                                    <figure class="c-slider-js-nav__article-figure">
                                                        <img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x333?panel" alt="quisquam aut recusandae" />
                                                    </figure>
                                                    <div class="c-slider-js-nav__article-text-container">
                                                        <div class="c-slider-js-nav__article-date">
                                                            <span class="u-visually-hidden">Date:</span>24 avril 2023
                                                        </div>
                                                        <h3 class="c-slider-js-nav__article-heading">Autem atque voluptas sit enim et.</h3>
                                                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Autem atque voluptas sit enim et.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                                            </svg>
                                                        </a>

                                                    </div>
                                                </article>

                                                <article class="o-card-link c-slider-js-nav__article carousel-cell">
                                                    <figure class="c-slider-js-nav__article-figure">
                                                        <img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x371?overriding" alt="ipsa aut incidunt" />
                                                    </figure>
                                                    <div class="c-slider-js-nav__article-text-container">
                                                        <div class="c-slider-js-nav__article-date">
                                                            <span class="u-visually-hidden">Date:</span>21 mai 2023
                                                        </div>
                                                        <h3 class="c-slider-js-nav__article-heading">Et enim voluptatem et veritatis dolores dolores.</h3>
                                                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Et enim voluptatem et veritatis dolores dolores.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                                            </svg>
                                                        </a>

                                                    </div>
                                                </article>

                                                <article class="o-card-link c-slider-js-nav__article carousel-cell">
                                                    <figure class="c-slider-js-nav__article-figure">
                                                        <img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x295?Interface" alt="corrupti aut distinctio" />
                                                    </figure>
                                                    <div class="c-slider-js-nav__article-text-container">
                                                        <div class="c-slider-js-nav__article-date">
                                                            <span class="u-visually-hidden">Date:</span>22 mars 2023
                                                        </div>
                                                        <h3 class="c-slider-js-nav__article-heading">Consequatur animi est molestias quisquam inventore dolorum.</h3>
                                                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Consequatur animi est molestias quisquam inventore dolorum.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                                            </svg>
                                                        </a>

                                                    </div>
                                                </article>

                                                <article class="o-card-link c-slider-js-nav__article carousel-cell">
                                                    <figure class="c-slider-js-nav__article-figure">
                                                        <img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x295?Baht" alt="sit rerum et" />
                                                    </figure>
                                                    <div class="c-slider-js-nav__article-text-container">
                                                        <div class="c-slider-js-nav__article-date">
                                                            <span class="u-visually-hidden">Date:</span>17 octobre 2023
                                                        </div>
                                                        <h3 class="c-slider-js-nav__article-heading">Maxime et consequatur magnam minima harum eligendi soluta est.</h3>
                                                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Maxime et consequatur magnam minima harum eligendi soluta est.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                                            </svg>
                                                        </a>

                                                    </div>
                                                </article>

                                                <article class="o-card-link c-slider-js-nav__article carousel-cell">
                                                    <figure class="c-slider-js-nav__article-figure">
                                                        <img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x295?Principal" alt="iste distinctio excepturi" />
                                                    </figure>
                                                    <div class="c-slider-js-nav__article-text-container">
                                                        <div class="c-slider-js-nav__article-date">
                                                            <span class="u-visually-hidden">Date:</span>31 janvier 2023
                                                        </div>
                                                        <h3 class="c-slider-js-nav__article-heading">Sunt fuga quod quis dicta quia atque harum et.</h3>
                                                        <a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Sunt fuga quod quis dicta quia atque harum et.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                                            </svg>
                                                        </a>

                                                    </div>
                                                </article>

                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </li>
                        </ul>
                    </li>

                    <li class="c-nav__list-item" data-level="0">

                        <button class="c-nav__list-link c-nav__list-link--w-children c-nav__list-link--level-0" aria-haspopup="true" aria-expanded="false">
                            Somaire
                        </button>

                        <!-- Level 1 -->
                        <ul class="c-nav__list c-nav__list--level c-nav__list--level-1 masonry">

                            <li class="c-nav__list-item masonry-item" data-level="1">

                                <button class="c-nav__list-link c-nav__list-link--w-children u-display-xl-none" aria-haspopup="true" aria-expanded="false">
                                    Organigrame
                                </button>
                                <span class="c-nav__list-link c-nav__list-link--level-1 c-nav__list-link--w-children u-display-none u-display-xl-block">
                                    Organigrame
                                </span>

                                <!-- Level 2 -->
                                <ul class="c-nav__list c-nav__list--level c-nav__list--level-2">

                                    <li class="c-nav__list-item" data-level="2">

                                        <a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-2">

                                            Facebook live
                                        </a>
                                    </li>

                                    <li class="c-nav__list-item" data-level="2">

                                        <a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-2">

                                            Paléo Festival
                                        </a>
                                    </li>

                                    <li class="c-nav__list-item" data-level="2">

                                        <a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-2">

                                            Visite du président indien
                                        </a>
                                    </li>

                                    <li class="c-nav__list-item" data-level="2">

                                        <a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-2 c-nav__list-link--current" aria-current="page">

                                            Attaques fourgons blindés
                                        </a>
                                    </li>

                                    <li class="c-nav__list-item" data-level="2">

                                        <a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-2">

                                            100ème anniversaire de la Fédération vaudoise des jeunesses campagnardes
                                        </a>
                                    </li>

                                    <li class="c-nav__list-item" data-level="2">

                                        <a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-2">

                                            Fermeture de l&#39;autoroute A12
                                        </a>
                                    </li>

                                    <li class="c-nav__list-item" data-level="2">

                                        <a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-2">

                                            Bol d&#39;Or
                                        </a>
                                    </li>

                                    <li class="c-nav__list-item" data-level="2">

                                        <a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-2">

                                            Inauguration CIO
                                        </a>
                                    </li>

                                </ul><!-- /Level 2 -->

                            </li>

                            <li class="c-nav__list-item masonry-item" data-level="1">

                                <button class="c-nav__list-link c-nav__list-link--w-children u-display-xl-none" aria-haspopup="true" aria-expanded="false">
                                    La police en chiffres
                                </button>
                                <span class="c-nav__list-link c-nav__list-link--level-1 c-nav__list-link--w-children u-display-none u-display-xl-block">
                                    La police en chiffres
                                </span>

                                <!-- Level 2 -->
                                <ul class="c-nav__list c-nav__list--level c-nav__list--level-2">

                                    <li class="c-nav__list-item" data-level="2">

                                        <a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-2">

                                            Communication tactique
                                        </a>
                                    </li>

                                    <li class="c-nav__list-item" data-level="2">

                                        <a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-2">

                                            Bilderberg
                                        </a>
                                    </li>

                                </ul><!-- /Level 2 -->

                            </li>

                            <li class="c-nav__list-item masonry-item" data-level="1">

                                <a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-1">
                                    Finances
                                </a>

                            </li>

                            <li class="c-nav__list-item masonry-item" data-level="1">

                                <button class="c-nav__list-link c-nav__list-link--w-children u-display-xl-none" aria-haspopup="true" aria-expanded="false">
                                    Objectifs 2020
                                </button>
                                <span class="c-nav__list-link c-nav__list-link--level-1 c-nav__list-link--w-children u-display-none u-display-xl-block">
                                    Objectifs 2020
                                </span>

                                <!-- Level 2 -->
                                <ul class="c-nav__list c-nav__list--level c-nav__list--level-2">

                                    <li class="c-nav__list-item" data-level="2">

                                        <a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-2">

                                            Montreux Jazz Festival
                                        </a>
                                    </li>

                                    <li class="c-nav__list-item" data-level="2">

                                        <a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-2">

                                            Fête des Vignerons
                                        </a>
                                    </li>

                                </ul><!-- /Level 2 -->

                            </li>

                            <li class="c-nav__list-item masonry-item" data-level="1">

                                <button class="c-nav__list-link c-nav__list-link--w-children u-display-xl-none" aria-haspopup="true" aria-expanded="false">
                                    Valorisation des colabirateurs
                                </button>
                                <span class="c-nav__list-link c-nav__list-link--level-1 c-nav__list-link--w-children u-display-none u-display-xl-block">
                                    Valorisation des colabirateurs
                                </span>

                                <!-- Level 2 -->
                                <ul class="c-nav__list c-nav__list--level c-nav__list--level-2">

                                    <li class="c-nav__list-item" data-level="2">

                                        <a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-2">

                                            Cérémonie du souvenir
                                        </a>
                                    </li>

                                    <li class="c-nav__list-item" data-level="2">

                                        <a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-2">

                                            Escrocrie à la caisse de chômage
                                        </a>
                                    </li>

                                </ul><!-- /Level 2 -->

                            </li>

                            <li class="c-nav__list-item masonry-item" data-level="1">

                                <a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-1">
                                    Témoignages
                                </a>

                            </li>

                        </ul><!-- /Level 1 -->

                    </li>

                    <li class="c-nav__list-item" data-level="0">

                        <a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-0">
                            Remerciement
                        </a>

                    </li>

                    <li class="c-nav__list-item" data-level="0">

                        <button class="c-nav__list-link c-nav__list-link--w-children c-nav__list-link--level-0" aria-haspopup="true" aria-expanded="false">
                            Où sommes-nous ?
                        </button>

                        <!-- Level 1 -->
                        <ul class="c-nav__list c-nav__list--level c-nav__list--level-1 masonry">

                            <li class="c-nav__list-item masonry-item" data-level="1">

                                <a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-1">
                                    Menu 4.1
                                </a>

                            </li>

                            <li class="c-nav__list-item masonry-item" data-level="1">

                                <a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-1">
                                    Menu 4.2
                                </a>

                            </li>

                            <li class="c-nav__list-item masonry-item" data-level="1">

                                <a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-1">
                                    Menu 4.3
                                </a>

                            </li>

                            <li class="c-nav__list-item masonry-item" data-level="1">

                                <a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-1">
                                    Menu 4.4
                                </a>

                            </li>

                            <li class="c-nav__list-item masonry-item" data-level="1">

                                <a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-1">
                                    Menu 4.5
                                </a>

                            </li>

                            <li class="c-nav__list-item masonry-item" data-level="1">

                                <a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-1">
                                    Menu 4.6
                                </a>

                            </li>

                            <li class="c-nav__list-item masonry-item" data-level="1">

                                <a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-1">
                                    Menu 4.7
                                </a>

                            </li>

                            <li class="c-nav__list-item masonry-item" data-level="1">

                                <a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-1">
                                    Menu 4.8
                                </a>

                            </li>

                            <li class="c-nav__list-item masonry-item" data-level="1">

                                <a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-1">
                                    Menu 4.9
                                </a>

                            </li>

                        </ul><!-- /Level 1 -->

                    </li>

                    <li class="c-nav__list-item" data-level="0">

                        <button class="c-nav__list-link c-nav__list-link--w-children c-nav__list-link--level-0" aria-haspopup="true" aria-expanded="false">
                            Menu 5 est passablement très très long
                        </button>

                        <!-- Level 1 -->
                        <ul class="c-nav__list c-nav__list--level c-nav__list--level-1 masonry">

                            <li class="c-nav__list-item masonry-item" data-level="1">

                                <a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-1">
                                    Menu 5.1 très très très très très très très très très très très très long
                                </a>

                            </li>

                            <li class="c-nav__list-item masonry-item" data-level="1">

                                <a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-1">
                                    Menu 5.2
                                </a>

                            </li>

                            <li class="c-nav__list-item masonry-item" data-level="1">

                                <a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-1">
                                    Menu 5.3
                                </a>

                            </li>

                        </ul><!-- /Level 1 -->

                    </li>

                </ul><!-- /Level 0 -->
            </div>
        </div>
    </nav>
</div>

<div class="c-page__content o-stack o-stack--big u-bg--gradient">

    <main class="c-page__main o-stack">

        <h1 class="u-visually-hidden">Titre de la page</h1>

        <div class="o-container">
            <form class="c-search-input u-mt--big" action="#">
                <div class="c-search-input__row">
                    <label for="search" class="u-visually-hidden">Recherche</label>
                    <input id="search" class="c-search-input__field" type="search">
                </div>

                <button type="submit" class="c-search-input__button">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                        <circle cx="8" cy="8" r="7" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M19 19l-6-6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>

                </button>
            </form>
        </div>

        <div class="o-container o-stack o-stack--big c-result-list">
            <h2 class="c-search-result-list__heading">Résultats de la recherche</h2>

            <ol class="o-stack">

                <li>
                    <article class="c-search-result-item">
                        <h3 class="c-search-result-item__title"><a href="#nowhere">aut error illo</a></h3>
                        <div class="c-search-result-item__content">Nisi enim quo. Necessitatibus in quos cumque nisi. Ab alias quod et quo. Reprehenderit numquam tempora numquam magni eos alias pariatur odit vitae. Debitis aut nam dolores voluptatem voluptatibus.</div>
                        <footer class="c-search-result-item__breadcrumb">
                            <dl>
                                <dt class="u-visually-hidden">Emplacement</dt>
                                <dd>
                                    <ul class="c-search-result-item__breadcrumb-list">

                                        <li class="c-search-result-item__breadcrumb-item">page 1</li>

                                        <li class="c-search-result-item__breadcrumb-item">page 2</li>

                                        <li class="c-search-result-item__breadcrumb-item">page 3</li>

                                    </ul>
                                </dd>
                            </dl>
                        </footer>
                    </article>
                </li>

                <li>
                    <article class="c-search-result-item">
                        <h3 class="c-search-result-item__title"><a href="#nowhere">ex at ipsa</a></h3>
                        <div class="c-search-result-item__content">Recusandae nostrum dicta eaque. Ipsum quae delectus eum quo culpa. Debitis fugit est. Suscipit ea quam impedit. Ducimus illo aperiam perferendis non ut aut repudiandae. Id cupiditate aperiam alias.</div>
                        <footer class="c-search-result-item__breadcrumb">
                            <dl>
                                <dt class="u-visually-hidden">Emplacement</dt>
                                <dd>
                                    <ul class="c-search-result-item__breadcrumb-list">

                                        <li class="c-search-result-item__breadcrumb-item">page 1</li>

                                        <li class="c-search-result-item__breadcrumb-item">page 2</li>

                                        <li class="c-search-result-item__breadcrumb-item">page 3</li>

                                    </ul>
                                </dd>
                            </dl>
                        </footer>
                    </article>
                </li>

                <li>
                    <article class="c-search-result-item">
                        <h3 class="c-search-result-item__title"><a href="#nowhere">libero et sed</a></h3>
                        <div class="c-search-result-item__content">Libero incidunt eum fuga ut consequuntur rerum. Aut et quasi qui necessitatibus. Sit omnis eius quis numquam. Est omnis aut.</div>
                        <footer class="c-search-result-item__breadcrumb">
                            <dl>
                                <dt class="u-visually-hidden">Emplacement</dt>
                                <dd>
                                    <ul class="c-search-result-item__breadcrumb-list">

                                        <li class="c-search-result-item__breadcrumb-item">page 1</li>

                                        <li class="c-search-result-item__breadcrumb-item">page 2</li>

                                        <li class="c-search-result-item__breadcrumb-item">page 3</li>

                                    </ul>
                                </dd>
                            </dl>
                        </footer>
                    </article>
                </li>

                <li>
                    <article class="c-search-result-item">
                        <h3 class="c-search-result-item__title"><a href="#nowhere">qui dolorum eius</a></h3>
                        <div class="c-search-result-item__content">Doloremque vero recusandae. Molestias aliquid in quia iusto debitis voluptatum.</div>
                        <footer class="c-search-result-item__breadcrumb">
                            <dl>
                                <dt class="u-visually-hidden">Emplacement</dt>
                                <dd>
                                    <ul class="c-search-result-item__breadcrumb-list">

                                        <li class="c-search-result-item__breadcrumb-item">page 1</li>

                                        <li class="c-search-result-item__breadcrumb-item">page 2</li>

                                        <li class="c-search-result-item__breadcrumb-item">page 3</li>

                                    </ul>
                                </dd>
                            </dl>
                        </footer>
                    </article>
                </li>

                <li>
                    <article class="c-search-result-item">
                        <h3 class="c-search-result-item__title"><a href="#nowhere">a nostrum perferendis</a></h3>
                        <div class="c-search-result-item__content">Facere rerum dolorum. Non est deserunt et quis placeat non. Eum quidem minus ab. Minus cupiditate facere ullam a.</div>
                        <footer class="c-search-result-item__breadcrumb">
                            <dl>
                                <dt class="u-visually-hidden">Emplacement</dt>
                                <dd>
                                    <ul class="c-search-result-item__breadcrumb-list">

                                        <li class="c-search-result-item__breadcrumb-item">page 1</li>

                                        <li class="c-search-result-item__breadcrumb-item">page 2</li>

                                        <li class="c-search-result-item__breadcrumb-item">page 3</li>

                                    </ul>
                                </dd>
                            </dl>
                        </footer>
                    </article>
                </li>

                <li>
                    <article class="c-search-result-item">
                        <h3 class="c-search-result-item__title"><a href="#nowhere">corporis quae optio</a></h3>
                        <div class="c-search-result-item__content">Sint voluptatum ducimus. Tempora odit dolore. Perferendis consequuntur delectus consequatur.</div>
                        <footer class="c-search-result-item__breadcrumb">
                            <dl>
                                <dt class="u-visually-hidden">Emplacement</dt>
                                <dd>
                                    <ul class="c-search-result-item__breadcrumb-list">

                                        <li class="c-search-result-item__breadcrumb-item">page 1</li>

                                        <li class="c-search-result-item__breadcrumb-item">page 2</li>

                                        <li class="c-search-result-item__breadcrumb-item">page 3</li>

                                    </ul>
                                </dd>
                            </dl>
                        </footer>
                    </article>
                </li>

                <li>
                    <article class="c-search-result-item">
                        <h3 class="c-search-result-item__title"><a href="#nowhere">ut corrupti ipsa</a></h3>
                        <div class="c-search-result-item__content">Esse et ut sunt in ut sit repudiandae perspiciatis. Dolor sed aut vel autem ex. Inventore molestias quo corrupti nisi molestiae. Temporibus officia exercitationem quis quidem est sapiente. Dignissimos doloremque eligendi error voluptatem natus impedit est pariatur voluptates.</div>
                        <footer class="c-search-result-item__breadcrumb">
                            <dl>
                                <dt class="u-visually-hidden">Emplacement</dt>
                                <dd>
                                    <ul class="c-search-result-item__breadcrumb-list">

                                        <li class="c-search-result-item__breadcrumb-item">page 1</li>

                                        <li class="c-search-result-item__breadcrumb-item">page 2</li>

                                        <li class="c-search-result-item__breadcrumb-item">page 3</li>

                                    </ul>
                                </dd>
                            </dl>
                        </footer>
                    </article>
                </li>

                <li>
                    <article class="c-search-result-item">
                        <h3 class="c-search-result-item__title"><a href="#nowhere">ut ut nam</a></h3>
                        <div class="c-search-result-item__content">Velit cupiditate a est quis qui vel sapiente quia excepturi. Est explicabo laboriosam adipisci tempora. Facere reiciendis sunt maiores ea error cupiditate voluptates distinctio impedit. Non architecto quis. Aut perspiciatis unde necessitatibus.</div>
                        <footer class="c-search-result-item__breadcrumb">
                            <dl>
                                <dt class="u-visually-hidden">Emplacement</dt>
                                <dd>
                                    <ul class="c-search-result-item__breadcrumb-list">

                                        <li class="c-search-result-item__breadcrumb-item">page 1</li>

                                        <li class="c-search-result-item__breadcrumb-item">page 2</li>

                                        <li class="c-search-result-item__breadcrumb-item">page 3</li>

                                    </ul>
                                </dd>
                            </dl>
                        </footer>
                    </article>
                </li>

                <li>
                    <article class="c-search-result-item">
                        <h3 class="c-search-result-item__title"><a href="#nowhere">eos magni et</a></h3>
                        <div class="c-search-result-item__content">Pariatur debitis quos reprehenderit voluptates quo ipsum quisquam. Deserunt enim eum quisquam aliquid. Enim incidunt voluptatem odit dolorum fuga vel voluptate iusto. Voluptate molestias porro quia architecto. Vel id aut commodi eius ut et sit. Similique hic provident non beatae veritatis voluptatibus voluptatem fuga.</div>
                        <footer class="c-search-result-item__breadcrumb">
                            <dl>
                                <dt class="u-visually-hidden">Emplacement</dt>
                                <dd>
                                    <ul class="c-search-result-item__breadcrumb-list">

                                        <li class="c-search-result-item__breadcrumb-item">page 1</li>

                                        <li class="c-search-result-item__breadcrumb-item">page 2</li>

                                        <li class="c-search-result-item__breadcrumb-item">page 3</li>

                                    </ul>
                                </dd>
                            </dl>
                        </footer>
                    </article>
                </li>

                <li>
                    <article class="c-search-result-item">
                        <h3 class="c-search-result-item__title"><a href="#nowhere">et vitae vitae</a></h3>
                        <div class="c-search-result-item__content">Perferendis unde esse excepturi eum in non delectus doloribus iure. A iusto eius iste ab nisi sequi veniam delectus ipsam. Doloremque fuga omnis voluptatem sequi animi voluptas et. Modi autem et optio. Accusantium ipsam consequatur qui atque libero cumque. Et non et molestiae.</div>
                        <footer class="c-search-result-item__breadcrumb">
                            <dl>
                                <dt class="u-visually-hidden">Emplacement</dt>
                                <dd>
                                    <ul class="c-search-result-item__breadcrumb-list">

                                        <li class="c-search-result-item__breadcrumb-item">page 1</li>

                                        <li class="c-search-result-item__breadcrumb-item">page 2</li>

                                        <li class="c-search-result-item__breadcrumb-item">page 3</li>

                                    </ul>
                                </dd>
                            </dl>
                        </footer>
                    </article>
                </li>

            </ol>
        </div>

        <div class="o-container o-region c-pagination-pages">
            <nav aria-labelledby="pagination-title">
                <h2 id="pagination-title" class="u-visually-hidden">Pagination</h2>
                <ul class="c-pagination-pages__list" aria-label="Pagination">

                    <li class="c-pagination-pages__list-item">
                        <a href="#nowhere" class="c-pagination-pages__link" aria-label="Page précédente">
                            <span class="sr-only">Précédent</span>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                <path d="M7 1L1 7l6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>

                        </a>
                    </li>

                    <li class="c-pagination-pages__list-item">
                        <a href="#nowhere" class="c-pagination-pages__link" aria-label="Page 5">5</a>
                    </li>

                    <li class="c-pagination-pages__list-item">
                        <span class="c-pagination-pages__link" aria-label="Page 6" aria-current="page">6</span>
                    </li>

                    <li class="c-pagination-pages__list-item">
                        <a href="#nowhere" class="c-pagination-pages__link" aria-label="Page 7">7</a>
                    </li>

                    <li class="c-pagination-pages__list-item">
                        <a href="#nowhere" class="c-pagination-pages__link" aria-label="Page 8">8</a>
                    </li>

                    <li class="c-pagination-pages__list-item">
                        <a href="#nowhere" class="c-pagination-pages__link" aria-label="Page suivante">
                            <span class="sr-only">Suivant</span>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>

                        </a>
                    </li>

                </ul>
            </nav>
        </div>

    </main>

    <footer class="c-footer" aria-label="Pied de page" role="contentinfo">
        <div class="o-container o-container--large">
            <h2 class="u-visually-hidden">Pied de page</h2>

            <div class="c-footer__main">

                <div class="c-footer__page">
                    <h3 class="u-visually-hidden">Liens connexes</h3>
                    <nav aria-label="Navigation pied de page">
                        <ul class="c-footer__list-page">
                            <li><a href="#nowhere">Mentions légales</a></li>
                            <li><a href="#nowhere">Plan du site</a></li>
                            <li><a href="#nowhere">Contact</a></li>
                        </ul>
                    </nav>
                </div>

                <div class="c-footer__social">
                    <h3 class="u-visually-hidden md:u-not-visually-hidden">Partager</h3>
                    <nav aria-label="Navigation réseaux sociaux">
                        <ul class="c-footer__list-social">
                            <li><a href="#nowhere"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
                                        <path d="M12.5.5C5.9.5.5 5.9.5 12.5s5.4 12 12 12 12-5.4 12-12-5.4-12-12-12zm6 9.7v.4c0 4.5-3.6 8.2-8.1 8.2h-.1c-1.6 0-3.1-.5-4.4-1.3h.7c1.3 0 2.6-.4 3.6-1.2-1.2 0-2.3-.8-2.7-2 .2 0 .4.1.5.1.3 0 .5 0 .8-.1-1.3-.3-2.3-1.5-2.3-2.8.4.2.9.3 1.3.4-.8-.5-1.3-1.4-1.3-2.4 0-.5.1-1 .4-1.5 1.5 1.8 3.6 2.9 6 3-.1-.2-.1-.4-.1-.7 0-1.6 1.3-2.9 2.9-2.9.8 0 1.6.3 2.1.9.6-.1 1.3-.4 1.8-.7-.2.7-.7 1.2-1.3 1.6.6-.1 1.1-.2 1.7-.5-.4.6-.9 1.1-1.5 1.5z" />
                                    </svg>
                                </a></li>
                            <li><a href="#nowhere"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
                                        <path d="M24.5 12.6c0-6.7-5.4-12.1-12-12.1S.5 5.9.5 12.6c0 5.9 4.3 11 10.1 11.9v-8.4h-3v-3.5h3V9.9c0-3 1.8-4.7 4.5-4.7.9 0 1.8.1 2.7.2v3h-1.5c-.9-.1-1.8.5-1.9 1.5V12.6h3.3l-.5 3.5h-2.8v8.4c5.8-.9 10.1-6 10.1-11.9z" />
                                    </svg>
                                </a></li>
                            <li><a href="#nowhere"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                        <path d="M8.2 11.8L19 .9m0 0l-6.4 18c-.1.3-.4.4-.7.3l-.3-.3-3.4-7-6.9-3.6C1 8.2.9 7.9 1 7.6c.1-.1.1-.2.3-.3L19 .9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                    </svg>
                                </a></li>
                        </ul>
                    </nav>
                </div>

                <div class="c-footer__logo">
                    <h3 class="u-visually-hidden">Logo de l'entité</h3>
                    <img class="c-logo-entity" src="../../assets/images/logo-entity.png" alt="logo de l'entité" />

                </div>

            </div>
            <div class="c-footer__secondary">
                &copy; Name of the service - 2021
            </div>
        </div>
    </footer>

</div>
{% render '@navigation' %}
<div class="c-page__content o-stack o-stack--big u-bg--gradient">

  <main class="c-page__main o-stack">
    
    <h1 class="u-visually-hidden">Titre de la page</h1>
    
    {% render '@search-input',  { styleModifier: "u-mt--big" }, true %}
    
    {% render '@search-result-list' %}
    
    {% render '@pagination-pages' %}
    
  </main>
  
  {% render '@footer' %}

</div>
/* No context defined. */

No notes defined.