/*
Theme Name: WPKR
Theme URI: https://www.kevenrigo.fr/
Description: WPKR Theme custom
Author: Keven Rigo
Author URL: https://www.kevenrigo.fr
Version: 1.0.0
License: GNU General Public License v2 or later
License URL: https://www.gnu.org/licenses/gpl-2.0.html
*/
/**
 * Radial cursor
 */
/*
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

html {
	margin-top:0!important;
}
html #wpadminbar {
	width:52px!important;
	overflow:hidden!important;
	min-width:0!important;
}
html #wpadminbar:hover {
	width:100%!important;
	overflow:visible!important;
	min-width:none;
}
:root {
	--jaune:#fcbf00;
	--vert:#d3d800;
	--noir: #000000;
	--blanc: #ffffff;
	--box-radius: 20px;
	--transition-all: all 0.4s ease;
}



/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
 
 * {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
img {
	height:auto;
	max-width:100%;
}
html {
	line-height: 1.15;

	/* 1 */
	-webkit-text-size-adjust: 100%;

	/* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {

	margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;

	/* 1 */
	height: 0;

	/* 1 */
	overflow: visible;

	/* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace;

	/* 1 */
	font-size: 1em;

	/* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
	text-decoration-thickness: 1px;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;

	/* 1 */
	text-decoration: underline;

	/* 2 */
	text-decoration-style: dotted;

	/* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace;

	/* 1 */
	font-size: 1em;

	/* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;

	/* 1 */
	font-size: 100%;

	/* 1 */
	line-height: 1.15;

	/* 1 */
	margin: 0;

	/* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {

	/* 1 */
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {

	/* 1 */
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;

	/* 1 */
	color: inherit;

	/* 2 */
	display: table;

	/* 1 */
	max-width: 100%;

	/* 1 */
	padding: 0;

	/* 3 */
	white-space: normal;

	/* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
	box-sizing: border-box;

	/* 1 */
	padding: 0;

	/* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
	-webkit-appearance: textfield;

	/* 1 */
	outline-offset: -2px;

	/* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;

	/* 1 */
	font: inherit;

	/* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}



a:active,a:focus,a:visited {
	outline:none;
	border:none;
}

* {
	max-width:100%;
}

/**
*
* FIN DU RESET
*/




body {
	position:relative;
	background:var(--blanc);
}
main {
	color:var(--noir);
}

@font-face {
    font-family: 'm_s_b_regular';
    src: url('assets/fonts/Made-Soulmaze-Brush/made_soulmaze_brush-webfont.woff2') format('woff2'),
         url('assets/fonts/Made-Soulmaze-Brush/made_soulmaze_brush-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

html {
	font-size:62%;
	scroll-behavior: smooth;
}

.screen-reader-text {
	display:none;
}

*:focus,*:active,*:visited {
	outline:none!important;
}
/*Polices Tailles
*/

body {
	font-size:1rem;
    font-family:'Poppins', sans-serif;
	font-weight:400;
	overflow-x:hidden;
	transition:all0.3s;
}
/*
body:not(.loaded) {
	opacity:0;
}
body.loaded {
	opacity:1;
	transition:	all 0.5s;
}*/
.aurore {
	font-family: 'La Belle Aurore', cursive;	
	font-weight:normal;
	line-height:0.8;
	text-transform:none;
	font-weight:normal;
}
h1 {
	margin:0;
	line-height:1.2;
	font-weight:900;
	font-size:3.85rem;
	text-transform:uppercase;
	text-align:left;
}
h1 span.part1 {
	font-family: 'La Belle Aurore', cursive;
	font-weight:normal;
	font-size:3.85rem;
	color: var(--blanc);
	text-transform: none;
}
h1 span.part2 {
	font-weight:700;
	font-size:2.5rem;
	background:var(--vert);
	color:var(--noir);
}
h1 span.part3 {
	display:none;
}
.num_etape {
	font-size:1.67rem;
	color:var(--blanc);
	background:var(--vert);
	text-transform:uppercase;
	padding:0.5em;
	font-weight:700;
	display:inline-block;
}
.titre_etape {
	color:var(--blanc);
}
.conclusion h2 {
	font-size:3rem;
	color:var(--blanc);
}
a.bouton {
	font-weight:400;
	text-transform:uppercase;
	background:var(--noir);
	color:var(--blanc);
	font-size:1rem;
	padding:1em 3em 1em 1em;
	text-decoration:none;
	transition:all 0.4s;
	display:inline-block;
	word-break:keep-all;
}
a.bouton_blanc {
	font-weight:700;
	color:var(--noir);
	background:var(--blanc);
	text-transform:uppercase;
	font-size:1rem;
	padding:1em 3em 1em 1em;
	text-decoration:none;
	transition:all 0.4s;
}
a.bouton:after {
	content:"+";
	font-weight:700;
	position: relative;
	right: -10px;
}
a.bouton_blanc:after {
	content:"";
	position:absolute;
	top: -26px;
	right: -40px;
	z-index:2;
	display:block;
	background:url('images/play.png') no-repeat center;
	width:67px;
	height:87px;	
}

a.bouton:hover,
a.bouton_blanc:hover {
	background:var(--vert);
	color:var(--blanc);
	
}
/*
a.bouton.close:after {
	font-size:2rem;
	transform:rotate(45deg);
	display:inline-block;
}*/
.bouton.open.close {
  font-size:1rem!important;
  padding: 0em 2.6em 0em 0.7em!important;
}
a.bouton.close:after {
	font-size:4rem;
	transform:rotate(45deg);
	display:inline-block;
	font-weight: normal;
}

h2 {
	line-height:0.8;
	font-size:3.26rem;
	text-transform:none;
	font-weight:normal;
	margin:1em 0 0 0;
	font-family:"La belle Aurore", cursive;
}
h2.aurore {
		font-size:4rem;
}

h3{
	line-height:1.2;
	font-size:2.51rem;
	font-weight:900;
	text-transform:uppercase;
	margin:1em 0 0 0;
}

h4 {
	line-height:1.2;
	font-size:2.09rem;
	font-weight:900;
	text-transform:uppercase;
	margin:1em 0 0 0;
}
body, p, main li {
	line-height:1.4;
	font-size:1.97rem;
	font-weight:300;
}

p,  a.bouton {
	margin:1em 0 0 0;
} 
main li {
	margin:0.5em 0 0 0;
}
main p,
main li {
	font-size:1.39rem;
}
main .panneau p,
main .panneau li {
	font-size:2rem;
}



header li a {
	font-size:1rem;
	color:inherit;	
	font-weight:800;
	text-transform:uppercase;
}
footer li a {
	font-size:1rem; /*0.83*/
	color:inherit;
	text-transform: uppercase;
}

@media(min-width:480px) and (max-width:639px) {
	h1,
	h1 span.part1 {
		font-size:4.5rem;
	}
	h1 span.part2 {
		font-size:2.25rem;
	}
	h2 {
		font-size:3.76rem;
	}
}
@media(min-width:640px) and (max-width:979px) {
	html {
		font-size:72%;
	}
	h1,
	h1 span.part1 {
		font-size:5.85rem;
	}
	h1 span.part2 {
		font-size:3.5rem;
	}
	h2{
		font-size:3.76rem;
	}

	h3{
		font-size:2.51rem;
	}
	h4 {
		font-size:2.09rem;
	}
	body, p, main li {
		font-size:1.67rem;
	}
	blockquote p{
		font-size:1.67rem;
	}	

	header li a {
		font-size:1rem;
	}
	footer li a {
		font-size:0.83rem;
	}

}
@media(min-width:980px){
	html {
		font-size:72%;
	}
	h1,
	h1 span.part1 {
		font-size:8rem;
	}
	h1 span.part2 {
		font-size:4rem;
	}


	h2{
		font-size:2.51rem;
	}


	h3{
		font-size:1.8rem; /*2.09 ???*/
	}

	body, p, main li {
		font-size:1.42rem;
		line-height:1.46;
	}
	blockquote p{
		font-size:1.42rem;
	}	
	header li a {
		font-size:1rem;
	}
	footer li a {
		font-size:1rem;
	}
}


h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child,
p:first-child {
	margin-top:0;
}



/*
**
**Header footer
**
**/



#site-header,
#site-header .container ,
#site-header .container nav {
	overflow:visible;
	z-index:2;
	position:relative;
	width: 100%;
}
#site-header {
	position:absolute;
	top:0px;
	left:0;
	width:100%;
	height:40px;
	overflow:visible;
}
#site-header .container {
	padding:0;
}
#main {

}
.top-menu-wrapper.desktop {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    justify-content: flex-end;
}
ul.top-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	position: relative;
	z-index: 1;
	padding-left: 0;
	margin: 0;
	flex-direction: row;
	width: 115px;
	background: var(--noir);
	align-self: flex-end;
}
ul.top-menu:after{
	content:'';
	background:url('images/switch.png') no-repeat center;
	position:absolute;
	right:8px;
	top:50%;
	margin-top:-5px;
	z-index:1;
	pointer-events:none;
	height:9px;
	width:14px;
	
}
.top-menu > li {
	font-size: inherit;
	color:#282829;
	overflow:visible;
	list-style-type:none;
	margin: 0;
	padding: 0 30px 0 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;	
	position:relative;
}
.top-menu li a {
	display: flex;
	flex-direction:column;
	background:black;
	color:white;
	justify-content:center;
	height:100%;
	text-decoration: none;
	word-break: normal;
	word-wrap: normal;
	font-weight: 700;
	transition:all 0.3s;
	padding: 1em 2em;
	position: relative;
	z-index:0;
	transition: all 0.3s;
	overflow:hidden;
	font-size:0.85rem;
}
.top-menu li a:after {
	content: '';
	background: #282828;
	height: 100%;
	width: 150%;
	transform: skew(10deg);
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	transform: skew(15deg) translateX(-130%);
	transition: all 0.4s;
}
.top-menu li a:hover {
	color:white;
}
.top-menu li a:hover:after {
	transform: skew(-15deg) translateX(-15%);
}	
.top-menu li ul {
	display:none;
	position:absolute;
	top:100%;
	left:0;
	width:100%;
	height:auto;
	z-index:1;
	padding-left:0;
	list-style-type:none;
}
.top-menu li:hover ul {
	display:block;
}

footer {
	position:relative;
	z-index:1;
	background:none;
}
#footer_menu {
    margin: 0;
    padding: 15px;
}
#footer_menu li {
	list-style-type:none;
	margin-right:2rem;
}
#footer_menu li a {
	display:block;
	text-decoration:none;
	text-transform:none;
	padding:0.5rem;
	color:var(--blacn);
}

@media(min-width:980px) {
	.footer-menu-wrapper{
	  display: flex;
	  align-items: center;
	  justify-content:flex-end;
	}
	#site-footer .section-inner {
		display: flex;	
		justify-content:flex-end;
	}
	#footer_menu {
		display:flex;
		margin:0 20px;
	}
}

/**
** ACCUEIL
**/

.to_hide {
	transition:all 0.3s;
}
.to_hide.hidden {
	opacity:0;
	pointer-events:none;
}

.introduction .layer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}
h1 {
	text-align:center;
}
h1 span {
  text-align: center;
}
h1 .part1 {
	display:block;
	
}	
h1 .part2 {
	display:inline-block;padding:0.05em 0.5em;
}
h1 img {
	max-width:40%;
	display:block;
	margin:20px auto;
	max-height:150px;
	width:auto;
}
#intro p {
  color: var(--blanc);
  text-align: center;
  text-transform: uppercase;
  font-weight: ;
}
section{
	position:relative;
	overflow:hidden;
}
.section_preview {
	overflow:visible;
    position: relative;
    background: black;
    text-align: center;
    padding: 16.5vw 20px 8.5vw 20px;
	
}
.image_encart {
    position: absolute;
    top: 0%;
	left:0%;
	z-index:0;
	height:100%;
	width:100%;	
	overflow:hidden;
}

.image_encart img {
    position: absolute;
    top: 50%;
	left:50%;
	z-index:0;
	transform:translate3D(-50%,-50%,0);
	min-height:100%;
	min-width:100%;
	max-width:none;
	width:auto;
	
}
.over {
	position:relative;
	z-index:1.
}


.conclusion .layer {
	min-height:100vh;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	color:white;
	text-align:center;
}

.video_box .loader_svg {
	position:absolute;
	top:50%;
	left:50%;
	z-index:0;
	margin:-35px 0 0 -18px;
	height:70px;
	width:70px;
}
.video_box iframe {
	position:relative;
	z-index:1;
}
#restart-or-continue {
    margin-top: 3rem;
}
#restart-or-continue {
    margin-top: 3rem;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: row;
}
#restart-or-continue a.bouton{
    margin:1em ;
}
#time0bis, #toTop {
    background: var(--blanc) url('images/picto-arrow-top.png') no-repeat center;
    color: transparent;
    font-size: 0;
    height: 40px;
    width: 40px;
}
#toTop {
	height: 34px;
    width: 34px;		
}

#timeline li:first-child a img {
	display:inline-block;
	width:auto;
	max-width:100%;
	max-height:100%;
	margin:0 auto;
	background:white;
}



@media(max-width:639px), (max-height:639px) {

	#timeline {
		opacity:0;
		font-size:0;
		height:0;
		width:0;
		overflow:hidden;
	}

	.section.slide {
		padding-top:1px;
	}
	.section.slide .layer {
		margin-top: 23vw;
	}
	
	
	#screens a.to_next {
		display:none;
	}	
	.sub_video {
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:auto;
		z-index:0;
	}
	#section0 {
		border-bottom: 2px solid var(--vert);
	}
	.section_details {
		display: block;
		background: var(--blanc);
		padding: 30px;
		margin-top:5vw;
		height:25rem;
		position:relative;
		overflow:hidden;
	}
	.section_details .read-more {
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 2;
		padding: 8rem 0 30px 0;
		background: rgb(255,255,255);
		background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;	
		transition:all 0.4s;
	}
	.section_details.fullOpen {
		height:auto;
	}
	.section_details.fullOpen  .read-more {
		transform:translateY(100%);
		opacity:0;
	}
	
	#section0 .sub_video,
	.conclusion .sub_video	{
			height: 100%;
	}
	#section0 .layer,
	.conclusion .layer{
		min-height:60vw;
		padding:90px 30px;
	}

	#section0  .sub_video img ,
	.conclusion .sub_video img{
		max-width:none;
		width: auto;
		height: auto;
		min-height: 100%;
		min-width: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		z-index: 1;
	}

	@supports ( object-fit: cover ) {
		#section0  .sub_video img ,
		.conclusion .sub_video img{ 
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			object-fit: cover;
			transform: none;
		}
	}

	.section_preview {
		width:40%;
		margin-left:30px;
		min-width:250px;
		padding:0;
	}
	.section:not(#section0):nth-child(2n+1) .layer {
	  display: flex;
	  align-items: flex-end;
	  flex-direction: column;
	}
	.section:nth-child(2n+1) .section_preview {
	  margin-left: 0;
	  margin-right: 30px;
	}
	.myVideo {
		opacity:0;
		z-index:-2;height:0;
		width:0;
		overflow:hidden;
	}



	.section_film {

		justify-content:center;
		display:flex;
		justify-content:center;
		align-items:center;
		flex-direction:column;
		padding:30px;
	}
	.section_details + .section_film {
		padding-top:0;
	}
	.video_box {
		width:100%;
		margin:0 auto 40px auto;
		padding-top: 56%;
		height: 0;
		/* background:var(--noir) url('images/lazy.gif') no-repeat center; */
		background:var(--noir);
		background-size:30px;
		position: relative;
	}
	
	.video_box iframe {
		width: 100%;
		height:100%;
		position:absolute;
		top:0;
		left:0;
		z-index:1;
		
	}

	.image_encart  {
		position: relative;
		
	}
	.image_encart img {
		position: relative;
		display:block;
		top: 0%;
		left:0%;
		z-index:0;
		transform:none;
		min-height:100%;
		min-width:100%;
		max-width:100%;
		
	}
	.over {
	  position: absolute;
	  top: 50%;
	  left: 0;
	  width:100%;
	  transform:translateY(-50%);
	  z-index:2;
	}
	.over .titre_etape {
		display:none;
	}	
	#restart-or-continue .mover,
	.bouton.open,
	.open,
	.close {
			display:none;
	}
	#fixedcookie {
		position:fixed;
		bottom:10px;
		right:10px;
		z-index:6;
		height:40px;
		width:40px;
		background:url('images/cookie.png') no-repeat center;
		background-size:90%;
	}	
}
@media(min-width:640px) and (min-height:640px) and (min-aspect-ratio:16/9){
	.section_details .read-more {
		display:none;
	}
	.video_box {
		height:90vh;
		width:calc((16 / 9) * 90vh);
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate3d(-50%,-50%,0);
	}

	.section_film a.bouton.close {
		position: absolute;
		left:calc(50vw + (8/9 * 90vh) - 20px);
		bottom:calc(50vh - 20px);
		z-index: 3;
		margin-top: 0;
		padding: 0;
		border: 2px solid;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 40px;
		width: 40px;
	}
	
}
@media(min-width:640px) and (min-height:640px) and (max-aspect-ratio:16/9){
	.video_box {
		height:calc((9 / 16) * 90vw);
		width:90vw;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate3d(-50%,-50%,0);
	}
	.section_film a.bouton.close {
		position: absolute;
		right: 5vw;
		top: calc(50vh + (4.5 / 16 * 90vw) - 20px);/*alignement bas*/
		top:calc(50vh - 20px);
		z-index: 3;
		margin-top: 0;
		padding: 0;
		border: 2px solid;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 40px;
		width: 40px;
	}
}
@media(min-width:640px) and (min-height:640px) {
	body {
		background:var(--noir);
	}	
	
	.home {
		height:100vh;
		width:100vw;
		overflow:hidden;
	}
	

	.home footer {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 300px;
		height: auto;
		z-index: 4;
		
	}
	#footer_menu  {
		display: flex;
		padding:0;
	}	
	.home #site-footer {
		background:none!important;
	}
	.home #footer_menu li a {
		color:var(--blanc);	
	}	
	.section .layer {
		background:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 68%, rgba(0,0,0,0.8) 88%, rgba(0,0,0,0.8) 100%)
	}
	.section#section0 .layer,
	.section#section5 .layer {
		background:none;
	}
	#timeline {
		position: fixed;
		right: 0;
		z-index:2;
		padding: 15px;
		top: 0%;
		height:92vh;
		background:url('images/timeline.png') no-repeat left top;
		background-size:auto 100%;
		list-style-type: none;
		width: calc(((115 / 817) * 92vh) + 160px);
		margin-top: 0;
	}
	#timeline li a {
		color: white;
		text-decoration: none;
		text-transform:uppercase;
		font-size: 1.8vh;
		width: auto;
		display: block;
		text-align: left;
		line-height: 0.9;
		position:absolute;
		z-index:1;
	}
	#timeline li:first-child a {
		top: 8%;
		left: 0vw;
		opacity: 1;
		height: auto;
		width: 140px;
		height:45px;
		text-align:center;
	}
	#timeline li:first-child a img {
		display:inline-block;
		width:auto;
		max-width:100%;
		max-height:100%;
		margin:0 auto;
	}	
	#timeline li:nth-child(2) a {
		top:21vh;
		left:11.5vh;
	}	
	#timeline li:nth-child(3) a {
		top:41.5vh;
		left:11.5vh;
	}	
	#timeline li:nth-child(4) a {
		top:57.7vh;
		left:10.5vh;
	}
	#timeline li:nth-child(5) a {
		top:74.6vh;
		left:15.5vh;
	}	
	#timeline li:nth-child(6) a {
		top:84.6vh;
		left:15.5vh;
	}	
	
	
	#timeline li a:before {
		content: '';
		background: url('images/active-time.png') no-repeat center;
			background-size: auto;
		background-size: auto 100%;
		height: 6vh;
		width: 5vh;
		position: absolute;
		left: -4vh;
		top: 0vh;
		transform: translate3d(-20px,-20px,0) scale(0);
		transition: all 0.3s;
		transform-origin: center;
	}
	#timeline li a.active:before {
		transition: all 0.5s ease 0.3s;
		transform: translate3d(-20px,-20px,0) scale(1);
	}
	#timeline li:nth-child(6) a.active:before {
		display:none!important;
	}
	
	

	.introduction #intro {
		position:absolute;
		bottom:100px;
		left:50%;
		width:100%;
		left:0;
		
	}
	h1 {
		min-width:440px;
		width:60%;
	}
	h1 .part1 {
		line-height:0.8;
	}
	
	#screens {
		position:relative;
		min-height:100vh;
	}
	
	#screens .section{
		overflow: hidden;
		height:100vh;
		width:100vw;
		position:absolute;
		top:100%;
		left:0;
		
		opacity:0;
		transition:opacity 0.6s ease 0s, top 0s ease 0.6s;
		/* display:none; */
	}

	#screens .section.active {
			/* display:block; */
			z-index:2;
			top:0;
			opacity:1;
			transition:opacity 0.6s ease 0.6s, top 0s ease 0s;
	}
	#screens .section {
		z-index:1;
	}
	#screens #timeline {
		z-index:2;
	}
	#screens .section#section0,
	#screens .section.conclusion{
		z-index:3;
	}
	#screens .section_details {
		z-index:4;
	}
	#screens .section_film {
		z-index:5;
		
	}
	.sub_video {
		display:block;
		position: absolute;
		right: 0;
		bottom: 0;
		z-index:0;
		top:0;
		width: 100%;
		height: 100%;
		overflow:hidden;
	}
	.sub_video img {
		display:block;
		max-width:none;
		min-width:100%;
		min-height:100%;
		position:absolute;
		top:50%;
		left:50%;
		z-index:0;
		transform:translate3d(-50%,-50%,0);
	}	
	@supports ( object-fit: cover ) {
		.sub_video img { 
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			object-fit: cover;
			transform: none;
		}
	}
	.section_film a.bouton.close::after {
		font-size: 2rem;
		transform: translate3d(-50%,-50%,0) rotate(45deg);
		display: inline-block;
		transform-origin: center;
		position: absolute;
		top: 50%;
		left: 50%;
		right: unset;
		font-weight: normal;
		font-size: 40px;
	}
	
	.ytp-button.ytp-copylink-button.ytp-show-copylink-title.ytp-copylink-button-visible {
		display: none;
	}
	.section_preview {
		padding: 16.5vw 20px 8.5vw 20px;
		width:31.25vw;
		width:42.25%;
		position:relative;
		left:50%;
		transform:translateX(-100%);
		box-shadow:0 0 150px 50px var(--noir);
	}
	.section_preview .openers {
		position:absolute;
		bottom:0;
		left:0;
		margin:0;
		width:100%;
		z-index:2;
		transform:translateY(50%);
		display:flex;
		flex-direction:row;
		align-items:center;
		justify-content:space-between;
		flex-wrap:wrap;
	}
	.section_preview .open.voirVideo {
		position:relative;
	}
	.myVideo{
		position: absolute;
		right: 0;
		bottom: 0;
		top:0;
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
		background-color: black; /* in case the video doesn't fit the whole page*/
		background-image: /* our video */;
		background-position: center center;
		background-size: contain;
		object-fit: cover; /*cover video background */
		z-index:3;
	}
	a.to_next {
		position: absolute;
		bottom: -58px;
		background: rgba(0,0,0,0.5) url('images/fleche-simple-3.png') no-repeat center 15px;
		width: auto;
		height: auto;
		padding: 60px;
		display: block;
		left: 50%;
		transform: translateX(-50%);
		z-index: 6;
		text-align: center;
		text-decoration: none;
		color: white;
		text-transform: uppercase;
		font-weight: 600;
		font-size: 1.3rem;
		border-radius: 50% 50% 0 0;
	}
	#section0 a.to_next {
		background:url('images/fleche-1.png') no-repeat center;
		width:71px;
		height:71px;
		bottom:-23px;
		font-size:0;
		display:none;
	}	
	body.loaded #section0 a.to_next {
		display:block;
	}
	.section_film {
		position:absolute;
		top:0%;
		width:100%;
		height:100%;
		align-items:center;
		justify-content:center;
		background:var(--noir);
		/*! display:flex; */
		justify-content:center;
		align-items:center;
		flex-direction:column;
	}

	.video_box iframe {
		width: 100%;
		height: 100%;
	}
	.titre_etape {
		font-size:3.4rem;
	}
	.conclusion h2 {
		font-size:5rem;
	}

	.section_details {
		display:block;
		position:absolute;
		top:0%;
		width:75%;
		background:var(--blanc);
		padding:4vw;
		overflow:auto;
		height:100vh;
	}

	.section_details,
	.section_film {
		transition:opacity 0.6s ease 0s, left 0s ease 0.6s;
		opacity:0;
		left:100%;
	}
	.section_details.active,
	.section_film.active {
		transition:opacity 0.6s ease 0.6s, top 0s ease 0s;
		opacity:1;
		left:0%;	
	}
	.close {
			display:inline-block;
	}
	.read-more,
	#toTop,
	#fixedcookie{
		display:none;
	}
}
@media(min-width:640px) and (min-height:900px) {

	#timeline {
		height:817px;
		width: 275px;
	}
	#timeline li a {
		font-size: 1.6rem;
	}
	
	#timeline li:nth-child(2) a {
		top:186px;
		left:98px;
	}	
	#timeline li:nth-child(3) a {
		top:368px;
		left:96px;
	}	
	#timeline li:nth-child(4) a {
		top:515px;
		left:90px;
	}
	#timeline li:nth-child(5) a {
		top:664px;
		left:128px;
	}	
	#timeline li:nth-child(6) a {
		top:775px;
		left:130px;
	}	
	
	#timeline li a:before {
		height:50px;
		width:63px;
		left:-58px;
		top:-25px;
		transform:translate3d(0px,0px,0) scale(0);
	}
	#timeline li a.active:before {

		transform: translate3d(0px,0px,0) scale(1);
	}
		
	#timeline li:nth-child(1) a.active:before ,
	#timeline li:nth-child(6) a.active:before {
		display:none!important;
	}
}
@media(min-width:980px) and (min-height:640px) {
	#timeline li:first-child a {
		top: 8%;
		left: -25px;
		opacity: 1;
		height: auto;
		width: 200px;
		height:62px;
	}

	.section_preview {
		width:31.25vw;
	}
}
	
@media(min-width:1180px) and (min-height:768px) {
	#timeline li a {
		margin-bottom: 3vh;
	}
	#timeline li a:after {
		font-size:3rem;
		margin-top:vh
	}	
	.section_details {
		padding:6vw;
	}
}
@media(min-width:1240px) and (min-height:768px){
	.titre_etape {
		font-size:5.4rem;
	}
	.conclusion h2 {
		font-size:8rem;
	}
}
@media(min-width:1600px) and (min-height:768px){
	.section_preview {
		padding: 260px 80px 120px 80px;
		width:500px;
	}
	a.bouton,
	a.bouton_blanc {
		font-size:1.39rem;
	}	
	.section_details {
		padding:9vw;
		}
}



/* Layer with position absolute in order to have it over the video
* --------------------------------------- */

.section .layer{
	position: relative;
	z-index: 4;
	width: 100%;
	height:100%;
	width:100%;
	/*
	* Preventing flicker on some browsers
	* See http://stackoverflow.com/a/36671466/1081396  or issue #183
	*/
	-webkit-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}


/*solves problem with overflowing video in Mac with Chrome */

/* Hiding video controls
* See: https://css-tricks.com/custom-controls-in-html5-video-full-screen/
* --------------------------------------- */
video::-webkit-media-controls {
  display:none !important;
}







/***
*
*Page de base
*
**/

.page_de_base {
    background: white;
    padding-top: 200px;
}
.page_de_base h1 {
	color: var(--noir);
	font-family: 'La Belle Aurore';
	text-transform: none;
	text-align: left;
	font-size: 4rem;
}
.page_de_base  h2 {
    font-size: 1.96rem;
    font-family: inherit;
	margin-top: 2.5em;
}












/*Boutons*/
@media(min-width:768px) {
	
	.post-navigation .nav-links {
	  display: flex;
	  justify-content: space-between;
	}
}
.pagination .nav-links {
  display: flex;
  justify-content: center;
 
}
.page-numbers {
	text-decoration:none;	
	font-size:1.67rem;
	padding:0 0.4em;
}

@media(max-width:979px) {
	.pagination .nav-links {
			padding-top:20px;
	}
	.page-numbers {
		text-decoration: none;
		font-size: 2.62rem;
	}
}
.page-numbers.current,
.page-numbers:hover {
	font-weight:800;
	color:#e41b12;
	
}
.next.page-numbers,
.prev.page-numbers {
	font-size:0;
	background-image:url('images/fleche-droite.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width:16px;
	height:22px;	
	filter:grayscale(100%);
	margin:0 20px;
}
.prev.page-numbers {
	background-image:url('images/fleche-gauche.png');
}
	

.post-navigation .nav-links a,
input[type="button"],
input[type="reset"],
input[type="submit"]{
	text-transform:uppercase;
	color:inherit;
	position:relative;
	display:inline-block;
	margin:1em 1em 1em 0;
	text-decoration:none;
	padding:0.7em;
	border:none;
	transition:all 0.4s;	
	overflow:hidden;
	position:relative;
	z-index:1;
	background:var(--noir);
	color:var(--blanc);
	text-decoration:none;
}


.post-navigation .nav-links a:after,
input[type="button"]:after,
input[type="reset"]:after,
input[type="submit"]:after  {
	content:'';
	background:#333;
	height:100%;
	width:80%;
	transform:skew(10deg);
	position:absolute;
	top:0;
	left:0;
	z-index:-1;
	opacity:0.5;
	transform:skew(0deg) translateX(-100%);
	transition:all 0.4s;	
}

.post-navigation .nav-links a:hover:after,
input[type="button"]:hover:after,
input[type="reset"]:hover:after,
input[type="submit"]:hover:after {
	transform: skew(-15deg) translateX(-10%);
}
a.bouton:focus,
a.bouton:hover,
input[type="button"]:focus,
input[type="button"]:hover,
input[type="reset"]:focus,
input[type="reset"]:hover,
input[type="submit"]:focus,
input[type="submit"]:hover {
	text-decoration: none;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	border-color: currentColor;
}
	



#scrollTop {
	position:absolute;
	bottom:20px;
	right:20px;
	z-index:2;
	color:inherit;
	cursor:pointer;
	display:flex;
	flex-direction:column;
	text-decoration:none;
	font-weight:900;
}
#scrollArrows {
	background:url('images/scrollTop.png') no-repeat center;
	background-size:contain;
	width:18px;
	height:76px;
	margin-bottom:10px;
}
@media(min-width:980px) {
	#scrollTop {
		bottom:100px;
	}
}





/*boites zones structure elements */
main {
}
article {
	overflow:hidden;
	position:relative;
	z-index:1;
}
section {

}

/*wsp-container : sitemap*/

.container ,
.wsp-container{
	padding:30px;
	width:1000px;
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
	
	
}
.pad0  {
	padding:0;
}
.padTop0 {
	padding-top:0;
}
.padBot0 {
	padding-bottom:0;
}
.youtube_player,
.vimeo_player {
	position:relative;
	z-index:0;
	height:0;
	padding-bottom:56%;
	background:var(--noir) url('images/lazy.gif') no-repeat center;
	background-size:30px;
}
.youtube_player iframe,
.vimeo_player iframe{
	position:absolute;
	z-index:1;
	top:0%;
	left:0%;
	width:100%;
	height:100%;
}

.allowYTA {
	display:flex;
	height:400px;
	justify-content:center;
	flex-direction:column;
	align-items:center;
	background:black;
	color:white;
}
.container,
.zone,
.entete {
	position:relative;
	overflow:hidden;
}
.flex-column {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}
.between {
	justify-content:space-between;	
}
.flex-column.gauche {
	align-items:flex-start;
}
.flex-column.droit {
	align-items:flex-start;
}
.flex-row{
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;
}
.flex-just-start {
	justify-content:start;
}
.flex-wrap {
	flex-wrap:wrap;
}
.flex-full {
	justify-content:stretch;
}
.flex-start {
	align-items:flex-start;
}
.flex-row.bas {
	align-items:flex-end;
}	
.flex-row.haut {
	align-items:flex-start;
}
.flex-row.flex-gauche {
	justify-content:flex-start;
}
.flex-row.flex-droit {
	justify-content:flex-end;
}
.flex-centre {
	justify-content:center;
}
.flex-row.flex-stretch,
.flex-stretch {
	align-items:stretch;
}
.centre{
	text-align:center;
}
.bloc-texte-colonnes{

}
.flex-jcc {
	justify-content:center;
}	
.imgWAuto img{
	width:auto;
}	
.w-100 {
	width:100%;
}
.w1-6 {	
	width:calc(100% / 6 - 15px);
}
.w-25,
.w1-4 {
	width:calc(25% - 15px);
}
.w-30 {
	width:calc(30% - 15px);
}
.w1-3,
.w-33 {
	width:calc(100% / 3 - 15px);
}
.w-40 {
	width:calc(40% - 15px);
}
.w-50 {
	width:calc(50% - 15px);
}
.w-60 {
	width:calc(60% - 15px);
}
.w-66,
.w2-3{
	width:calc(200% / 3 - 15px);
}
.w-70 {
	width:calc(70% - 15px);
}
.w-75 {
	width:calc(75% - 15px);
}
.w1-2 {
	width:calc(50% - 15px);
}	
.real-25 {
	width:calc(25% - 15px);
}
.real-33 {
	width:calc(100% / 3 - 15px);
}	
.real-40 {
	width:calc(45% - 15px);
}
.real-50 {
	width:calc(50% - 15px);
}
.real-60 {
	width:calc(55% - 15px);
}
.real-66 {
	width:calc(200% /3 - 15px);
}	
.real-70 {
	width:calc(70% - 15px);
}
.real-75 {
	width:calc(75% - 15px);
}
.w-25,
.w1-4,
.w-30,
.w1-3,
.w-33,
.w-40,
.w-50,
.w-60,
.w-66,
.w2-3,
.w-70,
.w-75,
.w1-2,
.real-25,
.real-33,
.real-40,
.real-50,
.real-60,
.real-66,
.real-70,
.real-75 {
	margin-top:15px;
	margin-bottom:15px;
}
.flex-stretch > * {
	margin-top:0!important;
	margin-bottom:0!important;
}
@media(max-width:479px) {
	.xxs-w100 {
		width:100%;	
	}
}
@media(min-width:480px) and (max-width:639px) {

	.xs-w1-2  {
		width:calc(50% - 15px);	
	}
}

@media(min-width:640px) and (max-width:979px) {

	.sm-w1-3 {
		width:calc(100% / 3 - 15px);	
	}
}
@media(min-width:480px) and (max-width:767px) {

	.xsm-w1-2  {
		width:calc(50% - 15px);	
	}
}
@media(min-width:768px) and (max-width:1279px) {
	.m-w1-3 {
		width:calc(100% / 3 - 15px);	
	}
}
@media(min-width:480px) and (max-width:979px) {
	.sm-w1-2 {
		width:calc(50% - 15px);
	}
}

@media(max-width:639px) {
	.xs-w100 {
		width:100%;
	}
	.xs-block {
		display:block;
	}
	.xs-pad0 {
		padding:0;
	}
}
@media(max-width:979px) {
	.s-w100{
		width:100%;
	}
	.s-block {
		display:block;
	}
	.s-pad0 {
		padding:0;
	}
}
@media(max-width:1279px) {
	.m-w100{
		width:100%;
	}
	.m-block {
		display:block;
	}
	.m-pad0 {
		padding:0;
	}
}







/*
Animations aux scroll
*/

.tfi {
	opacity:0;
	transition-property:opacity;
	transition-duration:0.6s;
	transition-delay:0s;
}

.tfi .tfi {
	transition-duration:0.6s;
	transition-delay:0.6s;
}
.tfi.in-view {
	opacity:1;
}


@media(min-width:1280px) {
	.d1-3, .tfi .d1-3 {
		transition-delay:0.5s;
	}
	.d2-3, .tfi .d2-3 {
		transition-delay:0.8s;
	}
	.d3-3, .tfi .d3-3 {
		transition-delay:1.1s;
	}
	.d1-4, .tfi .d1-4 {
		transition-delay:0.4s;
	}
	.d2-4, .tfi .d2-4 {
		transition-delay:0.7s;
	}
	.d3-4, .tfi .d3-4 {
		transition-delay:1s;
	}
	.d4-4, .tfi .d4-4 {
		transition-delay:1.3s;
	}

}
.logo {
  display: block;
  width: 100px;
  margin-top: 48px;
}
.page-template-default  main {
  background: white;
  min-height: calc(100vh - 28px);
}
.page-template-default footer {
  background: white;
}
#tarteaucitronAlertBig button {
  background: white !important;
  color: black !important;
  border: 2px solid black!important;
  padding: 5px !important;
  text-align: center !important;
  font-size: 16px !important;
  margin: 5px !important;
  display: inline-block;
  -webkit-appearance: none;
}
#tarteaucitronAlertBig button#tarteaucitronPrivacyUrl {
  border:none!important;

}

#tarteaucitronAlertBig button:hover,
#tarteaucitronAlertBig #tarteaucitronCloseAlert:hover{
    background:black!important;
  color:white!important;
  border:2px solid black!important;
}
#tarteaucitronAlertBig button span {
  display: none;
}
#tarteaucitronAlertBig {
  text-align: center;
}