{#
/**
 * @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-diamant" >
						</div>	
						<div class="CommonCover-content" style="background-color: rgba(0,0,0,0.4);">
							<div class="CommonCover-text-slide">
								<div class="OuterContainer">
									<h1 class="Title Title--pink js-title">
	              					Une pierre de légende
	           						</h1>
	           						<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>
					</div>
				</section>

				<!-- Section présentation du Diamant -->
				<section class="CommonSubcover js-commonSubcover">
					<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-1.png" data-src="assets/img/img-1.png" class="visible" alt="Rubis Emeraude Saphir Topaze">
	              						</div>
									</div>
								</div>
							</div>
						</div>	
						<div class="CommonSubcover-content div-text">
							<div class="CommonSubcover-texts">
								<div class="col-lg-12">
										<div class="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">Quand l'art <br />rejoint la nature</h2>
											</div>
										<div class="col-md-1"></div>
									</div>
									<div class="offset-md-2">
										<p class="Text">Né il y a plusieurs milliards d’années sous la surface de la terre, chaque diamant est rare et unique. Symbole d’invincibilité, d’amour éternel, d’élégance, le diamant célèbre chaque instant important de la vie et souligne l’intensité des liens entre les êtres.</p>
									</div>
									<div class="bottom-right-pink" data-aos="example-anim3"></div>
									<div class="bottom-left-pink" data-aos="example-anim3"></div>
								</div>	
							</div>
						</div>
					</div>
				</section>

				<!-- Section Slider  -->
				<main class="CommonSlider">
					<div class="cd-image-block CommonSlider-img">
						<ul class="cd-images-list">
							<li class="is-selected">
								<div  data-aos="fade-down" data-aos="fade" data-aos-duration="1500" data-aos-easing="ease-in" class="loaded" ></div>
							</li>

							<li>
								<div  data-aos="fade-down" data-aos="fade" data-aos-duration="1500" data-aos-easing="ease-in" class="loaded" ></div>

							<li>
								<div  data-aos="fade-down" data-aos="fade" data-aos-duration="1500" data-aos-easing="ease-in" class="loaded" ></div>
							</li>
						</ul> <!-- .cd-images-list -->
					</div> <!-- .cd-image-block -->
					<div class="cd-content-block CommonSlider-texts">
						<ul class="CommonSlider-descriptions">
							<li class="is-selected CommonSlider-description ">
								<div class="col-lg-10 col-md-9 colcontent">
										<div class="top-left-pink top-left-slider" data-aos="example-anim3"></div>
										<div class="top-right-pink top-right-slider" data-aos="example-anim3"></div>
									<div class="row">
										<div class="col-md-1"></div>
										<div class="col-md-9">
											<h2>Un joyau unique</h2>
										</div>
										<div class="col-md-1"></div>
									</div>
									<div class="row">
										<div class="offset-md-2">
											<p>
												Chaque diamant est unique. Les variations autour du poids d’une pierre, de sa pureté, de sa couleur, de sa taille, sont telles qu’elles offrent un nombre infini de combinaisons.
											</p>
											
											<p>
												 Mais, ce qui rend véritablement unique un diamant, c’est son histoire, sa beauté singulière et la magie d’une pierre venue de la nuit des temps.
											</p>
										</div>
									</div>
									<div class="bottom-right-pink" data-aos="example-anim3"></div>
									<div class="bottom-left-pink" data-aos="example-anim3"></div>
								</div> 
							</li>

							<li>
								<div class="col-lg-10 col-md-9 colcontent">
										<div class="top-left-pink top-left-slider" data-aos="example-anim3"></div>
										<div class="top-right-pink top-right-slider" data-aos="example-anim3"></div>
									<div class="row">
										<div class="col-md-1"></div>
										<div class="col-md-9">
											<h2>Une pierre éternelle</h2>
										</div>
										<div class="col-md-1"></div>
									</div>
									<div class="row">
										<div class="offset-md-2">
											<p>
												Formé il y a 3 milliards 300 millions d’années, le diamant naît à 150km sous la croûte terrestre, par une pression de 75 tonnes au cm2 et à une température de 1400°C.
											</p>
											
											<p>
												Seul un petit nombre de diamants, véritable parcelle d’éternité, parviennent à la surface de la Terre. 
											</p>
											
											<p>
												Ce joyau de la nature est donc rare : seul 20 % sont de qualité gemme et vont pouvoir être taillés pour la joaillerie, sur ces 20%,  seulement 0,1% sera taillé en diamant de  1 carat et plus.
											</p>
										</div>
									</div>
									<div class="bottom-right-pink" data-aos="example-anim3"></div>
									<div class="bottom-left-pink" data-aos="example-anim3"></div>
								</div> 
							</li>

							<li>
								<div class="col-lg-10 col-md-9 colcontent">
										<div class="top-left-pink top-left-slider" data-aos="example-anim3"></div>
										<div class="top-right-pink top-right-slider" data-aos="example-anim3"></div>
									<div class="row">
										<div class="col-md-1"></div>
										<div class="col-md-9">
											<h2>Une beauté singulière</h2>
										</div>
										<div class="col-md-1"></div>
									</div>
									<div class="row">
										<div class="offset-md-2">
											<p>
												La beauté d’un diamant tient essentiellement à trois éléments clefs : le feu, le scintillement et l’éclat de la pierre.
											</p>
											
											<p>
												Le feu donne littéralement vie au diamant. Il s’agit des couleurs de l'arc-en-ciel révélées lorsque la lumière pénètre dans le diamant et se disperse en couleurs spectrales.
												Le scintillement, né du contraste entre les zones claires et foncées à l'intérieur de la pierre, permet au diamant d’étinceler.

											</p>
											
											<p>
												L’éclat ou brillance de la pierre, véritable jeu de reflets de lumière «blanche» spécifiquement, donne au diamant toute sa luminosité.
												C'est la combinaison unique de ces 3 éléments qui donne tout son caractère au diamant.
											</p>
										</div>
									</div>
									<div class="bottom-right-pink" data-aos="example-anim3"></div>
									<div class="bottom-left-pink" data-aos="example-anim3"></div>
								</div> 
							</li>
						</ul>
					</div> <!-- .cd-content-block -->

					<ul class="block-navigation">
						<li><button class="cd-prev CommonSlider-navBtn CommonSlider-navBtn--left inactive"></button></li>
						<li><button class="cd-next CommonSlider-navBtn CommonSlider-navBtn--right"></button></li>
					</ul> <!-- .block-navigation -->
				</main>	<!-- .cd-main -->	
    	{{ content }}
  	</div>
  				<!-- Section Gallerie 4C -->
			  	<section class="gradiant">
					<div class="container-fluid back-white">
							<div class="top-left" data-aos="example-anim3"></div>
							<div class="top-right" data-aos="example-anim3"></div>
						<div class="row back-title">
							<div class="offset-lg-2 offset-md-2 col-lg-9 col-md-10">
								<h2>les 4C <br />du diamant</h2>
								<p>Établis en 1939 et internationalement reconnus, les 4C – Carat, Clarity, Colour et Cut – se combinent à l’infini afin de définir précisément le caractère et la valeur de chaque diamant.</p>
							</div>
						</div>	
						<div class="row">
							<div class="col-lg-3 col-dm-3 col-sm-12 col-xs-12">
								<h3> Carat ou le poids <br /> du diamant</h3>
								<p>Le poids d’un diamant est mesuré en carat. Un carat équivaut à 0,2 gramme.</p>
							</div>
							<div class="col-lg-3 col-dm-3 col-sm-12 col-xs-12">
								<h3> Clarity ou <br />pureté</h3>
								<p>La pureté indique le degré de perfection du diamant. Le nombre et la visibilité des inclusions déterminent la pureté du diamant.</p>
							</div>
							<div class="col-lg-3 col-dm-3 col-sm-12 col-xs-12">
								<h3> Colour ou <br />couleur</h3>
								<p>Les critères de couleurs suivent l’ordre de l’alphabet, en commençant par la lettre D pour la plus belle qualité de diamant blanc et jusqu’à la lettre Z. Plus rare, les diamants existent aussi dans de nombreuses couleurs.</p>
							</div>
							<div class="col-lg-3 col-dm-3 col-sm-12 col-xs-12">
								<h3> Cut ou <br />taille </h3>
								<p>La taille est le seul critère qui résulte du travail et du savoir-faire des hommes, et sans doute le plus important car il conditionne la brillance du diamant.</p>
							</div>
						</div>
						<div class="row p-0 m-0 bd-highlight row-gal-diamant">
							<div class="col-lg-2 col-md-4 p-0 d-flex flex-column align-items-end">
								<img class="gouttedeau" src="themes/diamantairestyle/assets/img/img-4.png" alt="ou trouver un diamantaire">
							</div>
							<div class="col-lg-3 col-md-4 p-0 m-0  d-flex align-items-start coldiam">
								<img  src="themes/diamantairestyle/assets/img/img-5.png" alt="ou acheter un bijou">
							</div>
							<div class="col-xs-12 col-sm-12 col-md-4 col-lg-2 p-0">
								<img class="diamants" src="themes/diamantairestyle/assets/img/img-6.png" alt="Createur de bijoux">
							</div>
							<div class="col-lg-offset-1 col-lg-2 p-0 column-1">
								<img class="bague" src="themes/diamantairestyle/assets/img/img-7.png" alt="bijoux de luxe">
								<img class="collier" src="themes/diamantairestyle/assets/img/img-8.png" alt="or argent perle diamant">
							</div>
							<div class="col-lg-2 p-0 column-2">
								<img src="themes/diamantairestyle/assets/img/img-9.jpg" alt="HRD IGI GIA kimberley">
							</div>
						</div>
						<div class="bottom-right" data-aos="example-anim3"></div>
						<div class="bottom-left" data-aos="example-anim3"></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">Origine certifiée</h2>
								<p class="Text">Comme vous, nous sommes soucieux de la provenance de nos diamants. C’est pourquoi nous travaillons exclusivement avec des pierres certifiées par le processus de Kimberley, processus qui a pour mission de contrôler l’origine des diamants bruts et d’assurer la provenance des pierres que nous utilisons dans notre atelier.
								Par souci de transparence, tous nos diamants sont également certifiés par les meilleurs laboratoires internationaux  indépendants (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-39.png" alt="notre collection"> 
					</div>
				</div>
			</section>	

				<!-- Section Decouvrir page suivante -->	
					<section class="CommonCover CommonCover--push js-commonCover1" data-push="">
						<div class="CommonCover-wrapper img-page-suivante img-page-collection">
							<div class="overlay-slide"></div>
						        <a href="/nos-realisations">
						        	<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 Réalisations
							            </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="alliance mariage">
						    </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 Menu -->
				<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" alt="pierres précieuses">
							    </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" alt="Maison Thomas Dimantaire"></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>