<div class="spectacle-list-container">

	<div class="spectacle-list-header">
		<div class="spectacle-list-header-display">
			<span class="spectacle-list-header-display-title">AFFICHAGE</span>
			<a class="spectacle-list-header-display-list active" href="#">
				<span class="icon-svg icon-list">
					<svg>
					    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/sprites/sprite.svg#icon-list"></use>
					</svg>
				</span>
				<span class="label">LISTE</span>
			</a><a class="spectacle-list-header-display-calendar" href="#">
				<span class="icon-svg icon-calendar">
					<svg>
					    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/sprites/sprite.svg#icon-calendar"></use>
					</svg>
				</span>
				<span class="label">CALENDRIER</span>
			</a>
		</div>
		<div class="spectacle-list-header-toolbar">
			<form class="form-nb-item" action="#">
				<select class="form-select" name="nb-item">
					<option value="8">8 résultats/page</option>
					<option value="16">16 résultats/page</option>
					<option value="32">32 résultats/page</option>
					<option value="64">64 résultats/page</option>
				</select>
			</form>
			<div class="js-pagination">
				<a href="#-1" class="pagination-prev">Précedent</a>
				<ul class="pagination-list"></ul>
				<a href="#+1" class="pagination-next">Suivant</a>
			</div>
		</div>
	</div>


	<!-- SPECTACLES LIST -->
	<section class="spectacle-list spectacle-list-calendar">

		<!-- item 1 -->
		<article class="spectacle-list-item spectacle-list-item-calendar">
			<div class="spectacle-list-item-calendar-wrapper">
				<span class="spectacle-list-item-calendar-label-day">Mercredi</span>
				<span class="spectacle-list-item-calendar-day">9</span>
				<span class="spectacle-list-item-calendar-month">Septembre</span>
			</div>
			<span class="calendar-triangle calendar-triangle-desktop">
				<img src="img/skin/triangle-right.png" alt="" />
			</span>
			<span class="calendar-triangle calendar-triangle-mobile">
				<img src="img/skin/triangle-down.png" alt="" />
			</span>
		</article>

		<!-- item 2 -->
		<article class="spectacle-list-item">
			<div class="spectacle-list-item-genre">MUSIQUE</div>
			<a href="#">
				<div class="spectacle-list-item-picture">
					<picture data-alt="" data-default-src="img/layout/spectacle/spectacle-item-sample_mobile.jpg">
						<source media="(min-width: 1025px)" srcset="img/layout/spectacle/spectacle-item-sample_desktop.jpg"/>
						<source media="(min-width: 481px)"  srcset="img/layout/spectacle/spectacle-item-sample_tablet.jpg"/>
						<source media="(max-width: 480px)"  srcset="img/layout/spectacle/spectacle-item-sample_mobile.jpg"/>
						<img src="" alt="" />
					</picture>
				</div>
				<div class="spectacle-list-item-title">ONE NIGHT OF QUEEN
				</div>
				<div class="spectacle-list-item-price">À PARTIR DE <span>29€</span></div>
			</a>
			<div class="spectacle-list-item-city">TOULOUSE</div>
			<div class="spectacle-list-item-date">Du Mercredi 9 décembre 2015 Au jeudi 16 Décembre 2015</div>
			<div class="spectacle-list-item-cta">
				<a href="" class="button button-golden-outline-small">DÉCOUVRIR</a>
			</div>
		</article>

		<!-- item 3 -->
		<article class="spectacle-list-item">
			<div class="spectacle-list-item-genre">MUSIQUE</div>
			<a href="#">
				<div class="spectacle-list-item-picture">
					<picture data-alt="" data-default-src="img/layout/spectacle/spectacle-item-sample_mobile.jpg">
						<source media="(min-width: 1025px)" srcset="img/layout/spectacle/spectacle-item-sample_desktop.jpg"/>
						<source media="(min-width: 481px)"  srcset="img/layout/spectacle/spectacle-item-sample_tablet.jpg"/>
						<source media="(max-width: 480px)"  srcset="img/layout/spectacle/spectacle-item-sample_mobile.jpg"/>
						<img src="" alt="" />
					</picture>
				</div>
				<div class="spectacle-list-item-title">ONE NIGHT OF QUEEN</div>
				<div class="spectacle-list-item-price">À PARTIR DE <span>29€</span></div>
			</a>
			<div class="spectacle-list-item-city">TOULOUSE</div>
			<div class="spectacle-list-item-date">Du Mercredi 9 décembre 2015 Au jeudi 16 Décembre 2015</div>
			<div class="spectacle-list-item-cta">
				<a href="" class="button button-golden-outline-small">DÉCOUVRIR</a>
			</div>
		</article>

		<!-- item 4 -->
		<article class="spectacle-list-item">
			<div class="spectacle-list-item-genre">MUSIQUE</div>
			<a href="#">
				<div class="spectacle-list-item-picture">
					<picture data-alt="" data-default-src="img/layout/spectacle/spectacle-item-sample_mobile.jpg">
						<source media="(min-width: 1025px)" srcset="img/layout/spectacle/spectacle-item-sample_desktop.jpg"/>
						<source media="(min-width: 481px)"  srcset="img/layout/spectacle/spectacle-item-sample_tablet.jpg"/>
						<source media="(max-width: 480px)"  srcset="img/layout/spectacle/spectacle-item-sample_mobile.jpg"/>
						<img src="" alt="" />
					</picture>
				</div>
				<div class="spectacle-list-item-title">ONE NIGHT OF QUEEN
				</div>
				<div class="spectacle-list-item-price">À PARTIR DE <span>29€</span></div>
			</a>
			<div class="spectacle-list-item-city">TOULOUSE</div>
			<div class="spectacle-list-item-date">Du Mercredi 9 décembre 2015 Au jeudi 16 Décembre 2015</div>
			<div class="spectacle-list-item-cta">
				<a href="" class="button button-golden-outline-small">DÉCOUVRIR</a>
			</div>
		</article>

		<!-- item 5 -->
		<article class="spectacle-list-item">
			<div class="spectacle-list-item-genre">MUSIQUE</div>
			<a href="#">
				<div class="spectacle-list-item-picture">
					<picture data-alt="" data-default-src="img/layout/spectacle/spectacle-item-sample_mobile.jpg">
						<source media="(min-width: 1025px)" srcset="img/layout/spectacle/spectacle-item-sample_desktop.jpg"/>
						<source media="(min-width: 481px)"  srcset="img/layout/spectacle/spectacle-item-sample_tablet.jpg"/>
						<source media="(max-width: 480px)"  srcset="img/layout/spectacle/spectacle-item-sample_mobile.jpg"/>
						<img src="" alt="" />
					</picture>
				</div>
				<div class="spectacle-list-item-title">ONE NIGHT OF QUEEN
				</div>
				<div class="spectacle-list-item-price">À PARTIR DE <span>29€</span></div>
			</a>
			<div class="spectacle-list-item-city">TOULOUSE</div>
			<div class="spectacle-list-item-date">Du Mercredi 9 décembre 2015 Au jeudi 16 Décembre 2015</div>
			<div class="spectacle-list-item-cta">
				<a href="" class="button button-golden-outline-small">DÉCOUVRIR</a>
			</div>
		</article>

		<!-- item 6 -->
		<article class="spectacle-list-item">
			<div class="spectacle-list-item-genre">MUSIQUE</div>
			<a href="#">
				<div class="spectacle-list-item-picture">
					<picture data-alt="" data-default-src="img/layout/spectacle/spectacle-item-sample_mobile.jpg">
						<source media="(min-width: 1025px)" srcset="img/layout/spectacle/spectacle-item-sample_desktop.jpg"/>
						<source media="(min-width: 481px)"  srcset="img/layout/spectacle/spectacle-item-sample_tablet.jpg"/>
						<source media="(max-width: 480px)"  srcset="img/layout/spectacle/spectacle-item-sample_mobile.jpg"/>
						<img src="" alt="" />
					</picture>
				</div>
				<div class="spectacle-list-item-title">ONE NIGHT OF QUEEN
				</div>
				<div class="spectacle-list-item-price">À PARTIR DE <span>29€</span></div>
			</a>
			<div class="spectacle-list-item-city">TOULOUSE</div>
			<div class="spectacle-list-item-date">Du Mercredi 9 décembre 2015 Au jeudi 16 Décembre 2015</div>
			<div class="spectacle-list-item-cta">
				<a href="" class="button button-golden-outline-small">DÉCOUVRIR</a>
			</div>
		</article>

		<!-- item 7 -->
		<article class="spectacle-list-item spectacle-list-item-calendar">
			<div class="spectacle-list-item-calendar-wrapper">
				<span class="spectacle-list-item-calendar-label-day">Mercredi</span>
				<span class="spectacle-list-item-calendar-day">9</span>
				<span class="spectacle-list-item-calendar-month">Septembre</span>
			</div>
			<span class="calendar-triangle calendar-triangle-desktop">
				<img src="img/skin/triangle-right.png" alt="" />
			</span>
			<span class="calendar-triangle calendar-triangle-mobile">
				<img src="img/skin/triangle-down.png" alt="" />
			</span>
		</article>

		<!-- item 8 -->
		<article class="spectacle-list-item">
			<div class="spectacle-list-item-genre">MUSIQUE</div>
			<a href="#">
				<div class="spectacle-list-item-picture">
					<picture data-alt="" data-default-src="img/layout/spectacle/spectacle-item-sample_mobile.jpg">
						<source media="(min-width: 1025px)" srcset="img/layout/spectacle/spectacle-item-sample_desktop.jpg"/>
						<source media="(min-width: 481px)"  srcset="img/layout/spectacle/spectacle-item-sample_tablet.jpg"/>
						<source media="(max-width: 480px)"  srcset="img/layout/spectacle/spectacle-item-sample_mobile.jpg"/>
						<img src="" alt="" />
					</picture>
				</div>
				<div class="spectacle-list-item-title">ONE NIGHT OF QUEEN
				</div>
				<div class="spectacle-list-item-price">À PARTIR DE <span>29€</span></div>
			</a>
			<div class="spectacle-list-item-city">TOULOUSE</div>
			<div class="spectacle-list-item-date">Du Mercredi 9 décembre 2015 Au jeudi 16 Décembre 2015</div>
			<div class="spectacle-list-item-cta">
				<a href="" class="button button-golden-outline-small">DÉCOUVRIR</a>
			</div>
		</article>

	</section>
	<!-- end spectacle list -->


	<div class="spectacle-list-footer">
		<div class="spectacle-list-footer-toolbar js-pagination">
			<a href="#-1" class="pagination-prev">Précedent</a>
			<ul class="pagination-list"></ul>
			<a href="#+1" class="pagination-next">Suivant</a>
		</div>
	</div>

</div>
