<header class="header">
    <nav class="container fixed-top access-nav d-print-none" aria-label="menu accessibilité">
        <ul class="list-unstyled mt-3">
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="0" href="#" title="[Alt+0] Page d'accueil du site">Accueil</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="1" href="#nav-primary" title="[Alt+1] Menu de navigation de la page">Menu de navigation de la page</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="2" href="#main" title="[Alt+2] Debut du contenu de la page">Début du contenu de la page</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="3" href="#" title="[Alt+3] Page de contact">Page de contact</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="4" href="#" title="[Alt+4] Plan du site du Canton de Vaud">Plan du site</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="5" href="#search-form" title="[Alt+5] Accès au champ de recherche">Accès au champ de recherche</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="6" href="#" title="[Alt+6] Accès à l'index thématique">Thèmes</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="7" href="#" title="[Alt+7] Accès à la navigation par autorités">Autorités</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="8" href="#" title="[Alt+8] Page d'aide pour les personnes en situation de handicap">Page d'aide pour les personnes en situation de handicap</a>
            </li>
        </ul>
    </nav>

    <div class="container">
        <div class="d-flex flex-wrap justify-content-between justify-content-md-end d-print-none">
            <nav class="align-items-center d-flex d-print-none">
                <h2 class="sr-only">
                    Sous-navigation
                </h2>
                <ul class="list-inline text-md-end small">
                    <li class="list-inline-item me-2">
                        <a href="#">Autorités</a>
                    </li>
                    <li class="list-inline-item me-2">
                        <a href="#">Annuaire</a>
                    </li>
                </ul>
            </nav>

            <button id="login-button" type="button" class="btn btn-primary fs-6" data-bs-toggle="collapse" data-bs-target="#login-form-collapse" aria-expanded="false" aria-controls="login-form-collapse">
                Se connecter <span class="fas fa-chevron-down text-white ms-1" id="login-button-icon"></span>
            </button>

            <div id="login-form-collapse" class="collapse shadow border p-3">
                <div class="d-flex flex-column mb-5">
                    <div class="d-flex flex-row justify-content-between mb-2">
                        <div class="p-2">
                            <span class="h4">Particuliers et professionnels</span>
                        </div>
                        <div class="p-2">
                            <a href="#">
                                <span class="fas fa-question-circle"></span>
                            </a>
                        </div>
                    </div>
                    <div class="p-2 mb-3">
                        <a class="btn btn-primary text-center w-100 py-2" href="#">
                            <span class="fas fa-external-link-alt me-1 text-white"></span>
                            Portail prestations
                        </a>
                    </div>
                    <div class="p-2">
                        <a href="#" class="text-decoration-none">
                            Vous n'avez pas encore assez au portail ?
                        </a>
                    </div>
                    <div class="px-2">
                        <a href="#" class="btn btn-outline-primary text-center w-100 py-2">
                            Demander l'accès
                        </a>
                    </div>
                </div>
                <div class="px-2 mb-5">
                    <hr class="opacity-25">
                </div>
                <div class="d-flex flex-column">
                    <div class="d-flex flex-row justify-content-between mb-2">
                        <div class="p-2">
                            <span class="h4">Collaborateurs-trices et partenaires</span>
                        </div>
                        <div class="p-2">
                            <a href="#">
                                <span class="fas fa-question-circle"></span>
                            </a>
                        </div>
                    </div>
                    <div class="p-2">
                        <a class="btn btn-secondary text-center w-100 py-2" href="#">
                            <span class="fas fa-external-link-alt me-1 text-white"></span>
                            Portail IAM
                        </a>
                    </div>
                </div>
            </div>

        </div>
        <a href="../accueil" class="vd-logo" title="Aller à la page d'accueil du Site du Canton de Vaud">
            <img src="../../foehn/svg/ETATVAUD.svg" class="vd-logo__image" alt="État de Vaud" aria-hidden="true" />
        </a>

    </div>
    <div class="vd-nav-primary d-print-none">

        <!-- button -->
        <div class="container">
            <div class="row">
                <div class="col-md-12 d-flex justify-content-md-end">
                    <button type="button" class="btn btn-primary btn-sm vd-nav-primary__button align-self-end collapsed" data-bs-toggle="collapse" data-bs-target="#nav-primary-container" aria-controls="nav-primary-container" aria-expanded="false">
                        <div class="d-flex justify-content-between">
                            <div>
                                <span class="vd-nav-primary__button--close">Cacher les thèmes</span>
                                <span class="vd-nav-primary__button--open">Afficher les thèmes</span>
                            </div>
                            <div>
                                <span class="vd-nav-primary__button--open fas fa-plus"></span>
                                <span class="vd-nav-primary__button--close fas fa-minus"></span>
                            </div>
                        </div>
                    </button>
                </div>
            </div>
        </div>

        <!-- menu -->
        <div class="vd-nav-primary__menu-container">
            <div class="collapse clearfix" id="nav-primary-container">
                <div class="pb-3">
                    <div class="container vd-nav-primary__menu-bg-md">
                        <div class="vd-nav-primary__menu-bg-sm">
                            <div class="row">
                                <nav class="col-md-8 order-md-1 mt-3" id="nav-primary">
                                    <h2 class="sr-only">Navigation par thèmes</h2>
                                    <ul class="list-unstyled mb-0 row">

                                        <li class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2">
                                            <a href="domaines#culture" class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2 vd-domain-item__link-container">
                                                <span class="vd-domain-item__link vd-link-invisible h4">Culture</span>
                                                <span class="vd-domain-item__text">
                                                    <span class="sr-only">(Exemple de contenu: </span>Aides et subventions, passculture, Musées, Bibliothèques, Patrimoine vaudois, etc.<span class="sr-only">)</span>
                                                </span>
                                            </a>
                                        </li>

                                        <li class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2">
                                            <a href="domaines#economie" class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2 vd-domain-item__link-container">
                                                <span class="vd-domain-item__link vd-link-invisible h4">Economie</span>
                                                <span class="vd-domain-item__text">
                                                    <span class="sr-only">(Exemple de contenu: </span>Registre du commerce, poursuites et faillites, Entreprise, Chômage, Agriculture, développement économique, etc.<span class="sr-only">)</span>
                                                </span>
                                            </a>
                                        </li>

                                        <li class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2">
                                            <a href="domaines#environnement" class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2 vd-domain-item__link-container">
                                                <span class="vd-domain-item__link vd-link-invisible h4">Environnement</span>
                                                <span class="vd-domain-item__text">
                                                    <span class="sr-only">(Exemple de contenu: </span>Subventions pour l’énergie, faune et nature, eaux, forêts, air, développement durable, etc.<span class="sr-only">)</span>
                                                </span>
                                            </a>
                                        </li>

                                        <li class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2">
                                            <a href="domaines#etat%2C%20droit%2C%20finance" class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2 vd-domain-item__link-container">
                                                <span class="vd-domain-item__link vd-link-invisible h4">Etat, Droit, Finance</span>
                                                <span class="vd-domain-item__text">
                                                    <span class="sr-only">(Exemple de contenu: </span>Justice, votations, Egalité, protection des données, Impôts, finances publiques, Etat employeur, statistiques, etc.<span class="sr-only">)</span>
                                                </span>
                                            </a>
                                        </li>

                                        <li class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2">
                                            <a href="domaines#formation" class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2 vd-domain-item__link-container">
                                                <span class="vd-domain-item__link vd-link-invisible h4">Formation</span>
                                                <span class="vd-domain-item__text">
                                                    <span class="sr-only">(Exemple de contenu: </span>Vacances scolaires, scolarité obligatoire, orientation, apprentissage, gymnase, Bourses, etc.<span class="sr-only">)</span>
                                                </span>
                                            </a>
                                        </li>

                                        <li class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2">
                                            <a href="domaines#mobilit%C3%A9" class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2 vd-domain-item__link-container">
                                                <span class="vd-domain-item__link vd-link-invisible h4">Mobilité</span>
                                                <span class="vd-domain-item__text">
                                                    <span class="sr-only">(Exemple de contenu: </span>Automobiles, Routes, navigation, transports publics, mobilités durables, etc.<span class="sr-only">)</span>
                                                </span>
                                            </a>
                                        </li>

                                        <li class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2">
                                            <a href="domaines#sant%C3%A9" class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2 vd-domain-item__link-container">
                                                <span class="vd-domain-item__link vd-link-invisible h4">Santé</span>
                                                <span class="vd-domain-item__text">
                                                    <span class="sr-only">(Exemple de contenu: </span>Prévention, système de santé, dépendances, santé en milieu scolaire, droit des patients, les professionnels de la santé, etc.<span class="sr-only">)</span>
                                                </span>
                                            </a>
                                        </li>

                                        <li class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2">
                                            <a href="domaines#social" class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2 vd-domain-item__link-container">
                                                <span class="vd-domain-item__link vd-link-invisible h4">Social</span>
                                                <span class="vd-domain-item__text">
                                                    <span class="sr-only">(Exemple de contenu: </span>Subside à l’assurance maladie, revenu d’insertion, violence, le RDU, les prestations familles, PC familles, Rente-pont, etc.<span class="sr-only">)</span>
                                                </span>
                                            </a>
                                        </li>

                                        <li class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2">
                                            <a href="domaines#vie%20priv%C3%A9e" class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2 vd-domain-item__link-container">
                                                <span class="vd-domain-item__link vd-link-invisible h4">Vie privée</span>
                                                <span class="vd-domain-item__text">
                                                    <span class="sr-only">(Exemple de contenu: </span>Vacances scolaires, scolarité obligatoire, orientation, apprentissage, gymnase, Bourses, etc.<span class="sr-only">)</span>
                                                </span>
                                            </a>
                                        </li>

                                        <li class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2">
                                            <a href="domaines#s%C3%A9curit%C3%A9" class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2 vd-domain-item__link-container">
                                                <span class="vd-domain-item__link vd-link-invisible h4">Sécurité</span>
                                                <span class="vd-domain-item__text">
                                                    <span class="sr-only">(Exemple de contenu: </span>Police, pénitentiaire, armée, catastrophe, protection de la population, etc.<span class="sr-only">)</span>
                                                </span>
                                            </a>
                                        </li>

                                        <li class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2">
                                            <a href="domaines#territoire" class="vd-domain-item vd-domain-item--small col-sm-6 col-lg-4 mb-2 vd-domain-item__link-container">
                                                <span class="vd-domain-item__link vd-link-invisible h4">Territoire</span>
                                                <span class="vd-domain-item__text">
                                                    <span class="sr-only">(Exemple de contenu: </span>Aménagement, permis de construire, registre foncier, communes, préfectures, dangers naturels, etc.<span class="sr-only">)</span>
                                                </span>
                                            </a>
                                        </li>

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

    </div>

</header>

<div class="vd-bg-pattern-gray">
    <div class="container">
        <nav aria-label="Fil d'Ariane">
            <h2 class="sr-only">File d'Ariane</h2>
            <ol class="breadcrumb">

                <li class="breadcrumb-item"><a href="#">vd.ch</a></li>

                <li class="breadcrumb-item"><a href="#">Communiqués de presse</a></li>

            </ol>
        </nav>

        <h1 class="mt-0">Communiqués de presse</h1>
    </div>
</div>

<main class="container mt-5">
    <div class="vd-bg-pattern-bars-gray py-4 mt-3 mb-4 d-print-none">
        <div class="container">
            <form class="form" role="search">
                <div class="row">
                    <div class="col-lg-3 col-xl-4">
                        <div class="form-group">
                            <label for="search" class="h5 d-block mt-0">Rechercher<span class="sr-only"> les communiqués de presse</span></label>

                            <input class="form-control" type="text" id="search" name="testInput" value="" required aria-required="true">
                        </div>

                    </div>
                    <div class="col-lg-9 col-xl-8 d-none d-md-block">
                        <div class="row">
                            <div class="col-6">
                                <fieldset>
                                    <legend class="h5 mt-0">Publié du</legend>

                                    <div class="vd-form-flex">
                                        <div class="vd-form-flex__item vd-form-flex__item--2-char-width">
                                            <div class="form-group">
                                                <label for="fromDatesDay" class="sr-only">Jour</label>

                                                <input class="form-control" type="number" id="fromDatesDay" name="testInput" value="" required aria-required="true" pattern="[0-9]*" min="1" max="31" size="2" placeholder="JJ">
                                            </div>
                                        </div>
                                        <div class="vd-form-flex__item vd-form-flex__item--2-char-width">
                                            <div class="form-group">
                                                <label for="fromDatesMonth" class="sr-only">Mois</label>

                                                <input class="form-control" type="number" id="fromDatesMonth" name="testInput" value="" required aria-required="true" pattern="[0-9]*" min="1" max="12" size="2" placeholder="MM">
                                            </div>
                                        </div>
                                        <div class="vd-form-flex__item vd-form-flex__item--4-char-width">
                                            <div class="form-group">
                                                <label for="fromDatesyear" class="sr-only">Année</label>

                                                <input class="form-control" type="number" id="fromDatesyear" name="testInput" value="" required aria-required="true" pattern="[0-9]*" min="1950" max="2017" size="4" placeholder="YYYY">
                                            </div>
                                        </div>
                                    </div>

                                </fieldset>

                            </div>
                            <div class="col-6">
                                <fieldset>
                                    <legend class="h5 mt-0">au</legend>

                                    <div class="vd-form-flex">
                                        <div class="vd-form-flex__item vd-form-flex__item--2-char-width">
                                            <div class="form-group">
                                                <label for="toDatesDay" class="sr-only">Jour</label>

                                                <input class="form-control" type="number" id="toDatesDay" name="testInput" value="" required aria-required="true" pattern="[0-9]*" min="1" max="31" size="2" placeholder="JJ">
                                            </div>
                                        </div>
                                        <div class="vd-form-flex__item vd-form-flex__item--2-char-width">
                                            <div class="form-group">
                                                <label for="toDatesMonth" class="sr-only">Mois</label>

                                                <input class="form-control" type="number" id="toDatesMonth" name="testInput" value="" required aria-required="true" pattern="[0-9]*" min="1" max="12" size="2" placeholder="MM">
                                            </div>
                                        </div>
                                        <div class="vd-form-flex__item vd-form-flex__item--4-char-width">
                                            <div class="form-group">
                                                <label for="toDatesYear" class="sr-only">Année</label>

                                                <input class="form-control" type="number" id="toDatesYear" name="testInput" value="" required aria-required="true" pattern="[0-9]*" min="1950" max="2017" size="4" placeholder="YYYY">
                                            </div>
                                        </div>
                                    </div>

                                </fieldset>

                            </div>
                        </div>
                    </div>
                </div>
                <button type="submit" class="btn btn-dark me-4 mb-3 mb-sm-0">Rechercher</button>
                <a href="#" class="btn btn-secondary mb-3 mb-sm-0">Réinitialiser</a>
            </form>
        </div>
    </div>

    <div class="row">

        <div class="col-md-8">

            <h2 class="sr-only">Liste des communiqués de presse</h2>
            <div class="vd-teaser-list-striped">

                <article class="d-flex
                flex-column vd-teaser-list-striped-item px-3 pt-3">
                    <header class="d-flex flex-column">
                        <h3 class="mt-0 order-2">
                            <a href="communiques-presse-detail" class="vd-link-invisible">Lorem
                                ipsum dolor sit amet.</a>
                        </h3>
                        <p class="small mb-1 order-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                    </header>
                    <p class="small fw-bold order-3">Publié le 1 juillet 2016</p>
                    <div class="order-2">
                        <p class="vd-font-familiy-headings">Lorem ipsum dolor sit amet,
                            consectetur adipisicing elit. Est, expedita hic magnam sequi dolorum,
                            quas repellendus ad, voluptatum sed fugiat aspernatur. Et, magni
                            explicabo nesciunt.</p>
                    </div>
                </article>

                <article class="d-flex
                flex-column vd-teaser-list-striped-item px-3 pt-3">
                    <header class="d-flex flex-column">
                        <h3 class="mt-0 order-2">
                            <a href="communiques-presse-detail" class="vd-link-invisible">Lorem
                                ipsum dolor sit amet.</a>
                        </h3>
                        <p class="small mb-1 order-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                    </header>
                    <p class="small fw-bold order-3">Publié le 1 juillet 2016</p>
                    <div class="order-2">
                        <p class="vd-font-familiy-headings">Lorem ipsum dolor sit amet,
                            consectetur adipisicing elit. Est, expedita hic magnam sequi dolorum,
                            quas repellendus ad, voluptatum sed fugiat aspernatur. Et, magni
                            explicabo nesciunt.</p>
                    </div>
                </article>

                <article class="d-flex
                flex-column vd-teaser-list-striped-item px-3 pt-3">
                    <header class="d-flex flex-column">
                        <h3 class="mt-0 order-2">
                            <a href="communiques-presse-detail" class="vd-link-invisible">Lorem
                                ipsum dolor sit amet.</a>
                        </h3>
                        <p class="small mb-1 order-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                    </header>
                    <p class="small fw-bold order-3">Publié le 1 juillet 2016</p>
                    <div class="order-2">
                        <p class="vd-font-familiy-headings">Lorem ipsum dolor sit amet,
                            consectetur adipisicing elit. Est, expedita hic magnam sequi dolorum,
                            quas repellendus ad, voluptatum sed fugiat aspernatur. Et, magni
                            explicabo nesciunt.</p>
                    </div>
                </article>

                <article class="d-flex
                flex-column vd-teaser-list-striped-item px-3 pt-3">
                    <header class="d-flex flex-column">
                        <h3 class="mt-0 order-2">
                            <a href="communiques-presse-detail" class="vd-link-invisible">Lorem
                                ipsum dolor sit amet.</a>
                        </h3>
                        <p class="small mb-1 order-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                    </header>
                    <p class="small fw-bold order-3">Publié le 1 juillet 2016</p>
                    <div class="order-2">
                        <p class="vd-font-familiy-headings">Lorem ipsum dolor sit amet,
                            consectetur adipisicing elit. Est, expedita hic magnam sequi dolorum,
                            quas repellendus ad, voluptatum sed fugiat aspernatur. Et, magni
                            explicabo nesciunt.</p>
                    </div>
                </article>

                <article class="d-flex
                flex-column vd-teaser-list-striped-item px-3 pt-3">
                    <header class="d-flex flex-column">
                        <h3 class="mt-0 order-2">
                            <a href="communiques-presse-detail" class="vd-link-invisible">Lorem
                                ipsum dolor sit amet.</a>
                        </h3>
                        <p class="small mb-1 order-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                    </header>
                    <p class="small fw-bold order-3">Publié le 1 juillet 2016</p>
                    <div class="order-2">
                        <p class="vd-font-familiy-headings">Lorem ipsum dolor sit amet,
                            consectetur adipisicing elit. Est, expedita hic magnam sequi dolorum,
                            quas repellendus ad, voluptatum sed fugiat aspernatur. Et, magni
                            explicabo nesciunt.</p>
                    </div>
                </article>

                <article class="d-flex
                flex-column vd-teaser-list-striped-item px-3 pt-3">
                    <header class="d-flex flex-column">
                        <h3 class="mt-0 order-2">
                            <a href="communiques-presse-detail" class="vd-link-invisible">Lorem
                                ipsum dolor sit amet.</a>
                        </h3>
                        <p class="small mb-1 order-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                    </header>
                    <p class="small fw-bold order-3">Publié le 1 juillet 2016</p>
                    <div class="order-2">
                        <p class="vd-font-familiy-headings">Lorem ipsum dolor sit amet,
                            consectetur adipisicing elit. Est, expedita hic magnam sequi dolorum,
                            quas repellendus ad, voluptatum sed fugiat aspernatur. Et, magni
                            explicabo nesciunt.</p>
                    </div>
                </article>

                <article class="d-flex
                flex-column vd-teaser-list-striped-item px-3 pt-3">
                    <header class="d-flex flex-column">
                        <h3 class="mt-0 order-2">
                            <a href="communiques-presse-detail" class="vd-link-invisible">Lorem
                                ipsum dolor sit amet.</a>
                        </h3>
                        <p class="small mb-1 order-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                    </header>
                    <p class="small fw-bold order-3">Publié le 1 juillet 2016</p>
                    <div class="order-2">
                        <p class="vd-font-familiy-headings">Lorem ipsum dolor sit amet,
                            consectetur adipisicing elit. Est, expedita hic magnam sequi dolorum,
                            quas repellendus ad, voluptatum sed fugiat aspernatur. Et, magni
                            explicabo nesciunt.</p>
                    </div>
                </article>

                <article class="d-flex
                flex-column vd-teaser-list-striped-item px-3 pt-3">
                    <header class="d-flex flex-column">
                        <h3 class="mt-0 order-2">
                            <a href="communiques-presse-detail" class="vd-link-invisible">Lorem
                                ipsum dolor sit amet.</a>
                        </h3>
                        <p class="small mb-1 order-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                    </header>
                    <p class="small fw-bold order-3">Publié le 1 juillet 2016</p>
                    <div class="order-2">
                        <p class="vd-font-familiy-headings">Lorem ipsum dolor sit amet,
                            consectetur adipisicing elit. Est, expedita hic magnam sequi dolorum,
                            quas repellendus ad, voluptatum sed fugiat aspernatur. Et, magni
                            explicabo nesciunt.</p>
                    </div>
                </article>

                <article class="d-flex
                flex-column vd-teaser-list-striped-item px-3 pt-3">
                    <header class="d-flex flex-column">
                        <h3 class="mt-0 order-2">
                            <a href="communiques-presse-detail" class="vd-link-invisible">Lorem
                                ipsum dolor sit amet.</a>
                        </h3>
                        <p class="small mb-1 order-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                    </header>
                    <p class="small fw-bold order-3">Publié le 1 juillet 2016</p>
                    <div class="order-2">
                        <p class="vd-font-familiy-headings">Lorem ipsum dolor sit amet,
                            consectetur adipisicing elit. Est, expedita hic magnam sequi dolorum,
                            quas repellendus ad, voluptatum sed fugiat aspernatur. Et, magni
                            explicabo nesciunt.</p>
                    </div>
                </article>

                <article class="d-flex
                flex-column vd-teaser-list-striped-item px-3 pt-3">
                    <header class="d-flex flex-column">
                        <h3 class="mt-0 order-2">
                            <a href="communiques-presse-detail" class="vd-link-invisible">Lorem
                                ipsum dolor sit amet.</a>
                        </h3>
                        <p class="small mb-1 order-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                    </header>
                    <p class="small fw-bold order-3">Publié le 1 juillet 2016</p>
                    <div class="order-2">
                        <p class="vd-font-familiy-headings">Lorem ipsum dolor sit amet,
                            consectetur adipisicing elit. Est, expedita hic magnam sequi dolorum,
                            quas repellendus ad, voluptatum sed fugiat aspernatur. Et, magni
                            explicabo nesciunt.</p>
                    </div>
                </article>

            </div>
            <nav class="vd-pagination" aria-label="Pagination">
                <ul class="vd-pagination__list">
                    <li class="vd-pagination__item vd-pagination__item--previous">
                        <a href="#" class="vd-pagination__link">
                            <span class="vd-pagination__title">
                                <span class="fas fa-chevron-left" aria-hidden="true"></span>
                                Page précédente
                            </span><span class="sr-only">:</span>
                            <span class="vd-pagination__label">11 sur 244</span></a>
                    </li>
                    <li class="vd-pagination__item vd-pagination__item--next">
                        <a href="#" class="vd-pagination__link">
                            <span class="vd-pagination__title">
                                Page suivante
                                <span class="fas fa-chevron-right" aria-hidden="true"></span>
                            </span><span class="sr-only">:</span>
                            <span class="vd-pagination__label">13 sur 244</span></a>
                    </li>
                </ul>
            </nav>

        </div>

        <aside class="col-md-4 vd-text-md-small small">

            <address itemscope itemtype="http://schema.org/GovernmentOrganization">

                <h2><span itemprop="name">Bureau d&#39;information et de communication</span>
                </h2>

                <p itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
                    <span itemprop="streetAddress">Rue de la Barre 2</span> <br>
                    Case postale <span itemprop="postOfficeBoxNumber">5278</span><br>
                    <span itemprop="postalCode">1000</span>
                    <span itemprop="addressLocality">Lausanne</span>
                    <span class="sr-only" itemprop="addressCountry">Suisse</span>
                </p>

                <p>

                    <a href="https://www.google.ch/maps/search/Rue%20de%20la%20Barre%202%205278%201000%20Lausanne%20Suisse%20">Visualiser sur la carte</a><br>

                </p>

                <p><a href="#" title="Nous écrire Formulaire de contact" class="btn btn-dark">Nous écrire</a>
                </p>

                <div itemscope itemtype="http://schema.org/GovernmentBuilding">

                </div>

                <p></p>

            </address>

            <p class="mt-5">Les communiqués diffusés par les autres institutions de l'Etat sont disponible sur les pages suivantes:</p>
            <ul class="vd-list-links mb-5">
                <li><a href="#">communiqués de la Police cantonale</a></li>
                <li><a href="#">communiqués du Centre hospitalier universitaire vaudois (CHUV)</a></li>
                <li><a href="#">communiqués de l'Université de Lausanne</a></li>
            </ul>

            <p>
                <span class="fas fa-rss-square" aria-hidden="true"></span> <a href="#">Abonnement</a>
            </p>

        </aside>

    </div>
</main>

<div class="container mt-5">

    <h2 class="vd-heading-light h4 mb-3 sr-only">Partager la page</h2>
    <ul class="list-inline vd-social-icons mt-4 mb-3">
        <li class="list-inline-item">
            <a class="vd-social-icon" href="#"><span class="fas fa-envelope" aria-hidden="true"></span><span class="sr-only">Envoyer par courriel</span></a>
        </li>
        <li class="list-inline-item">
            <a class="vd-social-icon" href="#"><span class="fab fa-twitter" aria-hidden="true"></span><span class="sr-only">Partager sur Twitter</span></a>
        </li>
        <li class="list-inline-item">
            <a class="vd-social-icon" href="#"><span class="fab fa-facebook-f" aria-hidden="true"></span><span class="sr-only">Partager sur Facebook</span></a>
        </li>
        <li class="list-inline-item">
            <a class="vd-social-icon" href="#"><span class="fab fa-linkedin-in" aria-hidden="true"></span><span class="sr-only">Partager sur Linkedin</span></a>
        </li>
        <li class="list-inline-item d-lg-none">
            <a class="vd-social-icon" href="#"><span class="fab fa-whatsapp" aria-hidden="true"></span><span class="sr-only">Partager sur WhatsApp</span></a>
        </li>
        <li class="list-inline-item d-none d-lg-inline-block">
            <a class="vd-social-icon" href="#"><span class="fas fa-print" aria-hidden="true"></span><span class="sr-only">Imprimer la page</span></a>
        </li>
    </ul>

</div>

<footer>

    <div class="container">
        <div class="text-end">
            <a href="#" class="btn btn-sm btn-dark" title="Retour vers le haut de la page">Haut <span class="fas fa-chevron-up"></span></a>
        </div>
    </div>

    <div class="footer">
        <div class="container">
            <div class="row">
                <div class="col-xs-10">
                    <nav class="row" aria-label="pied de page">

                        <div class="col-sm">
                            <h2 class="vd-heading-light h4 sr-only">Accès directs</h2>
                            <ul class="list-unstyled vd-list-columns">
                                <li><a href="">Offre d&#39;emploi</a></li>
                                <li><a href="">Statistiques</a></li>
                                <li><a href="">Portail sécurisé</a></li>
                                <li><a href="">Flux RSS</a></li>
                                <li><a href="">Espace sécurisé</a></li>
                                <li><a href="">Mentions légales</a></li>
                                <li><a href="">Contact</a></li>
                                <li><a href="">Permaliens</a></li>
                                <li><a href="">Guides TYPO3</a></li>
                            </ul>
                        </div>

                        <div class="col-sm">
                            <h2 class="vd-heading-light h4 ">Sites partenaires</h2>
                            <ul class="list-unstyled ">
                                <li><a href="">Promotion Vaud.ch</a></li>
                                <li><a href="">Tourisme</a></li>
                                <li><a href="">Musées</a></li>
                                <li><a href="">Patrimoine</a></li>
                                <li><a href="">CH.ch</a></li>
                            </ul>
                        </div>

                    </nav>
                </div>
                <div class="col-xs-2">
                    <div class="d-flex align-items-end flex-column h-100">
                        <div class="mt-auto w-100 end">
                            <a href="#" class="d-inline-block">
                                <span class="sr-only">Retour à la page d'accueil</span>
                                <img aria-hidden="true" class="img-fluid footer-logo" src="../../foehn/svg/logo/logo--white.svg" alt="Canton de Vaud">

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

</footer>
{% render '@header--default', header, true %}

{% include '@page-title-banner' %}

<main class="container mt-5">
  <div class="vd-bg-pattern-bars-gray py-4 mt-3 mb-4 d-print-none">
    <div class="container">
      <form class="form" role="search">
        <div class="row">
          <div class="col-lg-3 col-xl-4">
            {% render '@input--default', search, true %}
          </div>
          <div class="col-lg-9 col-xl-8 d-none d-md-block">
            <div class="row">
              <div class="col-6">
                {% render '@dates', dates.from, true %}
              </div>
              <div class="col-6">
                {% render '@dates', dates.to, true %}
              </div>
            </div>
          </div>
        </div>
        <button type="submit" class="btn btn-dark me-4 mb-3 mb-sm-0">Rechercher</button>
        <a href="#" class="btn btn-secondary mb-3 mb-sm-0">Réinitialiser</a>
      </form>
    </div>
  </div>

  <div class="row">

    <div class="col-md-8">
      {% block main %}
      {% if results %}<h2 class="vd-p mb-3">{{ total }} résultats trouvés</h2>{% else %}<h2 class="sr-only">Liste des communiqués de presse</h2>{% endif %}
      {% render '@teaser-alt-list' %}
      {% endblock %}
    </div>

    <aside class="col-md-4 vd-text-md-small small">
      {% block aside %}
      {% render '@autority-address', autorityAddress %}

      <p class="mt-5">Les communiqués diffusés par les autres institutions de l'Etat sont disponible sur les pages suivantes:</p>
      <ul class="vd-list-links mb-5">
        <li><a href="#">communiqués de la Police cantonale</a></li>
        <li><a href="#">communiqués du Centre hospitalier universitaire vaudois (CHUV)</a></li>
        <li><a href="#">communiqués de l'Université de Lausanne</a></li>
      </ul>

      <p>
        <span class="fas fa-rss-square" aria-hidden="true"></span> <a href="#">Abonnement</a>
      </p>
      {% endblock %}
    </aside>

  </div>
</main>

{% render '@footer', footer, true %}
{
  "pageTitle": {
    "text": "Communiqués de presse"
  },
  "breadcrumb": {
    "breadcrumb": [
      {
        "page": "vd.ch",
        "url": "#"
      },
      {
        "page": "Communiqués de presse",
        "url": "#"
      },
      null,
      null
    ]
  },
  "search": {
    "id": "search",
    "label": "Rechercher<span class=\"sr-only\"> les communiqués de presse</span>",
    "labelHidden": false,
    "labelStyleModifier": "h5 d-block mt-0"
  },
  "dates": {
    "from": {
      "legendModifier": "h5 mt-0",
      "legend": "Publié du",
      "helpText": false,
      "inputDay": {
        "id": "fromDatesDay",
        "labelHidden": true,
        "placeholder": "JJ"
      },
      "inputMonth": {
        "id": "fromDatesMonth",
        "labelHidden": true,
        "placeholder": "MM"
      },
      "inputYear": {
        "id": "fromDatesyear",
        "labelHidden": true,
        "placeholder": "YYYY"
      }
    },
    "to": {
      "legendModifier": "h5 mt-0",
      "legend": "au",
      "helpText": false,
      "inputDay": {
        "id": "toDatesDay",
        "labelHidden": true,
        "placeholder": "JJ"
      },
      "inputMonth": {
        "id": "toDatesMonth",
        "labelHidden": true,
        "placeholder": "MM"
      },
      "inputYear": {
        "id": "toDatesYear",
        "labelHidden": true,
        "placeholder": "YYYY"
      }
    }
  },
  "autorityAddress": {
    "name": "Bureau d'information et de communication",
    "address": {
      "streetAddress": "Rue de la Barre 2",
      "postOfficeBoxNumber": "5278",
      "postalCode": "1000",
      "addressLocality": "Lausanne",
      "addressCountry": "Suisse"
    },
    "button": {
      "text": "Nous écrire",
      "href": "#",
      "title": "Formulaire de contact"
    }
  }
}

No notes defined.