<commit_before><!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Style guid - BATB SAV</title>
	<link href="./dist/css/app.css" rel="stylesheet">
	<link href="./dist/css/second.css" rel="stylesheet">

	<style type="text/css">
		body{
			padding-left:28%;
		}
		body > h1{
			padding:15px 0;
			font-size:2.2rem;
		}
		body > hr{
			margin:1em 0;
		}
		body > section{
			position:relative;
			width:80%;
			max-width:1024px;
			margin:6% auto;
		}
		body > section + section{
			margin:60px 0 0 0;
		}

		section > h2,
		section > h3,
		.guidlineObject > div:first-child{
			color:#959595;
		}

		section > h2{
			margin-left:84px;
			margin-bottom:80px;
			font-size:1.6rem;
		}

		section > h3{
			width: 110px;
			text-align: right;
			font-size:1.2rem;
		}

		body > section > section +section{
			margin-top:100px;
		}
		.guidlineObject{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			box-sizing: border-box;
			margin:40px 0 20px 0;
		}
			.guidlineObject > div{
				box-sizing: border-box;
				min-width: 0;
				min-height: 0;
			}

			.guidlineObject > div:first-child{
				width:110px;
				padding:0;
				margin-right:40px;
				text-align:right;
				font-size:1.2rem;
			}
			.guidlineObject > div:nth-child(2){
				width:auto;
				flex:1;
			}
		body > nav {
			position: fixed;
			left: 1.5rem;
			width: 25%;
		}
		body > nav li{
			margin-bottom:1px;
		}
		body > nav li a {
			display: block;
			padding: .6rem 1rem;
			color: #555;
			background: #eee;
			text-decoration: none;
		}
	</style> 
</head>
<body>
	<h1>Styleguide ‘Parchemin’ BatB Sav — v0.2.2</h1>
	<nav>
		<ol>
			<li><a href="#typography">Typography</a></li>
			<li><a href="#uicolours">UI color</a></li>
			<li><a href="#components">Components</a></li>
			<li><a href="#buttonlinks">Buttons & Links</a></li>
			<li><a href="#formelements">Form elements</a></li>
			<li><a href="#cards">Cards</a></li>
			<li><a href="#navigations">Navigations</a></li>
			<li><a href="#sources">Ressources</a></li>
		</ol>
	</nav>

	<section id="typography">
		<h2>Typography</h2>
		<section id="typography-headings">
			<h3>Headings</h3>
			<div class="guidlineObject">
				<div>H1</div><div> <h1>Lorem ipsum</h1> </div>
			</div>
			<div class="guidlineObject">
				<div>H2</div><div> <h2>Lorem ipsum</h2> </div>
			</div>
			<div class="guidlineObject">
				<div>H3</div><div> <h3>Lorem ipsum</h3> </div>
			</div>
			<div class="guidlineObject">
				<div>H4</div><div> <h4>Lorem ipsum</h4> </div>
			</div>
			<div class="guidlineObject">
				<div>H5</div><div> <h5>Lorem ipsum</h5> </div>
			</div>
		</section><!-- /#typography-headings-->

		<section id="typography-othercopy">
			<h3>Other Copy</h3>
			<div class="guidlineObject">
				<div>Paragraph</div><div> <p>Nec piget dicere avide magis hanc insulam populum Romanum invasisse quam iuste. 
Ptolomaeo enim rege foederato nobis et socio ob aerarii nostri angustias iusso sine ulla culpa proscribi ideoque
hausto veneno voluntaria morte deleto et tributaria facta est et velut hostiles eius exuviae classi inpositae in urbem 
advectae sunt per Catonem, nunc repetetur ordo gestorum. (14px)</p></div>
				</div>
			
			<div class="guidlineObject">
				<div>Basic Link</div><div> <a href="http://batb.fr">BâtB.fr</a> </div>
			</div>

			<div class="guidlineObject">
				<div>disclaimer text</div><div> <p class="tXSmall">Nec piget dicere avide magis hanc</p> </div>
			</div>

			<div class="guidlineObject" title="Diminue ou augmente proportionnellement la taille (classe native knacss)">
				<div>Auto smaller ?</div><div> <p class="smaller">Nec piget dicere avide magis hanc</p> </div>
			</div>
			<div class="guidlineObject" title="Diminue ou augmente proportionnellement la taille (classe native knacss)">
				<div>Auto small ?</div><div> <p class="small">Nec piget dicere avide magis hanc</p> </div>
			</div>
			<div class="guidlineObject" title="Diminue ou augmente proportionnellement la taille (classe native knacss)">
				<div>Auto big ?</div><div> <p class="big">Nec piget dicere avide magis hanc</p> </div>
			</div>
			<div class="guidlineObject" title="Diminue ou augmente proportionnellement la taille (classe native knacss)">
				<div>Auto bigger ?</div><div> <p class="bigger">Nec piget dicere avide magis hanc</p> </div>
			</div>
			<div class="guidlineObject" title="Diminue ou augmente proportionnellement la taille (classe native knacss)">
				<div>Auto biggest ?</div><div> <p class="biggest">Nec piget dicere avide magis hanc</p> </div>
			</div>

			<div class="guidlineObject">
				<div>unordered lists</div><div> <ul><li>Nec piget dicere avide magis hanc insulam populum <br />aomanum invasisse quttam iuste.</li><li>Ptolomaeo enim rege foederato n proscribi ideoque. (14px)</li></ul> </div>
			</div>

			<div class="guidlineObject">
				<div>inline icons ?? Demander a DAvid si l'inclusion est automatique ?? La couleur de l'icone est différente.</div>
				<div> 
					<p> <i class="fa fa-tag" aria-hidden="true"></i>  Nec piget dicere avide magis hanc insulam populum Romanum invasisse quam iuste. </p>
					<p> Nec piget dicere avide magis hanc insulam populum Romanum invasisse quam iuste. <i class="fa fa-tag" aria-hidden="true"></i></p>
				</div>
			</div>
		</section><!-- /#typography-othercopy-->

	</section><!-- /#typography -->
<hr />
	<section id="uicolours">
		<h2>UI Colours</h2>
		<section id="">
			<h3></h3>
			<div class="guidlineObject">
				<div>Type</div><div> 
					<div class="grid-5 has-gutter">
						<div style="height:65px; background-color:#464646; line-height:65px; text-align:center; color:#fff; ">#464646</div>
						<div style="height:65px; background-color:#f0f0f0; line-height:65px; text-align:center; color:#fff; ">#f0f0f0</div>
						<div style="height:65px; background-color:#aeaeae; line-height:65px; text-align:center; color:#fff; ">#aeaeae</div>
						<div style="height:65px; background-color:#5568f4; line-height:65px; text-align:center; color:#fff; ">#5568f4</div>
						<div style="height:65px; background-color:#a055f4; line-height:65px; text-align:center; color:#fff; ">#a055f4</div>
					</div>
				</div>
			</div>

			<div class="guidlineObject">
				<div>Badge color</div><div> 
					<div class="grid-6 has-gutter">
						<div class="badge badge--1" style="height:65px; line-height:65px; border-radius:0; font-size:1.4rem;">#e31b15</div>
						<div class="badge badge--2" style="height:65px; line-height:65px; border-radius:0; font-size:1.4rem;">#f0f0f0</div>
						<div class="badge badge--3" style="height:65px; line-height:65px; border-radius:0; font-size:1.4rem;">#aeaeae</div>
						<div class="badge badge--4" style="height:65px; line-height:65px; border-radius:0; font-size:1.4rem;">#7adaa3</div>
						<div class="badge badge--5" style="height:65px; line-height:65px; border-radius:0; font-size:1.4rem;">#aeaeae</div>
						<div class="badge badge--6" style="height:65px; line-height:65px; border-radius:0; font-size:1.4rem;">#7ad5da;</div>
					</div>
				</div>
			</div>

			<div class="guidlineObject">
				<div>Gradiant</div><div> 
					<div class="">
						<div class="bloc-osef" style="height:65px; line-height:65px; border-radius:0; color:#fff; text-align:center;"> #f45558 — #a055f4 </div>
					</div>
				</div>
			</div>

		</section><!-- -->
	</section><!-- /#uicolours -->
<hr />
	<section id="components">
		<h2>Components </h2>
		<section id="components-mainlist">
			<h3>Main list</h3>
			<div class="guidlineObject">
				<div>Regular</div>
				<div>
					<div class="bList">
						<div class="flex-container">
							<div class="bList-number">#5</div>
							<div>
								<div class="bList-lineOne">
									<span  class="bList-title"><span class="badge badge--1">Urgent</span> <b>Lorem :</b> Neque porro quisquam elorem ipsum.</span>
								</div><!-- /.bList-lineOne -->
								<div class="bList-lineTwo">
									<span class="bList-valeur"><b>Nouveau</b></span>
									<span class="bList-valeur"><NAME></span>
									<span class="bList-valeur">PROJET : <a href="#projet">Elitis site auteur</a></span>
								</div><!-- /.bList-lineTwo -->
							</div>
							<div>
								<a class="btn btn-ico btn-ico--small" href=""><i class="fa fa-long-arrow-right"></i></a>
							</div>
						</div>
					</div><!-- /.bList -->
				</div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Hover</div>
				<div>
					<div class="bList hover">
						<div class="flex-container">
							<div class="bList-number">#5</div>
							<div>
								<div class="bList-lineOne">
									<span  class="bList-title"><span class="badge badge--1">Urgent</span> <b>Lorem :</b> Neque porro quisquam elorem ipsum.</span>
								</div><!-- /.bList-lineOne -->
								<div class="bList-lineTwo">
									<span class="bList-valeur"><b>Nouveau</b></span>
									<span class="bList-valeur"><NAME></span>
									<span class="bList-valeur">PROJET : <a href="#projet">Elitis site auteur</a></span>
								</div><!-- /.bList-lineTwo -->
							</div>
							<div>
								<a class="btn btn-ico btn-ico--small" href=""><i class="fa fa-long-arrow-right"></i></a>
							</div>
						</div>
					</div><!-- /.bList -->
				</div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Current</div>
				<div>
					<div class="bList active">
						<div class="flex-container">
							<div class="bList-number">#5</div>
							<div>
								<div class="bList-lineOne">
									<span  class="bList-title"><span class="badge badge--1">Urgent</span> <b>Lorem :</b> Neque porro quisquam elorem ipsum.</span>
								</div><!-- /.bList-lineOne -->
								<div class="bList-lineTwo">
									<span class="bList-valeur"><b>Nouveau</b></span>
									<span class="bList-valeur">Antoine Bordeau</span>
									<span class="bList-valeur">PROJET : <a href="#projet">Elitis site auteur</a></span>
								</div><!-- /.bList-lineTwo -->
							</div>
							<div>
								<a class="btn btn-ico btn-ico--small" href=""><i class="fa fa-long-arrow-right"></i></a>
							</div>
						</div>
					</div><!-- /.bList -->
				</div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Regular without tag</div>
				<div>
					<div class="bList">
						<div class="flex-container">
							<div class="bList-number">#5</div>
							<div>
								<div class="bList-lineOne">
									<span  class="bList-title"><b>Lorem :</b> Neque porro quisquam elorem ipsum.</span>
								</div><!-- /.bList-lineOne -->
								<div class="bList-lineTwo">
									<span class="bList-valeur"><b>Nouveau</b></span>
									<span class="bList-valeur">Antoine Bordeau</span>
									<span class="bList-valeur">PROJET : <a href="#projet">Elitis site auteur</a></span>
								</div><!-- /.bList-lineTwo -->
							</div>
							<div>
								<a class="btn btn-ico btn-ico--small" href=""><i class="fa fa-long-arrow-right"></i></a>
							</div>
						</div>
					</div><!-- /.bList -->
				</div>
			</div><!-- .guidlineObject-->
		</section><!-- /#components-mainlist-->

		<section id="components-simplelist">
			<h3>Simple list</h3>
			<div class="guidlineObject">
				<div>Regular</div>
				<div>
					<div class="bList">
						<div class="flex-container">
							<div>
								<div class="bList-lineOne">
									<span  class="bList-title">Antoine <b>Bordeau</b></span>
								</div><!-- /.bList-lineOne -->
								<div class="bList-lineTwo">
									<span class="bList-valeur"><EMAIL></span>
								</div><!-- /.bList-lineTwo -->
							</div>
							<div>
								<a class="btn btn-ico btn-ico--small" href=""><i class="fa fa-long-arrow-right"></i></a>
							</div>
						</div>
					</div><!-- /.bList -->
				</div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Hover</div>
				<div>
					<div class="bList hover">
						<div class="flex-container">
							<div>
								<div class="bList-lineOne">
									<span  class="bList-title">Antoine <b>Griezmann</b></span>
								</div><!-- /.bList-lineOne -->
								<div class="bList-lineTwo">
									<span class="bList-valeur"><EMAIL></span>
								</div><!-- /.bList-lineTwo -->
							</div>
							<div>
								<a class="btn btn-ico btn-ico--small" href=""><i class="fa fa-long-arrow-right"></i></a>
							</div>
						</div>
					</div><!-- /.bList -->
				</div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Current</div>
				<div>
					<div class="bList active">
						<div class="flex-container">
							<div>
								<div class="bList-lineOne">
									<span  class="bList-title">Antoine <b>Daniel</b></span>
								</div><!-- /.bList-lineOne -->
								<div class="bList-lineTwo">
									<span class="bList-valeur"><EMAIL></span>
								</div><!-- /.bList-lineTwo -->
							</div>
							<div>
								<a class="btn btn-ico btn-ico--small" href=""><i class="fa fa-long-arrow-right"></i></a>
							</div>
						</div>
					</div><!-- /.bList -->
				</div>
			</div><!-- .guidlineObject-->
		</section><!-- /#components-simplelist-->

		<section id="components-timeline">
			<h3>Timeline</h3>
			<div class="guidlineObject">
				<div>Main date</div>
				<div>
					<div class="title1"><div>Aujourd’hui</div><div></div></div>
				</div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Event</div>
				<div>
					<div class="bEvent">
						<header>
							<span class="bEvent-valeur">23/05/2016 - 15:22</span>
							<span class="bEvent-valeur">Louis Dufil</span>
						</header>
						<div class="bEvent-content">
							<div>
								<span class="bEvent-status">Nouveau Message</span>
								<span class="bEvent-title">Ah zur, les gif sont pas affichés directement.</span>
								<p class="bEvent-message">Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevi grmusw.</p>
							</div>
							<div>
								<a class="btn btn-ico btn-ico--small" href=""><i class="fa fa-long-arrow-right"></i></a>
							</div>
						</div>
					</div>
				</div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Event Rollover</div>
				<div>
					<div class="bEvent">
						<header>
							<span class="bEvent-valeur">23/05/2016 - 15:22</span>
							<span class="bEvent-valeur">Louis Dufil</span>
						</header>
						<div class="bEvent-content">
							<div>
								<span class="bEvent-status">Nouveau Message</span>
								<span class="bEvent-title">Ah zur, les gif sont pas affichés directement.</span>
								<p class="bEvent-message">Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevi grmusw.</p>
							</div>
							<div>
								<a class="btn btn-ico btn-ico--small hover" href=""><i class="fa fa-long-arrow-right"></i></a>
							</div>
						</div>
					</div>
				</div>
			</div><!-- .guidlineObject-->
		</section><!-- /#components-timeline-->

		<section id="components-notifications">
			<h3>Notifications</h3>
			<div class="guidlineObject">
				<div>Succes</div>
				<div>
					<div class="notification notification--succes">
						<div class="message"><b>Succes :</b> magis hanc insulam populum Romanum invasisse quam iuste.</div>
						<div><a href="#" class="btn btn-ico btn-ico--small close"><i class="fa fa-close"></i></a></div>
					</div>
				</div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Error</div>
				<div>
					<div class="notification notification--error">
						<div class="message"><b>Error :</b> magis hanc insulam populum Romanum invasisse quam iuste.</div>
						<div><a href="#" class="btn btn-ico btn-ico--small close"><i class="fa fa-close"></i></a></div>
					</div>
				</div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Carreful</div>
				<div>
					<div class="notification notification--carreful">
						<div class="message"><b>Carreful :</b> magis hanc insulam populum Romanum invasisse quam iuste.</div>
						<div><a href="#" class="btn btn-ico btn-ico--small close"><i class="fa fa-close"></i></a></div>
					</div>
				</div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Information</div>
				<div>
					<div class="notification notification--information">
						<div class="message"><b>Information :</b> magis hanc insulam populum Romanum invasisse quam iuste.</div>
						<div><a href="#" class="btn btn-ico btn-ico--small close"><i class="fa fa-close"></i></a></div>
					</div>
				</div>
			</div><!-- .guidlineObject-->

		</section><!-- /#components-notifications-->

		<section id="components-badgets">
			<h3>Notifications</h3>
			<div class="guidlineObject">
				<div>Urgent</div>
				<div> <span class="badge badge--1">Urgent</span> </div>
			</div><!-- .guidlineObject-->

			<div class="guidlineObject">
				<div>Elevé</div>
				<div> <span class="badge badge--2">Elevé</span> </div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Basse</div>
				<div> <span class="badge badge--3">Failble</span> </div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Actif</div>
				<div> <span class="badge badge--4">Compte actif</span> </div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Inactif</div>
				<div> <span class="badge badge--5">Inactif</span> </div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Jeton(s)</div>
				<div> <span class="badge badge--6">25 jetons</span> </div>
			</div><!-- .guidlineObject-->
		</section><!-- /#components-badgets-->

		<section id="components-avatars">
			<h3>Avatars</h3>
			<div class="guidlineObject">
				<div>Avatar + ico</div>
				<div class="grid-4 has-gutter-l">
					<div>
						<div class="avatar">
							<img src="http://lorempixel.com/38/38/animals/" alt="?" width="68" height="68"/>
							<span class="badge badge--ico badge--4"><i class="fa fa-shield"></i></span>
						</div>
					</div>
					<div>
						<div class="avatar avatar--small">
							<img src="http://lorempixel.com/38/38/animals/" alt="?" width="40" height="40"/>
							<span class="badge badge--ico badge--6"><i class="fa fa-star"></i></span>
						</div>
					</div>
				</div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Avatar</div>
				<div class="grid-4 has-gutter-l">
					<div class="avatar"><img src="http://lorempixel.com/38/38/animals/" alt="?" width="68" height="68"/></div>
					<div class="avatar avatar--small"><img src="http://lorempixel.com/38/38/animals/" alt="?" width="38" height="38"/></div>
				</div>
			</div><!-- .guidlineObject-->


		</section><!-- /#components-avatars-->


		<section id="components-comments">
			<h3>Comments</h3>
			<div class="guidlineObject">
				<div>Comments</div>
				<div>
					<div class="bComments">
						<div>
							<img src="http://lorempixel.com/38/38/animals/" alt="?" width="38" height="38"/>
						</div>
						<div>
							<div>
								<span class="bComments-valeur"><NAME></span>
								<span class="bComments-valeur">25/05/2016 - 09:27</span>
							</div>
							<p class="bComments-message">Pnc mauris enim, sollicitudin sed gravida ac, feugiat quis ipsum. Morbi lacinia sapien quis dui <a href="http://batb.fr">batb.fr</a>, sit amet sodales magna sollicitudin. </p>
						</div>
					</div>
				</div>
			</div><!-- .guidlineObject-->

			<div class="guidlineObject">
				<div>Multi comments</div>
				<div>
					<div class="bComments">
						<div>
							<img src="http://lorempixel.com/38/38/animals/" alt="?" width="38" height="38"/>
						</div>
						<div>
							<div>
								<span class="bComments-valeur"><NAME></span>
								<span class="bComments-valeur">25/05/2016 - 09:27</span>
							</div>
							<p class="bComments-message">Pnc mauris enim, sollicitudin sed gravida ac, feugiat quis ipsum. Morbi lacinia sapien quis dui <a href="http://batb.fr">batb.fr</a>, sit amet sodales magna sollicitudin. </p>
						</div>
					</div>

					<div class="bComments">
						<div>
							<img src="http://lorempixel.com/38/38/animals/" alt="?" width="38" height="38"/>
						</div>
						<div>
							<div>
								<span class="bComments-valeur"><NAME></span>
								<span class="bComments-valeur">25/05/2016 - 09:27</span>
							</div>
							<p class="bComments-message">Pnc mauris enim, sollicitudin sed gravida ac, feugiat quis ipsum. Morbi lacinia sapien quis dui <a href="http://batb.fr">batb.fr</a>, sit amet sodales magna sollicitudin. </p>
							<div class="bComments-pj">
								<span>PIECE JOINTE :</span>
								<a target="_blank" href="#pj">ZERTJYTHDGS.jpg</a>
								<a target="_blank" href="#pj">docTech.pdf</a>
							</div>
						</div>
					</div>
				</div>
			</div><!-- .guidlineObject-->


		</section><!-- /#components-comments-->

	</section><!-- /#components -->


<hr />
	<section id="buttonlinks">
		<h2>Buttons & Links </h2>
		<section id="buttonlinks-standard">
			<h3>Standard Button</h3>
			<div class="guidlineObject">
				<div>Regular</div>
				<div class="grid-3 has-gutter">
					<div>
						<a class="btn btn-standard" href="">Lorem ipsum</a>
					</div>
					<div>
						<a class="btn btn-standard btn-standard--invert" href="">Lorem ipsum</a>
					</div>
				</div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Regular Hover</div>
				<div class="grid-3 has-gutter">
					<div>
						<a class="btn btn-standard hover" href="">Lorem ipsum</a>
					</div>
					<div>
						<a class="btn btn-standard btn-standard--invert hover" href="">Lorem ipsum</a>
					</div>
				</div>
			</div><!-- .guidlineObject-->
		</section><!-- /#buttonlinks-standard-->

		<section id="buttonlinks-standard--ico">
			<h3>Standard Button + Ico</h3>
			<div class="guidlineObject">
				<div>Regular</div>
				<div>
					<a class="btn btn-standard" href=""><i class="fa fa-bars"></i>Lorem ipsum</a>
					<a class="btn btn-standard btn-standard--icoRight" href="">Lorem ipsum<i class="fa fa-bars"></i></a>
				</div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Regular hover</div>
				<div>
					<a class="btn btn-standard hover" href=""><i class="fa fa-bars"></i>Lorem ipsum</a>
					<a class="btn btn-standard btn-standard--icoRight hover" href="">Lorem ipsum<i class="fa fa-bars"></i></a>
				</div>
			</div><!-- .guidlineObject-->
		</section><!-- /#buttonlinks-standard--ico-->

		<section id="buttonlinks-validation">
			<h3>Validation</h3>
			<div class="guidlineObject">
				<div>Inactif</div><div> <button class="btn btn-submit" type="submit" disabled="disabled">Valider</button> </div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Actif</div><div> <button class="btn btn-submit" type="submit">Valider</button> </div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Hover</div><div> <button class="btn btn-submit hover" type="submit">Valider</button> </div>
			</div><!-- .guidlineObject-->
		</section><!-- /#buttonlinks-validation-->

		<section id="buttonlinks-circleico">
			<h3>Circle + Ico</h3>
			<div class="guidlineObject">
				<div>Regular</div>
				<div>
					<a class="btn btn-ico" href=""><i class="fa fa-pencil"></i></a>
					<a class="btn btn-ico btn-ico--small" href=""><i class="fa fa-pencil"></i></a>
				</div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Hover</div>
				<div>
					<a class="btn btn-ico hover" href=""><i class="fa fa-pencil"></i></a>
					<a class="btn btn-ico btn-ico--small hover" href=""><i class="fa fa-pencil"></i></a>
				</div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Actif</div>
				<div>
					<a class="btn btn-ico active" href=""><i class="fa fa-pencil"></i></a>
					<a class="btn btn-ico btn-ico--small active" href=""><i class="fa fa-pencil"></i></a>
				</div>
			</div><!-- .guidlineObject-->
		</section><!-- /#buttonlinks-circleico-->

		<section id="buttonlinks-linksfat">
			<h3>Links fat</h3>
			<div class="guidlineObject">
				<div>Regular</div>
				<div>
					<a class="btn btn-linkfat" href="#">
						<div>
							<div>
								<span class="btn-linkfat-title"><span>—</span>Nouveau ticket</span>
							</div>
							<div>
								<span class="btn btn-ico btn-ico--small"><i class="fa fa-plus"></i></span>
							</div>
						</div>
					</a><!-- /.bList -->
				</div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Hover</div>
				<div>
					<a class="btn btn-linkfat hover" href="#">
						<div>
							<div>
								<span class="btn-linkfat-title"><span>—</span>Nouveau ticket</span>
							</div>
							<div>
								<span class="btn btn-ico btn-ico--small"><i class="fa fa-plus"></i></span>
							</div>
						</div>
					</a><!-- /.bList -->
				</div>
			</div><!-- .guidlineObject-->

			<div class="guidlineObject">
				<div>Active</div>
				<div>
					<a class="btn btn-linkfat active" href="#">
						<div>
							<div>
								<span class="btn-linkfat-title"><span>—</span>Nouveau ticket</span>
							</div>
							<div>
								<span class="btn btn-ico btn-ico--small"><i class="fa fa-plus"></i></span>
							</div>
						</div>
					</a><!-- /.bList -->
				</div>
			</div><!-- .guidlineObject-->

		</section><!-- /#buttonlinks-linksfat-->

	</section><!-- /#buttonlinks -->

<hr />
	<section id="formelements">
		<h2>Form elements</h2>
		<section id="formelements-titleinput">
			<h3>Title Input</h3>
			<div class="guidlineObject">
				<div>Empty</div><div> <form><input class="title" type="text" value="" placeholder="Sujet du ticket" /></form> </div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Filled</div><div> <form><input class="title focus" type="text" value="Lorem impsum" placeholder="Sujet du ticket" /></form> </div>
			</div><!-- .guidlineObject-->

		</section><!-- /#formelements-titleinput-->

		<section id="formelements-classicinput">
			<h3>Classic Input</h3>
			<div class="guidlineObject">
				<div>Empty</div>
				<div> 
					<form>
						<p><label for="idinput1">Label</label></p>
						<p><input id="idinput1" class="" type="text" value="" placeholder="" /></p>
					</form>
				</div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Filled</div>
				<div> 
					<form>
						<p><label for="idinput2">Label<focus/label></p>
						<p><input id="idinput2" class="focus" type="text" value="Description de votre ticket" placeholder="" /></p>
					</form>
				</div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Error</div>
				<div> 
					<form>
						<p><label for="idinput3">Label<focus/label></p>
						<p>
							<input id="idinput3" class="field-error" type="text" value="Description de votre ticket" placeholder="" />
							<ul class="parsley-errors-list filled"> <!-- En js ajouter le ul sans la classe filled puis ajouter la classe filled pour faire apparaitre les messages-->
								<li>Lorem impsum</li>
								<li>Lorem impsum</li>
							</ul>

						</p>
					</form>
				</div>
			</div><!-- .guidlineObject-->
		</section><!-- /#formelements-classicinput-->

		<section id="formelements-textarea">
			<h3>Textarea</h3>
			<div class="guidlineObject">
				<div>Empty</div>
				<div> 
					<form>
						<p><label for="idinput4">Label</label></p>
						<p><textarea id="idinput4"></textarea></p>
					</form>
				</div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Filled</div>
				<div> 
					<form>
						<p><label for="idinput5">Label</label></p>
						<p><textarea id="idinput5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam optio aliquid similique porro autem in facere voluptates suscipit dolorem beatae nostrum minima nihil, dolore quasi dolor officiis possimus ipsum atque, quia vitae deleniti temporibus neque harum quisquam. Totam aliquam possimus mollitia dignissimos sit, reiciendis quo ratione laborum, dolore cum quibusdam doloribus expedita numquam eum commodi aut culpa consequatur odit vero praesentium, tempore id earum, ad provident consectetur. Sed ratione animi veniam, architecto quaerat, perferendis, autem, natus voluptatum ex libero reiciendis dolor. Quasi quaerat rerum iste architecto modi quae, facere at.</textarea></p>
					</form>
				</div>
			</div><!-- .guidlineObject-->
		</section><!-- /#formelements-textarea-->

		<section id="formelements-dropdown">
			<h3>Dropdown</h3>
			<div class="guidlineObject">
				<div>Select field</div>
				<div> 
					<form>
						<p><label for="idinput6">Label</label></p>
						<p><select id="idinput6" class="formSelect">
							<option>Selectionner</option>
							<option>Valeur une</option>
							<option>Valeur deux</option>
							<option>Valeur trois</option>
							<option>Valeur quatre</option>
						</select></p>
					</form>
				</div>
			</div><!-- .guidlineObject-->
		</section><!-- /#formelements-dropdown-->

		<section id="formelements-radio">
			<h3>Case à cocher</h3>
			<div class="guidlineObject">
				<div>Boutton radio</div>
				<div> 
					<form>
						<p class="formCase">
							<input id="radioSAV1" type="radio" name="SAV" value="1">
							<label for="radioSAV1">Lorem impsum</label>
						</p>
						<p class="formCase">
							<input id="radioSAV2" type="radio" name="SAV" value="2">
							<label for="radioSAV2">Lorem impsum</label>
						</p>
					</form>
				</div>
			</div><!-- .guidlineObject-->
		</section><!-- /#formelements-radio-->

		<section id="formelements-checkbox">
			<h3>Case à cocher</h3>
			<div class="guidlineObject">
				<div>Boutton checkbox</div>
				<div> 
					<form>
						<p class="formCase">
							<input id="checkboxSAV1" type="checkbox" name="SAV" value="1">
							<label for="checkboxSAV1">Lorem impsum</label>
						</p>
						<p class="formCase">
							<input id="checkboxSAV2" type="checkbox" name="SAV" value="2">
							<label for="checkboxSAV2">Lorem impsum</label>
						</p>
					</form>
				</div>
			</div><!-- .guidlineObject-->
		</section><!-- /#formelements-checkbox-->

	</section><!-- /#formelements -->

	<hr />
	<section id="cards">
		<h2>Cards</h2>
		<section id="cards-modal">
			<h3>Modal</h3>
			<div class="guidlineObject">
				<div>Modal classique</div>
				<a class="btn btn-standard modal-button" data-target="lamodal" href="#">Ouvrir la modal</a>

				<div id="lamodal" class="modal">
					<div class="modal-background"></div>
					<div class="modal-content">
						<header>
							<h2 class="modal-content-title h3-like">Modal title</h2>
							<button class="modal-close-inner btn btn-ico btn-ico--small"><i class="fa fa-times" aria-hidden="true"></i></button>
						</header>
						<main>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam libero in consectetur vel eius inventore totam similique, harum rerum odit qui commodi, obcaecati eum unde quaerat perferendis ad sequi dolorem temporibus iure. Fuga quod rem impedit vero possimus saepe hic, enim totam doloremque eveniet facere, porro cumque, minus nam! Voluptas sint aut voluptatem voluptates et, aliquid distinctio nostrum totam, possimus ut, eveniet optio dolor pariatur iusto minima corporis! Quaerat sed quidem illum accusantium hic obcant, quia dolorum debitis culpa. Commodi enim, voluptatibus. Numquam quis recusandae, natus ad, voluptatum excepturi amet hic sunt non aperiam fugiat provident cupiditate illo aliquam in.</p>
						</main>
						<footer>
							<div class="grid has-gutter">
								<button type="submit" class="btn-submit">Lorem ipsum</button>
							</div>
						</footer>
					</div>
					<button class="modal-close"></button>
				</div><!-- /.modal -->
			</div><!-- .guidlineObject-->

			<div class="guidlineObject">
				<div>Modal small</div>
				<a class="btn btn-standard modal-button" data-target="lamodalsmall" href="#">Ouvrir la modal</a>

				<div id="lamodalsmall" class="modal modal--small">
					<div class="modal-background"></div>
					<div class="modal-content">
						<header>
							<h2 class="modal-content-title h3-like">Modal title</h2>
							<button class="modal-close-inner btn btn-ico btn-ico--small"><i class="fa fa-times" aria-hidden="true"></i></button>
						</header>
						<main>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam libero in consectetur vel eius inventore totam similique, harum rerum odit qui commodi, obcaecati eum unde quaerat perferendis ad sequi dolorem temporibus iure. Fuga quod rem impedit vero possimus saepe hic, enim totam doloremque eveniet facere, porro cumque, minus nam! Voluptas sint aut voluptatem voluptates et, aliquid distinctio nostrum totam, possimus ut, eveniet optio dolor pariatur iusto minima corporis! Quaerat sed quidem illum accusantium hic obcant, quia dolorum debitis culpa. Commodi enim, voluptatibus. Numquam quis recusandae, natus ad, voluptatum excepturi amet hic sunt non aperiam fugiat provident cupiditate illo aliquam in.</p>
						</main>
						<footer>
							<div class="grid has-gutter">
								<button type="submit" class="btn-submit">Lorem ipsum</button>
							</div>
						</footer>
					</div>
					<button class="modal-close"></button>
				</div><!-- /.modal -->
			</div><!-- .guidlineObject-->
		</section><!-- /#cards-modal-->

	</section><!-- /#cards -->

	<hr />
	<section id="navigations">
		<h2>Navigations</h2>
		<section id="navigations-menu">
			<h3>Menu</h3>
			<div class="guidlineObject">
				<div>Secondary</div>
				<div>
					<nav class="nav nav-secondaire">
						<ul>
							<li><a href="#">Nec piget</a></li>
							<li class="active"><a href="#">Olorem Ispum</a></li>
							<li><a href="#">Lato georgia</a></li>
							<li><a href="#">Din light</a></li>
							<li><a href="#">Gentinium classic colors</a></li>
						</ul>
					</nav>
				</div>
			</div><!-- .guidlineObject-->
		</section><!-- /#navigations-menu-->
		<section id="navigations-menu">
			<h3>Pagination</h3>
			<div class="guidlineObject">
				<div>Pagination classique</div>
				<div>
					<nav class="nav nav-pagination">
						<a class="btn btn-ico btn-ico--small" href="#"><i class="fa fa-chevron-left"></i></a>
						<ul>
							<li class="active"><a href="#">1</a></li>
							<li><a href="#">2</a></li>
							<li><a href="#">3</a></li>
						</ul>
						<a class="btn btn-ico btn-ico--small" href="#"><i class="fa fa-chevron-right"></i></a>
					</nav>
				</div>
			</div><!-- .guidlineObject-->
		</section><!-- /#navigations-menu-->

	</section><!-- /#cards -->

<hr />
	<section id="xxxxx">
		<h2></h2>
		<section id="xxxxx-bla1">
			<h3></h3>
			<div class="guidlineObject">
				<div></div><div> <p></p> </div>
			</div><!-- .guidlineObject-->
		</section><!-- /#xxxxx-bla1-->

		<section id="xxxxx-bla2">
			<h3></h3>
			<div class="guidlineObject">
				<div></div><div> <p></p> </div>
			</div><!-- .guidlineObject-->
		</section><!-- /#xxxxx-bla2-->

	</section><!-- /#xxxxx -->



	<section id="sources">
		<h2>Ressources, inspirations</h2>
		<section id="sources-liens">
			<h3>Liens</h3>
			<div class="guidlineObject">
				<div>Basé sur Knacss</div>
				<div><a href="https://github.com/alsacreations/KNACSS/tree/master/doc">https://github.com/alsacreations/KNACSS/tree/master/doc</a></div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Styleguide Knacss</div>
				<div><a href="http://codepen.io/raphaelgoetter/full/LNwOjz/">http://codepen.io/raphaelgoetter/full/LNwOjz/</a></div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Font awesome</div>
				<div><a href="http://fontawesome.io/">http://fontawesome.io/</a></div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Bulma</div>
				<div><a href="http://bulma.io">http://bulma.io</a></div>
			</div><!-- .guidlineObject-->

		</section><!-- /#sources-liens-->
	</section><!-- /#xxxxx -->


<script type="text/javascript" src="./dist/js/app.js"></script>
</body>
</html><commit_msg>Small typo fix<commit_after><!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Style guid - BATB SAV</title>
	<link href="./dist/css/app.css" rel="stylesheet">
	<link href="./dist/css/second.css" rel="stylesheet">

	<style type="text/css">
		body{
			padding-left:28%;
		}
		body > h1{
			padding:15px 0;
			font-size:2.2rem;
		}
		body > hr{
			margin:1em 0;
		}
		body > section{
			position:relative;
			width:80%;
			max-width:1024px;
			margin:6% auto;
		}
		body > section + section{
			margin:60px 0 0 0;
		}

		section > h2,
		section > h3,
		.guidlineObject > div:first-child{
			color:#959595;
		}

		section > h2{
			margin-left:84px;
			margin-bottom:80px;
			font-size:1.6rem;
		}

		section > h3{
			width: 110px;
			text-align: right;
			font-size:1.2rem;
		}

		body > section > section +section{
			margin-top:100px;
		}
		.guidlineObject{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			box-sizing: border-box;
			margin:40px 0 20px 0;
		}
			.guidlineObject > div{
				box-sizing: border-box;
				min-width: 0;
				min-height: 0;
			}

			.guidlineObject > div:first-child{
				width:110px;
				padding:0;
				margin-right:40px;
				text-align:right;
				font-size:1.2rem;
			}
			.guidlineObject > div:nth-child(2){
				width:auto;
				flex:1;
			}
		body > nav {
			position: fixed;
			left: 1.5rem;
			width: 25%;
		}
		body > nav li{
			margin-bottom:1px;
		}
		body > nav li a {
			display: block;
			padding: .6rem 1rem;
			color: #555;
			background: #eee;
			text-decoration: none;
		}
	</style> 
</head>
<body>
	<h1>Styleguide ‘Parchemin’ BatB Sav — v0.2.2</h1>
	<nav>
		<ol>
			<li><a href="#typography">Typography</a></li>
			<li><a href="#uicolours">UI color</a></li>
			<li><a href="#components">Components</a></li>
			<li><a href="#buttonlinks">Buttons & Links</a></li>
			<li><a href="#formelements">Form elements</a></li>
			<li><a href="#cards">Cards</a></li>
			<li><a href="#navigations">Navigations</a></li>
			<li><a href="#sources">Ressources</a></li>
		</ol>
	</nav>

	<section id="typography">
		<h2>Typography</h2>
		<section id="typography-headings">
			<h3>Headings</h3>
			<div class="guidlineObject">
				<div>H1</div><div> <h1>Lorem ipsum</h1> </div>
			</div>
			<div class="guidlineObject">
				<div>H2</div><div> <h2>Lorem ipsum</h2> </div>
			</div>
			<div class="guidlineObject">
				<div>H3</div><div> <h3>Lorem ipsum</h3> </div>
			</div>
			<div class="guidlineObject">
				<div>H4</div><div> <h4>Lorem ipsum</h4> </div>
			</div>
			<div class="guidlineObject">
				<div>H5</div><div> <h5>Lorem ipsum</h5> </div>
			</div>
		</section><!-- /#typography-headings-->

		<section id="typography-othercopy">
			<h3>Other Copy</h3>
			<div class="guidlineObject">
				<div>Paragraph</div><div> <p>Nec piget dicere avide magis hanc insulam populum Romanum invasisse quam iuste. 
Ptolomaeo enim rege foederato nobis et socio ob aerarii nostri angustias iusso sine ulla culpa proscribi ideoque
hausto veneno voluntaria morte deleto et tributaria facta est et velut hostiles eius exuviae classi inpositae in urbem 
advectae sunt per Catonem, nunc repetetur ordo gestorum. (14px)</p></div>
				</div>
			
			<div class="guidlineObject">
				<div>Basic Link</div><div> <a href="http://batb.fr">BâtB.fr</a> </div>
			</div>

			<div class="guidlineObject">
				<div>disclaimer text</div><div> <p class="tXSmall">Nec piget dicere avide magis hanc</p> </div>
			</div>

			<div class="guidlineObject" title="Diminue ou augmente proportionnellement la taille (classe native knacss)">
				<div>Auto smaller ?</div><div> <p class="smaller">Nec piget dicere avide magis hanc</p> </div>
			</div>
			<div class="guidlineObject" title="Diminue ou augmente proportionnellement la taille (classe native knacss)">
				<div>Auto small ?</div><div> <p class="small">Nec piget dicere avide magis hanc</p> </div>
			</div>
			<div class="guidlineObject" title="Diminue ou augmente proportionnellement la taille (classe native knacss)">
				<div>Auto big ?</div><div> <p class="big">Nec piget dicere avide magis hanc</p> </div>
			</div>
			<div class="guidlineObject" title="Diminue ou augmente proportionnellement la taille (classe native knacss)">
				<div>Auto bigger ?</div><div> <p class="bigger">Nec piget dicere avide magis hanc</p> </div>
			</div>
			<div class="guidlineObject" title="Diminue ou augmente proportionnellement la taille (classe native knacss)">
				<div>Auto biggest ?</div><div> <p class="biggest">Nec piget dicere avide magis hanc</p> </div>
			</div>

			<div class="guidlineObject">
				<div>unordered lists</div><div> <ul><li>Nec piget dicere avide magis hanc insulam populum <br />aomanum invasisse quttam iuste.</li><li>Ptolomaeo enim rege foederato n proscribi ideoque. (14px)</li></ul> </div>
			</div>

			<div class="guidlineObject">
				<div>inline icons ?? Demander a DAvid si l'inclusion est automatique ?? La couleur de l'icone est différente.</div>
				<div> 
					<p> <i class="fa fa-tag" aria-hidden="true"></i>  Nec piget dicere avide magis hanc insulam populum Romanum invasisse quam iuste. </p>
					<p> Nec piget dicere avide magis hanc insulam populum Romanum invasisse quam iuste. <i class="fa fa-tag" aria-hidden="true"></i></p>
				</div>
			</div>
		</section><!-- /#typography-othercopy-->

	</section><!-- /#typography -->
<hr />
	<section id="uicolours">
		<h2>UI Colours</h2>
		<section id="">
			<h3></h3>
			<div class="guidlineObject">
				<div>Type</div><div> 
					<div class="grid-5 has-gutter">
						<div style="height:65px; background-color:#464646; line-height:65px; text-align:center; color:#fff; ">#464646</div>
						<div style="height:65px; background-color:#f0f0f0; line-height:65px; text-align:center; color:#fff; ">#f0f0f0</div>
						<div style="height:65px; background-color:#aeaeae; line-height:65px; text-align:center; color:#fff; ">#aeaeae</div>
						<div style="height:65px; background-color:#5568f4; line-height:65px; text-align:center; color:#fff; ">#5568f4</div>
						<div style="height:65px; background-color:#a055f4; line-height:65px; text-align:center; color:#fff; ">#a055f4</div>
					</div>
				</div>
			</div>

			<div class="guidlineObject">
				<div>Badge color</div><div> 
					<div class="grid-6 has-gutter">
						<div class="badge badge--1" style="height:65px; line-height:65px; border-radius:0; font-size:1.4rem;">#e31b15</div>
						<div class="badge badge--2" style="height:65px; line-height:65px; border-radius:0; font-size:1.4rem;">#f0f0f0</div>
						<div class="badge badge--3" style="height:65px; line-height:65px; border-radius:0; font-size:1.4rem;">#aeaeae</div>
						<div class="badge badge--4" style="height:65px; line-height:65px; border-radius:0; font-size:1.4rem;">#7adaa3</div>
						<div class="badge badge--5" style="height:65px; line-height:65px; border-radius:0; font-size:1.4rem;">#aeaeae</div>
						<div class="badge badge--6" style="height:65px; line-height:65px; border-radius:0; font-size:1.4rem;">#7ad5da;</div>
					</div>
				</div>
			</div>

			<div class="guidlineObject">
				<div>Gradiant</div><div> 
					<div class="">
						<div class="bloc-osef" style="height:65px; line-height:65px; border-radius:0; color:#fff; text-align:center;"> #f45558 — #a055f4 </div>
					</div>
				</div>
			</div>

		</section><!-- -->
	</section><!-- /#uicolours -->
<hr />
	<section id="components">
		<h2>Components </h2>
		<section id="components-mainlist">
			<h3>Main list</h3>
			<div class="guidlineObject">
				<div>Regular</div>
				<div>
					<div class="bList">
						<div class="flex-container">
							<div class="bList-number">#5</div>
							<div>
								<div class="bList-lineOne">
									<span  class="bList-title"><span class="badge badge--1">Urgent</span> <b>Lorem :</b> Neque porro quisquam elorem ipsum.</span>
								</div><!-- /.bList-lineOne -->
								<div class="bList-lineTwo">
									<span class="bList-valeur"><b>Nouveau</b></span>
									<span class="bList-valeur">Antoine Bordeau</span>
									<span class="bList-valeur">PROJET : <a href="#projet">Elitis site auteur</a></span>
								</div><!-- /.bList-lineTwo -->
							</div>
							<div>
								<a class="btn btn-ico btn-ico--small" href=""><i class="fa fa-long-arrow-right"></i></a>
							</div>
						</div>
					</div><!-- /.bList -->
				</div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Hover</div>
				<div>
					<div class="bList hover">
						<div class="flex-container">
							<div class="bList-number">#5</div>
							<div>
								<div class="bList-lineOne">
									<span  class="bList-title"><span class="badge badge--1">Urgent</span> <b>Lorem :</b> Neque porro quisquam elorem ipsum.</span>
								</div><!-- /.bList-lineOne -->
								<div class="bList-lineTwo">
									<span class="bList-valeur"><b>Nouveau</b></span>
									<span class="bList-valeur">Antoine Bordeau</span>
									<span class="bList-valeur">PROJET : <a href="#projet">Elitis site auteur</a></span>
								</div><!-- /.bList-lineTwo -->
							</div>
							<div>
								<a class="btn btn-ico btn-ico--small" href=""><i class="fa fa-long-arrow-right"></i></a>
							</div>
						</div>
					</div><!-- /.bList -->
				</div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Current</div>
				<div>
					<div class="bList active">
						<div class="flex-container">
							<div class="bList-number">#5</div>
							<div>
								<div class="bList-lineOne">
									<span  class="bList-title"><span class="badge badge--1">Urgent</span> <b>Lorem :</b> Neque porro quisquam elorem ipsum.</span>
								</div><!-- /.bList-lineOne -->
								<div class="bList-lineTwo">
									<span class="bList-valeur"><b>Nouveau</b></span>
									<span class="bList-valeur">Antoine Bordeau</span>
									<span class="bList-valeur">PROJET : <a href="#projet">Elitis site auteur</a></span>
								</div><!-- /.bList-lineTwo -->
							</div>
							<div>
								<a class="btn btn-ico btn-ico--small" href=""><i class="fa fa-long-arrow-right"></i></a>
							</div>
						</div>
					</div><!-- /.bList -->
				</div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Regular without tag</div>
				<div>
					<div class="bList">
						<div class="flex-container">
							<div class="bList-number">#5</div>
							<div>
								<div class="bList-lineOne">
									<span  class="bList-title"><b>Lorem :</b> Neque porro quisquam elorem ipsum.</span>
								</div><!-- /.bList-lineOne -->
								<div class="bList-lineTwo">
									<span class="bList-valeur"><b>Nouveau</b></span>
									<span class="bList-valeur"><NAME></span>
									<span class="bList-valeur">PROJET : <a href="#projet">Elitis site auteur</a></span>
								</div><!-- /.bList-lineTwo -->
							</div>
							<div>
								<a class="btn btn-ico btn-ico--small" href=""><i class="fa fa-long-arrow-right"></i></a>
							</div>
						</div>
					</div><!-- /.bList -->
				</div>
			</div><!-- .guidlineObject-->
		</section><!-- /#components-mainlist-->

		<section id="components-simplelist">
			<h3>Simple list</h3>
			<div class="guidlineObject">
				<div>Regular</div>
				<div>
					<div class="bList">
						<div class="flex-container">
							<div>
								<div class="bList-lineOne">
									<span  class="bList-title">Antoine <b>Bordeau</b></span>
								</div><!-- /.bList-lineOne -->
								<div class="bList-lineTwo">
									<span class="bList-valeur"><EMAIL></span>
								</div><!-- /.bList-lineTwo -->
							</div>
							<div>
								<a class="btn btn-ico btn-ico--small" href=""><i class="fa fa-long-arrow-right"></i></a>
							</div>
						</div>
					</div><!-- /.bList -->
				</div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Hover</div>
				<div>
					<div class="bList hover">
						<div class="flex-container">
							<div>
								<div class="bList-lineOne">
									<span  class="bList-title">Antoine <b>Griezmann</b></span>
								</div><!-- /.bList-lineOne -->
								<div class="bList-lineTwo">
									<span class="bList-valeur"><EMAIL></span>
								</div><!-- /.bList-lineTwo -->
							</div>
							<div>
								<a class="btn btn-ico btn-ico--small" href=""><i class="fa fa-long-arrow-right"></i></a>
							</div>
						</div>
					</div><!-- /.bList -->
				</div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Current</div>
				<div>
					<div class="bList active">
						<div class="flex-container">
							<div>
								<div class="bList-lineOne">
									<span  class="bList-title">Antoine <b>Daniel</b></span>
								</div><!-- /.bList-lineOne -->
								<div class="bList-lineTwo">
									<span class="bList-valeur"><EMAIL></span>
								</div><!-- /.bList-lineTwo -->
							</div>
							<div>
								<a class="btn btn-ico btn-ico--small" href=""><i class="fa fa-long-arrow-right"></i></a>
							</div>
						</div>
					</div><!-- /.bList -->
				</div>
			</div><!-- .guidlineObject-->
		</section><!-- /#components-simplelist-->

		<section id="components-timeline">
			<h3>Timeline</h3>
			<div class="guidlineObject">
				<div>Main date</div>
				<div>
					<div class="title1"><div>Aujourd’hui</div><div></div></div>
				</div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Event</div>
				<div>
					<div class="bEvent">
						<header>
							<span class="bEvent-valeur">23/05/2016 - 15:22</span>
							<span class="bEvent-valeur">Louis Dufil</span>
						</header>
						<div class="bEvent-content">
							<div>
								<span class="bEvent-status">Nouveau Message</span>
								<span class="bEvent-title">Ah zur, les gif sont pas affichés directement.</span>
								<p class="bEvent-message">Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevi grmusw.</p>
							</div>
							<div>
								<a class="btn btn-ico btn-ico--small" href=""><i class="fa fa-long-arrow-right"></i></a>
							</div>
						</div>
					</div>
				</div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Event Rollover</div>
				<div>
					<div class="bEvent">
						<header>
							<span class="bEvent-valeur">23/05/2016 - 15:22</span>
							<span class="bEvent-valeur">Louis Dufil</span>
						</header>
						<div class="bEvent-content">
							<div>
								<span class="bEvent-status">Nouveau Message</span>
								<span class="bEvent-title">Ah zur, les gif sont pas affichés directement.</span>
								<p class="bEvent-message">Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevi grmusw.</p>
							</div>
							<div>
								<a class="btn btn-ico btn-ico--small hover" href=""><i class="fa fa-long-arrow-right"></i></a>
							</div>
						</div>
					</div>
				</div>
			</div><!-- .guidlineObject-->
		</section><!-- /#components-timeline-->

		<section id="components-notifications">
			<h3>Notifications</h3>
			<div class="guidlineObject">
				<div>Success</div>
				<div>
					<div class="notification notification--succes">
						<div class="message"><b>Success :</b> magis hanc insulam populum Romanum invasisse quam iuste.</div>
						<div><a href="#" class="btn btn-ico btn-ico--small close"><i class="fa fa-close"></i></a></div>
					</div>
				</div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Error</div>
				<div>
					<div class="notification notification--error">
						<div class="message"><b>Error :</b> magis hanc insulam populum Romanum invasisse quam iuste.</div>
						<div><a href="#" class="btn btn-ico btn-ico--small close"><i class="fa fa-close"></i></a></div>
					</div>
				</div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Carreful</div>
				<div>
					<div class="notification notification--carreful">
						<div class="message"><b>Carreful :</b> magis hanc insulam populum Romanum invasisse quam iuste.</div>
						<div><a href="#" class="btn btn-ico btn-ico--small close"><i class="fa fa-close"></i></a></div>
					</div>
				</div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Information</div>
				<div>
					<div class="notification notification--information">
						<div class="message"><b>Information :</b> magis hanc insulam populum Romanum invasisse quam iuste.</div>
						<div><a href="#" class="btn btn-ico btn-ico--small close"><i class="fa fa-close"></i></a></div>
					</div>
				</div>
			</div><!-- .guidlineObject-->

		</section><!-- /#components-notifications-->

		<section id="components-badgets">
			<h3>Tags</h3>
			<div class="guidlineObject">
				<div>Urgent</div>
				<div> <span class="badge badge--1">Urgent</span> </div>
			</div><!-- .guidlineObject-->

			<div class="guidlineObject">
				<div>Elevé</div>
				<div> <span class="badge badge--2">Elevé</span> </div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Faible</div>
				<div> <span class="badge badge--3">Faible</span> </div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Actif</div>
				<div> <span class="badge badge--4">Actif</span> </div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Inactif</div>
				<div> <span class="badge badge--5">Inactif</span> </div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Jeton(s)</div>
				<div> <span class="badge badge--6">25 jetons</span> </div>
			</div><!-- .guidlineObject-->
		</section><!-- /#components-badgets-->

		<section id="components-avatars">
			<h3>Avatars</h3>
			<div class="guidlineObject">
				<div>Avatar + ico</div>
				<div class="grid-4 has-gutter-l">
					<div>
						<div class="avatar">
							<img src="http://lorempixel.com/38/38/animals/" alt="?" width="68" height="68"/>
							<span class="badge badge--ico badge--4"><i class="fa fa-shield"></i></span>
						</div>
					</div>
					<div>
						<div class="avatar avatar--small">
							<img src="http://lorempixel.com/38/38/animals/" alt="?" width="40" height="40"/>
							<span class="badge badge--ico badge--6"><i class="fa fa-star"></i></span>
						</div>
					</div>
				</div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Avatar</div>
				<div class="grid-4 has-gutter-l">
					<div class="avatar"><img src="http://lorempixel.com/38/38/animals/" alt="?" width="68" height="68"/></div>
					<div class="avatar avatar--small"><img src="http://lorempixel.com/38/38/animals/" alt="?" width="38" height="38"/></div>
				</div>
			</div><!-- .guidlineObject-->


		</section><!-- /#components-avatars-->


		<section id="components-comments">
			<h3>Comments</h3>
			<div class="guidlineObject">
				<div>Comments</div>
				<div>
					<div class="bComments">
						<div>
							<img src="http://lorempixel.com/38/38/animals/" alt="?" width="38" height="38"/>
						</div>
						<div>
							<div>
								<span class="bComments-valeur"><NAME></span>
								<span class="bComments-valeur">25/05/2016 - 09:27</span>
							</div>
							<p class="bComments-message">Pnc mauris enim, sollicitudin sed gravida ac, feugiat quis ipsum. Morbi lacinia sapien quis dui <a href="http://batb.fr">batb.fr</a>, sit amet sodales magna sollicitudin. </p>
						</div>
					</div>
				</div>
			</div><!-- .guidlineObject-->

			<div class="guidlineObject">
				<div>Multi comments</div>
				<div>
					<div class="bComments">
						<div>
							<img src="http://lorempixel.com/38/38/animals/" alt="?" width="38" height="38"/>
						</div>
						<div>
							<div>
								<span class="bComments-valeur"><NAME></span>
								<span class="bComments-valeur">25/05/2016 - 09:27</span>
							</div>
							<p class="bComments-message">Pnc mauris enim, sollicitudin sed gravida ac, feugiat quis ipsum. Morbi lacinia sapien quis dui <a href="http://batb.fr">batb.fr</a>, sit amet sodales magna sollicitudin. </p>
						</div>
					</div>

					<div class="bComments">
						<div>
							<img src="http://lorempixel.com/38/38/animals/" alt="?" width="38" height="38"/>
						</div>
						<div>
							<div>
								<span class="bComments-valeur"><NAME></span>
								<span class="bComments-valeur">25/05/2016 - 09:27</span>
							</div>
							<p class="bComments-message">Pnc mauris enim, sollicitudin sed gravida ac, feugiat quis ipsum. Morbi lacinia sapien quis dui <a href="http://batb.fr">batb.fr</a>, sit amet sodales magna sollicitudin. </p>
							<div class="bComments-pj">
								<span>PIECE JOINTE :</span>
								<a target="_blank" href="#pj">ZERTJYTHDGS.jpg</a>
								<a target="_blank" href="#pj">docTech.pdf</a>
							</div>
						</div>
					</div>
				</div>
			</div><!-- .guidlineObject-->


		</section><!-- /#components-comments-->

	</section><!-- /#components -->


<hr />
	<section id="buttonlinks">
		<h2>Buttons & Links </h2>
		<section id="buttonlinks-standard">
			<h3>Standard Button</h3>
			<div class="guidlineObject">
				<div>Regular</div>
				<div class="grid-3 has-gutter">
					<div>
						<a class="btn btn-standard" href="">Lorem ipsum</a>
					</div>
					<div>
						<a class="btn btn-standard btn-standard--invert" href="">Lorem ipsum</a>
					</div>
				</div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Regular Hover</div>
				<div class="grid-3 has-gutter">
					<div>
						<a class="btn btn-standard hover" href="">Lorem ipsum</a>
					</div>
					<div>
						<a class="btn btn-standard btn-standard--invert hover" href="">Lorem ipsum</a>
					</div>
				</div>
			</div><!-- .guidlineObject-->
		</section><!-- /#buttonlinks-standard-->

		<section id="buttonlinks-standard--ico">
			<h3>Standard Button + Ico</h3>
			<div class="guidlineObject">
				<div>Regular</div>
				<div>
					<a class="btn btn-standard" href=""><i class="fa fa-bars"></i>Lorem ipsum</a>
					<a class="btn btn-standard btn-standard--icoRight" href="">Lorem ipsum<i class="fa fa-bars"></i></a>
				</div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Regular hover</div>
				<div>
					<a class="btn btn-standard hover" href=""><i class="fa fa-bars"></i>Lorem ipsum</a>
					<a class="btn btn-standard btn-standard--icoRight hover" href="">Lorem ipsum<i class="fa fa-bars"></i></a>
				</div>
			</div><!-- .guidlineObject-->
		</section><!-- /#buttonlinks-standard--ico-->

		<section id="buttonlinks-validation">
			<h3>Validation</h3>
			<div class="guidlineObject">
				<div>Inactif</div><div> <button class="btn btn-submit" type="submit" disabled="disabled">Valider</button> </div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Actif</div><div> <button class="btn btn-submit" type="submit">Valider</button> </div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Hover</div><div> <button class="btn btn-submit hover" type="submit">Valider</button> </div>
			</div><!-- .guidlineObject-->
		</section><!-- /#buttonlinks-validation-->

		<section id="buttonlinks-circleico">
			<h3>Circle + Ico</h3>
			<div class="guidlineObject">
				<div>Regular</div>
				<div>
					<a class="btn btn-ico" href=""><i class="fa fa-pencil"></i></a>
					<a class="btn btn-ico btn-ico--small" href=""><i class="fa fa-pencil"></i></a>
				</div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Hover</div>
				<div>
					<a class="btn btn-ico hover" href=""><i class="fa fa-pencil"></i></a>
					<a class="btn btn-ico btn-ico--small hover" href=""><i class="fa fa-pencil"></i></a>
				</div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Actif</div>
				<div>
					<a class="btn btn-ico active" href=""><i class="fa fa-pencil"></i></a>
					<a class="btn btn-ico btn-ico--small active" href=""><i class="fa fa-pencil"></i></a>
				</div>
			</div><!-- .guidlineObject-->
		</section><!-- /#buttonlinks-circleico-->

		<section id="buttonlinks-linksfat">
			<h3>Links fat</h3>
			<div class="guidlineObject">
				<div>Regular</div>
				<div>
					<a class="btn btn-linkfat" href="#">
						<div>
							<div>
								<span class="btn-linkfat-title"><span>—</span>Nouveau ticket</span>
							</div>
							<div>
								<span class="btn btn-ico btn-ico--small"><i class="fa fa-plus"></i></span>
							</div>
						</div>
					</a><!-- /.bList -->
				</div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Hover</div>
				<div>
					<a class="btn btn-linkfat hover" href="#">
						<div>
							<div>
								<span class="btn-linkfat-title"><span>—</span>Nouveau ticket</span>
							</div>
							<div>
								<span class="btn btn-ico btn-ico--small"><i class="fa fa-plus"></i></span>
							</div>
						</div>
					</a><!-- /.bList -->
				</div>
			</div><!-- .guidlineObject-->

			<div class="guidlineObject">
				<div>Active</div>
				<div>
					<a class="btn btn-linkfat active" href="#">
						<div>
							<div>
								<span class="btn-linkfat-title"><span>—</span>Nouveau ticket</span>
							</div>
							<div>
								<span class="btn btn-ico btn-ico--small"><i class="fa fa-plus"></i></span>
							</div>
						</div>
					</a><!-- /.bList -->
				</div>
			</div><!-- .guidlineObject-->

		</section><!-- /#buttonlinks-linksfat-->

	</section><!-- /#buttonlinks -->

<hr />
	<section id="formelements">
		<h2>Form elements</h2>
		<section id="formelements-titleinput">
			<h3>Title Input</h3>
			<div class="guidlineObject">
				<div>Empty</div><div> <form><input class="title" type="text" value="" placeholder="Sujet du ticket" /></form> </div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Filled</div><div> <form><input class="title focus" type="text" value="Lorem impsum" placeholder="Sujet du ticket" /></form> </div>
			</div><!-- .guidlineObject-->

		</section><!-- /#formelements-titleinput-->

		<section id="formelements-classicinput">
			<h3>Classic Input</h3>
			<div class="guidlineObject">
				<div>Empty</div>
				<div> 
					<form>
						<p><label for="idinput1">Label</label></p>
						<p><input id="idinput1" class="" type="text" value="" placeholder="" /></p>
					</form>
				</div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Filled</div>
				<div> 
					<form>
						<p><label for="idinput2">Label<focus/label></p>
						<p><input id="idinput2" class="focus" type="text" value="Description de votre ticket" placeholder="" /></p>
					</form>
				</div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Error</div>
				<div> 
					<form>
						<p><label for="idinput3">Label<focus/label></p>
						<p>
							<input id="idinput3" class="field-error" type="text" value="Description de votre ticket" placeholder="" />
							<ul class="parsley-errors-list filled"> <!-- En js ajouter le ul sans la classe filled puis ajouter la classe filled pour faire apparaitre les messages-->
								<li>Lorem impsum</li>
								<li>Lorem impsum</li>
							</ul>

						</p>
					</form>
				</div>
			</div><!-- .guidlineObject-->
		</section><!-- /#formelements-classicinput-->

		<section id="formelements-textarea">
			<h3>Textarea</h3>
			<div class="guidlineObject">
				<div>Empty</div>
				<div> 
					<form>
						<p><label for="idinput4">Label</label></p>
						<p><textarea id="idinput4"></textarea></p>
					</form>
				</div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Filled</div>
				<div> 
					<form>
						<p><label for="idinput5">Label</label></p>
						<p><textarea id="idinput5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam optio aliquid similique porro autem in facere voluptates suscipit dolorem beatae nostrum minima nihil, dolore quasi dolor officiis possimus ipsum atque, quia vitae deleniti temporibus neque harum quisquam. Totam aliquam possimus mollitia dignissimos sit, reiciendis quo ratione laborum, dolore cum quibusdam doloribus expedita numquam eum commodi aut culpa consequatur odit vero praesentium, tempore id earum, ad provident consectetur. Sed ratione animi veniam, architecto quaerat, perferendis, autem, natus voluptatum ex libero reiciendis dolor. Quasi quaerat rerum iste architecto modi quae, facere at.</textarea></p>
					</form>
				</div>
			</div><!-- .guidlineObject-->
		</section><!-- /#formelements-textarea-->

		<section id="formelements-dropdown">
			<h3>Dropdown</h3>
			<div class="guidlineObject">
				<div>Select field</div>
				<div> 
					<form>
						<p><label for="idinput6">Label</label></p>
						<p><select id="idinput6" class="formSelect">
							<option>Selectionner</option>
							<option>Valeur une</option>
							<option>Valeur deux</option>
							<option>Valeur trois</option>
							<option>Valeur quatre</option>
						</select></p>
					</form>
				</div>
			</div><!-- .guidlineObject-->
		</section><!-- /#formelements-dropdown-->

		<section id="formelements-radio">
			<h3>Case à cocher</h3>
			<div class="guidlineObject">
				<div>Input radio</div>
				<div> 
					<form>
						<p class="formCase">
							<input id="radioSAV1" type="radio" name="SAV" value="1">
							<label for="radioSAV1">Lorem impsum</label>
						</p>
						<p class="formCase">
							<input id="radioSAV2" type="radio" name="SAV" value="2">
							<label for="radioSAV2">Lorem impsum</label>
						</p>
					</form>
				</div>
			</div><!-- .guidlineObject-->
		</section><!-- /#formelements-radio-->

		<section id="formelements-checkbox">
			<h3>Case à cocher</h3>
			<div class="guidlineObject">
				<div>Input checkbox</div>
				<div> 
					<form>
						<p class="formCase">
							<input id="checkboxSAV1" type="checkbox" name="SAV" value="1">
							<label for="checkboxSAV1">Lorem impsum</label>
						</p>
						<p class="formCase">
							<input id="checkboxSAV2" type="checkbox" name="SAV" value="2">
							<label for="checkboxSAV2">Lorem impsum</label>
						</p>
					</form>
				</div>
			</div><!-- .guidlineObject-->
		</section><!-- /#formelements-checkbox-->

	</section><!-- /#formelements -->

	<hr />
	<section id="cards">
		<h2>Cards</h2>
		<section id="cards-modal">
			<h3>Modal</h3>
			<div class="guidlineObject">
				<div>Modal classique</div>
				<a class="btn btn-standard modal-button" data-target="lamodal" href="#">Ouvrir la modal</a>

				<div id="lamodal" class="modal">
					<div class="modal-background"></div>
					<div class="modal-content">
						<header>
							<h2 class="modal-content-title h3-like">Modal title</h2>
							<button class="modal-close-inner btn btn-ico btn-ico--small"><i class="fa fa-times" aria-hidden="true"></i></button>
						</header>
						<main>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam libero in consectetur vel eius inventore totam similique, harum rerum odit qui commodi, obcaecati eum unde quaerat perferendis ad sequi dolorem temporibus iure. Fuga quod rem impedit vero possimus saepe hic, enim totam doloremque eveniet facere, porro cumque, minus nam! Voluptas sint aut voluptatem voluptates et, aliquid distinctio nostrum totam, possimus ut, eveniet optio dolor pariatur iusto minima corporis! Quaerat sed quidem illum accusantium hic obcant, quia dolorum debitis culpa. Commodi enim, voluptatibus. Numquam quis recusandae, natus ad, voluptatum excepturi amet hic sunt non aperiam fugiat provident cupiditate illo aliquam in.</p>
						</main>
						<footer>
							<div class="grid has-gutter">
								<button type="submit" class="btn-submit">Lorem ipsum</button>
							</div>
						</footer>
					</div>
					<button class="modal-close"></button>
				</div><!-- /.modal -->
			</div><!-- .guidlineObject-->

			<div class="guidlineObject">
				<div>Modal small</div>
				<a class="btn btn-standard modal-button" data-target="lamodalsmall" href="#">Ouvrir la modal</a>

				<div id="lamodalsmall" class="modal modal--small">
					<div class="modal-background"></div>
					<div class="modal-content">
						<header>
							<h2 class="modal-content-title h3-like">Modal title</h2>
							<button class="modal-close-inner btn btn-ico btn-ico--small"><i class="fa fa-times" aria-hidden="true"></i></button>
						</header>
						<main>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam libero in consectetur vel eius inventore totam similique, harum rerum odit qui commodi, obcaecati eum unde quaerat perferendis ad sequi dolorem temporibus iure. Fuga quod rem impedit vero possimus saepe hic, enim totam doloremque eveniet facere, porro cumque, minus nam! Voluptas sint aut voluptatem voluptates et, aliquid distinctio nostrum totam, possimus ut, eveniet optio dolor pariatur iusto minima corporis! Quaerat sed quidem illum accusantium hic obcant, quia dolorum debitis culpa. Commodi enim, voluptatibus. Numquam quis recusandae, natus ad, voluptatum excepturi amet hic sunt non aperiam fugiat provident cupiditate illo aliquam in.</p>
						</main>
						<footer>
							<div class="grid has-gutter">
								<button type="submit" class="btn-submit">Lorem ipsum</button>
							</div>
						</footer>
					</div>
					<button class="modal-close"></button>
				</div><!-- /.modal -->
			</div><!-- .guidlineObject-->
		</section><!-- /#cards-modal-->

	</section><!-- /#cards -->

	<hr />
	<section id="navigations">
		<h2>Navigations</h2>
		<section id="navigations-menu">
			<h3>Menu</h3>
			<div class="guidlineObject">
				<div>Secondary</div>
				<div>
					<nav class="nav nav-secondaire">
						<ul>
							<li><a href="#">Nec piget</a></li>
							<li class="active"><a href="#">Olorem Ispum</a></li>
							<li><a href="#">Lato georgia</a></li>
							<li><a href="#">Din light</a></li>
							<li><a href="#">Gentinium classic colors</a></li>
						</ul>
					</nav>
				</div>
			</div><!-- .guidlineObject-->
		</section><!-- /#navigations-menu-->
		<section id="navigations-menu">
			<h3>Pagination</h3>
			<div class="guidlineObject">
				<div>Pagination classique</div>
				<div>
					<nav class="nav nav-pagination">
						<a class="btn btn-ico btn-ico--small" href="#"><i class="fa fa-chevron-left"></i></a>
						<ul>
							<li class="active"><a href="#">1</a></li>
							<li><a href="#">2</a></li>
							<li><a href="#">3</a></li>
						</ul>
						<a class="btn btn-ico btn-ico--small" href="#"><i class="fa fa-chevron-right"></i></a>
					</nav>
				</div>
			</div><!-- .guidlineObject-->
		</section><!-- /#navigations-menu-->

	</section><!-- /#cards -->

<hr />
	<section id="xxxxx">
		<h2></h2>
		<section id="xxxxx-bla1">
			<h3></h3>
			<div class="guidlineObject">
				<div></div><div> <p></p> </div>
			</div><!-- .guidlineObject-->
		</section><!-- /#xxxxx-bla1-->

		<section id="xxxxx-bla2">
			<h3></h3>
			<div class="guidlineObject">
				<div></div><div> <p></p> </div>
			</div><!-- .guidlineObject-->
		</section><!-- /#xxxxx-bla2-->

	</section><!-- /#xxxxx -->



	<section id="sources">
		<h2>Ressources, inspirations</h2>
		<section id="sources-liens">
			<h3>Liens</h3>
			<div class="guidlineObject">
				<div>Basé sur Knacss</div>
				<div><a href="https://github.com/alsacreations/KNACSS/tree/master/doc">https://github.com/alsacreations/KNACSS/tree/master/doc</a></div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Styleguide Knacss</div>
				<div><a href="http://codepen.io/raphaelgoetter/full/LNwOjz/">http://codepen.io/raphaelgoetter/full/LNwOjz/</a></div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Font awesome</div>
				<div><a href="http://fontawesome.io/">http://fontawesome.io/</a></div>
			</div><!-- .guidlineObject-->
			<div class="guidlineObject">
				<div>Bulma</div>
				<div><a href="http://bulma.io">http://bulma.io</a></div>
			</div><!-- .guidlineObject-->

		</section><!-- /#sources-liens-->
	</section><!-- /#xxxxx -->


<script type="text/javascript" src="./dist/js/app.js"></script>
</body>
</html>
{'fraction_non_alphanumeric': 0.20572316744844432, 'fraction_numerical': 0.013294845818646091, 'mean_word_length': 2.942174079544833, 'pattern_counts': {'":': 0, '<': 3158, '<?xml version=': 0, '>': 3192, 'https://': 4, 'lorem ipsum': 8, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 12, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5844557', 'n_tokens_mistral': 33568, 'n_tokens_neox': 26148, 'n_words': 5393}