@font-face {
    font-family: 'Poppins bold';
    src: url('../fonts/Poppins-Bold.woff2') format('woff2'),
        url('../fonts/Poppins-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins regular';
    src: url('../fonts/Poppins-Regular.woff2') format('woff2'),
        url('../fonts/Poppins-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins italic';
    src: url('../fonts/Poppins-Italic.woff2') format('woff2'),
        url('../fonts/Poppins-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins semibold';
    src: url('../fonts/Poppins-SemiBold.woff2') format('woff2'),
        url('../fonts/Poppins-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #1A171B;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ---------------------------------------------------------
--- Reset */

	html { -webkit-tap-highlight-color: transparent; }

	figure { 
		margin: 0; 
/* 		padding: 1em; */
	}
	
	article { position: relative; }
	
	table { 
		width: 100%;
		border-collapse: collapse;
		border-spacing: 0;
	}
	
	h1 + p,
	h2 + p,
	h3 + p { margin-top: 0; }
	
	p:first-child { margin-top: 0; }
	
	*,
	*:before,
	*:after {
	  -webkit-box-sizing: border-box;
	     -moz-box-sizing: border-box;
	          box-sizing: border-box;
	}
		
	/* max values */
	img,
	table,
	td,
	blockquote,
	code,
	pre,
	textarea,
	input,
	video,
	svg { width:100%;max-width: 100%; outline:none}

	body > script { display: none !important; }
	
	img {
		height:auto;
	}
/* reset form */

	button,
	input,
	optgroup,
	select,
	textarea {
	  margin: 0;
	  font: inherit;
	  color: inherit;
	}
	
	button {
	  overflow: visible;
	}
	
	button,
	select {
	  text-transform: none;
	}
	
	button,
	html input[type="button"],
	input[type="reset"],
	input[type="submit"] {
	  -webkit-appearance: button;
	  cursor: pointer;
	}
	
	button[disabled],
	html input[disabled] {
	  cursor: default;
	}
	
	button::-moz-focus-inner,
	input::-moz-focus-inner {
	  padding: 0;
	  border: 0;
	}
	
	input {
	  line-height: normal;
	}
	
	input[type="checkbox"],
	input[type="radio"] {
	  -webkit-box-sizing: border-box;
	          box-sizing: border-box;
	  padding: 0;
	}
	
	input[type="number"]::-webkit-inner-spin-button,
	input[type="number"]::-webkit-outer-spin-button {
	  height: auto;
	}
	
	input[type="search"] {
	  -webkit-box-sizing: content-box;
	          box-sizing: content-box;
	  -webkit-appearance: textfield;
	}
	
	input[type="search"]::-webkit-search-cancel-button,
	input[type="search"]::-webkit-search-decoration {
	  -webkit-appearance: none;
	}
	
	legend {
	  padding: 0;
	  border: 0;
	}
	
	textarea {
	  overflow: auto;
	}

	button,
	[role="button"],
	input,
	label,
	select,
	summary,
	textarea {
	  -ms-touch-action: manipulation;
	      touch-action: manipulation;
	}
	

	input,
	button,
	select,
	textarea {
	  margin: 0;
	  line-height: inherit;
	  border-radius: 0;
	  border: 0;
	}
	
	input[type="text"], input[type="password"],
	textarea, select {
	  font-size: 16px;
	}
	
	textarea {
	  resize: vertical;
	}
	
	fieldset {
	  min-width: 0;
	  padding: 0;
	  margin: 0;
	  border: 0;
	}
	
	
	input[type="search"] {
	  -webkit-box-sizing: inherit;
	          box-sizing: inherit;
	  -webkit-appearance: none;
	}
	
	/* Formulaire */

	.b-form__grp { 
		display: block; 
		overflow: hidden;
	}
	
	.b-form__grp > * { float: left; }

	.b-form__input,
	.b-form__textarea {
		border: 1px solid #1A171B;
	}



	/* tableaux */

	table th,
	table td {
		/*padding: 1.725em 0;*/
	}
	
	.is-desktop {
		display: block;
	}
	
	.is-mobile {
		display: none;
	}
	
	
	
	


/* ---------------------------------------------------------
--- Typo */

 	html { 
		font-size: .625em; 
		font-size: calc(1em * .625); 
	}
	

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin: 0;
		padding: 0;
		font-weight: normal;
		font-style: normal;
	}

    
	.bold,strong,b {
		font-family: 'Poppins bold';
	}
	
	em {
		font-family: 'Poppins italic';
	}
	
	i {
		font-style: normal !important;
	}
		
	ul {
		list-style-type: none;
		padding: 0;
		margin:0;
	}
	
	
	
	
	input::-webkit-input-placeholder {
	color: #fff !important;
	opacity: 0.5;
	}
	 
	textarea:-moz-placeholder { /* Firefox 18- */
	input: #fff !important;  
	opacity: 0.5;
	}
	 
	textarea::-moz-placeholder {  /* Firefox 19+ */
	input: #fff !important;  
	opacity: 0.5;
	}
	 
	textarea:-ms-input-placeholder {  
	input: #fff !important;  
	opacity: 0.5;
	}
	
	.clear {
		clear:both;
	}
	
	a {
		text-decoration: none;
		color:#fff;
	}
	
	a:hover {
		text-decoration: underline;
	}

	.underline:hover {
		text-decoration: underline;
	}
	
	ul.cat > li.selected > a {
		text-decoration: underline;
	}
	
	ul.cat > li > a {
		text-decoration: none;
	}
	
	.hide {
		display: none !important;
	}
	
	.hide-player {
		display: none !important;
	}

	.hide-opacity {
		opacity: 0 !important;
		top: -20px !important;
		-webkit-transition: all 0.2s ease-in-out;
    	-ms-transform: all 0.2s ease-in-out;
    	transition: all 0.2s ease-in-out;
	}
	
	p, ul {
		padding:0;
		margin:0;
	}
	
	.center {
		text-align: center;
	}
	
	.overflow-y {
		overflow-y: hidden;
	}
	
	.hide-desktop {
		display:inline-block;
	}
	
	.hide-desktop-flex {
		display:flex;
	}
	
	.hide-mobile {
		display:none;
	}
	
	.hide-desktop-span {
		display:none;
	}
	
	h2 {
		font-size:39px;
		line-height:41px;
	}
	
	.o-embed {
		margin: auto;
		}
		
		.o-embed .o-embed-content {
		position: relative;
		height: 0;
		padding-bottom: 56.25%;
		}
		
		.o-embed  .o-embed-content iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		max-width: none !important;
		}
	
	
		.outline {
			font-family: 'MADE Soulmaze Outline';
		}
		
		.display-desktop {
			display:block !important;
		}
		
		.display-mobile {
			display:none !important;
		}
		
		.titre {
			font-family: 'Calibre Medium';
			font-size: 1.2vw;
		}
		
		
	

/* ---------------------------------------------------------
--- Layout -- */
	html { 
	 	-webkit-font-smoothing: antialiased;
		-webkit-text-size-adjust: none;
		-moz-osx-font-smoothing:grayscale;
		-moz-osx-text-size-adjust:none;
 
	}

	html,
	body { 
		position: relative;
		height:100%;
		width:100%;
		background-color:#b9cedf;
		font-family: 'Poppins regular';
		
		
	}
	
	body { 
		padding:0;
		margin:0;
		width:100%;
		height:100%;
		font-weight: normal;
		font-size: 1vw;
		line-height: 1.3vw;
		color:#fff;
		position: relative;
		background-image: url("../img/fond.jpg");
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
	}
	
	.l-wrapper {
		width:100%;
	}
	
	.l-main {
		 width: 100%;
	    padding: 60px;
	    padding-bottom: 20px;
	    display: flex;
	    flex-direction: column;
	    justify-content: space-between;
	    height: auto;
	    min-height: 100vh;
	}
	
	header {
		display: flex;
		align-items:flex-start;
		width: 100%;
		justify-content: space-between;
		font-family: 'Poppins bold';
		font-size: 2rem;
		
	}
	
	header  > div:first-child {
	    display: flex;
	}
	
	header .cap10 {
		font-size: 7.4rem;	
		line-height: 13.2rem;	
	}
	
	header  > div:last-child {
	    margin-top:1.4vw;
	}
	
	header .grid {
		display: flex;
		    flex-direction: column;
		width:auto;
		margin-left:20px;
	}
	
	header .grid .row {
		display: flex;
		align-items: center;
		
	}
	
	header .grid .row > div {
		
	    width: 12px;
	    height: 12px;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    margin-left:2px;
	    margin-right:2px;
	    margin-bottom: 2px;
	    margin-top:2px;
	}
	
	header .grid .row > div > div {
		display: flex;
	    width: 8px;
	    height: 8px;
	    justify-content: center;
	    align-items: center;
	    background: #fff;
	    border-radius: 100%;
	}
	
	header .grid .row > div.active > div {
		width:100%;
		height:100%;
	}

	
	/*header .grid .row > div.active {
	    width: 12px;
	    height: 12px;
	    border-radius: 100%;
	    margin-left: 2px;
	    margin-right: 2px;
	    margin-bottom: 2px;
	     margin-top:0;
	}*/
	
	header .grid .row > div.active2 {
	    width: 1.1vw;
	    height: 1.1vw;
	    margin-left: 2px;
	    margin-right: 2px;
	    margin-bottom: 2px;
	     margin-top:0;
	}


	
	.content {
		margin-top:3.5vw;
		display: flex;
		width: 100%;
		flex-direction:row;
		justify-content: space-between;
		margin-bottom:60px;
	}
	
	.content > div {
		display: flex;
	}
	
	.content > div:first-child {
		font-size: 2.7vw;
		line-height: 3.6vw;
		width:60%;
		margin-right:40px;
		font-family: 'Poppins bold';
	}
	
	.content > div:last-child {
		flex-direction: column;
		width:40%;
		margin-right: 10%;
	}
	
	.content > div:last-child > div {
		max-width:75%;
	}
	
	.content > div:last-child > div > p {
		margin-bottom: 10px;
	}
	
	.content > div:last-child > div > p:last-child {
		margin-top: 40px;
		margin-bottom: 0;
	}

	footer {
		font-size: 0.7vw;
		line-height: 1vw;
		display: flex;
		justify-content: space-between;
	}
	
	footer > div:first-child {
		width:90%;
	}

	
	



@media all and (max-width: 1000px) {

	.l-main {
		 width: 100%;
	    padding: 20px;
	    padding-bottom: 20px;
	    display: block;
	}
	
	header {
		display: flex;
		align-items: flex-end;
		width: 100%;
		justify-content: space-between;
		font-family: 'Poppins bold';
		align-items: flex-start;
		font-size: 16px;
	}
	
	header .cap10 {
	    font-size: 30px;
	    line-height: 32px;
	    line-height: auto;
	}
	
	header .grid {
		margin-left:10px;
	}
	
	header .grid .row > div {
		
	    width: 6px;
	    height: 6px;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    margin-left:1px;
	    margin-right:1px;
	    margin-bottom: 1px;
	    margin-top:1px;
	}
	
	header .grid .row > div > div {
		display: flex;
	    width: 4px;
	    height: 4px;
	    justify-content: center;
	    align-items: center;
	    background: #fff;
	    border-radius: 100%;
	}
	
	.content {
		margin-top:30px;
		flex-direction: column;
	}
	
	.content > div:first-child {
		font-size: 18px;
	    line-height: 22px;
	    width: 100%;
	    margin-right: 0;
	}
	
	.content > div:last-child {
	    width: 100%;
	    margin-right: 0;
	    margin-top:25px;
	}
	
	.content > div:last-child > div {
		width: 50%;
	}
	
	body { 
		font-size: 14px;
		line-height: 15px;
	}
	
	footer {
		position: fixed;
		bottom:10px;
		font-size: 11px;
		line-height: 12px;
		display: block;
	}
}	
	

@media all and (max-width: 640px) {
	.content > div:last-child > div {
		width: 100%;
	}
}
/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster */
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  /*
     * Printing Tables:
     * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
     */
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}