<div>
	<div class="bg-concrete list-group-head">
		<div class="row">
			<div class="col-xs-1">
				<div class="list-item-flex-center">
					<div class="form-group">
						<input type="checkbox" name="name" value="" class="form-control">
					</div>
				</div>
			</div>
			<div class="col-xs-11">
				<div class="list-item-flex-center list-item-flex-right">
					<a href="./inbox-new.html" class="btn btn-primary pull-right btn-xs">Rédiger un nouveau message</a>
				</div>
			</div>
		</div>
	</div>
	<div class="list-conversation">
		<a href="inbox-conversation.html" class="conversation-item">
			<div class="row">
				<div class="col-xs-1">
					<div class="list-item-flex-center">
						<div class="form-group">
							<input type="checkbox" name="name" value="" class="form-control">
						</div>
					</div>
				</div>
				<div class="col-xs-9">
					<div class="media">
						<div class="media-left">
							<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/users/avatar/2015/11/a3a15c215d3c0693_jpg_168x168_crop_q85.jpg" alt="Marc" class="media-object" />
						</div>
						<div class="media-body">
							<b>Marc</b> – <small>12/08/2016</small>
							<h5 class="media-heading">
                  Salut, comment vas-tu depuis le temps ? ...
                </h5>
						</div>
					</div>
				</div>
				<div class="col-xs-1 col-sm-2">
					<div class="list-item-flex-right list-item-flex-center">
						<span class="glyphicon glyphicon-chevron-right"></span>
					</div>
				</div>
			</div>
		</a>
		<a href="inbox-conversation.html" class="conversation-item">
			<div class="row">
				<div class="col-xs-1">
					<div class="list-item-flex-center">
						<div class="form-group">
							<input type="checkbox" name="name" value="" class="form-control">
						</div>
					</div>
				</div>
				<div class="col-xs-9">
					<div class="media">
						<div class="media-left">
							<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/users/avatar/2014/08/18684df9b99b6c12_jpg_168x168_crop_q85.jpg" alt="Ian" class="media-object" />
						</div>
						<div class="media-body">
							<b>Ian</b> – <small>11/08/2016</small>
							<h5 class="media-heading">
                  Cette photo n&#x27;a rien à voir avec la Suisse ...
                </h5>
						</div>
					</div>
				</div>
				<div class="col-xs-1 col-sm-2">
					<div class="list-item-flex-right list-item-flex-center">
						<span class="glyphicon glyphicon-chevron-right"></span>
					</div>
				</div>
			</div>
		</a>
		<a href="inbox-conversation.html" class="conversation-item">
			<div class="row">
				<div class="col-xs-1">
					<div class="list-item-flex-center">
						<div class="form-group">
							<input type="checkbox" name="name" value="" class="form-control">
						</div>
					</div>
				</div>
				<div class="col-xs-9">
					<div class="media">
						<div class="media-left">
							<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/users/avatar/2009/10/c030407f8dc6d950_gif_168x168_crop_q85.jpg" alt="Jean-Paul" class="media-object" />
						</div>
						<div class="media-body">
							<b>Jean-Paul</b> – <small>11/08/2016</small>
							<h5 class="media-heading">
                  Cette nouvelle plate-forme, quelle classe ! ...
                </h5>
						</div>
					</div>
				</div>
				<div class="col-xs-1 col-sm-2">
					<div class="list-item-flex-right list-item-flex-center">
						<span class="glyphicon glyphicon-chevron-right"></span>
					</div>
				</div>
			</div>
		</a>
		<a href="inbox-conversation.html" class="conversation-item">
			<div class="row">
				<div class="col-xs-1">
					<div class="list-item-flex-center">
						<div class="form-group">
							<input type="checkbox" name="name" value="" class="form-control">
						</div>
					</div>
				</div>
				<div class="col-xs-9">
					<div class="media">
						<div class="media-left">
							<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/users/avatar/2011/01/ee68c10788b054e_JPG_168x168_crop_q85.jpg" alt="Pierre-Marie" class="media-object" />
						</div>
						<div class="media-body">
							<b>Pierre-Marie</b> – <small>11/08/2016</small>
							<h5 class="media-heading">
                  J&#x27;adore le logo ! ...
                </h5>
						</div>
					</div>
				</div>
				<div class="col-xs-1 col-sm-2">
					<div class="list-item-flex-right list-item-flex-center">
						<span class="glyphicon glyphicon-chevron-right"></span>
					</div>
				</div>
			</div>
		</a>
	</div>
	<div class="spacer spacer-sm"></div>
	<div class="row">
		<div class="col-xs-6 col-xs-offset-3">
			<button type="button" name="button" class="btn btn-block btn-default">Voir plus ...</button>
		</div>
	</div>
</div>

<div class="facet-sidebar">
	<div class="text-right">
		<button class="btn btn-link btn-xs" id="close-all-facets">Tout fermer</button>
	</div>
	<div class="facet-group open">
		<div class="facet-title">
			Périodes<span class="chevron pull-right text-danger"></span>
		</div>
		<ul>
			<li>
				<div class="checkbox">
					<label>
						<input type="checkbox" value="all" /> Toute</label>
					<span class="text-clear pull-right">587</span>
				</div>
			</li>
			<li>
				<div class="checkbox">
					<label>
						<input type="checkbox" value="before_1900" /> Avant 1900</label>
					<span class="text-clear pull-right">94</span>
				</div>
			</li>
			<li>
				<div class="checkbox">
					<label>
						<input type="checkbox" value="1900-1914" /> 1900 - 1914</label>
					<span class="text-clear pull-right">41</span>
				</div>
			</li>
			<li>
				<div class="checkbox">
					<label>
						<input type="checkbox" value="1914-1918" /> 1914 - 1918</label>
					<span class="text-clear pull-right">89</span>
				</div>
			</li>
			<li>
				<div class="checkbox">
					<label>
						<input type="checkbox" value="1918-1939" /> 1918 - 1939</label>
					<span class="text-clear pull-right">40</span>
				</div>
			</li>
			<li>
				<div class="checkbox">
					<label>
						<input type="checkbox" value="1939-1945" /> 1939 - 1945</label>
					<span class="text-clear pull-right">64</span>
				</div>
			</li>
			<li>
				<div class="checkbox">
					<label>
						<input type="checkbox" value="1945-1960" /> 1945 - 1960</label>
					<span class="text-clear pull-right">89</span>
				</div>
			</li>
			<li>
				<div class="checkbox">
					<label>
						<input type="checkbox" value="1960-1980" /> 1960 - 1980</label>
					<span class="text-clear pull-right">87</span>
				</div>
			</li>
			<li>
				<div class="checkbox">
					<label>
						<input type="checkbox" value="1980-2000" /> 1980 - 2000</label>
					<span class="text-clear pull-right">83</span>
				</div>
			</li>
			<li>
				<div class="checkbox">
					<label>
						<input type="checkbox" value="2000-2016" /> 2000 - 2016</label>
					<span class="text-clear pull-right">42</span>
				</div>
			</li>
			<li>
				<button class="facet-add">
					<span>+</span> Ajouter
				</button>
				<form class="facet-form hidden">
					<input type="text" class="form-control input-sm">
				</form>
			</li>
		</ul>
	</div>
	<div class="facet-group open">
		<div class="facet-title">
			Types<span class="chevron pull-right text-danger"></span>
		</div>
		<ul>
			<li>
				<div class="checkbox">
					<label>
						<input type="checkbox" value="all" /> Toutes</label>
					<span class="text-clear pull-right">1109</span>
				</div>
			</li>
			<li>
				<div class="checkbox">
					<label>
						<input type="checkbox" value="picture" /> Photographies</label>
					<span class="text-clear pull-right">456</span>
				</div>
			</li>
			<li>
				<div class="checkbox">
					<label>
						<input type="checkbox" value="sound" /> Bande sonore</label>
					<span class="text-clear pull-right">145</span>
				</div>
			</li>
			<li>
				<div class="checkbox">
					<label>
						<input type="checkbox" value="video" /> Vidéos</label>
					<span class="text-clear pull-right">98</span>
				</div>
			</li>
			<li>
				<div class="checkbox">
					<label>
						<input type="checkbox" value="articles" /> Articles</label>
					<span class="text-clear pull-right">410</span>
				</div>
			</li>
			<li>
				<button class="facet-add">
					<span>+</span> Ajouter
				</button>
				<form class="facet-form hidden">
					<input type="text" class="form-control input-sm">
				</form>
			</li>
		</ul>
	</div>
	<div class="facet-group open">
		<div class="facet-title">
			Catégories<span class="chevron pull-right text-danger"></span>
		</div>
		<ul>
			<li>
				<div class="checkbox">
					<label>
						<input type="checkbox" value="dui," /> lectus pede,</label>
					<span class="text-clear pull-right">24</span>
				</div>
			</li>
			<li>
				<div class="checkbox">
					<label>
						<input type="checkbox" value="sit amet, consectetuer" /> ac turpis egestas.</label>
					<span class="text-clear pull-right">480</span>
				</div>
			</li>
			<li>
				<div class="checkbox">
					<label>
						<input type="checkbox" value="montes, nascetur ridiculus" /> Morbi quis</label>
					<span class="text-clear pull-right">221</span>
				</div>
			</li>
			<li>
				<div class="checkbox">
					<label>
						<input type="checkbox" value="blandit" /> a mi</label>
					<span class="text-clear pull-right">347</span>
				</div>
			</li>
			<li>
				<div class="checkbox">
					<label>
						<input type="checkbox" value="vitae aliquam eros" /> metus sit</label>
					<span class="text-clear pull-right">358</span>
				</div>
			</li>
			<li>
				<div class="checkbox">
					<label>
						<input type="checkbox" value="malesuada" /> tempus</label>
					<span class="text-clear pull-right">115</span>
				</div>
			</li>
			<li>
				<div class="checkbox">
					<label>
						<input type="checkbox" value="aliquet. Phasellus" /> vitae semper egestas,</label>
					<span class="text-clear pull-right">285</span>
				</div>
			</li>
			<li>
				<div class="checkbox">
					<label>
						<input type="checkbox" value="nec tellus." /> sed</label>
					<span class="text-clear pull-right">493</span>
				</div>
			</li>
			<li>
				<button class="facet-add">
					<span>+</span> Ajouter
				</button>
				<form class="facet-form hidden">
					<input type="text" class="form-control input-sm">
				</form>
			</li>
		</ul>
	</div> <a href="creation-collection-recherche.html" class="btn btn-primary btn-sm">Enregistrer la recherche</a>
	<p><small class="text-clear text-sans"><em>Il vous est possible d'enregistrer cette recherche et d'en faire une collection.</em></small></p>
</div>

<div>
	<div class="bg-concrete list-group-head">
		<div class="row">
			<div class="col-xs-12">
				<div class="list-item-flex-center list-item-flex-right">
					<a href="./forum-new.html" class="btn btn-primary pull-right btn-xs">Créer un nouveau sujet</a>
				</div>
			</div>
		</div>
	</div>
	<div class="list-conversation">
		<table class="table table-striped">
			<tr>
				<td>
					<a href="./forum-conversation.html"><h4>Chargement de photos et Adobe Flash</h4></a>
					<b>Roberto</b> – <small>09/06/2016</small> - <small>Questions pratiques</small>
				</td>
				<td class="text-right">
					<small>3 réponses</small>
				</td>
			</tr>
			<tr>
				<td>
					<a href="./forum-conversation.html"><h4>La Séparation des Races de C.-F. Ramuzh</h4></a>
					<b>Michel</b> – <small>01/04/2016</small> - <small>Juste un message</small>
				</td>
				<td class="text-right">
					<small>aucune réponse</small>
				</td>
			</tr>
			<tr>
				<td>
					<a href="./forum-conversation.html"><h4>Fin des écoles ménagères en Suisse romande</h4></a>
					<b>Lise</b> – <small>24/03/2016</small> - <small>Echange d&#x27;informations et contenu</small>
				</td>
				<td class="text-right">
					<small>aucune réponse</small>
				</td>
			</tr>
			<tr>
				<td>
					<a href="./forum-conversation.html"><h4>Papeterie ou librairie à Lausanne</h4></a>
					<b>Florence</b> – <small>14/03/2016</small> - <small>Echange d&#x27;informations et contenu</small>
				</td>
				<td class="text-right">
					<small>3 réponses</small>
				</td>
			</tr>
			<tr>
				<td>
					<a href="./forum-conversation.html"><h4>Exposition nationale suisse - Genève 1896</h4></a>
					<b>Alison</b> – <small>22/02/2016</small> - <small>Echange d&#x27;informations et contenu</small>
				</td>
				<td class="text-right">
					<small>3 réponses</small>
				</td>
			</tr>
		</table>
	</div>
	<div class="spacer spacer-sm"></div>
	<div class="row">
		<div class="col-xs-6 col-xs-offset-3">
			<button type="button" name="button" class="btn btn-block btn-default">Voir plus ...</button>
		</div>
	</div>
</div>

<div id="result-map" class="map"></div>

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script>

<script>
	// Get data
	var req = new XMLHttpRequest();
	req.open('GET', 'http://web2016.notrehistoire.ch/api/v1/search?q=village', true);
	req.send();
	req.addEventListener("readystatechange", init, false);

	// Define cluster styles
	var styles = [{
		url: '../build/img/marker-small.png',
		width: 48,
		height: 48,
		anchor: [0, 0],
		textColor: '#FFFFFF',
		textSize: 12
	}, {
		url: '../build/img/marker-medium.png',
		width: 64,
		height: 64,
		anchor: [0, 0],
		textColor: '#FFFFFF',
		textSize: 15
	}, {
		url: '../build/img/marker-big.png',
		width: 80,
		height: 80,
		anchor: [0, 0],
		textColor: '#FFFFFF',
		textSize: 20
	}];

	// Init map
	function init() {
		var data = JSON.parse(req.responseText),
			center = new google.maps.LatLng(45.534764, 8.199763),
			bounds = new google.maps.LatLngBounds(),
			map = new google.maps.Map(document.getElementById('result-map'), {
				zoom: 6,
				center: center,
				mapTypeId: google.maps.MapTypeId.ROADMAP
			});

		// Define marker custom pin
		var image = new google.maps.MarkerImage("../build/img/pin.png",
			new google.maps.Size(26, 34),
			new google.maps.Point(0, 0),
			new google.maps.Point(13, 34));

		var markers = [];

		// Loop over data.results
		for (var i = 0; i <= data.results.length; i++) {
			var item = data.results[i];

			// Create marker only if the result is geolocated
			if (typeof item !== 'undefined' && item.lat != null && item.lng != null) {
				var latLng = new google.maps.LatLng(item.lat,
					item.lng);

				// Define marker
				var marker = new google.maps.Marker({
					position: latLng,
					icon: image,
					title: 'Hello from here !',
					map: map
				});
				markers.push(marker);

				// Add marker's position to map bounds
				bounds.extend(marker.position);

				// Define marker's popup
				switch (item.type) {
					case 'photo':
						var icon = 'camera';
						var thumb = '<img src="' + item.thumbnail + '" />';
						break;
					case 'video':
						var icon = 'video';
						var thumb = '<img src="' + item.thumbnail + '" />';
						break;
					case 'audio':
						var icon = 'microphone';
						var thumb = '<p>' + item.description + '</p>';
						break;
					case 'article':
						var icon = 'newspaper';
						var thumb = '<p>' + item.description + '</p>';
						break;
					default:
						var icon = 'camera';
						var thumb = '<img src="' + item.thumbnail + '" />';
				}

				var content = '<a href="#">' +
					'<div class="infobox-thumb">' +
					thumb +
					'</div>' +
					'<div class="infobox-caption">' +
					item.title +
					'<span class="icons icons-' + icon + '"></span>' +
					'</div>' +
					'</a>';

				var infowindow = new InfoBox({
					alignBottom: true,
					boxClass: 'infobox',
					boxStyle: {
						width: '280px'
					},
					content: content,
					closeBoxURL: '../build/img/close.png',
					disableAutoPan: false,
					infoBoxClearance: new google.maps.Size(1, 1),
					maxWidth: 150,
					pixelOffset: new google.maps.Size(-140, -40),
					zIndex: null
				});

				// Open popup on marker click
				google.maps.event.addListener(marker, 'click', (function(marker, content, infowindow) {
					return function() {
						infowindow.open(map, marker);
					};
				})(marker, content, infowindow));
			}
		}

		// Instantiate cluster module
		var markerCluster = new MarkerClusterer(map, markers, {
			styles: styles,
			gridSize: 65
		});

		// Fit map to markers
		map.fitBounds(bounds);
	}
</script>

<div class="container">
	<div class="spacer spacer-sm"></div>
	<h1 class="text-center">Le bonheur parmi les narcisses!</h1>
	<div class="row">
		<div class="col-sm-10 col-sm-offset-1">
			<div class="spacer spacer-sm"></div>
		</div>
	</div>
</div>
<div class="media-container">
	<div class="media-action"><a href="metadata.html" class="btn btn-xs btn-primary" role="button">Éditer mon média</a></div>
	<img src="http://notrehistoire.ch.s3.amazonaws.com/photos/2012/07/d0bc77c0a598c534.jpeg" alt="Le bonheur parmi les narcisses!" class="img-responsive" />
</div>
<div class="container">
	<div class="row">
		<div class="col-sm-10 col-sm-offset-1">
			<div class="media-features-bar bg-concrete">
				<div class="row">
					<div class="col-sm-4">
						<a href="#" class="btn btn-link active" data-alert-message="<i class='icons icons-ok'></i> Bravo, vous suivez le média : Le bonheur parmi les narcisses!"><i class="icons icons-heart"></i> Suivre</a>
						<a href="#" class="btn btn-link">
							<i class="icons icons-comment"></i> Commenter (4)
						</a>
					</div>
					<div class="col-sm-4 text-center">
						<a href="detail-fullscreen.html" class="btn btn-link">
							<i class="icons icons-fullscreen"></i>
						</a>
					</div>
					<div class="col-sm-4 text-right">
						<button class="btn btn-link">
							<i class="icons icons-share-alt"></i> Partager
						</button>
						<a href="add-to-collection.html" class="btn btn-link"><i class="icons icons-plus"></i> Ajouter</a>
						<button class="btn btn-link">
							<i class="icons icons-alert"></i>
						</button>
					</div>
				</div>
			</div>
			<div class="spacer spacer-xs"></div>
		</div>
	</div>

	<div class="spacer spacer-sm"></div>

	<div class="row">
		<div class="col-sm-6 col-sm-offset-1 media-description">
			<p>En 1972, nous voilà mon frère Christophe (au premier plan), mes cousines Florence et Valérie (avec leurs pulls blancs) ainsi que moi-même en train de cueillir des narcisses dans le pré derrière notre chalet aux Avants s/Montreux.</p>
			<p>(voir les photos du chalet et les explications : <a href='http://www.notrehistoire.ch/photo/view/23142/'>http://www.notrehistoire.ch/photo/view/23142/</a> et <a href='http://www.notrehistoire.ch/photo/view/41518/'>http://www.notrehistoire.ch/photo/view/41518/</a>				)</p>
			<p>Chaque année, la saison des narcisses était pour nous, les gamins, financièrement très intéressante ! Comme on le voit sur la photo, nous les ramassions, en faisions des bouquets et les vendions aux gens de passage dans le village. Il en venait beaucoup
				et de partout, en auto mais aussi en bus et en train. Beaucoup montaient eux-mêmes dans les champs, mais il y en avait toujours assez qui avaient « la cosse d’aller se ganguiller en haut les prés » et qui préféraient nous les acheter ! De même, à
				chaque passage du train, nous nous trouvions à la gare du MOB pour les vendre à ceux qui ne s’arrêtaient pas aux Avants, mais continuaient leur voyage en direction du Pays d'En-haut/Oberland Bernois ou de Montreux !</p>
		</div>
		<div class="col-sm-3 col-sm-offset-1">
			<div class="media-infobar">
				<h5>Date</h5>
				<p>mai 1972</p>

				<h5>Lieu</h5>
				<p>
					Route des Narcisses, 1833 Les Avants s/Montreux, Zwitserland
					<br>
					<a href="http://maps.google.com/">Voir sur la carte</a>
				</p>

				<h5>Popularité</h5>
				<p>
					<i class="icons icons-eye-open"></i> 220 vues
					<br>
					<i class="icons icons-heart text-danger"></i> 40 suivent
				</p>

				<h5>Auteur</h5>
				<p>
					<a href="#">Suzanne Ogay</a>
					<br>
				</p>

				<div class="spacer spacer-xs"></div>

				<div class="row">
					<div class="col-xs-3">
						<a href="#">
							<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/users/avatar/2013/02/babbd149042ee7f7_JPG_168x168_crop_q85.jpg" class="img-circle img-responsive" alt="Nicolas Ogay" />
						</a>
					</div>
					<div class="col-xs-9">
						<h5>Partagé par</h5>
						<a href="#">Nicolas Ogay</a>
					</div>
				</div>

				<div class="spacer spacer-sm"></div>

				<div class="license-block">
					license &rsaquo; <a href="#">Tous droits réservé</a>
				</div>

				<h5>Tags</h5>
				<div class="spacer spacer-xs"></div>
				<a href="#" class="label label-default">1972</a>
				<a href="#" class="label label-default">enfants</a>
				<a href="#" class="label label-default">les avants</a>
				<a href="#" class="label label-default">montreux</a>
				<a href="#" class="label label-default">narcisses</a>

				<h5>Thèmes</h5>
				<div class="spacer spacer-xs"></div>
				<a href="#" class="label label-default">Montreux</a>
				<a href="#" class="label label-default">Paysages romands</a>
				<a href="#" class="label label-default">La nature complice</a>
				<a href="#" class="label label-default">Fête des Narcisses de Montreux</a>
				<h5>Dossiers</h5>
				<div class="spacer spacer-xs"></div>
				<a href="#" class="label label-default"><strong>Thème 0</strong> &rsaquo; Les Avants</a>
				<a href="#" class="label label-default"><strong>Thème 1</strong> &rsaquo; Ma famille maternelle</a>
				<a href="#" class="label label-default"><strong>Thème 2</strong> &rsaquo; Le Narcisse “La Fleur” et tout autour</a>
				<a href="#" class="label label-default"><strong>Thème 3</strong> &rsaquo; Les fleurs</a>

			</div>
		</div>
	</div>
	<div class="spacer spacer-sm"></div>
</div>

<div class="bg-concrete">
	<div class="container">
		<div class="row">
			<div class="col-sm-6 col-sm-offset-1">
				<div class="spacer spacer-sm"></div>
				<h4>Commentaires <span class="text-clear">(3)</span></h4>
				<div class="spacer spacer-xs"></div>
				<div class="comment">
					<a href="#">
						<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/users/avatar/2013/02/babbd149042ee7f7_JPG_168x168_crop_q85.jpg" alt="Nicolas Ogay" class="img-responsive img-circle" />
					</a>
					<h5>
              <a href="#">Nicolas Ogay</a>
              <span class="text-clear">le 5 mars 2013</span>
            </h5>
					<div class="comment-content">
						Mais oui!!!! On envoyait comme cela des narcisses à nos voisins de vacances d&#x27;été, des hollandais.....qui sont devenus plus tard ma belle-famille! Oui, oui...ils louaient tous les étés une maison à côté de notre chalet! Les années passant, leur fille
						est devenue assez intéressante pour qu’elle devienne ma femme. Voilà, ceci amène cela....J&#x27;ai d&#x27;ailleurs une photo que je mettrai bientôt sur NH.CH où nous sommes ensemble à l&#x27;âge de 7 ans, à la fête du 1er août aux Avants. Sortez
						les violons.......!
					</div>
				</div>
				<div class="comment">
					<a href="#">
						<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/users/avatar/2015/09/83c8cc41e62c3c5a_jpg_168x168_crop_q85.jpg" alt="Sylvie Bazzanella" class="img-responsive img-circle" />
					</a>
					<h5>
              <a href="#">Sylvie Bazzanella</a>
              <span class="text-clear">le 5 mars 2013</span>
            </h5>
					<div class="comment-content">
						Avez-vous connu, Nicolas, les si jolis petits cartons dans lesquels nous placions délicatement les fleurs de mai que nous envoyions par la poste à notre famille.
					</div>
				</div>
				<div class="comment">
					<a href="#">
						<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/users/avatar/2015/08/876988c033485ccc_jpg_168x168_crop_q85.jpg" alt="Martine Desarzens" class="img-responsive img-circle" />
					</a>
					<h5>
              <a href="#">Martine Desarzens</a>
              <span class="text-clear">le 5 mars 2013</span>
            </h5>
					<div class="comment-content">
						Ravissant......
					</div>
				</div>
				<div class="spacer spacer-xs"></div>
				<h4>Ajouter un commentaire</h4>
				<div class="form-group">
					<label for="comment">Commencez à taper ici...</label>
					<textarea class="form-control" id="comment" rows="8"> </textarea>
				</div>
				<div class="spacer spacer-xs"></div>
				<a href="#" class="btn btn-primary pull-right">Commenter</a>
			</div>
		</div>
	</div>
	<div class="spacer"></div>
</div>

<div id="media-container" class="media-grid">
	<div class="media-item" data-w="3072" data-h="2304">
		<a href="detail.html">
			<div class="thumbnail" style="background-image: url('http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2015/07/626529120c3befc7_JPG_200x200_upscale_q85.jpg');">
				<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2015/07/626529120c3befc7_JPG_200x200_upscale_q85.jpg" alt="Villarimboud." class="img-responsive" />
			</div>
		</a>
		<div class="media-caption">
			<h5>
            <a href="detail.html">Villarimboud.</a>
          </h5>
			<p class="media-description">
				<br>
			</p>
			<div class="text-clear">
				18&thinsp;<small><i class="icons icons-eye-open"></i></small> | 0&thinsp;<small><i class="icons icons-heart"></i></small> | 0&thinsp;<small><i class="icons icons-comment"></i></small>
			</div>
			<span class="media-icon icons icons-camera"></span>
		</div>
	</div>
	<div class="media-item" data-w="2272" data-h="1704">
		<a href="detail.html">
			<div class="thumbnail" style="background-image: url('http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2012/09/58b1031254c69074_JPG_200x200_upscale_q85.jpg');">
				<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2012/09/58b1031254c69074_JPG_200x200_upscale_q85.jpg" alt="Villette " class="img-responsive" />
			</div>
		</a>
		<div class="media-caption">
			<h5>
            <a href="detail.html">Villette </a>
          </h5>
			<p class="media-description">
				<a href="#">vendanges</a>,
				<a href="#">raisin</a>,
				<a href="#">lavaux</a>,
				<a href="#">villette</a>,
				<br>
			</p>
			<div class="text-clear">
				37&thinsp;<small><i class="icons icons-eye-open"></i></small> | 0&thinsp;<small><i class="icons icons-heart"></i></small> | 0&thinsp;<small><i class="icons icons-comment"></i></small>
			</div>
			<span class="media-icon icons icons-camera"></span>
		</div>
	</div>
	<div class="media-item" data-w="1704" data-h="2272">
		<a href="detail.html">
			<div class="thumbnail" style="background-image: url('http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2012/09/7f5c6e4c8893ce93_JPG_200x200_upscale_q85.jpg');">
				<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2012/09/7f5c6e4c8893ce93_JPG_200x200_upscale_q85.jpg" alt="Villette " class="img-responsive" />
			</div>
		</a>
		<div class="media-caption">
			<h5>
            <a href="detail.html">Villette </a>
          </h5>
			<p class="media-description">
				<a href="#">vendanges</a>,
				<a href="#">raisin</a>,
				<a href="#">lavaux</a>,
				<a href="#">villette</a>,
				<br>
			</p>
			<div class="text-clear">
				43&thinsp;<small><i class="icons icons-eye-open"></i></small> | 0&thinsp;<small><i class="icons icons-heart"></i></small> | 0&thinsp;<small><i class="icons icons-comment"></i></small>
			</div>
			<span class="media-icon icons icons-camera"></span>
		</div>
	</div>
	<div class="media-item" data-w="845" data-h="634">
		<a href="detail.html">
			<div class="thumbnail" style="background-image: url('http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/01/6d4b2b0611cf531f_jpg_200x200_upscale_q85.jpg');">
				<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/01/6d4b2b0611cf531f_jpg_200x200_upscale_q85.jpg" alt="Villette" class="img-responsive" />
			</div>
		</a>
		<div class="media-caption">
			<h5>
            <a href="detail.html">Villette</a>
          </h5>
			<p class="media-description">
				<br>
			</p>
			<div class="text-clear">
				41&thinsp;<small><i class="icons icons-eye-open"></i></small> | 0&thinsp;<small><i class="icons icons-heart"></i></small> | 1&thinsp;<small><i class="icons icons-comment"></i></small>
			</div>
			<span class="media-icon icons icons-camera"></span>
		</div>
	</div>
	<div class="group-teaser" data-w="399" data-h="258">
		<a href="detail.html">
			<div class="thumbnail" style="background-image: url('http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/08/7bc6ace257cc85c8_jpg_200x200_upscale_q85.jpg');">
				<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/08/7bc6ace257cc85c8_jpg_200x200_upscale_q85.jpg" alt="Barques du Léman" class="img-responsive" />
			</div>
		</a>
		<div class="group-caption">
			<a href="detail.html">Barques du Léman</a>
			<div class="group-counter">
				183&nbsp;<small><i class="icons icons-file"></i></small>
			</div>
		</div>
		<div class="group-metadata">
			<a href="#">Vie quotidienne</a> <span class="text-clear">&rsaquo;</span> <a href="#">Loisirs</a> <span class="text-clear">&bull; Crée par</span> <a href="#">Sylvie Bazzanella</a>
		</div>
	</div>
	<div class="media-item" data-w="480" data-h="325">
		<a href="detail.html">
			<div class="thumbnail" style="background-image: url('http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/12/d1c4ef0fdb3ba38a_jpg_200x200_upscale_q85.jpg');">
				<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/12/d1c4ef0fdb3ba38a_jpg_200x200_upscale_q85.jpg" alt="Villeneuve" class="img-responsive" />
			</div>
		</a>
		<div class="media-caption">
			<h5>
            <a href="detail.html">Villeneuve</a>
          </h5>
			<p class="media-description">
				<br>
			</p>
			<div class="text-clear">
				78&thinsp;<small><i class="icons icons-eye-open"></i></small> | 0&thinsp;<small><i class="icons icons-heart"></i></small> | 0&thinsp;<small><i class="icons icons-comment"></i></small>
			</div>
			<span class="media-icon icons icons-camera"></span>
		</div>
	</div>
	<div class="media-item" data-w="2362" data-h="1682">
		<a href="detail.html">
			<div class="thumbnail" style="background-image: url('http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/12/1e51cd2ffb0760df_jpg_200x200_upscale_q85.jpg');">
				<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/12/1e51cd2ffb0760df_jpg_200x200_upscale_q85.jpg" alt="Villeneuve" class="img-responsive" />
			</div>
		</a>
		<div class="media-caption">
			<h5>
            <a href="detail.html">Villeneuve</a>
          </h5>
			<p class="media-description">
				<br>
			</p>
			<div class="text-clear">
				144&thinsp;<small><i class="icons icons-eye-open"></i></small> | 1&thinsp;<small><i class="icons icons-heart"></i></small> | 0&thinsp;<small><i class="icons icons-comment"></i></small>
			</div>
			<span class="media-icon icons icons-camera"></span>
		</div>
	</div>
	<div class="media-item" data-w="2362" data-h="1569">
		<div class="media-article">
			Anniversaire Mimelou Villeneuve (mars 1961) avec Carole Bula mon amie d'enfance
			<br>
		</div>
		<div class="media-caption">
			<h5>
            <a href="detail.html">Villeneuve</a>
          </h5>
			<p class="media-description">
				<br>
			</p>
			<div class="text-clear">
				62&thinsp;<small><i class="icons icons-eye-open"></i></small> | 0&thinsp;<small><i class="icons icons-heart"></i></small> | 0&thinsp;<small><i class="icons icons-comment"></i></small>
			</div>
			<span class="media-icon icons icons-newspaper"></span>
		</div>
	</div>
	<div class="media-item" data-w="5184" data-h="3456">
		<a href="detail.html">
			<div class="thumbnail" style="background-image: url('http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2013/08/89687fee5d7be359_JPG_200x200_upscale_q85.jpg');">
				<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2013/08/89687fee5d7be359_JPG_200x200_upscale_q85.jpg" alt="Villa" class="img-responsive" />
			</div>
		</a>
		<div class="media-caption">
			<h5>
            <a href="detail.html">Villa</a>
          </h5>
			<p class="media-description">
				<a href="#">les images égarées</a>,
				<br>
			</p>
			<div class="text-clear">
				40&thinsp;<small><i class="icons icons-eye-open"></i></small> | 0&thinsp;<small><i class="icons icons-heart"></i></small> | 0&thinsp;<small><i class="icons icons-comment"></i></small>
			</div>
			<span class="media-icon icons icons-camera"></span>
		</div>
	</div>
	<div class="media-item" data-w="650" data-h="972">
		<a href="detail.html">
			<div class="thumbnail" style="background-image: url('http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/04/93db5acccbf3478f_jpg_200x200_upscale_q85.jpg');">
				<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/04/93db5acccbf3478f_jpg_200x200_upscale_q85.jpg" alt="Villeneuve" class="img-responsive" />
			</div>
		</a>
		<div class="media-caption">
			<h5>
            <a href="detail.html">Villeneuve</a>
          </h5>
			<p class="media-description">
				<a href="#">villeneuve</a>,
				<a href="#">baud</a>,
				<a href="#">léaman</a>,
				<a href="#">église</a>,
				<br>
			</p>
			<div class="text-clear">
				101&thinsp;<small><i class="icons icons-eye-open"></i></small> | 0&thinsp;<small><i class="icons icons-heart"></i></small> | 0&thinsp;<small><i class="icons icons-comment"></i></small>
			</div>
			<span class="media-icon icons icons-microphone"></span>
		</div>
	</div>
	<div class="media-item" data-w="518" data-h="352">
		<a href="detail.html">
			<div class="thumbnail" style="background-image: url('http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/01/f8c683e16b3f1a13_tif_200x200_upscale_q85.jpg');">
				<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/01/f8c683e16b3f1a13_tif_200x200_upscale_q85.jpg" alt="Ville" class="img-responsive" />
			</div>
		</a>
		<div class="media-caption">
			<h5>
            <a href="detail.html">Ville</a>
          </h5>
			<p class="media-description">
				<br>
			</p>
			<div class="text-clear">
				27&thinsp;<small><i class="icons icons-eye-open"></i></small> | 0&thinsp;<small><i class="icons icons-heart"></i></small> | 1&thinsp;<small><i class="icons icons-comment"></i></small>
			</div>
			<span class="media-icon icons icons-video"></span>
		</div>
	</div>
	<div class="media-item" data-w="3056" data-h="1750">
		<a href="detail.html">
			<div class="thumbnail" style="background-image: url('http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/01/15a6919c49254f19_jpg_200x200_upscale_q85.jpg');">
				<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/01/15a6919c49254f19_jpg_200x200_upscale_q85.jpg" alt="Villette" class="img-responsive" />
			</div>
		</a>
		<div class="media-caption">
			<h5>
            <a href="detail.html">Villette</a>
          </h5>
			<p class="media-description">
				<br>
			</p>
			<div class="text-clear">
				45&thinsp;<small><i class="icons icons-eye-open"></i></small> | 0&thinsp;<small><i class="icons icons-heart"></i></small> | 1&thinsp;<small><i class="icons icons-comment"></i></small>
			</div>
			<span class="media-icon icons icons-camera"></span>
		</div>
	</div>
	<div class="media-item" data-w="1600" data-h="1067">
		<a href="detail.html">
			<div class="thumbnail" style="background-image: url('http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/10/ff200d8ba3e9427a_JPG_200x200_upscale_q85.jpg');">
				<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/10/ff200d8ba3e9427a_JPG_200x200_upscale_q85.jpg" alt="Villa" class="img-responsive" />
			</div>
		</a>
		<div class="media-caption">
			<h5>
            <a href="detail.html">Villa</a>
          </h5>
			<p class="media-description">
				<br>
			</p>
			<div class="text-clear">
				36&thinsp;<small><i class="icons icons-eye-open"></i></small> | 0&thinsp;<small><i class="icons icons-heart"></i></small> | 0&thinsp;<small><i class="icons icons-comment"></i></small>
			</div>
			<span class="media-icon icons icons-camera"></span>
		</div>
	</div>
	<div class="media-item" data-w="1066" data-h="1600">
		<a href="detail.html">
			<div class="thumbnail" style="background-image: url('http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/10/4e658d8b2ae3a870_JPG_200x200_upscale_q85.jpg');">
				<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/10/4e658d8b2ae3a870_JPG_200x200_upscale_q85.jpg" alt="Villa" class="img-responsive" />
			</div>
		</a>
		<div class="media-caption">
			<h5>
            <a href="detail.html">Villa</a>
          </h5>
			<p class="media-description">
				<br>
			</p>
			<div class="text-clear">
				43&thinsp;<small><i class="icons icons-eye-open"></i></small> | 0&thinsp;<small><i class="icons icons-heart"></i></small> | 0&thinsp;<small><i class="icons icons-comment"></i></small>
			</div>
			<span class="media-icon icons icons-camera"></span>
		</div>
	</div>
	<div class="media-item" data-w="1066" data-h="1600">
		<a href="detail.html">
			<div class="thumbnail" style="background-image: url('http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/10/a4381e499c9e37ed_JPG_200x200_upscale_q85.jpg');">
				<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/10/a4381e499c9e37ed_JPG_200x200_upscale_q85.jpg" alt="Villa" class="img-responsive" />
			</div>
		</a>
		<div class="media-caption">
			<h5>
            <a href="detail.html">Villa</a>
          </h5>
			<p class="media-description">
				<br>
			</p>
			<div class="text-clear">
				16&thinsp;<small><i class="icons icons-eye-open"></i></small> | 0&thinsp;<small><i class="icons icons-heart"></i></small> | 0&thinsp;<small><i class="icons icons-comment"></i></small>
			</div>
			<span class="media-icon icons icons-camera"></span>
		</div>
	</div>
	<div class="media-item" data-w="414" data-h="604">
		<a href="detail.html">
			<div class="thumbnail" style="background-image: url('http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/12/a8f2dde632675211_jpg_200x200_upscale_q85.jpg');">
				<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/12/a8f2dde632675211_jpg_200x200_upscale_q85.jpg" alt="Villeneuve" class="img-responsive" />
			</div>
		</a>
		<div class="media-caption">
			<h5>
            <a href="detail.html">Villeneuve</a>
          </h5>
			<p class="media-description">
				<br>
			</p>
			<div class="text-clear">
				51&thinsp;<small><i class="icons icons-eye-open"></i></small> | 0&thinsp;<small><i class="icons icons-heart"></i></small> | 0&thinsp;<small><i class="icons icons-comment"></i></small>
			</div>
			<span class="media-icon icons icons-camera"></span>
		</div>
	</div>
	<div class="media-item" data-w="604" data-h="414">
		<a href="detail.html">
			<div class="thumbnail" style="background-image: url('http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/12/e5858993f2f71ddc_jpg_200x200_upscale_q85.jpg');">
				<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/12/e5858993f2f71ddc_jpg_200x200_upscale_q85.jpg" alt="Villeneuve" class="img-responsive" />
			</div>
		</a>
		<div class="media-caption">
			<h5>
            <a href="detail.html">Villeneuve</a>
          </h5>
			<p class="media-description">
				<br>
			</p>
			<div class="text-clear">
				37&thinsp;<small><i class="icons icons-eye-open"></i></small> | 0&thinsp;<small><i class="icons icons-heart"></i></small> | 0&thinsp;<small><i class="icons icons-comment"></i></small>
			</div>
			<span class="media-icon icons icons-camera"></span>
		</div>
	</div>
	<div class="media-item" data-w="2362" data-h="1602">
		<a href="detail.html">
			<div class="thumbnail" style="background-image: url('http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/12/43d520681a58bcba_jpg_200x200_upscale_q85.jpg');">
				<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/12/43d520681a58bcba_jpg_200x200_upscale_q85.jpg" alt="Villeneuve" class="img-responsive" />
			</div>
		</a>
		<div class="media-caption">
			<h5>
            <a href="detail.html">Villeneuve</a>
          </h5>
			<p class="media-description">
				<br>
			</p>
			<div class="text-clear">
				24&thinsp;<small><i class="icons icons-eye-open"></i></small> | 0&thinsp;<small><i class="icons icons-heart"></i></small> | 0&thinsp;<small><i class="icons icons-comment"></i></small>
			</div>
			<span class="media-icon icons icons-camera"></span>
		</div>
	</div>
	<div class="media-item" data-w="2362" data-h="1510">
		<a href="detail.html">
			<div class="thumbnail" style="background-image: url('http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/12/ab7432a6512c6096_jpg_200x200_upscale_q85.jpg');">
				<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/12/ab7432a6512c6096_jpg_200x200_upscale_q85.jpg" alt="Villeneuve" class="img-responsive" />
			</div>
		</a>
		<div class="media-caption">
			<h5>
            <a href="detail.html">Villeneuve</a>
          </h5>
			<p class="media-description">
				<br>
			</p>
			<div class="text-clear">
				23&thinsp;<small><i class="icons icons-eye-open"></i></small> | 0&thinsp;<small><i class="icons icons-heart"></i></small> | 0&thinsp;<small><i class="icons icons-comment"></i></small>
			</div>
			<span class="media-icon icons icons-camera"></span>
		</div>
	</div>
	<div class="media-item" data-w="1772" data-h="1633">
		<a href="detail.html">
			<div class="thumbnail" style="background-image: url('http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/12/3c7082b569bd4dff_jpg_200x200_upscale_q85.jpg');">
				<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/12/3c7082b569bd4dff_jpg_200x200_upscale_q85.jpg" alt="Villeneuve" class="img-responsive" />
			</div>
		</a>
		<div class="media-caption">
			<h5>
            <a href="detail.html">Villeneuve</a>
          </h5>
			<p class="media-description">
				<br>
			</p>
			<div class="text-clear">
				156&thinsp;<small><i class="icons icons-eye-open"></i></small> | 0&thinsp;<small><i class="icons icons-heart"></i></small> | 0&thinsp;<small><i class="icons icons-comment"></i></small>
			</div>
			<span class="media-icon icons icons-camera"></span>
		</div>
	</div>
</div>

<div id="media-container" class="media-list">
	<div class="media-item" data-w="3072" data-h="2304">
		<a href="detail.html">
			<div class="thumbnail" style="background-image: url('http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2015/07/626529120c3befc7_JPG_200x200_upscale_q85.jpg');">
				<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2015/07/626529120c3befc7_JPG_200x200_upscale_q85.jpg" alt="Villarimboud." class="img-responsive" />
			</div>
		</a>
		<div class="media-caption">
			<h5>
            <a href="detail.html">Villarimboud.</a>
          </h5>
			<p class="media-description">
				<br>
			</p>
			<div class="text-clear">
				18&thinsp;<small><i class="icons icons-eye-open"></i></small> | 0&thinsp;<small><i class="icons icons-heart"></i></small> | 0&thinsp;<small><i class="icons icons-comment"></i></small>
			</div>
			<span class="media-icon icons icons-camera"></span>
		</div>
	</div>
	<div class="media-item" data-w="2272" data-h="1704">
		<a href="detail.html">
			<div class="thumbnail" style="background-image: url('http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2012/09/58b1031254c69074_JPG_200x200_upscale_q85.jpg');">
				<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2012/09/58b1031254c69074_JPG_200x200_upscale_q85.jpg" alt="Villette " class="img-responsive" />
			</div>
		</a>
		<div class="media-caption">
			<h5>
            <a href="detail.html">Villette </a>
          </h5>
			<p class="media-description">
				<a href="#">vendanges</a>,
				<a href="#">raisin</a>,
				<a href="#">lavaux</a>,
				<a href="#">villette</a>,
				<br>
			</p>
			<div class="text-clear">
				37&thinsp;<small><i class="icons icons-eye-open"></i></small> | 0&thinsp;<small><i class="icons icons-heart"></i></small> | 0&thinsp;<small><i class="icons icons-comment"></i></small>
			</div>
			<span class="media-icon icons icons-camera"></span>
		</div>
	</div>
	<div class="media-item" data-w="1704" data-h="2272">
		<a href="detail.html">
			<div class="thumbnail" style="background-image: url('http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2012/09/7f5c6e4c8893ce93_JPG_200x200_upscale_q85.jpg');">
				<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2012/09/7f5c6e4c8893ce93_JPG_200x200_upscale_q85.jpg" alt="Villette " class="img-responsive" />
			</div>
		</a>
		<div class="media-caption">
			<h5>
            <a href="detail.html">Villette </a>
          </h5>
			<p class="media-description">
				<a href="#">vendanges</a>,
				<a href="#">raisin</a>,
				<a href="#">lavaux</a>,
				<a href="#">villette</a>,
				<br>
			</p>
			<div class="text-clear">
				43&thinsp;<small><i class="icons icons-eye-open"></i></small> | 0&thinsp;<small><i class="icons icons-heart"></i></small> | 0&thinsp;<small><i class="icons icons-comment"></i></small>
			</div>
			<span class="media-icon icons icons-camera"></span>
		</div>
	</div>
	<div class="media-item" data-w="845" data-h="634">
		<a href="detail.html">
			<div class="thumbnail" style="background-image: url('http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/01/6d4b2b0611cf531f_jpg_200x200_upscale_q85.jpg');">
				<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/01/6d4b2b0611cf531f_jpg_200x200_upscale_q85.jpg" alt="Villette" class="img-responsive" />
			</div>
		</a>
		<div class="media-caption">
			<h5>
            <a href="detail.html">Villette</a>
          </h5>
			<p class="media-description">
				<br>
			</p>
			<div class="text-clear">
				41&thinsp;<small><i class="icons icons-eye-open"></i></small> | 0&thinsp;<small><i class="icons icons-heart"></i></small> | 1&thinsp;<small><i class="icons icons-comment"></i></small>
			</div>
			<span class="media-icon icons icons-camera"></span>
		</div>
	</div>
	<div class="group-teaser" data-w="399" data-h="258">
		<a href="detail.html">
			<div class="thumbnail" style="background-image: url('http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/08/7bc6ace257cc85c8_jpg_200x200_upscale_q85.jpg');">
				<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/08/7bc6ace257cc85c8_jpg_200x200_upscale_q85.jpg" alt="Barques du Léman" class="img-responsive" />
			</div>
		</a>
		<div class="group-caption">
			<a href="detail.html">Barques du Léman</a>
			<div class="group-counter">
				183&nbsp;<small><i class="icons icons-file"></i></small>
			</div>
		</div>
		<div class="group-metadata">
			<a href="#">Vie quotidienne</a> <span class="text-clear">&rsaquo;</span> <a href="#">Loisirs</a> <span class="text-clear">&bull; Crée par</span> <a href="#">Sylvie Bazzanella</a>
		</div>
	</div>
	<div class="media-item" data-w="480" data-h="325">
		<a href="detail.html">
			<div class="thumbnail" style="background-image: url('http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/12/d1c4ef0fdb3ba38a_jpg_200x200_upscale_q85.jpg');">
				<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/12/d1c4ef0fdb3ba38a_jpg_200x200_upscale_q85.jpg" alt="Villeneuve" class="img-responsive" />
			</div>
		</a>
		<div class="media-caption">
			<h5>
            <a href="detail.html">Villeneuve</a>
          </h5>
			<p class="media-description">
				<br>
			</p>
			<div class="text-clear">
				78&thinsp;<small><i class="icons icons-eye-open"></i></small> | 0&thinsp;<small><i class="icons icons-heart"></i></small> | 0&thinsp;<small><i class="icons icons-comment"></i></small>
			</div>
			<span class="media-icon icons icons-camera"></span>
		</div>
	</div>
	<div class="media-item" data-w="2362" data-h="1682">
		<a href="detail.html">
			<div class="thumbnail" style="background-image: url('http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/12/1e51cd2ffb0760df_jpg_200x200_upscale_q85.jpg');">
				<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/12/1e51cd2ffb0760df_jpg_200x200_upscale_q85.jpg" alt="Villeneuve" class="img-responsive" />
			</div>
		</a>
		<div class="media-caption">
			<h5>
            <a href="detail.html">Villeneuve</a>
          </h5>
			<p class="media-description">
				<br>
			</p>
			<div class="text-clear">
				144&thinsp;<small><i class="icons icons-eye-open"></i></small> | 1&thinsp;<small><i class="icons icons-heart"></i></small> | 0&thinsp;<small><i class="icons icons-comment"></i></small>
			</div>
			<span class="media-icon icons icons-camera"></span>
		</div>
	</div>
	<div class="media-item" data-w="2362" data-h="1569">
		<div class="media-article">
			Anniversaire Mimelou Villeneuve (mars 1961) avec Carole Bula mon amie d'enfance
			<br>
		</div>
		<div class="media-caption">
			<h5>
            <a href="detail.html">Villeneuve</a>
          </h5>
			<p class="media-description">
				<br>
			</p>
			<div class="text-clear">
				62&thinsp;<small><i class="icons icons-eye-open"></i></small> | 0&thinsp;<small><i class="icons icons-heart"></i></small> | 0&thinsp;<small><i class="icons icons-comment"></i></small>
			</div>
			<span class="media-icon icons icons-newspaper"></span>
		</div>
	</div>
	<div class="media-item" data-w="5184" data-h="3456">
		<a href="detail.html">
			<div class="thumbnail" style="background-image: url('http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2013/08/89687fee5d7be359_JPG_200x200_upscale_q85.jpg');">
				<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2013/08/89687fee5d7be359_JPG_200x200_upscale_q85.jpg" alt="Villa" class="img-responsive" />
			</div>
		</a>
		<div class="media-caption">
			<h5>
            <a href="detail.html">Villa</a>
          </h5>
			<p class="media-description">
				<a href="#">les images égarées</a>,
				<br>
			</p>
			<div class="text-clear">
				40&thinsp;<small><i class="icons icons-eye-open"></i></small> | 0&thinsp;<small><i class="icons icons-heart"></i></small> | 0&thinsp;<small><i class="icons icons-comment"></i></small>
			</div>
			<span class="media-icon icons icons-camera"></span>
		</div>
	</div>
	<div class="media-item" data-w="650" data-h="972">
		<a href="detail.html">
			<div class="thumbnail" style="background-image: url('http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/04/93db5acccbf3478f_jpg_200x200_upscale_q85.jpg');">
				<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/04/93db5acccbf3478f_jpg_200x200_upscale_q85.jpg" alt="Villeneuve" class="img-responsive" />
			</div>
		</a>
		<div class="media-caption">
			<h5>
            <a href="detail.html">Villeneuve</a>
          </h5>
			<p class="media-description">
				<a href="#">villeneuve</a>,
				<a href="#">baud</a>,
				<a href="#">léaman</a>,
				<a href="#">église</a>,
				<br>
			</p>
			<div class="text-clear">
				101&thinsp;<small><i class="icons icons-eye-open"></i></small> | 0&thinsp;<small><i class="icons icons-heart"></i></small> | 0&thinsp;<small><i class="icons icons-comment"></i></small>
			</div>
			<span class="media-icon icons icons-microphone"></span>
		</div>
	</div>
	<div class="media-item" data-w="518" data-h="352">
		<a href="detail.html">
			<div class="thumbnail" style="background-image: url('http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/01/f8c683e16b3f1a13_tif_200x200_upscale_q85.jpg');">
				<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/01/f8c683e16b3f1a13_tif_200x200_upscale_q85.jpg" alt="Ville" class="img-responsive" />
			</div>
		</a>
		<div class="media-caption">
			<h5>
            <a href="detail.html">Ville</a>
          </h5>
			<p class="media-description">
				<br>
			</p>
			<div class="text-clear">
				27&thinsp;<small><i class="icons icons-eye-open"></i></small> | 0&thinsp;<small><i class="icons icons-heart"></i></small> | 1&thinsp;<small><i class="icons icons-comment"></i></small>
			</div>
			<span class="media-icon icons icons-video"></span>
		</div>
	</div>
	<div class="media-item" data-w="3056" data-h="1750">
		<a href="detail.html">
			<div class="thumbnail" style="background-image: url('http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/01/15a6919c49254f19_jpg_200x200_upscale_q85.jpg');">
				<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/01/15a6919c49254f19_jpg_200x200_upscale_q85.jpg" alt="Villette" class="img-responsive" />
			</div>
		</a>
		<div class="media-caption">
			<h5>
            <a href="detail.html">Villette</a>
          </h5>
			<p class="media-description">
				<br>
			</p>
			<div class="text-clear">
				45&thinsp;<small><i class="icons icons-eye-open"></i></small> | 0&thinsp;<small><i class="icons icons-heart"></i></small> | 1&thinsp;<small><i class="icons icons-comment"></i></small>
			</div>
			<span class="media-icon icons icons-camera"></span>
		</div>
	</div>
	<div class="media-item" data-w="1600" data-h="1067">
		<a href="detail.html">
			<div class="thumbnail" style="background-image: url('http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/10/ff200d8ba3e9427a_JPG_200x200_upscale_q85.jpg');">
				<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/10/ff200d8ba3e9427a_JPG_200x200_upscale_q85.jpg" alt="Villa" class="img-responsive" />
			</div>
		</a>
		<div class="media-caption">
			<h5>
            <a href="detail.html">Villa</a>
          </h5>
			<p class="media-description">
				<br>
			</p>
			<div class="text-clear">
				36&thinsp;<small><i class="icons icons-eye-open"></i></small> | 0&thinsp;<small><i class="icons icons-heart"></i></small> | 0&thinsp;<small><i class="icons icons-comment"></i></small>
			</div>
			<span class="media-icon icons icons-camera"></span>
		</div>
	</div>
	<div class="media-item" data-w="1066" data-h="1600">
		<a href="detail.html">
			<div class="thumbnail" style="background-image: url('http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/10/4e658d8b2ae3a870_JPG_200x200_upscale_q85.jpg');">
				<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/10/4e658d8b2ae3a870_JPG_200x200_upscale_q85.jpg" alt="Villa" class="img-responsive" />
			</div>
		</a>
		<div class="media-caption">
			<h5>
            <a href="detail.html">Villa</a>
          </h5>
			<p class="media-description">
				<br>
			</p>
			<div class="text-clear">
				43&thinsp;<small><i class="icons icons-eye-open"></i></small> | 0&thinsp;<small><i class="icons icons-heart"></i></small> | 0&thinsp;<small><i class="icons icons-comment"></i></small>
			</div>
			<span class="media-icon icons icons-camera"></span>
		</div>
	</div>
	<div class="media-item" data-w="1066" data-h="1600">
		<a href="detail.html">
			<div class="thumbnail" style="background-image: url('http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/10/a4381e499c9e37ed_JPG_200x200_upscale_q85.jpg');">
				<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/10/a4381e499c9e37ed_JPG_200x200_upscale_q85.jpg" alt="Villa" class="img-responsive" />
			</div>
		</a>
		<div class="media-caption">
			<h5>
            <a href="detail.html">Villa</a>
          </h5>
			<p class="media-description">
				<br>
			</p>
			<div class="text-clear">
				16&thinsp;<small><i class="icons icons-eye-open"></i></small> | 0&thinsp;<small><i class="icons icons-heart"></i></small> | 0&thinsp;<small><i class="icons icons-comment"></i></small>
			</div>
			<span class="media-icon icons icons-camera"></span>
		</div>
	</div>
	<div class="media-item" data-w="414" data-h="604">
		<a href="detail.html">
			<div class="thumbnail" style="background-image: url('http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/12/a8f2dde632675211_jpg_200x200_upscale_q85.jpg');">
				<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/12/a8f2dde632675211_jpg_200x200_upscale_q85.jpg" alt="Villeneuve" class="img-responsive" />
			</div>
		</a>
		<div class="media-caption">
			<h5>
            <a href="detail.html">Villeneuve</a>
          </h5>
			<p class="media-description">
				<br>
			</p>
			<div class="text-clear">
				51&thinsp;<small><i class="icons icons-eye-open"></i></small> | 0&thinsp;<small><i class="icons icons-heart"></i></small> | 0&thinsp;<small><i class="icons icons-comment"></i></small>
			</div>
			<span class="media-icon icons icons-camera"></span>
		</div>
	</div>
	<div class="media-item" data-w="604" data-h="414">
		<a href="detail.html">
			<div class="thumbnail" style="background-image: url('http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/12/e5858993f2f71ddc_jpg_200x200_upscale_q85.jpg');">
				<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/12/e5858993f2f71ddc_jpg_200x200_upscale_q85.jpg" alt="Villeneuve" class="img-responsive" />
			</div>
		</a>
		<div class="media-caption">
			<h5>
            <a href="detail.html">Villeneuve</a>
          </h5>
			<p class="media-description">
				<br>
			</p>
			<div class="text-clear">
				37&thinsp;<small><i class="icons icons-eye-open"></i></small> | 0&thinsp;<small><i class="icons icons-heart"></i></small> | 0&thinsp;<small><i class="icons icons-comment"></i></small>
			</div>
			<span class="media-icon icons icons-camera"></span>
		</div>
	</div>
	<div class="media-item" data-w="2362" data-h="1602">
		<a href="detail.html">
			<div class="thumbnail" style="background-image: url('http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/12/43d520681a58bcba_jpg_200x200_upscale_q85.jpg');">
				<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/12/43d520681a58bcba_jpg_200x200_upscale_q85.jpg" alt="Villeneuve" class="img-responsive" />
			</div>
		</a>
		<div class="media-caption">
			<h5>
            <a href="detail.html">Villeneuve</a>
          </h5>
			<p class="media-description">
				<br>
			</p>
			<div class="text-clear">
				24&thinsp;<small><i class="icons icons-eye-open"></i></small> | 0&thinsp;<small><i class="icons icons-heart"></i></small> | 0&thinsp;<small><i class="icons icons-comment"></i></small>
			</div>
			<span class="media-icon icons icons-camera"></span>
		</div>
	</div>
	<div class="media-item" data-w="2362" data-h="1510">
		<a href="detail.html">
			<div class="thumbnail" style="background-image: url('http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/12/ab7432a6512c6096_jpg_200x200_upscale_q85.jpg');">
				<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/12/ab7432a6512c6096_jpg_200x200_upscale_q85.jpg" alt="Villeneuve" class="img-responsive" />
			</div>
		</a>
		<div class="media-caption">
			<h5>
            <a href="detail.html">Villeneuve</a>
          </h5>
			<p class="media-description">
				<br>
			</p>
			<div class="text-clear">
				23&thinsp;<small><i class="icons icons-eye-open"></i></small> | 0&thinsp;<small><i class="icons icons-heart"></i></small> | 0&thinsp;<small><i class="icons icons-comment"></i></small>
			</div>
			<span class="media-icon icons icons-camera"></span>
		</div>
	</div>
	<div class="media-item" data-w="1772" data-h="1633">
		<a href="detail.html">
			<div class="thumbnail" style="background-image: url('http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/12/3c7082b569bd4dff_jpg_200x200_upscale_q85.jpg');">
				<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/12/3c7082b569bd4dff_jpg_200x200_upscale_q85.jpg" alt="Villeneuve" class="img-responsive" />
			</div>
		</a>
		<div class="media-caption">
			<h5>
            <a href="detail.html">Villeneuve</a>
          </h5>
			<p class="media-description">
				<br>
			</p>
			<div class="text-clear">
				156&thinsp;<small><i class="icons icons-eye-open"></i></small> | 0&thinsp;<small><i class="icons icons-heart"></i></small> | 0&thinsp;<small><i class="icons icons-comment"></i></small>
			</div>
			<span class="media-icon icons icons-camera"></span>
		</div>
	</div>
</div>

<div class="media-mondrian media-mondrian-flex">

	<div class="media-mondrian-item media-mondrian-item-xl media-mondrian-item-first">
		<a href="http://web2016.notrehistoire.ch/medias/11742">
			<div class="media-mondrian-thumbnail">
				<img data-object-fit="cover" src="http://notrehistoire.ch.s3.amazonaws.com/photos/2010/03/b73135467630813c.jpg" class="img-responsive" alt="" />
			</div>
			<div class="media-mondrian-caption">
				<b>Photo du jour</b>
				<div>
					<em>Pendant les moissons, photographie prise dans les années 1940 à la Campagne de Budé, au Petit-Saconnex, à Genève ( collection Jean-Philippe Marti)</em>
				</div>
			</div>
		</a>
	</div>
</div>
<div class="media-mondrian media-mondrian-flex">

	<a class="media-mondrian-item media-mondrian-item-no-caption media-mondrian-item-slogan media-mondrian-item-text media-mondrian-item-md " href="http://web2016.notrehistoire.ch/pages/le-projet-notrehistoire-ch">
		<h1>La Suisse romande fait son&nbsp;Histoire</h1>
		<p class="lead">Partagez vos archives</p>
		<p class="lead">Consultez les collections des institutions</p>
		<p class="lead">Créez vos dossiers thématiques</p>
	</a>

	<a class="media-mondrian-item media-mondrian-item-sm" href="http://web2016.notrehistoire.ch/collection/919-hockey-romand">
		<div class="media-mondrian-thumbnail" style="background-image: url(http://notrehistoire.ch.s3.amazonaws.com/photos/2016/01/ca3a54f5d1236ffb.jpg);">
			<img src="http://notrehistoire.ch.s3.amazonaws.com/photos/2016/01/ca3a54f5d1236ffb.jpg" class="img-responsive" alt="" />
		</div>
		<div class="media-mondrian-caption">
			<b>Nouvelle collection</b>
			<div>
				<em>Hockey romand</em>
			</div>
		</div>
	</a>


	<a class="media-mondrian-item media-mondrian-item-md" href="http://web2016.notrehistoire.ch/medias/11166">
		<div class="media-mondrian-thumbnail" style="background-image: url(http://notrehistoire.ch.s3.amazonaws.com/photos/2010/03/c40a43931ede3320.jpg);">
			<img src="http://notrehistoire.ch.s3.amazonaws.com/photos/2010/03/c40a43931ede3320.jpg" class="img-responsive" alt="" />
		</div>
		<div class="media-mondrian-caption">
			<b>Document le plus aimé</b>
			<div>
				<em>Les 2 dragons et la cantinière</em>
			</div>
		</div>
	</a>

	<a class="media-mondrian-item media-mondrian-item-sm" href="http://web2016.notrehistoire.ch/collection/507-sous-la-protection-de-la-croix-rouge">
		<div class="media-mondrian-thumbnail" style="background-image: url(http://notrehistoire.ch.s3.amazonaws.com/photos/2013/07/45e27158b7d2603a.jpg);">
			<img src="http://notrehistoire.ch.s3.amazonaws.com/photos/2013/07/45e27158b7d2603a.jpg" class="img-responsive" alt="" />
		</div>
		<div class="media-mondrian-caption">
			<b>Nouveau dossier</b>
			<div>
				<em>Sous la protection du CICR</em>
			</div>
		</div>
	</a>

	<div class="media-mondrian-item media-mondrian-item-button media-mondrian-item-sm">
		<div class="media-mondrian-thumbnail" style="background-image: url(http://notrehistoire.ch.s3.amazonaws.com/photos/2011/06/26a029039e8a61c3.jpg);">
			<img src="http://notrehistoire.ch.s3.amazonaws.com/photos/2011/06/26a029039e8a61c3.jpg" class="img-responsive" alt="" />
		</div>
		<div class="media-mondrian-content">
			<a class="btn btn-primary btn-lg btn-block" href="http://web2016.notrehistoire.ch/search/">
      Toutes les collections ›
      </a>
		</div>
	</div>

	<a class="media-mondrian-item media-mondrian-item-number media-mondrian-item-no-caption media-mondrian-item-text media-mondrian-item-slogan media-mondrian-item-sm" href="http://web2016.notrehistoire.ch/search/">
		<h2>86'678 <span>documents</span></h2>
	</a>

	<a class="media-mondrian-item media-mondrian-item-sm" href="http://web2016.notrehistoire.ch/collection/816-les-tunnels-routiers-et-ferroviaires-en-suisse">
		<div class="media-mondrian-thumbnail" style="background-image: url(http://notrehistoire.ch.s3.amazonaws.com/photos/2016/02/a37aa61b77a1ea52.jpg);">
			<img src="http://notrehistoire.ch.s3.amazonaws.com/photos/2016/02/a37aa61b77a1ea52.jpg" class="img-responsive" alt="" />
		</div>
		<div class="media-mondrian-caption">
			<b>Collection la plus suivie</b>
			<div>
				<em>Les tunnels routiers et ferroviaires de Suisse</em>
			</div>
		</div>
	</a>

	<a class="media-mondrian-item media-mondrian-item-xs" href="http://web2016.notrehistoire.ch/medias/19943">
		<div class="media-mondrian-thumbnail" style="background-image: url(http://notrehistoire.ch.s3.amazonaws.com/photos/2011/04/8c5b36cbff94fc50.jpg);">
			<img src="http://notrehistoire.ch.s3.amazonaws.com/photos/2011/04/8c5b36cbff94fc50.jpg" class="img-responsive" alt="" />
		</div>
		<div class="media-mondrian-caption">
			<b>Document le plus consulté</b>
			<div>
				<em>À l'alpage</em>
			</div>
		</div>
	</a>

	<a class="media-mondrian-item media-mondrian-item-sm" href="http://web2016.notrehistoire.ch/collection/392-les-reperages-de-notrehistoire">
		<div class="media-mondrian-thumbnail" style="background-image: url(../build/img/NH-ski.png);">
			<img src="../build/img/NH-ski.png" class="img-responsive" alt="" />
		</div>
		<div class="media-mondrian-caption">
			<b>Dossier le plus consulté</b>
			<div>
				<em>Le ski gonflé</em>
			</div>
		</div>
	</a>

	<a class="media-mondrian-item media-mondrian-item-comment media-mondrian-item-sm" href="http://www.notrehistoire.ch/photo/view/60505/">
		<div class="media-mondrian-content">
			<blockquote>
				<p>Le port du pantalon était impensable pour les filles. A Genève, dans les années 1950, on nous interdisait le port du pantalon.</p>
				<footer>
					Claire Bärtschi-Flohr
				</footer>
			</blockquote>
		</div>
		<div class="media-mondrian-caption">
			<b>Commentaire - la tuilerie</b>
		</div>
	</a>

	<a class="media-mondrian-item media-mondrian-item-xs" href="http://web2016.notrehistoire.ch/profile/3448">
		<div class="media-mondrian-thumbnail" style="background-image: url(http://dhlabsrv4.epfl.ch/iiif_letemps/GDL_1969_11_19_1/full/2048,/0/default.jpg);">
			<img src="http://dhlabsrv4.epfl.ch/iiif_letemps/GDL_1969_11_19_1/full/2048,/0/default.jpg" class="img-responsive" alt="" />
		</div>
		<div class="media-mondrian-caption">
			<b>Le Temps archives</b>
		</div>
	</a>

	<a class="media-mondrian-item media-mondrian-item-xs" href="http://web2016.notrehistoire.ch/profile/8-television-suisse-romande">
		<div class="media-mondrian-thumbnail" style="background-image: url(../build/img/NH-archives-rts.png);">
			<img src="../build/img/NH-archives-rts.png" class="img-responsive" alt="" />
		</div>
		<div class="media-mondrian-caption">
			<b>Les Archives de la RTS</b>
		</div>
	</a>

	<div class="media-mondrian-item media-mondrian-item-button media-mondrian-item-sm">
		<div class="media-mondrian-thumbnail" style="background-image: url(http://notrehistoire.ch.s3.amazonaws.com/photos/2011/11/a7b52e09cb671e3f.jpg);">
			<img src="http://notrehistoire.ch.s3.amazonaws.com/photos/2011/11/a7b52e09cb671e3f.jpg" class="img-responsive" alt="" />
		</div>
		<div class="media-mondrian-content">
			<a class="btn btn-primary btn-lg btn-block" href="http://web2016.notrehistoire.ch/search/">
      Documents du jour ›
      </a>
		</div>
	</div>

	<a class="media-mondrian-item media-mondrian-item-md" href="http://web2016.notrehistoire.ch/collection/190-lieux-a-identifier">
		<div class="media-mondrian-thumbnail" style="background-image: url(http://notrehistoire.ch.s3.amazonaws.com/photos/2016/02/5839f988d108053e.jpg);">
			<img src="http://notrehistoire.ch.s3.amazonaws.com/photos/2016/02/5839f988d108053e.jpg" class="img-responsive" alt="" />
		</div>
		<div class="media-mondrian-caption">
			<b>Appel à témoin</b>
			<div>
				<em>Collège Calvin, Genève. Classe Maturité</em>
			</div>
		</div>
	</a>


	<a class="media-mondrian-item media-mondrian-item-text media-mondrian-item-sm" href="http://web2016.notrehistoire.ch/medias/3123">
		<div class="media-mondrian-content">
			<h4>"Rosette pour l’exemple" de Claude Torracinta</h4>
			<p>
				– Menacée d’arrestation en France, Rosette Wolczak franchit la frontière suisse le 24 septembre 1943. En raison de son âge et conformément aux directives fédérales, cette adolescente juive doit être accueillie.
			</p>
		</div>
		<div class="media-mondrian-caption">
			<b>Actualité</b>
		</div>
	</a>

	<a class="media-mondrian-item media-mondrian-item-sm" href="http://web2016.notrehistoire.ch/pages/le-projet-notrehistoire-ch">
		<div class="media-mondrian-thumbnail no-trick">
			<img src="../build/img/rts-fonsart-collaboration.jpg" class="img-responsive" alt="" />
		</div>
		<div class="media-mondrian-caption">
			<b>La plateforme notreHistoire.ch est éditée par la FONSART</b>
			<div><em>Elle est soutenue principalement par la RTS</em></div>
		</div>
	</a>

</div>

<nav class="navbar navbar-default">
	<form id="search-form" class="navbar-form navbar-left" role="search">

		<input type="text" class="form-control" placeholder="Rechercher" />
		<span class="icons icons-search" aria-hidden="true"></span>
	</form>
	<a class="navbar-brand" href="demo.html">
		<img class="img-responsive" src="./build/svg/nh-brand.svg" onerror="this.onerror=null; this.src='./build/img/nh-brand.png'" />
	</a>

	<a href="upload.html" class="btn btn-default navbar-btn navbar-right">
		<span class="hidden-xs">Ajouter un média</span>
		<span class="visible-xs icons icons-plus"></span>
	</a>

	<button id="search-mobile" type="button" class="btn btn-default navbar-btn navbar-right visible-xs">
		<span class="visible-xs icons icons-search"></span>
	</button>
</nav>

<div class="panel panel-left panel-animate panel-leave panel-leaving">
	<button type="button" class="navbar-toggle panel-button">
		<span class="sr-only">Toggle navigation</span>
		<span class="icon-bar panel-closed-component"></span>
		<span class="icon-bar panel-closed-component"></span>
		<span class="icon-bar panel-closed-component"></span>
		<span class="cross">&times;</span>
	</button>
	<div class="panel-content">
		<ul class="nav nav-stacked">
			<li role="presentation" class="active"><a href="#">
        Aide
        <span class="pull-right"><span class="chevron chevron-right chevron-thin"></span></span>
      </a></li>
			<li role="presentation"><a href="./forum.html">
        Forum
        <span class="pull-right"><span class="chevron chevron-right chevron-thin"></span></span>
      </a></li>
			<li role="presentation"><a href="#">
        Blog
        <span class="pull-right"><span class="chevron chevron-right chevron-thin"></span></span>
      </a></li>
			<li role="presentation"><a href="#">
        Contact
        <span class="pull-right"><span class="chevron chevron-right chevron-thin"></span></span>
      </a></li>
			<li role="presentation"><a href="#">
        Partenaires
        <span class="pull-right"><span class="chevron chevron-right chevron-thin"></span></span>
      </a></li>
		</ul>
		<div class="container-fluid">
			<hr />
			<h3>
        <div class="text-clear">Le mouvement</div>
        <b>NotreHistoire</b>
      </h3>
			<p class="text-clear text-sans">
				Oremière plateforme participative Suisse romande. Elle a pour but de créer une fresque de médias sur l'histoire de notre région.
				<br>
				<a href="#">En savoir plus</a>
			</p>
			<hr /> </div>
		<ul class="nav nav-stacked">
			<li role="presentation" class="active"><a href="#">
        Activités récentes
        <span class="pull-right"><span class="chevron chevron-right chevron-thin"></span></span>
      </a></li>
			<li role="presentation"><a href="#">
        Fonds documentaires
        <span class="pull-right"><span class="chevron chevron-right chevron-thin"></span></span>
      </a></li>
		</ul>
	</div>
	<div class="panel-bottom">
		<div class="container-fluid">
			<p class="text-clear text-sans">
				<small><a class="text-clear" href="#">Condition générales</a> - <a class="text-clear" href="#">Impressum</a></small>
			</p>
		</div>
	</div>
</div>

<div class="panel panel-right panel-animate panel-leave panel-leaving">
	<button type="button" class="btn btn-default panel-button">
		<span class="hidden-xs panel-closed-component">Connexion</span>
		<span class="visible-xs">
      <span class="icons icons-user panel-closed-component"></span>
		</span>
		<span class="cross">&times;</span>
	</button>
	<div class="panel-content">
		<div class="container-fluid">
			<div class="spacer spacer-xs"></div>
			<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/users/avatar/2015/08/876988c033485ccc_jpg_168x168_crop_q85.jpg" class="img-responsive img-circle pull-left">
			<h4>Martine Desarzens</h4>
			<div class="spacer spacer-sm"></div>
		</div>
		<ul class="nav nav-stacked">
			<li role="presentation" class="active"><a href="#">
        Afficher mon profil
        <span class="pull-right"><span class="chevron chevron-right chevron-thin"></span></span>
      </a></li>
			<li role="presentation"><a href="./inbox.html">
        Mes messages
        <span class="pull-right"><span class="chevron chevron-right chevron-thin"></span></span>
      </a></li>
			<li role="presentation"><a href="./profile-person.html">
        Mes médias
        <span class="pull-right"><span class="chevron chevron-right chevron-thin"></span></span>
      </a></li>
			<li role="presentation"><a href="./activites.html">
        Mes activités
        <span class="pull-right"><span class="chevron chevron-right chevron-thin"></span></span>
      </a></li>
			<li role="presentation"><a href="#">
        Mes préférences
        <span class="pull-right"><span class="chevron chevron-right chevron-thin"></span></span>
      </a></li>
		</ul>
		<div class="container-fluid">
			<hr />
			<p>
				<a href="creation-collection.html" class="btn btn-default btn-sm btn-block" role="button">Créer un dossier</a>
			</p>
			<hr /> <a href="#" class="text-sans text-clear">Me déconnecter</a>
		</div>
	</div>
</div>

<div class="profile-collection">
	<div class="spacer spacer-sm"></div>
	<h1 class="h2 text-center">Champéry</h1>
	<ul class="list-inline text-center text-sans">
		<li><i class="icons icons-heart"></i> 70k</li>
		<li><i class="icons icons-file"></i> 9506</li>
		&bull; Collection éditée par <a href="profile-person.html" alt="Sarah Muelheim">Sarah Muelheim</a>
	</ul>
	<hr />
	<div class="row">
		<div class="col-sm-4">
			<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/photos/2010/10/41d52c14611d0821_jpg_530x530_q85.jpg" alt="Champéry" class="img-responsive" />
		</div>
		<div class="col-sm-8">
			<p class="text-sans collection-bio" id="collection-bio">
				Vallée du district de Monthey où coule la Vièze et qui porte le nom de la commune, Val d'Illiez. De nombreux villages ou stations comme Champéry, Morgins, Troistorrents, Les Crosets, Champoussin... Tous les documents d'hier et d'aujourd'hui, en rapport
				avec cette vallée, sans les autres communes du district comme Monthey, Vouvry Lorem ipsum dolor sit amet, consectetur adipiscing elit. Erat enim Polemonis. Duo Reges: constructio interrete. Immo alio genere; A mene tu? Nihil opus est exemplis hoc
				facere longius. Potius inflammat, ut coercendi magis quam dedocendi esse videantur. Cum autem venissemus in Academiae non sine causa nobilitata spatia, solitudo erat ea, quam volueramus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tollenda
				est atque extrahenda radicitus.
				<br>
				<br>Nonne igitur tibi videntur, inquit, mala? Sed residamus, inquit, si placet. Sed ad illum redeo. Quo modo autem optimum, si bonum praeterea nullum est? Duo Reges: constructio interrete. Quos nisi redarguimus, omnis virtus, omne decus, omnis vera laus
				deserenda est. Quod cum dixissent, ille contra. Ergo adhuc, quantum equidem intellego, causa non videtur fuisse mutandi nominis. Haec para/doca illi, nos admirabilia dicamus.
			</p>
		</div>
	</div>
	<div class="spacer spacer-xs"></div>
</div>

<div class="media-features-bar bg-nobel text-center">
	<a href="#" class="btn btn-link active" data-alert-message="<i class='icons icons-ok'></i> Bravo, vous suivez la collection Champéry"><i class="icons icons-heart"></i> Suivre</a>
	<a href="#" class="btn btn-link"><i class="icons icons-share-alt"></i> Partager</a>
	<a href="#" class="btn btn-link"><i class="icons icons-hourglass"></i> Activités</a>
</div>

<div class="profile-found">
	<img src="http://www.ticketcorner.ch/obj/media/CH-eventim/galery/222x222/m/montreux-jazz-festival-tickets.gif" alt="Montreux Jazz Festival" class="img-responsive center-block" />
	<h1 class="h2 text-center">Montreux Jazz Festival</h1>
	<ul class="list-inline text-center text-sans">
		<li><i class="icons icons-heart"></i> 70k</li>
		<li><i class="icons icons-file"></i> 9506</li>
		&bull; Fond documentaire officiel, basé à Montreux
	</ul>
	<hr />
	<p class="text-sans person-bio" id="person-bio">
		En l’espace de 50 ans, le <a href='#'>Montreux Jazz Festival</a> est devenu un rendez-vous singulier dans le monde de la musique. La perspective de cette édition est d’abord l’occasion pour le Festival de raconter son histoire, d’affirmer ses valeurs
		et ses spécificités, afin de mieux se projeter dans l’avenir. Depuis sa création en 1967 par Claude Nobs, qui aurait fêté ses 80 ans en ce 4 février 2016, le Festival est rapidement devenu un réservoir de concerts fantastiques, de convergences artistiques
		folles, d’instants rares, d’anecdotes improbables, de culot et de paris ambitieux, d’impulsions décisives.
		<br>
		<br>Le Festival a accueilli dans son cadre idyllique des artistes d’envergure légendaire. Certains, comme Prince ou Deep Purple ont contribué à écrire la légende des lieux dans leurs chansons quand d’autres, tels David Bowie, Nina Simone ou Freddie Mercury
		sont venus vivre dans la région ou y enregistrer des albums. Le Festival a mélangé tous les genres musicaux, découvert et porté de jeunes talents, installant durablement la ville sur la carte du monde et dans le cœur du public. Il continue aujourd’hui
		de poursuivre les rêves déraisonnables de feu son fondateur. Claude Nobs aura insufflé à ses équipes d’hier, d’aujourd’hui et de demain sa passion et des valeurs fondamentales : le sens de l’accueil, la proximité et la convivialité avec les artistes,
		l’obsession pour la qualité du son, et cette capacité à provoquer les hasards afin que la magie opère. Pour faire vivre toutes les musiques au plus grand nombre dans des conditions optimales, Montreux a toujours tenu à se renouveler tant sur ses scènes
		principales que sur l’ensemble de ses scènes gratuites.
		<br>
		<br>Depuis ses débuts, visionnaire, le Festival enregistre minutieusement tous ses concerts au moyen des meilleures technologies du moment. Cette collection d’archives audiovisuelles unique au monde rassemble plus de 5'000 heures de musique live. Elle est
		aujourd’hui inscrite au Registre de la “Mémoire du Monde” de l’UNESCO.
	</p>
	<div class="spacer spacer-xs"></div>
</div>

<div class="media-features-bar bg-nobel text-center">
	<a href="#" class="btn btn-link active" data-alert-message="<i class='icons icons-ok'></i> Bravo, vous suivez Montreux Jazz Festival"><i class="icons icons-heart"></i> Suivre</a>
	<a href="#" class="btn btn-link"><i class="icons icons-share-alt"></i> Partager</a>
	<a href="#" class="btn btn-link"><i class="icons icons-hourglass"></i> Activités</a>
	<a href="#" class="btn btn-link"><i class="icons icons-send"></i> Envoyer un message</a>
</div>

<div class="spacer spacer-sm"></div>
<img src="http://notrehistoire.ch.s3-eu-west-1.amazonaws.com/users/avatar/2010/06/3df5d755692b4154_jpg_168x168_crop_q85.jpg" alt="Sarah Muehlheim" class="img-responsive img-circle center-block" />

<div class="profile-person">
	<h1 class="h2 text-center">Sarah Muehlheim</h1>
	<ul class="list-inline text-center text-sans">
		<li><i class="icons icons-camera"></i> 43</li>
		<li><i class="icons icons-video"></i> 12</li>
		<li><i class="icons icons-newspaper"></i> 3</li>
		<li><strong>Abonnés</strong> 38</li>
		<li><strong>Abonnements</strong> 79</li>
	</ul>
	<hr />
	<p class="text-sans person-bio" id="person-bio">
		Je suis née à Sion en Valais, je vis et travaille actuellement à Genève.Je suis curieuse et passionnée de l'histoire et surtout des archives photographique des modes de vie de l'époque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quia dolori
		non voluptas contraria est, sed doloris privatio. Sed ille, ut dixi, vitiose. Quamquam te quidem video minime esse deterritum. Que Manilium, ab iisque M. Huic mori optimum esse propter desperationem sapientiae, illi propter spem vivere. Pauca mutat
		vel plura sane; Quis est tam dissimile homini.
	</p>
	<div class="spacer spacer-xs"></div>
</div>

<div class="media-features-bar bg-nobel text-center">
	<a href="#" class="btn btn-link active" data-alert-message="<i class='icons icons-ok'></i> Bravo, vous suivez Sarah Muehlheim"><i class="icons icons-heart"></i> Suivre</a>
	<a href="#" class="btn btn-link"><i class="icons icons-share-alt"></i> Partager</a>
	<a href="#" class="btn btn-link"><i class="icons icons-hourglass"></i> Activités</a>
	<a href="#" class="btn btn-link"><i class="icons icons-send"></i> Envoyer un message</a>
</div>