{#
/**
 * @file
 * Bartik's theme implementation to display a node.
 *
 * Available variables:
 * - node: The node entity with limited access to object properties and methods.
 *   Only method names starting with "get", "has", or "is" and a few common
 *   methods such as "id", "label", and "bundle" are available. For example:
 *   - node.getCreatedTime() will return the node creation timestamp.
 *   - node.hasField('field_example') returns TRUE if the node bundle includes
 *     field_example. (This does not indicate the presence of a value in this
 *     field.)
 *   - node.isPublished() will return whether the node is published or not.
 *   Calling other methods, such as node.delete(), will result in an exception.
 *   See \Drupal\node\Entity\Node for a full list of public properties and
 *   methods for the node object.
 * - label: The title of the node.
 * - content: All node items. Use {{ content }} to print them all,
 *   or print a subset such as {{ content.field_example }}. Use
 *   {{ content|without('field_example') }} to temporarily suppress the printing
 *   of a given child element.
 * - author_picture: The node author user entity, rendered using the "compact"
 *   view mode.
 * - metadata: Metadata for this node.
 * - date: Themed creation date field.
 * - author_name: Themed author name field.
 * - url: Direct URL of the current node.
 * - display_submitted: Whether submission information should be displayed.
 * - attributes: HTML attributes for the containing element.
 *   The attributes.class element may contain one or more of the following
 *   classes:
 *   - node: The current template type (also known as a "theming hook").
 *   - node--type-[type]: The current node type. For example, if the node is an
 *     "Article" it would result in "node--type-article". Note that the machine
 *     name will often be in a short form of the human readable label.
 *   - node--view-mode-[view_mode]: The View Mode of the node; for example, a
 *     teaser would result in: "node--view-mode-teaser", and
 *     full: "node--view-mode-full".
 *   The following are controlled through the node publishing options.
 *   - node--promoted: Appears on nodes promoted to the front page.
 *   - node--sticky: Appears on nodes ordered above other non-sticky nodes in
 *     teaser listings.
 *   - node--unpublished: Appears on unpublished nodes visible only to site
 *     admins.
 * - title_attributes: Same as attributes, except applied to the main title
 *   tag that appears in the template.
 * - content_attributes: Same as attributes, except applied to the main
 *   content tag that appears in the template.
 * - author_attributes: Same as attributes, except applied to the author of
 *   the node tag that appears in the template.
 * - title_prefix: Additional output populated by modules, intended to be
 *   displayed in front of the main title tag that appears in the template.
 * - title_suffix: Additional output populated by modules, intended to be
 *   displayed after the main title tag that appears in the template.
 * - view_mode: View mode; for example, "teaser" or "full".
 * - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
 * - page: Flag for the full page state. Will be true if view_mode is 'full'.
 * - readmore: Flag for more state. Will be true if the teaser content of the
 *   node cannot hold the main body content.
 * - logged_in: Flag for authenticated user status. Will be true when the
 *   current user is a logged-in member.
 * - is_admin: Flag for admin user status. Will be true when the current user
 *   is an administrator.
 *
 * @see template_preprocess_node()
 */
#}
{%
  set classes = [
    'node',
    'node--type-' ~ node.bundle|clean_class,
    node.isPromoted() ? 'node--promoted',
    node.isSticky() ? 'node--sticky',
    not node.isPublished() ? 'node--unpublished',
    view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
    'clearfix',
  ]
%}
{{ attach_library('classy/node') }}
<article{{ attributes.addClass(classes) }}>
	<header>
	    {{ title_prefix }}
	    {% if not page %}
	      <h2{{ title_attributes.addClass('node__title') }}>
	        <a href="{{ url }}" rel="bookmark">{{ label }}</a>
	      </h2>
	    {% endif %}
	    {{ title_suffix }}
	    {% if display_submitted %}
	      <div class="node__meta">
	        {{ author_picture }}
	        <span{{ author_attributes }}>
	          {% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %}
	        </span>
	        {{ metadata }}
	      </div>
	    {% endif %}
	</header>
  	<div{{ content_attributes.addClass('node__content', 'clearfix') }}>
	  	<section id="overview">
			<div id="scroll-page" style="transform: translate3d(0px, 0px, 0px);">

				<!-- Section de la Slider -->
				<section class="CommonCover-slide">
					<div class="CommonCover-wrapper-slide">
						<div class="CommonCover-image SlideCover-sur-mesure" >
						</div>	
						<div class="CommonCover-content">
							<div class="CommonCover-text-slide">
								<div class="OuterContainer">
									<h1 class="Title Title--pink js-title">
	              					Le sur-mesure
	           						</h1>
	           						<div class="offset-md-2">
	           							<p class="Pretitle Pretitle--white Pretitle--indent js-pretitle" > Parce que chaque occasion, chaque envie est unique, nous vous accompagnons dans vos projets pour que votre bijou ne ressemble à aucun autre.</p>
	           						</div>
								</div>
							</div>
						</div>
					</div>
				</section>

				<!-- Section présentation du sur mesure -->
				<section class="CommonSubcover js-commonSubcover">
					<div class="back-pink">
						<div class="OuterContainer">
							<div class="CommonSubcover-content div-img">
								<div class="CommonSubcover-img">
									<div class="ImageWrapper">
										<div class="Image">
											<div  data-aos="fade-down" data-aos="fade" data-aos-duration="1500" data-aos-easing="ease-in" class="loaded" >
		                						<img src="themes/diamantairestyle/assets/img/img-4.png" alt="technologies 3D" class="visible">
		              						</div>
										</div>
									</div>
								</div>
							</div>	
							<div class="CommonSubcover-content div-text">
								<div class="CommonSubcover-texts">
									<div class="col-lg-12">
											<div class="top-left-white" data-aos="example-anim3"></div>
											<div class="top-right-white" data-aos="example-anim3"></div>
										<div class="row">
											<div class="col-md-1"></div>
											<div class="col-md-10">
											<h2 class="TitleMesure">Des réalisations uniques</h2>
											</div>
											<div class="col-md-1"></div>
										</div>
										<div class="offset-md-2 col-md-10">
											<p class="Text text-white ">Toutes nos créations sont réalisées spécialement selon votre demande, dans notre atelier angevin, en partenariat étroit avec notre taillerie basée à Anvers. Une équipe à votre écoute, qui travaille en synergie pour créer un lien unique entre vous et votre bijou, utilisant tour à tour techniques artisanales et techniques modernes (3D).</p>
										</div>
											<div class="bottom-left-white" data-aos="example-anim3"></div>
											<div class="bottom-right-white" data-aos="example-anim3"></div>
									</div>	
								</div>
							</div>
						</div>
					</div>
				</section>	
	</div>

				<!-- Section 3 etapes -->
				<section>
					<div class="container">
						<div class="row">
							<div class="col-lg-6 col-text-bague">
									<div class="top-left-pink mesure-top-left" data-aos="example-anim3"></div>
									<div class="top-right-pink mesure-top-right" data-aos="example-anim3"></div>
								<div class="row">
									<div class="col-md-1"></div>
									<div class="col-md-10">
									<h2 class="TitleSecond">1 - Du rêve au choix du diamant</h2>
									</div>
									<div class="col-md-1"></div>
								</div>
								<div class="offset-md-2 col-md-10">
									<p class="Text">Nous vous proposons une rencontre privilegiée pour confier à notre regard d’expert diamantaire, vos désirs, vos envies, vos inspirations. Une façon unique de vous faire vivre un premier moment d’échange et de création autour de votre projet. C'est également le moment d'évoquer ensemble le choix du diamant (taille, couleur, pureté, poids) : chaque diamant est choisi spécialement pour chaque création. </p>
								</div>
									<div class="bottom-left-pink mesure-bottom-left" data-aos="example-anim3"></div>
									<div class="bottom-right-pink mesure-bottom-right" data-aos="example-anim3"></div>
							</div>
							<div class="col-lg-6 dessin-bague">
								<div data-aos="fade-left" data-aos="fade" data-aos-duration="1500" data-aos-easing="ease-in" >
									<img src="themes/diamantairestyle/assets/img/sur-mesure-croquis.png" alt="Création de bijoux sur mesure">
								</div>
							</div>
						</div>		
						<div class="row">
							<div class="col-lg-6">
								<div data-aos="fade-right" data-aos="fade" data-aos-duration="1500" data-aos-easing="ease-in" >
									<img class="img-35" src="themes/diamantairestyle/assets/img/img-35.png" alt="sertissage">
								</div>
							</div>
							<div class="col-lg-6">
									<div class="top-left-pink mesure-top-left-pink" data-aos="example-anim3"></div>
									<div class="top-right-pink" data-aos="example-anim3"></div>
								<div class="row">
									<div class="col-md-1"></div>
									<div class="col-md-10">
									<h2 class="TitleSecond">2 - Première esquisse et visualisation 3D</h2>
									</div>
									<div class="col-md-1"></div>
								</div>
								<div class="offset-md-2 col-md-10">
									<p class="Text">Un moment magique où se dévoilent sous vos yeux les premières esquisses de votre bijou. Mise en avant de la beauté naturelle du diamant, choix du sertissage, du type d'or ; chaque élément est passé au filtre de vos attentes et au crible de notre savoir-faire de diamantaire et d'artisan créateur. </p>
								</div>
									<div class="bottom-left-pink" data-aos="example-anim3"></div>
									<div class="bottom-right-pink" data-aos="example-anim3"></div>
							</div>
						</div>		
						<div class="row">
							<div class="col-lg-6 col-mesure-decale">
									<div class="top-left-pink mesure-top-left-pink" data-aos="example-anim3"></div>
									<div class="top-right-pink" data-aos="example-anim3"></div>
								<div class="row">
									<div class="col-md-1"></div>
									<div class="col-md-10">
									<h2 class="TitleSecond">3 - La naissance de votre bijou</h2>
									</div>
									<div class="col-md-1"></div>
								</div>
								<div class="offset-md-2 col-md-10">
									<p class="Text">C’est dans nos ateliers angevins, à force de précision, que la magie opère, pour que votre bijou voit le jour, unique et fidèle à vos envies. </p>
								</div>
									<div class="bottom-left-pink" data-aos="example-anim3"></div>
									<div class="bottom-right-pink" data-aos="example-anim3"></div>
							</div>
							<div class="col-lg-6">
								<div data-aos="fade-left" data-aos="fade" data-aos-duration="1500" data-aos-easing="ease-in" >
									<img class="img-36" src="themes/diamantairestyle/assets/img/img-36.png" alt="assemblage">
								</div>
							</div>
						</div>		
					</div>
				</section>
				<section class="perso-crea">
					<div class="row">
						<div class="offset-lg-3 col-lg-6">
						<h2 class="TitleSecond">Vous rêvez d'or ou d'autres pierres ?</h2>
						<p class="Text">Nous sommes spécialistes du beau. Si vous êtes à la recherche de pierres, si vous possédez des pierres que vous souhaitez monter en bijou, si vous avez un projet 100% or, n'hésitez pas à pousser la porte de notre boutique.</p>
						</div>
					</div>
				</section>

				<!-- Section Satisfaction -->	
			<section>
				<div class="row row-2">
					<div class="col-lg-6 col-decale">
							<div class="top-left-pink tld" data-aos="example-anim3"></div>
							<div class="top-right-pink trd" data-aos="example-anim3"></div>
							<div class="offset-md-4 col-md-5 div-decale">
								<h2 class="TitleSecond">Un gage de qualité</h2>
								<p class="Text">Chaque étape de fabrication du bijou s'achève par un contrôle interne, garantissant ainsi la qualité irréprochable de nos réalisations. Après vérification, votre bijou est marqué du poinçon de garantie. Lors de la remise du bijou, nous vous fournissons également un certificat gemmologique délivré par un organisme de certification international indépendant (GIA, HRD, IGI). </p>
							</div>
							<div class="bottom-left-pink bld" data-aos="example-anim3"></div>
							<div class="bottom-right-pink brd" data-aos="example-anim3"></div>
					</div>
					<div class="col-lg-6 img-creafr">
					<img src="themes/diamantairestyle/assets/img/img-40.png" alt="carat"> 
					</div>
				</div>
			</section>	
 	
				<!-- Section Decouvrir page suivante -->	
				<!--	<section class="CommonCover CommonCover--push js-commonCover1" data-push="">
						<div class="CommonCover-wrapper">
						        <div class="CommonCover-page-suivante">
						            <img src="themes/diamantairestyle/assets/img/slide-contact.png" alt="page contact"/>
						        </div>
						        <div class="CommonCover-content">
						            <div class="CommonCover-text">
						                <div class="OuterContainer OuterContainerSlide">
						                  <a href="/recherche-achat-diamant"><h2 class="Pretitle Pretitle--white Pretitle--indent js-pretitle">Découvrez</h2>
						                  <h1 class="Title Title--white js-title">
						              Nos diamants disponibles à l'achat
						                  </h1></a>
						                  <span class="CommonCover-pushArrow">
						                  <span class="Icon CommonCover-pushArrowIcon CommonCover-pushArrowIcon--out"><svg><use xlink:href="#ico-arrow"></use></svg></span>
						                  <span class="Icon CommonCover-pushArrowIcon CommonCover-pushArrowIcon--in"><svg><use xlink:href="#ico-arrow"></use></svg></span>
						                  </span>
						                </div>
						            </div>
						        </div>
						    </a>
						</div>
					</section>
				</section> -->
					<section class="CommonCover CommonCover--push js-commonCover1" data-push="">
						<div class="CommonCover-wrapper img-page-suivante img-page-contact">
						        <a href="/recherche-achat-diamant">
						        	<div class="div-ecart-page-suivante">
							        	<h2 class="Pretitle Pretitle--white Pretitle--indent js-pretitle">Découvrez</h2>
							            <h1 class="Title Title--white js-title">
							               Nos diamants disponibles à l'achat
							            </h1>
						            </div>
								</a>
						</div>
					</section>				

				<!-- Section Footer -->
				<section class="CommonFooter">

					<div class="OuterContainer">
					    <div class="CommonFooter-content">

						    <div class="CommonFooter-logo Icon">
						          <img src="themes/diamantairestyle/assets/img/logo.png" alt="Maison Thomas Diamantaire">
						    </div>

					    </div>
					    <div class="CommonFooter-content">
						    <ul class="CommonFooter-addressList">
						        
						        <li class="CommonFooter-address" data-lazy-show="true" data-lazy-anim="fade">
						            <address class="Title--white">21 place sainte croix <br>49100 Angers<br> France</address>
						            <p class="Title--white">contact@maisonthomasdiamantaire.fr<br/>
						            02 41 24 72 69</p>
						        </li>
						        
						        
						    </ul>
					    </div>
					</div>

					<div class="CommonFooter-bottom">

					    <ul class="CommonFooter-nav">
					        <li>
					          <a href="/mentions-legales" class="parsed">Mentions légales</a>
					        </li>
					      
					    </ul>

					    <a class="CommonFooter-copyright parsed" href="http://www.morganview.fr/" target="_blank" rel="noopener">
					    MorganView2019
					    </a>
					</div>
				</section>
			<section id="fixedTop">
				<section class="CommonHeader js-commonHeader">
					<div class="CommonHeader-main js-main">
			    		<div class="OuterContainer">

						    <a href="/" class="CommonHeader-logo Icon parsed">
						       <img src="themes/diamantairestyle/assets/img/logo.png">
						    </a>

						    <button id="trigger-overlay" class="CommonHeader-burger js-burger" type="button">
						        <span class="CommonHeader-burgerStroke CommonHeader-burgerStroke--top CommonHeader-burgerStroke--out"></span>
						        <span class="CommonHeader-burgerStroke CommonHeader-burgerStroke--top CommonHeader-burgerStroke--in"></span>
						        <span class="CommonHeader-burgerStroke CommonHeader-burgerStroke--bottom CommonHeader-burgerStroke--out"></span>
						        <span class="CommonHeader-burgerStroke CommonHeader-burgerStroke--bottom CommonHeader-burgerStroke--in"></span>
						    </button>
						</div>
						<div class="overlay overlay-door"><!-- effet ici -->
							<button type="button" class="overlay-close">Close</button>
							<nav>
								<ul>
									<li><a href="/"><img src="themes/diamantairestyle/assets/img/logo.png"></a></li>
									<li><a href="/maison">La maison</a></li>
									<li><a href="/atelier">L'atelier</a></li>
									<li><a href="/diamant">Le diamant</a></li>
									<li><a href="/nos-realisations">Nos realisations</a></li>
									<li><a href="/sur-mesure">Le sur-mesure</a></li>
									<li><a href="/recherche-achat-diamant">Recherche & Achat diamant</a></li>	
									<li><a href="/contact">Contact</a></li>
								</ul>
							</nav>
						</div>
		    		</div>
				</section>
			</section>
		</section>
	</div>
</article>