<div class="page page--media-detail">
    <div class="page__content">
        <header class="o-header" data-header>
            <div class="o-header__side-element">
                <img src="../../img/logo.svg" alt="L'illustré logo" class="o-header__logo">
            </div>
            <nav class="m-nav" data-nav>
                <ul class="m-nav__menu">
                    <li class="m-nav__item">
                        <a class="m-nav__link" href="/">
							<svg class="a-icon" role="img" title="Accueil">
								<use xlink:href="#home" />
							</svg>
							<p class="m-nav__item-title">Accueil</p>
						</a>
                    </li>
                    <li class="m-nav__item">
                        <a class="m-nav__link" href="#">
							<svg class="a-icon" role="img" title="Reportages">
								<use xlink:href="#article" />
							</svg>
							<p class="m-nav__item-title">Reportages</p>
						</a>
                    </li>
                    <li class="m-nav__item">
                        <a class="m-nav__link" href="#">
							<svg class="a-icon" role="img" title="Portraits">
								<use xlink:href="#portrait" />
							</svg>
							<p class="m-nav__item-title">Portraits</p>
						</a>
                    </li>
                    <li class="m-nav__item">
                        <a class="m-nav__link" href="#">
							<svg class="a-icon" role="img" title="Vidéos">
								<use xlink:href="#video" />
							</svg>
							<p class="m-nav__item-title">Vidéos</p>
						</a>
                    </li>
                    <li class="m-nav__item is-current">
                        <a class="m-nav__link" href="#">
							<svg class="a-icon" role="img" title="Photos">
								<use xlink:href="#photo" />
							</svg>
							<p class="m-nav__item-title">Photos</p>
						</a>
                    </li>
                </ul>
            </nav>
            <div class="o-header__side-element o-header__side-element--right">
                <div class="o-header__side-element_content">
                    <a class="o-header__subscribe" href="#">S'abonner</a>
                    <a href="" class="o-header__search" rel="search">
						<svg class="a-icon" role="img" title="Recherche">
							<use xlink:href="#search" />
						</svg>
						<svg class="a-icon" role="img" title="Close">
							<use xlink:href="#close" />
						</svg>
					</a>
                </div>
            </div>

            <div class="o-search-bar " data-search>
                <div class="o-search-bar__wrapper">
                    <div class="grid-wrapper">
                        <div class="grid-container">
                            <div class="row">
                                <div class="col-xs-12 col-sm-10 col-sm-offset-1">
                                    <form action="#" class="o-search-bar__form">
                                        <p class="o-search-bar__form-label">Rechercher sur L’illustré</p>
                                        <div class="o-search-bar__input-wrapper">
                                            <input class="o-search-bar__input" id="input--search" type="text" required>
                                            <label for="input--search" class="o-search-bar__input-label">Entrer un mot clé ou un auteur</label>
                                            <label for="input--search" class="o-search-bar__input-label o-search-bar__input-label--mobile">Entrer un mot clé</label>
                                            <svg class="a-icon a-icon--primary" role="img" title="search">
									<use xlink:href="#search" />
								</svg>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="o-search-bar__backdrop"></div>
            </div>

        </header>
        <article class="t-article--photo">
            <div class="o-banner-detail o-banner-detail--media">
                <div class="o-banner-detail__content">
                    <img src="../../img/banner3.png" class="o-banner-detail__image" data-credit="Marc Wallberg">
                    <div class="o-banner-detail__content-inner">
                        <div class="o-banner-detail__wrapper">
                            <div class="o-banner-detail__container">
                                <div class="o-banner-detail__title-row">
                                    <div class="o-banner-detail__title-wrap">
                                        <h1 class="u-t-title-article">La Suisse comme vous ne l’avez encore jamais vue</h1>
                                    </div>
                                </div>
                                <div class="row o-banner__meta">
                                    <div class="o-banner-detail__meta-inner">
                                        <div class="o-banner-detail__tag-wrap">
                                            <a href="#" class="o-banner-detail__tag">photos</a>
                                            <a href="#" class="o-banner-detail__tag">hebdomadaire</a>
                                        </div>

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

                        <p class="o-banner-detail__photo-credit">© Marc Wallberg</p>

                    </div>
                    <div class="o-banner-detail__footer">
                        <div class="o-banner-detail__wrapper">
                            <div class="o-banner-detail__container">
                                <div class="o-banner-detail__footer-row">
                                    <div class="o-banner-detail__footer-inner">

                                        <div class="o-banner-detail__footer-data o-banner-detail__footer-data-label o-banner-detail__footer-data--photo">
                                            <svg class="a-icon a-icon--primary" role="img" title="La Suisse comme vous ne l’avez encore jamais vue">
												<use xlink:href="#photo" />
											</svg>
                                            <span class="o-banner-detail__footer-data-text">5 Photos</span>
                                        </div>

                                        <a class="o-banner-detail__next-article" href="#">
											<span>Au Vietnam, Bienvenue chez «Maman chance»</span>
											<svg class="a-icon a-icon--primary" role="img" title="La Suisse comme vous ne l’avez encore jamais vue">
												<use xlink:href="#chevron-right" />
											</svg>
										</a>

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

                    </div>
                </div>

                <a href="/img/gallery-1.png" rel="modal" class="o-banner-detail__cta">
                    <div class="o-banner-detail__cta-label"><span>Découvrir la galerie</span></div>
                    <div class="o-banner-detail__cta-icon">
                        <svg class="a-icon a-icon--negative" role="img" title="La Suisse comme vous ne l’avez encore jamais vue">
							<use xlink:href="#gallery" />
						</svg>
                    </div>
                </a>

            </div>
            <section class="t-article__media-content">
                <div class="t-article__media-content-wrapper">
                    <div class="t-article__media-content-container">
                        <div class="t-article__media-content-inner">
                            <div class="t-article__share-wrapper">
                                <div class="m-share" data-share>
                                    <div class="m-share__title-wrap  m-share__mobile m-share__mobile--closed">
                                        <svg class="a-icon" role="img" title="Partager">
			<use xlink:href="#share" />
		</svg>
                                        <p class="m-share__title">Partager</p>
                                    </div>
                                    <div class="m-share__list-wrap">
                                        <ul class="m-share__list">
                                            <li class="m-share__item">
                                                <a href="https://www.facebook.com/sharer/sharer.php?u&#x3D;#" class="m-share__item-link" target="_blank"><svg class="a-icon" role="img" title="">
	<use xlink:href="#facebook" />
</svg>
</a>
                                            </li>
                                            <li class="m-share__item">
                                                <a href="https://twitter.com/home?status&#x3D;#" class="m-share__item-link" target="_blank"><svg class="a-icon" role="img" title="">
	<use xlink:href="#twitter" />
</svg>
</a>
                                            </li>
                                            <li class="m-share__item">
                                                <a href="https://api.whatsapp.com/send?text&#x3D;#" class="m-share__item-link" target="_blank"><svg class="a-icon" role="img" title="">
	<use xlink:href="#whatsapp" />
</svg>
</a>
                                            </li>
                                            <li class="m-share__item">
                                                <a href="mailto:?subject&#x3D;Article Test&amp;body&#x3D;Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum molestiae voluptatem error molestias eum minima culpa nulla dolores rerum at!" class="m-share__item-link" target="_blank"><svg class="a-icon" role="img" title="">
	<use xlink:href="#mail" />
</svg>
</a>
                                            </li>
                                        </ul>
                                        <div class="m-share__close"><svg class="a-icon" role="img" title="close">
	<use xlink:href="#close" />
</svg>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="t-article__intro-wrap">
                                <div class="t-article__intro">
                                    Ses refrains sont indissociables de beaucoup de nos émotions. Avant son passage à Genève, le chanteur revient avec franchise et un parler cash sur les moments les plus importants de sa vie.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="t-article__content-gallery">
                    <figure class="m-gallery-block" data-gallery-block itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                        <div class="m-gallery-block__wrapper">
                            <div class="m-gallery-block__container">
                                <div class="m-gallery-block__row">
                                    <a href="../../img/gallery-1.png" rel="modal" class="m-gallery-block__link" itemprop="contentUrl">
                                        <div class="m-gallery-block__image-wrap">
                                            <img src="../../img/gallery-1.png" class="m-gallery-block__image" itemprop="thumbnail" alt="" data-credit="Marc Wallberg">

                                        </div>
                                        <div itemprop="caption description" class="m-gallery-block__credit">© Marc Wallberg</div>
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div class="m-gallery-block__caption-wrap">
                            <div class="m-gallery-block__caption-inner">
                                <div class="m-gallery-block__caption-row">
                                    <div class="m-gallery-block__caption-cta-wrap">
                                        <a href="../../img/gallery-1.png" class="m-gallery-block__caption-cta"><svg class="a-icon a-icon--negative" role="img" title="">
						<use xlink:href="#fullscreen" />
					</svg>
					</a>
                                    </div>
                                    <figcaption class="m-gallery-block__caption">
                                        <div class="m-gallery-block__caption-heading">Cette envie de partage, déjà présente avec le Big Bazar, cela vient d’où?</div>
                                        <div class="m-gallery-block__caption-text">De mes parents. C’étaient des passeurs dans tous les sens du terme puisqu’ils ont fait partie de la Résistance, ma mère passait des documents sous ma layette. Mon père était un vrai humaniste, une rue à Grenoble
                                            et une à Voreppe portent son nom. Il est mort il y a huit ans; quand ils ont dévoilé sa plaque au village, j’ai senti une vraie montée d’émotion. On ne célébrait pas le docteur Fugain, grand résistant, mais
                                            Pierrot, Mickey, son surnom, l’humaniste. Avec ma sœur, c’était irrésistible, on s’est mis à pleurer.</div>
                                    </figcaption>
                                </div>
                            </div>
                        </div>
                    </figure>
                    <figure class="m-gallery-block" data-gallery-block itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                        <div class="m-gallery-block__wrapper">
                            <div class="m-gallery-block__container">
                                <div class="m-gallery-block__row">
                                    <a href="../../img/portrait-sized-picture2.jpg" rel="modal" class="m-gallery-block__link" itemprop="contentUrl">
                                        <div class="m-gallery-block__image-wrap">
                                            <img src="../../img/portrait-sized-picture2.jpg" class="m-gallery-block__image" itemprop="thumbnail" alt="" data-credit="Marc Wallberg">

                                            <div class="m-gallery-block__cta">
                                                <svg class="a-icon a-icon--negative" role="img" title="">
														<use xlink:href="#fullscreen" />
													</svg>
                                            </div>

                                        </div>
                                        <div itemprop="caption description" class="m-gallery-block__credit">© Marc Wallberg</div>
                                    </a>
                                </div>
                            </div>
                        </div>

                    </figure>
                    <figure class="m-gallery-block" data-gallery-block itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                        <div class="m-gallery-block__wrapper">
                            <div class="m-gallery-block__container">
                                <div class="m-gallery-block__row">
                                    <a href="../../img/gallery-3.png" rel="modal" class="m-gallery-block__link" itemprop="contentUrl">
                                        <div class="m-gallery-block__image-wrap">
                                            <img src="../../img/gallery-3.png" class="m-gallery-block__image" itemprop="thumbnail" alt="" data-credit="Marc Wallberg">

                                        </div>
                                        <div itemprop="caption description" class="m-gallery-block__credit">© Marc Wallberg</div>
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div class="m-gallery-block__caption-wrap">
                            <div class="m-gallery-block__caption-inner">
                                <div class="m-gallery-block__caption-row">
                                    <div class="m-gallery-block__caption-cta-wrap">
                                        <a href="../../img/gallery-3.png" class="m-gallery-block__caption-cta"><svg class="a-icon a-icon--negative" role="img" title="">
						<use xlink:href="#fullscreen" />
					</svg>
					</a>
                                    </div>
                                    <figcaption class="m-gallery-block__caption">
                                        <div class="m-gallery-block__caption-heading">Cette envie de partage, déjà présente avec le Big Bazar, cela vient d’où?</div>
                                        <div class="m-gallery-block__caption-text">De mes parents. C’étaient des passeurs dans tous les sens du terme puisqu’ils ont fait partie de la Résistance, ma mère passait des documents sous ma layette. Mon père était un vrai humaniste, une rue à Grenoble
                                            et une à Voreppe portent son nom. Il est mort il y a huit ans; quand ils ont dévoilé sa plaque au village, j’ai senti une vraie montée d’émotion. On ne célébrait pas le docteur Fugain, grand résistant, mais
                                            Pierrot, Mickey, son surnom, l’humaniste. Avec ma sœur, c’était irrésistible, on s’est mis à pleurer.</div>
                                    </figcaption>
                                </div>
                            </div>
                        </div>
                    </figure>
                    <figure class="m-gallery-block" data-gallery-block itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                        <div class="m-gallery-block__wrapper">
                            <div class="m-gallery-block__container">
                                <div class="m-gallery-block__row">
                                    <a href="../../img/portrait-sized-picture1.jpg" rel="modal" class="m-gallery-block__link" itemprop="contentUrl">
                                        <div class="m-gallery-block__image-wrap">
                                            <img src="../../img/portrait-sized-picture1.jpg" class="m-gallery-block__image" itemprop="thumbnail" alt="" data-credit="Marc Wallberg">

                                        </div>
                                        <div itemprop="caption description" class="m-gallery-block__credit">© Marc Wallberg</div>
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div class="m-gallery-block__caption-wrap">
                            <div class="m-gallery-block__caption-inner">
                                <div class="m-gallery-block__caption-row">
                                    <div class="m-gallery-block__caption-cta-wrap">
                                        <a href="../../img/portrait-sized-picture1.jpg" class="m-gallery-block__caption-cta"><svg class="a-icon a-icon--negative" role="img" title="">
						<use xlink:href="#fullscreen" />
					</svg>
					</a>
                                    </div>
                                    <figcaption class="m-gallery-block__caption">
                                        <div class="m-gallery-block__caption-heading">Cette envie de partage, déjà présente avec le Big Bazar, cela vient d’où?</div>
                                        <div class="m-gallery-block__caption-text">De mes parents. C’étaient des passeurs dans tous les sens du terme puisqu’ils ont fait partie de la Résistance, ma mère passait des documents sous ma layette. Mon père était un vrai humaniste, une rue à Grenoble
                                            et une à Voreppe portent son nom. Il est mort il y a huit ans; quand ils ont dévoilé sa plaque au village, j’ai senti une vraie montée d’émotion. On ne célébrait pas le docteur Fugain, grand résistant, mais
                                            Pierrot, Mickey, son surnom, l’humaniste. Avec ma sœur, c’était irrésistible, on s’est mis à pleurer.</div>
                                    </figcaption>
                                </div>
                            </div>
                        </div>
                    </figure>
                    <figure class="m-gallery-block" data-gallery-block itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                        <div class="m-gallery-block__wrapper">
                            <div class="m-gallery-block__container">
                                <div class="m-gallery-block__row">
                                    <a href="../../img/banner3.png" rel="modal" class="m-gallery-block__link" itemprop="contentUrl">
                                        <div class="m-gallery-block__image-wrap">
                                            <img src="../../img/banner3.png" class="m-gallery-block__image" itemprop="thumbnail" alt="" data-credit="Marc Wallberg">

                                            <div class="m-gallery-block__cta">
                                                <svg class="a-icon a-icon--negative" role="img" title="">
														<use xlink:href="#fullscreen" />
													</svg>
                                            </div>

                                        </div>
                                        <div itemprop="caption description" class="m-gallery-block__credit">© Marc Wallberg</div>
                                    </a>
                                </div>
                            </div>
                        </div>

                    </figure>
                </div>
            </section>
        </article>
        <section class="o-article-list o-article-list--red-title">
            <h2 class="o-article-list__title">D&#x27;autres photos à découvrir</h2>
            <div class="o-article-list__wrap">
                <div class="o-article-list__cont">
                    <div class="o-article-list__inner">

                        <article class="m-preview-article m-preview-article--media o-article-list__item col-md-6" data-preview-article>
                            <a href="#" class="m-preview-article__link"></a>
                            <div class="m-preview-article__wrapper">
                                <div class="m-preview-article__image-wrapper">
                                    <img src="../../img/article-1.jpg" class="m-preview-article__image">

                                    <div class="m-preview-article__media-cta">
                                        <svg class="a-icon a-icon--negative" role="img" title="L&#x27;interview exclusive d&#x27;Adarsh Alem">
												<use xlink:href="#video" />
											</svg>
                                    </div>

                                    <div class="m-preview-article__media-cta">
                                        <svg class="a-gallery-number" width="55" height="55" viewBox="0 0 55 55" xmlns="http://www.w3.org/2000/svg" data-gallery-number>
												  <g fill="#FFF" fill-rule="evenodd">
												    <path fill-rule="nonzero" d="M11.124 36v2H5V8h36v6.074h-2V10H7v26z"/>
														<path class="frame" d="M14 47V17h36v30H14zm2-2h32V19H16v26z" fill-rule="nonzero"/>
														<text class="text" x="22" y="37">12</text>
												  </g>
												</svg>
                                    </div>

                                </div>

                                <div class="m-preview-article__content-wrapper">
                                    <a href="#" class="m-preview-article__content-link">
                                        <h1 class="m-preview-article__title">L&#x27;interview exclusive d&#x27;Adarsh Alem</h1>
                                        <p class="m-preview-article__excerpt">A Pully, à Genève, à Berne, des expositions sont organisées en l&#x27;honneur du peintre, mort il y a cent ans…</p>
                                    </a>
                                    <a href="#" class="m-preview-article__category-link">Photos</a>
                                </div>
                            </div>

                            <hr class="m-preview-article__meta-divider">
                            <div class="m-preview-article__meta">
                                <p class="m-preview-article__date-author-wrap"><span class="m-preview-article__date">2 mars 2018</span> <a class="m-preview-article__author-link" href="#">Patrick Baumann</a></p>
                                <a href="#" class="m-preview-article__category-link">Photos</a>
                            </div>
                        </article>

                        <article class="m-preview-article m-preview-article--media o-article-list__item col-md-6" data-preview-article>
                            <a href="#" class="m-preview-article__link"></a>
                            <div class="m-preview-article__wrapper">
                                <div class="m-preview-article__image-wrapper">
                                    <img src="../../img/article-2.jpg" class="m-preview-article__image">

                                    <div class="m-preview-article__media-cta">
                                        <svg class="a-icon a-icon--negative" role="img" title="L&#x27;interview exclusive nouveau lauréat 2018 du guide Michelin">
													<use xlink:href="#gallery" />
												</svg>
                                    </div>

                                </div>

                                <div class="m-preview-article__content-wrapper">
                                    <a href="#" class="m-preview-article__content-link">
                                        <h1 class="m-preview-article__title">L&#x27;interview exclusive nouveau lauréat 2018 du guide Michelin</h1>
                                        <p class="m-preview-article__excerpt">A Pully, à Genève, à Berne, des expositions sont organisées en l&#x27;honneur du peintre, mort il y a cent ans…</p>
                                    </a>
                                    <a href="#" class="m-preview-article__category-link">Photos</a>
                                </div>
                            </div>

                            <hr class="m-preview-article__meta-divider">
                            <div class="m-preview-article__meta">
                                <p class="m-preview-article__date-author-wrap"><span class="m-preview-article__date">2 mars 2018</span> <a class="m-preview-article__author-link" href="#">Patrick Baumann</a></p>
                                <a href="#" class="m-preview-article__category-link">Photos</a>
                            </div>
                        </article>

                        <article class="m-preview-article m-preview-article--media o-article-list__item col-md-6" data-preview-article>
                            <a href="#" class="m-preview-article__link"></a>
                            <div class="m-preview-article__wrapper">
                                <div class="m-preview-article__image-wrapper">
                                    <img src="../../img/article-3.jpg" class="m-preview-article__image">

                                    <div class="m-preview-article__media-cta">
                                        <svg class="a-gallery-number" width="55" height="55" viewBox="0 0 55 55" xmlns="http://www.w3.org/2000/svg" data-gallery-number>
												  <g fill="#FFF" fill-rule="evenodd">
												    <path fill-rule="nonzero" d="M11.124 36v2H5V8h36v6.074h-2V10H7v26z"/>
														<path class="frame" d="M14 47V17h36v30H14zm2-2h32V19H16v26z" fill-rule="nonzero"/>
														<text class="text" x="22" y="37">25</text>
												  </g>
												</svg>
                                    </div>

                                </div>

                                <div class="m-preview-article__content-wrapper">
                                    <a href="#" class="m-preview-article__content-link">
                                        <h1 class="m-preview-article__title">Découvrez le nouveau lauréat 2018 du guide Michelin</h1>
                                        <p class="m-preview-article__excerpt"></p>
                                    </a>
                                    <a href="#" class="m-preview-article__category-link">Photos</a>
                                </div>
                            </div>

                            <hr class="m-preview-article__meta-divider">
                            <div class="m-preview-article__meta">
                                <p class="m-preview-article__date-author-wrap"><span class="m-preview-article__date">2 mars 2018</span> <a class="m-preview-article__author-link" href="#">Patrick Baumann</a></p>
                                <a href="#" class="m-preview-article__category-link">Photos</a>
                            </div>
                        </article>

                        <article class="m-preview-article m-preview-article--media o-article-list__item col-md-6" data-preview-article>
                            <a href="#" class="m-preview-article__link"></a>
                            <div class="m-preview-article__wrapper">
                                <div class="m-preview-article__image-wrapper">
                                    <img src="../../img/article-highlight.jpg" class="m-preview-article__image">

                                    <div class="m-preview-article__media-cta">
                                        <svg class="a-gallery-number" width="55" height="55" viewBox="0 0 55 55" xmlns="http://www.w3.org/2000/svg" data-gallery-number>
												  <g fill="#FFF" fill-rule="evenodd">
												    <path fill-rule="nonzero" d="M11.124 36v2H5V8h36v6.074h-2V10H7v26z"/>
														<path class="frame" d="M14 47V17h36v30H14zm2-2h32V19H16v26z" fill-rule="nonzero"/>
														<text class="text" x="22" y="37">33</text>
												  </g>
												</svg>
                                    </div>

                                </div>

                                <div class="m-preview-article__content-wrapper">
                                    <a href="#" class="m-preview-article__content-link">
                                        <h1 class="m-preview-article__title">L&#x27;interview exclusif du nouveau lauréat 2018 du guide Michelin</h1>
                                        <p class="m-preview-article__excerpt"></p>
                                    </a>
                                    <a href="#" class="m-preview-article__category-link">Photos</a>
                                </div>
                            </div>

                            <hr class="m-preview-article__meta-divider">
                            <div class="m-preview-article__meta">
                                <p class="m-preview-article__date-author-wrap"><span class="m-preview-article__date">2 mars 2018</span> <a class="m-preview-article__author-link" href="#">Patrick Baumann</a></p>
                                <a href="#" class="m-preview-article__category-link">Photos</a>
                            </div>
                        </article>
                    </div>
                </div>
            </div>
        </section>

        <section class="o-newsletter ">
            <h2 class="o-newsletter__title">
                <span class="o-newsletter__title--short">Newsletter L&#x27;Illustré</span>
                <span class="o-newsletter__title--full">Recevoir la newsletter L&#x27;Illustré</span>
            </h2>
            <div class="o-newsletter__form-wrap">
                <form action="#" class="o-newsletter__form">
                    <div class="o-newsletter__form-inner">
                        <div class="o-newsletter__input-wrap">
                            <div class="o-newsletter__input">
                                <svg class="a-icon" role="img" title="e-mail">
							<use xlink:href="#email" />
						</svg>
                                <input class="o-newsletter__input-field" id="newsletter_input_email" name="newsletter-email" type="text" required>
                                <label for="newsletter_input_email" class="o-newsletter__input-label">Votre e-mail</label>
                            </div>
                        </div>
                        <div class="o-newsletter__btn">
                            <button type="submit" class="a-button ">
						<span>S&#x27;inscrire</span>
					</button>
                        </div>
                    </div>
                </form>
            </div>
        </section>

    </div>
    <!-- page-content -->
    <footer class="o-footer">
        <div class="o-footer__top">
            <div class="o-footer__wrapper">
                <div class="o-footer__container">
                    <div class="o-footer__top_wrap">
                        <img src="../../img/logo.svg" alt="L'illustré logo" class="o-footer__logo">
                        <nav class="o-footer__menu">
                            <a href="#" class="o-footer__menu_item"><span>Abonnements</span></a>
                            <a href="#" class="o-footer__menu_item"><span>Publicité</span></a>
                            <a href="#" class="o-footer__menu_item"><span>Services</span></a>
                            <a href="#" class="o-footer__menu_item"><span>À propos</span></a>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
        <div class="o-footer__bottom">
            <div class="o-footer__wrapper">
                <div class="o-footer__container">
                    <div class="o-footer__bottom_wrap">
                        <nav class="o-footer__social">
                            <div class="o-footer__social_wrap">
                                <a href="#" class="o-footer__social_item">
										<svg class="a-icon" role="img" title="Facebook">
											<use xlink:href="#facebook" />
										</svg>
									</a>
                                <a href="#" class="o-footer__social_item">
										<svg class="a-icon" role="img" title="Twitter">
											<use xlink:href="#twitter" />
										</svg>
									</a>
                                <a href="#" class="o-footer__social_item">
										<svg class="a-icon" role="img" title="instagram">
											<use xlink:href="#instagram" />
										</svg>
									</a>
                                <a href="#" class="o-footer__social_item">
										<svg class="a-icon" role="img" title="YouTube">
											<use xlink:href="#youtube" />
										</svg>
									</a>
                            </div>
                        </nav>
                        <nav class="o-footer__legal">
                            <a href="#" class="o-footer__legal_item">Mentions légales</a>
                            <a href="#" class="o-footer__legal_item">Impressum</a>
                        </nav>
                        <div class="o-footer__copyright">© 2018 Ringier Axel Springer Suisse SA</div>
                    </div>
                </div>
            </div>
        </div>
    </footer>

</div>
<div class="page page--media-detail">
	<div class="page__content">
		{{> '@o-header' header }}
		<article class="t-article--photo">
			{{> '@o-banner-detail' banner }}
			<section class="t-article__media-content">
				<div class="t-article__media-content-wrapper">
					<div class="t-article__media-content-container">
						<div class="t-article__media-content-inner">
							<div class="t-article__share-wrapper">
								{{ render '@m-share' }}
							</div>
							<div class="t-article__intro-wrap">
								<div class="t-article__intro">
									{{ content.intro }}
								</div>
							</div>
						</div>
						{{#if content.video}}
						<div class="t-article__content-video-wrap">
							<div class="t-article__content-video">
								{{ render '@m-video-block' }}
							</div>
						</div>
						{{/if}}
					</div>
				</div>
				{{#if content.photos}}
				<div class="t-article__content-gallery">
				{{#each content.photos}}
					{{> "@m-gallery-block" }}
				{{/each}}
				</div>
				{{/if}}
			</section>
		</article>
		{{ render '@o-article-list--red-title' list merge=true }}
		{{ render '@o-newsletter' }}
	</div> <!-- page-content -->
	{{ render '@o-footer' }}
</div>
  • Content:
    .page--media-detail {
    
    	@extend %page-wrapping-vertical;
    
    	.o-header,
    	.o-footer,
    	.page__content,
    	.t-article__share-wrapper {
    		@extend %page-wrapping;
    	}
    
    	.t-article__media-content {
    		@include fluid-props(margin-top, $fluid-min, $fluid-max, 0px, 50px);
    	}
    
    	.t-article__media-content-wrapper {
    		@extend .grid-wrapper;
    	}
    
    	.t-article__media-content-container {
    		@extend .grid-container;
    		padding-left: 0;
    		padding-right: 0;
    	}
    
    	.t-article__media-content-inner,
    	.t-article__content-video-wrap {
    		@extend .row;
    	}
    
    	.t-article__content-video-wrap,
    	.t-article__content-gallery {
    		@include fluid-props(margin-top, $sm-breakpoint, $fluid-max, 40px, 70px);
    	}
    	.t-article__content-gallery {
    		@include fluid-props(margin-bottom, $fluid-min, $fluid-max, 40px, 130px);
    	}
    
    	.t-article__intro-wrap {
    		@extend .col-xs-12;
    		@extend .col-sm-8;
    		@extend .col-sm-offset-1;
    		position: relative;
    
    		&::after {
    			content: '';
    			position: absolute;
    			left: 0;
    			bottom: 0;
    			width: 100%;
    			height: 1px;
    
    			background-color: $color-text-lighten;
    		}
    	}
    
    	.t-article__intro {
    		position: relative;
    		@extend .u-t-excerpt;
    
    		margin-left: 8px;
    		margin-right: 8px;
    
    
    
    		@include media( $sm-breakpoint ) {
    			margin-left: 0;
    			margin-right: 0
    		}
    
    
    
    		&::after {
    			display: none !important;
    		}
    	}
    
    	.t-article {
    
    		&__photo,
    		&__media-content {
    			position: relative;
    		}
    
    		&__share-wrapper {
    			position: relative;
    			top: 0;
    			height: auto;
    		}
    	}
    
    	.t-article__content-video {
    		@extend .col-xs-12;
    		@extend .col-sm-10;
    		@extend .col-sm-offset-1;
    	}
    
    	.m-gallery-block {
    		@include fluid-props(margin-bottom, $fluid-min, $fluid-max, 48px, 96px);
    
    
    		&:last-child {
    			margin-bottom: 0;
    		}
    	}
    
    	// .o-article-list {
    	// 	@include fluid-props(margin-bottom, $fluid-min, $fluid-max, 0px, 20px);
    
    	// 	&__title {
    	// 		@include fluid-props(margin-top, $fluid-min, $fluid-max, 45px, 155px);
    	// 	}
    	// }
    }
    
  • URL: /components/raw/media-detail/_media-detail.scss
  • Filesystem Path: src/components/templates/media-detail/_media-detail.scss
  • Size: 1.9 KB
{
  "header": {
    "search": true,
    "nav": {
      "links": [
        {
          "name": "Accueil",
          "url": "/",
          "icon": {
            "name": "home",
            "title": "Accueil"
          }
        },
        {
          "name": "Reportages",
          "url": "#",
          "icon": {
            "name": "article",
            "title": "Reportages"
          }
        },
        {
          "name": "Portraits",
          "url": "#",
          "icon": {
            "name": "portrait",
            "title": "Portraits"
          }
        },
        {
          "name": "Vidéos",
          "url": "#",
          "icon": {
            "name": "video",
            "title": "Vidéos"
          }
        },
        {
          "name": "Photos",
          "current": true,
          "url": "#",
          "icon": {
            "name": "photo",
            "title": "Photos"
          }
        }
      ]
    }
  },
  "banner": {
    "image": "/img/banner3.png",
    "title": "La Suisse comme vous ne l’avez encore jamais vue",
    "category": "photos",
    "tags": [
      "hebdomadaire"
    ],
    "numphotos": 5,
    "photocredit": "Marc Wallberg",
    "next": {
      "title": "Au Vietnam, Bienvenue chez «Maman chance»",
      "link": "#"
    },
    "cta": {
      "link": "/img/gallery-1.png",
      "label": "Découvrir la galerie",
      "icon": "gallery"
    },
    "modifiers": [
      "media"
    ]
  },
  "content": {
    "intro": "Ses refrains sont indissociables de beaucoup de nos émotions. Avant son passage à Genève, le chanteur revient avec franchise et un parler cash sur les moments les plus importants de sa vie.",
    "photos": [
      {
        "image": "/img/gallery-1.png",
        "imagelink": "/img/gallery-1.png",
        "imagecredit": "Marc Wallberg",
        "caption": {
          "title": "Cette envie de partage, déjà présente avec le Big Bazar, cela vient d’où?",
          "text": "De mes parents. C’étaient des passeurs dans tous les sens du terme puisqu’ils ont fait partie de la Résistance, ma mère passait des documents sous ma layette. Mon père était un vrai humaniste, une rue à Grenoble et une à Voreppe portent son nom. Il est mort il y a huit ans; quand ils ont dévoilé sa plaque au village, j’ai senti une vraie montée d’émotion. On ne célébrait pas le docteur Fugain, grand résistant, mais Pierrot, Mickey, son surnom, l’humaniste. Avec ma sœur, c’était irrésistible, on s’est mis à pleurer."
        }
      },
      {
        "image": "/img/portrait-sized-picture2.jpg",
        "imagelink": "/img/portrait-sized-picture2.jpg",
        "imagecredit": "Marc Wallberg"
      },
      {
        "image": "/img/gallery-3.png",
        "imagelink": "/img/gallery-3.png",
        "imagecredit": "Marc Wallberg",
        "caption": {
          "title": "Cette envie de partage, déjà présente avec le Big Bazar, cela vient d’où?",
          "text": "De mes parents. C’étaient des passeurs dans tous les sens du terme puisqu’ils ont fait partie de la Résistance, ma mère passait des documents sous ma layette. Mon père était un vrai humaniste, une rue à Grenoble et une à Voreppe portent son nom. Il est mort il y a huit ans; quand ils ont dévoilé sa plaque au village, j’ai senti une vraie montée d’émotion. On ne célébrait pas le docteur Fugain, grand résistant, mais Pierrot, Mickey, son surnom, l’humaniste. Avec ma sœur, c’était irrésistible, on s’est mis à pleurer."
        }
      },
      {
        "image": "/img/portrait-sized-picture1.jpg",
        "imagelink": "/img/portrait-sized-picture1.jpg",
        "imagecredit": "Marc Wallberg",
        "caption": {
          "title": "Cette envie de partage, déjà présente avec le Big Bazar, cela vient d’où?",
          "text": "De mes parents. C’étaient des passeurs dans tous les sens du terme puisqu’ils ont fait partie de la Résistance, ma mère passait des documents sous ma layette. Mon père était un vrai humaniste, une rue à Grenoble et une à Voreppe portent son nom. Il est mort il y a huit ans; quand ils ont dévoilé sa plaque au village, j’ai senti une vraie montée d’émotion. On ne célébrait pas le docteur Fugain, grand résistant, mais Pierrot, Mickey, son surnom, l’humaniste. Avec ma sœur, c’était irrésistible, on s’est mis à pleurer."
        }
      },
      {
        "image": "/img/banner3.png",
        "imagelink": "/img/banner3.png",
        "imagecredit": "Marc Wallberg"
      }
    ]
  },
  "list": {
    "title": "D'autres photos à découvrir",
    "articles": [
      {
        "columns": 6,
        "data": {
          "image": "/img/article-1.jpg",
          "title": "L'interview exclusive d'Adarsh Alem",
          "excerpt": "A Pully, à Genève, à Berne, des expositions sont organisées en l'honneur du peintre, mort il y a cent ans…",
          "date": "2 mars 2018",
          "author": "Patrick Baumann",
          "articlelink": "#",
          "categorylink": "#",
          "authorlink": "#",
          "category": "Photos",
          "gallery": true,
          "numphotos": 12,
          "modifiers": [
            "media"
          ]
        }
      },
      {
        "columns": 6,
        "data": {
          "image": "/img/article-2.jpg",
          "title": "L'interview exclusive nouveau lauréat 2018 du guide Michelin",
          "excerpt": "A Pully, à Genève, à Berne, des expositions sont organisées en l'honneur du peintre, mort il y a cent ans…",
          "date": "2 mars 2018",
          "author": "Patrick Baumann",
          "articlelink": "#",
          "categorylink": "#",
          "authorlink": "#",
          "category": "Photos",
          "gallery": true,
          "numphotos": 25,
          "modifiers": [
            "media"
          ]
        }
      },
      {
        "columns": 6,
        "data": {
          "image": "/img/article-3.jpg",
          "title": "Découvrez le nouveau lauréat 2018 du guide Michelin",
          "date": "2 mars 2018",
          "author": "Patrick Baumann",
          "articlelink": "#",
          "categorylink": "#",
          "authorlink": "#",
          "category": "Photos",
          "gallery": true,
          "numphotos": 25,
          "modifiers": [
            "media"
          ]
        }
      },
      {
        "columns": 6,
        "data": {
          "image": "/img/article-highlight.jpg",
          "title": "L'interview exclusif du nouveau lauréat 2018 du guide Michelin",
          "date": "2 mars 2018",
          "author": "Patrick Baumann",
          "articlelink": "#",
          "categorylink": "#",
          "authorlink": "#",
          "category": "Photos",
          "gallery": true,
          "numphotos": 33,
          "modifiers": [
            "media"
          ]
        }
      }
    ]
  },
  "topad": true
}

CHANGELOG


v1.0.0 - 12/06/2018