/*
Theme Name:     Custom Theme
Author:         C2Web
Author URI:     http://www.c2w.fr
Template:       c2web_framework
*/

:root{

--short-transition : .25s;
--long-transition : .8s;

--main-text-color : #010000;

--text-small-size : .9rem;
--text-medium-size : 1.5rem;
--text-large-size : 3.125rem;

--padding-left : 150px;
--padding-right : 150px;

}

.reglage{
	border : solid 1px black;
}

#wrap {
	min-height: 0px;
}

.mb6{
	margin-bottom : 6rem;
}

.mt6{
	margin-top : 6rem;
}

html{
	height : auto;
}

body{
	background:#FFF;
	color: var(--main-text-color);
	font-size: 1rem;
	font-family : var(--main-text-font);
	font-weight : 200;
}

body.scroll-blocked{
  overflow-y: hidden;
}

strong{
	font-weight : 500;
}

.has-large-font-size,
.is-style-large,
.wp-block-quote.is-style-large p
{
	font-size : var(--text-large-size);
}

.has-medium-font-size{
	font-size : var(--text-medium-size);
}

/* ****************** */
/* titrage */
/* ****************** */

h1, h2, h3, h4{
	position: relative;
	color: var(--main-text-color);
}

h1{
  line-height: 1.1;
}

.home h1{
	color : var(--couleur1);
	margin-top : -100px;
}

h1 > span{
  position: relative;
  display: block;
  opacity: 0.3;
  font-size: 0.9em;
  font-weight: bold;
  text-transform: uppercase;
}

.flex-title{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5vh;
  margin-bottom: 9vh;
}

body.single-reference .flex-title{
  margin-bottom: 5vh;
}

body.single-post .flex-title{
  margin-bottom: 5vh;
}

.flex-title h1.entry-title{
  display: inline-block;
  text-transform: uppercase;
  font-weight: 100;
  color:var(--couleur5);
  position: relative;
  display: flex;
  flex-direction: column;
}

.flex-title h1.entry-title::before{
  content:"";
  position: absolute;
  right: 100%;
  height: 1px;
  width: 100vw;
  background:var(--couleur1);
  top: 20%;
  margin-right: 10px;
  margin-top: -1px;
}

.flex-title h1.entry-title::after{
  content:"";
  position: absolute;
  left: 100%;
  margin-left: 10px;
  height: 1px;
  width: 100vw;
  background:var(--couleur1);
  top: 80%;
  margin-top: -1px;
}

.entry-title small{
  font-size: 1rem;
  text-align: center;
  color:var(--couleur1);
}

h2{
	font-family : var(--main-title-font);
	font-weight : bold;
	font-size : 2rem;
	text-transform: uppercase;
}

.has-background h2{
	font-family : var(--main-text-font);
	text-transform: none;
	font-weight : lighter;
}

h2.titre-etapes{
	display :  inline-block;
	width : 70%;
}

h3{
	font-family : var(--main-title-font);
	font-size : 3.1rem;
}

h3.team-title{
	font-family : var(--art-title-font);
	font-size : 2.6rem;
	text-align : center;
}

body.home h2 + h3{
	text-transform: uppercase;
	font-weight : bold;
	top : -10px;
}

body:not(.home) h3{
  font-size: 1.2rem;
  color : var(--couleur1);
}

h4{
  font-size: 1rem;
  font-weight: 500;
  border-bottom: 1px dashed #000;
}

* + h2{
  margin-top: 3rem;
}

/* ****************** */
/* liens */
/* ****************** */

a {
    color: #000;
    text-decoration: none;
}

a:hover {
	color: #000;
    text-decoration: none;
}

a:focus, a:active{
	color:#000;
}

p a{
	color : var(--couleur3);
}

p a:hover{
	color : var(--couleur3);
	text-decoration : underline;
}

/* ****************** */
/* div générales */
/* ****************** */

#main-container{
	margin:23vh 0 0 0;
}

body.home #main-container{
  margin:0;
}


.wp-block-columns.has-background.alignfull,
.wp-block-group.has-background.alignfull,
.alignfull
{
	padding : 10vh var(--padding-right) 10vh var(--padding-left);
}

.page-content{
	padding : 0px var(--padding-right) 0px var(--padding-left);
}

:root{
	--padding-single : 20vw;
}

.vertical-padding{
	padding : 5vh 0px;
}

.alignwide{
  width: 84vw;
  margin:32px calc(50% - 42vw);
}

/* ****************** */
/* articles single    */
/* ****************** */


.single-content .alignwide{
  width: calc(100vw - 2 * var(--padding-single));
  margin : 0;
}

.single-content .wp-block-image img {
    max-width: 100%;
    height : auto;
}

.single .flex-thumbnail img{
	width : 100%;
	height : auto;
}

.single .flex-thumbnail{
	clip-path :  url('#single-banner');
  margin-bottom: 5vh;
}

body.single-post .container-post-meta{
  position: relative;
}

.single .post-meta{
	position: absolute;
  right: 100%;
  margin-right: 2vw;
  border-right:3px solid var(--couleur1);
  padding-right: 0.5rem;
  display: flex;
  flex-direction: column; 
  user-select: none;
  align-items: flex-end;
}

.single .post-meta > *{
  text-align: right;
  width: 10vw;
}

.single .post-meta .meta-date{
  color:var(--couleur1);
  font-weight: 300;
}

.single .post-meta small{
  text-transform: uppercase;
  opacity: 0.5;
  display: block;
  margin-top: 0.5rem;
}

.single .post-meta .meta-category ul{
  margin-bottom: 0;
}

.single .post-meta .meta-category ul li + li{
  margin-top: 0.7rem;
}

.single .post-meta .meta-category ul li{
  line-height: 1.1;
  margin-bottom: 0;
}

.single .post-meta  .meta-author{
  line-height: 1.2;
}

.single .post-meta > * + *{
  margin-top:0.5rem;
}

.single .post-meta .vignette-portrait,
.single .post-meta .bordure-portrait,
.single .post-meta .vignette-portrait img{
  width: 5.5vw;
  height: 5.5vw;
  margin: 0.5rem 0.5rem 0 0;
}

.single .alignfull{
	padding : 2em 0;
}

aside.related-posts{
	position: fixed;
	left : 7vw;
	top : 45vh;
	width : 10em;
	height : auto;
	opacity : 0;/* 0 */
	-webkit-transition: opacity .3s;
	   -moz-transition: opacity .3s;
	    -ms-transition: opacity .3s;
	     -o-transition: opacity .3s;
	        transition: opacity .3s;
}

.related_posts_bas_page aside.related-posts{
  position: relative;
}

aside.related-posts.active{
	opacity : 1;
}

aside.related-posts h3{
	text-align: center;
}

aside.related-posts h4{
	padding-left: .3em;
	font-size : .8em;
	border : none;
	font-family : var(--main-title-font);
	margin: 1em 0;
}

aside.related-posts .related-post-wrapper+.related-post-wrapper::before{
	content: '';
	width : 20%;
	height : 1px;
	background-color: var(--couleur3);
	position: absolute;
	left : 50%;
	top : -1em;
	-webkit-transform: translateX(-50%);
	   -moz-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	     -o-transform: translateX(-50%);
	        transform: translateX(-50%);
}

.related-post-wrapper{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-bottom: 2em;
}

aside.related-posts .related-post-wrapper:hover .related-post-thumb{
	-webkit-transform: translateX(1em);
	   -moz-transform: translateX(1em);
	    -ms-transform: translateX(1em);
	     -o-transform: translateX(1em);
	        transform: translateX(1em);
}

aside.related-posts .related-post-wrapper>.related-post-thumb{
	flex : 1 0 auto;
	clip-path : url('#svg-extrait-thumbnail-left');
 	-webkit-clip-path : url('#svg-extrait-thumbnail-left');
 	-webkit-transition: all .3s;
 	   -moz-transition: all .3s;
 	    -ms-transition: all .3s;
 	     -o-transition: all .3s;
 	        transition: all .3s;
}

aside.related-posts .related-post-wrapper>a.related-post-title{
	flex : 1 3 auto;
	max-width : 65%;
	text-align: right;
}

aside.related-posts .related-post-thumb{
	width : 40px;
	height : auto;
}

aside.related-posts .related-post-thumb img{
	width : 100%;
	height : auto;
}

aside.related-posts .accroche{
	text-align: center;
	font-size : .9em;
	font-family: var(--main-title-font);
	padding : 0 .5em;
}


.related_posts_bas_page{
  display: flex;
  flex-direction: column;
}

.related_posts_bas_page .post_list{
  display: flex;
}

.related_posts_bas_page .post_list > *{
  flex:1;
}

.related_posts_bas_page .related-post-wrapper{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: 0.3s all ease;
  -webkit-transition: 0.3s all ease;
}

.related_posts_bas_page .related-post-wrapper:hover{
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
}

.related_posts_bas_page .related-post-wrapper + .related-post-wrapper{
  margin-left: 3rem;
}

.related_posts_bas_page h4{
  border:none;
  color:var(--couleur1);
  font-weight: 600;
  font-size: 1.1rem;
}

.related_posts_bas_page .related-post-wrapper img{
  width: 100%;
  height: auto;
}

.related_posts_bas_page .related-post-wrapper .related-post-thumb{
  margin-bottom: 0.5rem;
}


aside.invite-contact{
	width : 10vw;
	position: fixed;
	right : 0;
	top : 20%;
	z-index : 50;

	-webkit-transform: translateX(100%);
	   -moz-transform: translateX(100%);
	    -ms-transform: translateX(100%);
	     -o-transform: translateX(100%);
	        transform: translateX(100%);

	-webkit-transition: all var(--short-transition) ease;
	   -moz-transition: all var(--short-transition) ease;
	    -ms-transition: all var(--short-transition) ease;
	     -o-transition: all var(--short-transition) ease;
	        transition: all var(--short-transition) ease;
}

aside.invite-contact.active{
	-webkit-transform: translateX(-50%);
	   -moz-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	     -o-transform: translateX(-50%);
	        transform: translateX(-50%);
}

aside.invite-contact .contact-image
{
	width : 70%;
	height :  auto;
	margin : 1em auto;
}

aside.invite-contact .contact-text
{
	padding : 1em;
	text-align: center;
	font-family : var(--main-title-font);
	font-size : .9em;
}

aside.invite-contact a.contact-link{
	font-weight: bold;
	text-align: center;
	width : 100%;
	display: inline-block;
	color : #fff;
	background-color: var(--couleur1);
	border : var(--couleur5) solid 2px;
	border-radius : 100px;
	-webkit-transition: all var(--short-transition) ease;
	   -moz-transition: all var(--short-transition) ease;
	    -ms-transition: all var(--short-transition) ease;
	     -o-transition: all var(--short-transition) ease;
	        transition: all var(--short-transition) ease;
}

aside.invite-contact a.contact-link:hover{
	color : var(--couleur1);
	background-color: #fff;
}


/* ************ */
/* archives     */
/* ************ */

.container_liste_categories{
  display: flex;
  justify-content: center;
  font-size: 1.3rem;
}

.container_liste_categories p{
  font-weight: 500;
}

ul.liste_categories{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin:0 0 4rem 0;
  position: relative;
}

ul.liste_categories::before{
  content:"";
	display: inline-block;
	font-size: 0.9rem;
	margin-right: 0.45rem;
  content: "\f054";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin:0 1rem;
}

ul.liste_categories li{
  list-style-type: none;
  margin: 0;
}

ul.liste_categories li + li::before{
  content:"/";
  margin-right: 1rem;
  margin-left: 1rem;
}

body.category #main-container,
body.blog #main-container,
body.author #main-container,
body.single-post #main-container,
body.tag #main-container{
	padding : 0 var(--padding-single);
}

body.category h1,
body.author h1{
  font-family: var(--main-title-font);
}

body.category h1 span::after,
body.author h1 span::after{
	content : '';
  display: block;
  margin-bottom: 0.5rem;
	height : 1px;
	background-color: var(--couleur3);
	left : 0;
	top : 100%;
	width : 100vw;
}

body.category .flex-title,
body.author .flex-title{
	justify-content: flex-start;
}

.extrait-blog .extrait-post-content{
	display: flex;
	justify-content: flex-start;
	align-items: center;
  position: relative;
}

article.extrait-blog .extrait-post-content .post-author{
  position: absolute;
  top:100%;
  left: 1rem;
}

article.extrait-blog .extrait-post-content .post-author a{
  color:var(--couleur1);
  font-weight: 500;
}

article.extrait-blog{
	margin-bottom: 4em;
}

.extrait-blog h2{
  display: flex;
  font-weight: 100;
  flex-direction: column;
  margin-bottom: 0;
}

.extrait-blog h2 a:hover{
  color:var(--couleur1);
}

.post_meta{
	font-size : 0.9rem;
	font-weight: normal;
  color:var(--couleur1);
  display: flex;
  margin-bottom: 0;
  font-family: var(--main-title-font);
  user-select: none;
}

.post_meta ul{
  display: flex;
  margin-bottom: 0;
}

.post_meta ul + ul::before,
.post_meta ul li + li::before{
  content:"/";
  margin-left: 0.5rem;
  margin-right:0.5rem;
}


.extrait-blog .extrait-thumbnail{
	flex : 1;
}

.extrait-blog .extrait-thumbnail > a{
  display: block;
}

.extrait-blog .fwf-excerpt{
	flex : 4;
  position: relative;
}

.extrait-blog .fwf-excerpt p{
	margin : 0;
}

.extrait-blog .extrait-thumbnail img{
	width : auto;
	height : 100%;
}

.extrait-blog .extrait-thumbnail{
	-webkit-transition: all var(--short-transition) ease;
	   -moz-transition: all var(--short-transition) ease;
	    -ms-transition: all var(--short-transition) ease;
	     -o-transition: all var(--short-transition) ease;
	        transition: all var(--short-transition) ease;
}

.extrait-blog .extrait-post-content .fwf-excerpt > a{
  display: block;
	padding : 1em;
	-webkit-transition: all var(--short-transition) ease;
	   -moz-transition: all var(--short-transition) ease;
	    -ms-transition: all var(--short-transition) ease;
	     -o-transition: all var(--short-transition) ease;
	        transition: all var(--short-transition) ease;
}

.extrait-blog .extrait-post-content:hover .fwf-excerpt > a{
	background: var(--couleur2);
	color : #fff;
}

article.extrait-blog:nth-child(odd) .extrait-post-content:hover .extrait-thumbnail{
	-webkit-transform: translateX(2em);
	   -moz-transform: translateX(2em);
	    -ms-transform: translateX(2em);
	     -o-transform: translateX(2em);
	        transform: translateX(2em);
}

article.extrait-blog:nth-child(even) .extrait-post-content:hover .extrait-thumbnail{
	-webkit-transform: translateX(-2em);
	   -moz-transform: translateX(-2em);
	    -ms-transform: translateX(-2em);
	     -o-transform: translateX(-2em);
	        transform: translateX(-2em);
}

article.extrait-blog:nth-child(even) h2{
	text-align: right;
}

article.extrait-blog:nth-child(even) .fwf-excerpt{
	margin-right : 4em;
	text-align: right;
}

article.extrait-blog:nth-child(even) .extrait-post-content{
	flex-direction: row-reverse;
}

article.extrait-blog:nth-child(even) .extrait-post-content .post-author{
  right: 1rem;
}

article.extrait-blog:nth-child(even) .post_meta{
  justify-content: flex-end;
}

article.extrait-blog:nth-child(odd) .fwf-excerpt{
	margin-left : 4em;
}

article.extrait-blog:nth-child(odd) .extrait-thumbnail{
 	clip-path : url('#svg-extrait-thumbnail-left');
 	-webkit-clip-path : url('#svg-extrait-thumbnail-left');
}

article.extrait-blog:nth-child(even) .extrait-thumbnail{
 	clip-path : url('#svg-extrait-thumbnail-right');
 	-webkit-clip-path : url('#svg-extrait-thumbnail-right');
}

body.author .desc_author{
  margin-bottom: 5rem;
  margin-top: -7vh;
  display: flex;
  flex-direction: row-reverse;
}

body.author .desc_author .vignette-portrait{
  margin-left: 3rem;
}

.entry-content ul li::before{
	content : '>';
	width: 2rem;
	height: 2rem;
	font-weight: 700;
	color: var(--couleur1);
	margin-right: 0.5rem;
}

/* ************* */
/* header + logo */
/* ************* */

header{
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	width: 100%;
	height: 0px;
	-webkit-transition: 0.3s all;
	-o-transition: 0.3s all;
	transition: 0.3s all;
	padding-top: 0px;
  display: flex;
}

header ul.menu{
	padding-left : 2rem;
  margin-bottom: 5vh;
}

header .menu > li{
	display : block;
	width :  100%;
	text-align : left;
  line-height: 1.3rem;
}

header .logo{
	width : 900px;
  height: 500px;
	position : fixed;
  z-index: 1000;
	bottom:100%;
  right: 50vw;
  transform: translate(50%, 52%);
  -webkit-transform: translate(50%, 52%);
  transition-duration: 0s;
  -webkit-transition-duration: 0s;
  overflow: hidden;
}

header.mini .logo{
  right: -190px;
  bottom:300px;
	-webkit-transform: translate(47.5%, 0) rotate(-90deg);
  transform: translate(47.5%, 0) rotate(-90deg);
}

header .logo_box{
  width : 900px;
  height: 500px;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: none;
  -webkit-transition: none;
  overflow: hidden;
}

header .logo.can_animate{
  transition-duration: 2.5s;
  -webkit-transition-duration: 2.5s;
}

.logo .logo_box.shadowed #lottie-logo{
  width : 900px;
  height: 500px;
  transition:0.5s filter ease;
  -webkit-transition:0.5s filter ease;
	filter: drop-shadow(3px 3px 7px rgba(0,0,0,0.8));
}

/*
.logo_box svg:not(:root){
	overflow : visible;
	width : 100%;
	height : auto;
}

:root{

	--logo-text-delay : .3s;

}

header .logo_box svg.texte_logo-copy{
	opacity : 0;
	-webkit-transition: opacity var(--logo-text-delay);
	   -moz-transition: opacity var(--logo-text-delay);
	    -ms-transition: opacity var(--logo-text-delay);
	     -o-transition: opacity var(--logo-text-delay);
	        transition: opacity var(--logo-text-delay);
}

header.mini .logo_box svg.texte_logo-copy{
	opacity : 1;
	-webkit-transition: opacity var(--logo-text-delay) 2s;
	   -moz-transition: opacity var(--logo-text-delay) 2s;
	    -ms-transition: opacity var(--logo-text-delay) 2s;
	     -o-transition: opacity var(--logo-text-delay) 2s;
	        transition: opacity var(--logo-text-delay) 2s;
}

header .logo_box svg.texte_logo{
	opacity : 1;
	-webkit-transition: opacity var(--logo-text-delay) 1s;
	   -moz-transition: opacity var(--logo-text-delay) 1s;
	    -ms-transition: opacity var(--logo-text-delay) 1s;
	     -o-transition: opacity var(--logo-text-delay) 1s;
	        transition: opacity var(--logo-text-delay) 1s;
}

header.mini .logo_box svg.texte_logo{
	opacity : 0;
	-webkit-transition: opacity .1s;
	   -moz-transition: opacity .1s;
	    -ms-transition: opacity .1s;
	     -o-transition: opacity .1s;
	        transition: opacity .1s;
}

header .logo_box svg.texte_logo-copy:hover{
	cursor : default;
}


header .logo_box>svg{
	-webkit-transition: all 2s var(--short-transition);
	   -moz-transition: all 2s var(--short-transition);
	    -ms-transition: all 2s var(--short-transition);
	     -o-transition: all 2s var(--short-transition);
	        transition: all 2s var(--short-transition);	
}

header.mini .logo g .logo_definitif{
	position : relative;
}

header .logo g{
	position : relative;
}

header .logo g.test{
	left : 0px;
}

header.mini .logo svg g.texte_logo{

	position : relative;
	opacity : 0;
	top : 0px;
	left : 0px;

	-webkit-transition: all var(--long-transition) var(--short-transition);
	   -moz-transition: all var(--long-transition) var(--short-transition);
	    -ms-transition: all var(--long-transition) var(--short-transition);
	     -o-transition: all var(--long-transition) var(--short-transition);
	        transition: all var(--long-transition) var(--short-transition);
}

header .logo svg g.texte_logo{

	-webkit-transition: all var(--long-transition) var(--short-transition);
	   -moz-transition: all var(--long-transition) var(--short-transition);
	    -ms-transition: all var(--long-transition) var(--short-transition);
	     -o-transition: all var(--long-transition) var(--short-transition);
	        transition: all var(--long-transition) var(--short-transition);
}

header .logo svg .texte_logo-copy .lettre.st2{
	fill : #fff;
}

header .logo svg .texte_logo-copy .copy-factory .lettre.st0{
	fill : #fff;
}
*/

header .baseline_box h1{
	min-width : 700px;
	text-align : center;
}

header .baseline_box::after{
	content: '';
	position: absolute;
	bottom : -50px;
	left : calc(50% - 25px);
	width : 50px;
	height : 3px;
	background-color : var(--main-text-color);
}

/* ****************** */
/* menus*/
/* ****************** */

header .container-container-menu{
	text-align: left;
	height : 100vh;
	width : 50vw;
	position : fixed;
	left : 0px;
	z-index : 50;
	overflow : visible;

	-webkit-clip-path: url(#svg-container-menu) ;
	     -o-clip-path: url(#svg-container-menu) ;
		    clip-path: url(#svg-container-menu) ;

}

header .container-menu{
	position: absolute;
	top : 0;
	left : 0;
	height : 100%;
	width : 100%;
	background-color : var(--couleur1);
	-webkit-transition: all var(--short-transition);
	   -moz-transition: all var(--short-transition) ;
	    -ms-transition: all var(--short-transition) ;
	     -o-transition: all var(--short-transition) ;
	        transition: all var(--short-transition) ;

	-webkit-clip-path: url(#svg-menu) ;
	     -o-clip-path: url(#svg-menu) ;
		    clip-path: url(#svg-menu) ;
  display: flex;
  align-items: center;
}

/* Safari */

body.is-safari header .container-container-menu.drawer-in{
  -webkit-clip-path:none;
  clip-path: none;
  -o-clip-path: none ;

}

body.is-safari header .menu-container-drop{
  width: 0;
  overflow: hidden;
  filter:none;
}

body.is-safari header .container-container-menu{
  -webkit-clip-path:none;
  clip-path: none;
  -o-clip-path: none;
  width: auto;
}

body.is-safari header .container-container-menu.drawer-out .menu-container-drop{
  width: 33.9vw;
}

body.is-safari .container-menu{
  -webkit-clip-path:none;
  clip-path: none;
  -o-clip-path: none ;
  width: 100%;
}

body.is-safari header .shadow-menu{
  display: none;
}

body.is-safari .container-container-menu .label-menu-wrapper span{
  color:var(--couleur5);
  transition: 0.25s all ease;
  -webkit-transition: 0.25s all ease;
}

body.is-safari header .container-container-menu.drawer-out .label-menu-wrapper span{
  color:#FFF;
}

body.is-safari #zone_references{
  display: none;
}

body.is-safari header.mini .logo_box{
  top: 2vh;
}

/* Fin safari */

header .menu-container-drop{
	position: absolute;
	top : 0;
	left : 0;
	width : 100%;
	height : 99%;
	filter: drop-shadow(5px 8px 0px rgba(0,0,0,.2));
	z-index : 50;
}

header .shadow-menu{
	position: absolute;
	z-index : 40;
	top : 0;
	left : 0;
	height : 100%;
	width : 100%;

	-webkit-transition: all var(--short-transition);
	   -moz-transition: all var(--short-transition) ;
	    -ms-transition: all var(--short-transition) ;
	     -o-transition: all var(--short-transition) ;
	        transition: all var(--short-transition) ;

	-webkit-clip-path: url(#svg-shadow-menu) ;
	     -o-clip-path: url(#svg-shadow-menu) ;
		    clip-path: url(#svg-shadow-menu) ;
}

header .container-container-menu.drawer-in .shadow-menu{
	background-color : var(--couleur5);
}

header .container-container-menu.drawer-out .shadow-menu{
	background-color : rgba(47,51,52,.8);
}

.label-menu-wrapper{
	position: absolute;
	left: 20px;
	top: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	z-index: 60;
	color : #fff;
}

.menu-points-wrapper{
	position: relative;
	width : 28px;
	height : 28px;
	margin-bottom : 10px;
}

.menu-points-wrapper.animation-rotate{
	animation: 2s ease-in-out 0s infinite alternate animation-rotation;
}

@keyframes animation-rotation{
	0%{
		transform: rotate(0deg);
	}
	75%{
		transform: rotate(-360deg);
	}
  100%{
		transform: rotate(-360deg);
	}
}

:root{
--point-diameter : 8px;
}

.menu-point{
	width : var(--point-diameter);
	height : var(--point-diameter);
	border-radius : 5px;
	position : absolute;

	-webkit-transition: var(--long-transition);
	   -moz-transition: var(--long-transition);
	    -ms-transition: var(--long-transition);
	     -o-transition: var(--long-transition);
	        transition: var(--long-transition);
}

.container-container-menu.drawer-in .menu-point{
	background-color : var(--couleur2);	
}

.container-container-menu.drawer-out .menu-point{
	background-color : var(--couleur5);	
}

@keyframes point-0-0-animation{
	from{
		left : 0%;
		top :  0%;
	}

	90%{
		left : calc(50% - var(--point-diameter) / 2);
		top : calc(50% - var(--point-diameter) / 2);
	}

	to{
		left : -20%;
		top : -20%;
	}
}

@keyframes point-1-0-animation{
	from{
		right : 0%;
		top :  0%;
	}

	90%{
		right : calc(50% - var(--point-diameter) / 2);
		top : calc(50% - var(--point-diameter) / 2);
	}

	to{
		right : -20%;
		top :  -20%;
	}
}

@keyframes point-1-1-animation{
	from{
		right : 0%;
		bottom :  0%;
	}

	90%{
		right : calc(50% - var(--point-diameter) / 2);
		bottom : calc(50% - var(--point-diameter) / 2);
	}

	to{
		right : -20%;
		bottom : -20%;
	}
}

@keyframes point-0-1-animation{
	from{
		left : 0%;
		bottom : 0%;
	}

	90%{
		left : calc(50% - var(--point-diameter) / 2);
		bottom : calc(50% - var(--point-diameter) / 2);
	}

	to{
		left : -20%;
		bottom : -20%;
	}
}

#point-0-0{
	left : 0%;
	top : 0%;
}

.label-menu-wrapper:hover #point-0-0{
	animation-name : point-0-0-animation;
	animation-duration : var(--long-transition);
	left : -20%;
	top : -20%;
}

#point-1-0{
	right : 0%;
	top : 0%;
}

.label-menu-wrapper:hover #point-1-0{
	animation-name : point-1-0-animation;
	animation-duration : var(--long-transition);
	right : -20%;
	top : -20%;
}

#point-1-1{
	right : 0%;
	bottom : 0%;
}

.label-menu-wrapper:hover #point-1-1{
	animation-name : point-1-1-animation;
	animation-duration : var(--long-transition);
	right : -20%;
	bottom : -20%;
}

#point-0-1{
	left : 0%;
	bottom : 0%;
}

.label-menu-wrapper:hover #point-0-1{
	animation-name : point-0-1-animation;
	animation-duration : var(--long-transition);
	left : -20%;
	bottom : -20%;
}

.label-menu-wrapper span{
	display : block;
	text-transform: uppercase;
	color : #fff;
	width :  100%;
	text-align : right;
	font-family :  var(--rare-title-font);
  user-select: none;
}

.container-menu li>span {
  display: block;
  text-transform: none;
  color: var(--couleur6);
  text-align: left;
  font-family: var(--main-text-font);
  font-size : 1em;
  font-weight : 100;
}

li.btn-espace-client{
	position: relative;
	left : -40px;
}

header .menu > li.btn-espace-client > a{
	color : var(--couleur1);
	background-color : #fff;
	display: block;
	position: relative;
	width : 200%;
	height : 100%;
	line-height : 1.1;
	padding : 15px 0px 10px 40px;
	font-weight : 200;

	-webkit-transition: all .3s;
	   -moz-transition: all .3s;
	    -ms-transition: all .3s;
	     -o-transition: all .3s;
	        transition: all .3s;
}

header .menu > li.btn-espace-client > a:hover{
	background-color : var(--couleur5);
	color :  #fff;
}

header .menu > li.btn-espace-client > a > span{
	font-size : 1.4em;
	font-weight : normal;
	letter-spacing : .5px;
}

.label-menu-wrapper:hover{
	cursor : pointer;
}

header .menu{
	margin: 0;
	display: inline-block;	
}

header .menu > li + li{
	margin-top: 1.9rem;
}

header .menu > li.bold > a{
	font-weight : 500 !important;
}

header .menu > li > a{
	padding: 0;
	text-transform: uppercase;
	color : #fff;
	font-family : var(--main-title-font);
	font-size : 1.5rem;
	font-weight : normal;
}

header .menu > li:not(.btn-espace-client) > a:hover{
	letter-spacing : .5px;
}

header .menu > li > a:hover{
  text-decoration: none;
}

header .menu-menu-footer-container{
	position: absolute;
	bottom : 10px;
	left : 0px;
}

header .menu-menu-footer-container ul{
	padding-left : 20px;
}

header .menu-menu-footer-container ul li{
	list-style-type : none;
}

header .menu-menu-footer-container ul li a{
	color : #fff;
}

header .menu-menu-footer-container ul li a:hover{
	letter-spacing : .5px;
}

.fond_chargement .logo_site svg{
	width: 200px;
	height: auto;
	margin-bottom: 2rem;
}

.fond_chargement .logo_site svg .cls-1{
	fill: var(--couleur1);
}

.banner{
	height : 69%;
	position: relative;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.baseline_box{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 10;
	background-image : url('img/creations-digitales.svg');
	background-repeat : no-repeat;
	background-size : auto 8vh;
  background-position: center;
}

.banner .baseline_box{
	opacity : 1;
	position : absolute;
	width : auto;
	-webkit-transition: opacity var(--long-transition);
	   -moz-transition: opacity var(--long-transition);
	    -ms-transition: opacity var(--long-transition);
	     -o-transition: opacity var(--long-transition);
	        transition: opacity var(--long-transition);
}

.banner.scrolled .baseline_box{
	opacity : 0;
	max-height : 0px;
	overflow : hidden;
    -webkit-transition: opacity var(--short-transition), max-height var(--long-transition);
       -moz-transition: opacity var(--short-transition), max-height var(--long-transition);
        -ms-transition: opacity var(--short-transition), max-height var(--long-transition);
         -o-transition: opacity var(--short-transition), max-height var(--long-transition);
            transition: opacity var(--short-transition), max-height var(--long-transition);
}

.ma-vague{
  position: absolute;
  bottom: 0;
  height: 6%;
  left: 0;
  width: 100%;
  z-index: 1;
}

.ma-vague svg#vague{
	animation-name : wave-animation;
	animation-duration : 10s;
	animation-iteration-count : infinite;
	position : absolute;
	bottom : 100%;
	width : 200%;
	left : 0px;
	transform-origin: left;
}

footer svg#vague-reverse{
	animation-name : wave-animation;
	animation-duration : 10s;
	animation-iteration-count : infinite;
	position : absolute;
	top :  0px;
	width : 200%;
	right : 0px;
	transform-origin: right;
}

@keyframes wave-animation{
	from{
		-webkit-transform: scaleX(1);
		   -moz-transform: scaleX(1);
		    -ms-transform: scaleX(1);
		     -o-transform: scaleX(1);
		        transform: scaleX(1);
	}

	25%{
		-webkit-transform: scaleX(.8);
		   -moz-transform: scaleX(.8);
		    -ms-transform: scaleX(.8);
		     -o-transform: scaleX(.8);
		        transform: scaleX(.8);		
	}

	to{
		-webkit-transform: scaleX(1);
		   -moz-transform: scaleX(1);
		    -ms-transform: scaleX(1);
		     -o-transform: scaleX(1);
		        transform: scaleX(1);
	}
}



/* ****************** */
/* blocs gut avec classe custom */
/* ****************** */

.teaser{
	font-size : 3.1rem;
	line-height :3.2rem;
	font-family : var(--main-title-font);
	position: relative;
}

blockquote.home-quote{
	border : none;
	margin-left : 3.5em;
	position: relative;
	bottom : 2em;
}

blockquote.home-quote::before{
	content : '\00AB' ;
	position: absolute;
	top : 0px;
	left : 0px;
}

blockquote.home-quote::after{
	content : '\00BB';
	position: absolute;
	right : -30px;
	bottom : 0px;
}

:root{
	--inview-shiftX : 5vw;
	--inview-shiftY : 5vh;
}

.inview.from-right,
.inview.from-left,
.inview.from-bottom,
.inview.from-top
{
	opacity : 0;
	position: relative;

	-webkit-transition: all 1s;
	   -moz-transition: all 1s;
	    -ms-transition: all 1s;
	     -o-transition: all 1s;
	        transition: all 1s;
}

.inview.from-right{
	left : var(--inview-shiftX);
}

.inview.from-right.inview-action{
	left : 0px;
	opacity : 1;
}

.inview.from-left{
	right : var(--inview-shiftX);
}

.inview.from-left.inview-action{
	right : 0px;
	opacity : 1;
}

.inview.from-top{
  transform: translateY(calc(-1 * var(--inview-shiftY)));
	padding-top : 0;
}

.inview.from-top.inview-action{
  transform: translateY(0);
	opacity : 1;
}

.inview.from-bottom{
  transform: translateY(var(--inview-shiftY));
	padding-top : 0;
}

.inview.from-bottom.inview-action{
  transform: translateY(0);
	opacity : 1;
}


/* ****************** */
/* home page */
/* ****************** */

.window-cover{
	width :  100vw;
	height : 100vh;
	position: relative;
}

.slogan-wrapper{
	padding-left: var(--padding-left);
	padding-right: var(--padding-right);
	position: absolute;
	bottom : 1rem;
	z-index : 10;
	width : 100vw;
}

h1.home-title{
	color : var(--couleur1);
	text-transform: uppercase;
	font-family : var(--main-title-font);
  font-size: 2.8rem;
  margin-bottom: 1.5rem;
}

ul.keywords{
	padding : 0;
}

ul.keywords li{
	position: relative;
	display: inline-block;
	list-style-type: none;
	cursor : default;
	font-size : 1.5em;
	height : auto;

	-webkit-transition: all .3s;
	   -moz-transition: all .3s;
	    -ms-transition: all .3s;
	     -o-transition: all .3s;
	        transition: all .3s;
}

ul.keywords li>strong:hover{
	color : var(--couleur2);
}

ul.keywords li::before{
	content:'';
	width : 0%;
	background-color : var(--couleur2);
	font-size : 3em;
	position: absolute;
	top : 16px;
	left : 4px;
	display: block;
	height: 8px;
	width : 8px;
	border-radius : 4px;
	z-index : 5;
}

/* ul.keywords li:first-child::before{
	display: none;
} */

ul.keywords li span{
	position: absolute;
	width : 350px;
	background-color : var(--couleur1);
	color : #fff;
	top: 0px;
	left : 0px;
	font-size : .7em;
	font-weight : 500;
	opacity : 0;
	font-size : 0.9rem;
	z-index : -1;
	line-height : 1.1rem;
	border-radius : 6px;
	padding : 1.1rem 1.2rem 1.2rem 1.2rem;

	-webkit-transform: translateY(-100%);
	   -moz-transform: translateY(-100%);
	    -ms-transform: translateY(-100%);
	     -o-transform: translateY(-100%);
	        transform: translateY(-100%);

	-webkit-transition: all .5s;
	   -moz-transition: all .5s;
	    -ms-transition: all .5s;
	     -o-transition: all .5s;
	        transition: all .5s;
}

ul.keywords li > strong{
	font-weight : normal;
	background-color : #fff;
	display: inline-block;
	width: 110%;
	height: 100%;
	padding-left : 20px;
 	mix-blend-mode: screen;
}

ul.keywords li span.on{
	opacity : 1;
	z-index : 30;
}

ul.keywords li span p{
	margin : 0;
}

ul.keywords li span p + p{
	margin-top : 0.5rem;
}

ul.keywords li span::after{
	content : '';
	position: absolute;
	bottom : -9px;
	left : 10%;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: var(--couleur1) transparent transparent transparent;
}

ul.keywords li .scanner-wrapper{
	position: absolute;
	width : 100%;
	height : 100%;
	bottom : 0;
	left : 0;
	background-color : var(--main-text-color);
	overflow : hidden;
}

ul.keywords li .scanner{
	position: absolute;
	width : 50px;
	height : 100%;
	left : -100px;
	opacity : 1;
	background-color : #ff5400;
}

div.slogan{
	font-size : 1.8rem;
	color : var(--couleur2);
	margin-top : 20px;
}

/* ****************** */
/* shortcode equipe */
/* ****************** */

.team-wrapper{
	display : flex;
	justify-content: space-around;
  padding:0 2vw;
}

.membre{
	width : 30%;
	min-height : 100px;
	text-align : center;
	position: relative;
}

:root{
--diametre-portraits : 9vw;
}

.vignette-portrait{
	width : var(--diametre-portraits);
	height : var(--diametre-portraits);
	margin : auto;
	position: relative;
}

.vignette-portrait .portrait-fun{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: 0;
	-webkit-transition: opacity .7s .1s ease;
	   -moz-transition: opacity .7s .1s ease;
	    -ms-transition: opacity .7s .1s ease;
	     -o-transition: opacity .7s .1s ease;
	        transition: opacity .7s .1s ease;
}

.vignette-portrait:hover .bordure-portrait{
	left : 0;
}

.vignette-portrait:hover .portrait-fun{
	opacity : 1;
}

.vignette-portrait img{
	border-radius : 50%;
  box-shadow: 0px 0px 4px rgb(0 0 0 / 55%);
	position : relative;
	width : var(--diametre-portraits);
	height : var(--diametre-portraits);
}

.bordure-portrait{
	width : var(--diametre-portraits);
	height : var(--diametre-portraits);
	margin : auto;
	border-radius : 100px;
	border : 1px var(--couleur1) solid;
	position: absolute;
	left : 6%;
	z-index : 35;
	-webkit-transition: left .6s ease;
	   -moz-transition: left .6s ease;
	    -ms-transition: left .6s ease;
	     -o-transition: left .6s ease;
	        transition: left .6s ease;
}

.membre span{
	display: inline-block;
	margin-top : 30px;
	font-family : var(--rare-title-font);
}

.membre strong{
	font-weight : normal;
	color : var(--couleur1);
	text-transform: uppercase;
}

.competences{
	margin-top : 20px;
	font-size : .9rem;
	width : 60%;
	margin : auto;
}

/* ****************** */
/* shortcode compteurs*/
/* ****************** */

.block-counters{
	height : 350px;
}

.wp-block-column{
	position : relative;
}

.counter{
	width : 50%;
	height : 50%;
	font-size : 8em;
	font-family : 'metropolis_extrabold';
	position : absolute;
}

.counter::before{
	content : '';
	width : 60px;
	height : 2px;
	background-color : var(--couleur6);
	position : absolute;
	top : 0px;
	left : 0px;
}

.counter:nth-child(1){
	left : 10%;
	top :0%;
}

.counter:nth-child(2){
	left : 50%;
	top : 40%;
}

.counter .number{
	opacity : .33;
	color : var(--couleur1);
	line-height : 100%;
	padding-left : 20px;
}

.counter p{
	font-size : .15em;
	text-align : left;
	color : var(--couleur5);
	opacity : .6;
}


/* ****************** */
/* shortcode étapes   */
/* ****************** */

.title-wrapper{
	display: flex;
	justify-content : flex-start;
	position: relative;
}

.etapes-arrow{
	height : 2px;
	width : 90%;
	background-color : var(--couleur6);
	margin-left : 35px;
	position: relative;
	top : 22px;
	display: flex;
	justify-content: space-around;
}

.etapes-arrow::after{
	content :'';
	width : 10px;
	height : 10px;
	position: absolute;
	right : -4px;
	top : -4px;
	border-radius : 5px;
	background-color : var(--couleur6);
}

.etapes-circle{
	width : 72px;
	height : 72px;
	border-radius : 36px;
	background-color : var(--couleur6);
	display: flex;
	justify-content: space-around;
	align-items: center;
	color : #fff;
	position: relative;
	bottom : 35px;
	font-family : var(--main-title-font);
	font-size : 40px;
	padding-top : 9px;
	z-index : 90;
	-webkit-transition: all var(--short-transition);
	   -moz-transition: all var(--short-transition);
	    -ms-transition: all var(--short-transition);
	     -o-transition: all var(--short-transition);
	        transition: all var(--short-transition);
}

.etapes-circle:hover{
	background-color : var(--couleur1);
	-webkit-transition: all var(--short-transition);
	   -moz-transition: all var(--short-transition);
	    -ms-transition: all var(--short-transition);
	     -o-transition: all var(--short-transition);
	        transition: all var(--short-transition);
}

.link-circle:first-child{
	margin-left : 10%;
}

.link-circle:last-child{
	margin-right : 30%;
}

.etape-wrapper{
	display: flex;
}

.etape-text{
	width : 50%;
}

.etapes .text{
	padding-left : 160px;
	position: relative;
	top : -20px;
	font-size : 1.5rem;
	font-weight : 100;
	width : 90%;
}

.small-title-wrapper{
	font-size : 3rem;
	font-family : var(--main-title-font);
	color : var(--couleur6);
	font-weight : 100;
	padding : 20px 0px 20px 48px;
	align-items : center;
	position: relative;
	display : inline-block;
	height : auto;
}

body .etape-text h3{
	font-size : 3rem;
}

.etape-illu{
	width : 50%;
}

.small-title-wrapper h3{
	display: inline-block;
}

.etape-number{
	position: absolute;
	left : 0px;
	top : -50px;
	font-family : var(--main-title-font);
	font-weight : 200;
	font-size : 16rem;
	opacity : .06;
	line-height : 16rem;
}

.arrow{
	background-color : var(--couleur5);
	position: absolute;
}

.arrow-h{
	height : 1px;
}

.arrow-v{
	width : 1px;
}

.arrow_1-1{
	width : 0%;
	top : 0px;
	right : 0px;
}

.arrow_1-2{
	height :0% ;
	left : 0px;
	top : 0px;
}

.arrow_1-3{
	width : 0px;
	bottom : 0px;
	left : 0px;
}

.arrow_2-1{
	width : 0px;
	bottom : 0px;
	right : 0px;
}

.arrow_2-2{
	height : 0%;
	left : 0px;
	bottom : 0px;
}

.arrow_2-3{
	width : 0;
	top : 0px;
	left : 0px;
}

.arrow_2-4{
	height : 0px;
	right : -10%;
	top : 0px;
}

.arrow_3-1{
	height : 0px;
	right : 0px;
	top : -74px;
}

.arrow_3-2{
	width : 0%;
	top : 0px;
	right : 0px;
}

.arrow_3-3{
	height : 0%;
	left : 0px;
	top : 0px;
}

.arrow_3-4{
	width : 0px;
	bottom : 0px;
	left : 0px;
}

.arrow-point-v{
	background-image : url('img/arrow-point.svg');
	background-size : 100%;
	position: absolute;
	opacity : 0;
	top : 44px;
	right : calc(-10% - 10px);
	width : 20px;
	height : 40px;
	-webkit-transform: scale(.8) rotate(90deg);
	   -moz-transform: scale(.8) rotate(90deg);
	    -ms-transform: scale(.8) rotate(90deg);
	     -o-transform: scale(.8) rotate(90deg);
	        transform: scale(.8) rotate(90deg);
}

.arrow-point-h{
	background-image : url('img/arrow-point.svg');
	background-size : 100%;
	position: absolute;
	opacity : 0;
	bottom : -19px;
	left : 116px;
	width : 20px;
	height : 40px;
	-webkit-transform: scale(.8);
	   -moz-transform: scale(.8);
	    -ms-transform: scale(.8);
	     -o-transform: scale(.8);
	        transform: scale(.8);
}

.etape-illu svg,
.etape-illu img
{
	width : 100%;
	height : auto;
}

.etape-illu-wrapper.fondu{
	opacity : .4;
	position: relative;
}

/* .etape-illu-wrapper.fondu.float-left{
	left : -20%;
}

.etape-illu-wrapper.fondu.float-right{
	right: -20%;
} */

.etape-illu-wrapper{
	float : left;
	width : 70%;
	margin-top : 60px;
	margin-right : 100px;
}

/* ********************** */
/* bloc derniers articles */
/* ********************** */

.wp-block-latest-posts__featured-image{
	clip-path :  url(#svg-extrait-thumbnail-left);
	-webkit-transition: all .3s;
	   -moz-transition: all .3s;
	    -ms-transition: all .3s;
	     -o-transition: all .3s;
	        transition: all .3s;
}

.wp-block-latest-posts__featured-image:hover{
	-webkit-transform: translateX(1em);
	   -moz-transform: translateX(1em);
	    -ms-transform: translateX(1em);
	     -o-transform: translateX(1em);
	        transform: translateX(1em);
}

.wp-block-latest-posts__post-excerpt {
    margin-top: .5em;
    margin-bottom: 12em;
}

ul.wp-block-latest-posts__list.aligncenter{
	width : 70vw;
	margin : auto;
}

ul.wp-block-latest-posts__list li>a{
	color : #000;
	text-transform: uppercase;
	font-size : 1.5em;
	font-weight : bold;
	-webkit-transition: all .3s;
	   -moz-transition: all .3s;
	    -ms-transition: all .3s;
	     -o-transition: all .3s;
	        transition: all .3s;
}

ul.wp-block-latest-posts__list li>a:hover{
	color : var(--couleur1);
	text-decoration: none;
}

.wp-block-button__link{
	-webkit-transition: all .3s;
	   -moz-transition: all .3s;
	    -ms-transition: all .3s;
	     -o-transition: all .3s;
	        transition: all .3s;
}

.wp-block-button__link:hover{
	-webkit-transform: scale(1.1);
	   -moz-transform: scale(1.1);
	    -ms-transform: scale(1.1);
	     -o-transform: scale(1.1);
	        transform: scale(1.1);
}

body.home h2+h3{
	font-size : 1.5em;
	color : var(--couleur1);
	text-transform: none;
	font-weight : normal;
}

/* ****************** */
/* pied de page et références */
/* ****************** */

#zone_references{
	max-height : 0px;
}



#panneau_references{
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  width: 10vw;
  background:var(--couleur1);
  z-index: 40;

	-webkit-transition: left var(--short-transition);
	   -moz-transition: left var(--short-transition) ;
	    -ms-transition: left var(--short-transition) ;
	     -o-transition: left var(--short-transition) ;
	        transition: left var(--short-transition) ;

	-webkit-clip-path: url(#svg-panneau_references) ;
	     -o-clip-path: url(#svg-panneau_references) ;
		    clip-path: url(#svg-panneau_references) ;

}


.btn_references .label-menu-wrapper{
  position: fixed;
  z-index: 100;
  right: 13px;
  left:auto;
  top:auto;
  bottom:1rem;
  color:var(--couleur4);
  text-transform: uppercase;
  font-size: 0.7rem;
  cursor: pointer;
}

.btn_references .menu-point{
  background-color:var(--couleur5);
}

#liste-references-home{
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  width: 50vw;
  background:rgba(255,255,255,0.6);
  z-index: 50;

	-webkit-transition: left var(--short-transition);
	   -moz-transition: left var(--short-transition) ;
	    -ms-transition: left var(--short-transition) ;
	     -o-transition: left var(--short-transition) ;
	        transition: left var(--short-transition) ;

	-webkit-clip-path: url(#svg-liste-references) ;
	     -o-clip-path: url(#svg-liste-references) ;
        clip-path: url(#svg-liste-references) ;
}

#liste-references-home ul{
  list-style-type: none;
  padding: 0;
  position: absolute;
  top:0;
  height: 90%;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  margin-left: 0;
}

#liste-references-home ul li{
  flex:1;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin-bottom: 0;
}

#liste-references-home ul li{
  margin-top: 0.3rem;
}

#liste-references-home ul li:last-child{
  margin-top: 0;
}

#liste-references-home ul li span{
  font-family: 'oswald';
  letter-spacing: 0.3px;
  position: absolute;
  right: 0;
  /* bottom: -50%; */
  bottom: 0%;
  line-height: 1.1rem;
  padding: 0.3rem 0.25rem 0 60%;
  width: 100%;
  text-align: right;
  font-size:1.1rem;
  background:rgba(255,255,255,0.9);
  mix-blend-mode: Screen;
  transition:all 0.5s ease-in-out;
  text-transform: uppercase;
  font-weight: 600;
  color:#000;
  opacity: 0;
}

#liste-references-home ul li:hover span{
  bottom: 0;
  opacity: 1;
}

#liste-references-home ul li img{
  position: absolute;
  top: 0;
  right: 0;
  height: 103%;
  width: auto;
  opacity:0.8;
  cursor: pointer;
  transition: all 0.25s ease-in-out 0.15s;
  transform-origin:100% 50%;
}

#liste-references-home ul li img:hover{
  opacity: 1;
  transform: scale(1.05);
  transition: all 0.75s ease-in-out;
}

.post-edit-link{
  right:auto;
  left: 0.5rem;
  padding:0.25rem;
  font-size: 0.8rem;
}

body.archive .flex-title + .main-description{
  margin-top: -3rem;
  margin-bottom: 1rem;
}

body.archive:not(.tag) .main-description{
  padding-left:var(--padding-single);
  padding-right:var(--padding-single);
}

body.archive .main-description{
  font-size: 1.3rem;
}

body.tag .flex-title + .main-description{
  margin-bottom: 4rem;
}

.container-mini-references{
  padding-top: 5vh;
  padding-bottom: 5vh;
  max-width: 100vw;
  overflow: hidden;
}

.container-mini-reference{
  display: flex;
  transition: 0.3s all ease;
}

.container-mini-reference:nth-child(odd).not-loaded{
  transform: translateX(40%);
}

.container-mini-reference:nth-child(even).not-loaded{
  transform: translateX(-40%);
}

.container-mini-reference + .container-mini-reference{
  margin-top: 10vh;
}

.container-mini-reference:nth-child(odd){
	-webkit-flex-direction: row-reverse;
	-moz-flex-direction: row-reverse;
	-ms-flex-direction: row-reverse;
	-o-flex-direction: row-reverse;
	flex-direction: row-reverse;
}

.mini-reference{
	width: 80vw;
	border:1px solid rgba(0,0,0,0.4);
	background:#FFF;
	position: relative;

	-webkit-transition: 0.5s all;
	-o-transition: 0.5s all;
	transition: 0.5s all;
  cursor: pointer;
}

.mini-reference .entry-content{
	position: relative;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-ms-align-items: stretch;
	align-items: stretch;
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	-ms-flex-direction: row;
	-o-flex-direction: row;
	flex-direction: row;
}

.container-mini-reference:nth-child(even) .mini-reference{
	border-left: none;
	border-right:7px solid var(--couleur1);
	margin-left: -1.5rem;
}


.container-mini-reference:nth-child(odd) .mini-reference .entry-content{
	border-right: none;
	border-left:7px solid var(--couleur1);
	margin-right: -1.5rem;
	-webkit-flex-direction: row-reverse;
	-moz-flex-direction: row-reverse;
	-ms-flex-direction: row-reverse;
	-o-flex-direction: row-reverse;
	flex-direction: row-reverse;
}


.mini-reference::before{
	content:"";
	position: absolute;
	bottom: 0;
	right: 41px;
	height: 1vh;
	width: 999rem;
	box-shadow: 6px 9px 10px rgba(0,0,0,0.3);
}

.container-mini-reference:nth-child(odd) .mini-reference::before{
	right: auto;
	left: 41px;
}

.mini-reference .deco_encart{
	position: absolute;
	right: -7px;
	bottom: -1px;
}

.mini-reference .deco_encart::before{
	content:'';
	position: absolute;
	right: 0px;
	bottom: 0px;
	z-index: 11;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 40px 40px;
	border-color: transparent transparent #FFF transparent;
}

.mini-reference .deco_encart::after{
	content:'';
	position: absolute;
	right: 0px;
	bottom: 0px;
	z-index: 10;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 50px 50px;
	border-color: transparent transparent var(--couleur1) transparent;
}

.container-mini-reference:nth-child(odd) .mini-reference .deco_encart{
	right: auto;
	left: -8px;
}

.container-mini-reference:nth-child(odd) .mini-reference .deco_encart::before{
	right: auto;
	left: 0;
	border-width: 0 40px 40px 0;
}

.container-mini-reference:nth-child(odd) .mini-reference .deco_encart::after{
	right: auto;
	left: 0;
	border-width: 0 50px 50px 0;
}

.mini-reference .texte{
  flex:0.7;
	padding:3rem;
	position: relative;
	text-align: right;
	overflow: hidden;
}

.mini-reference .texte span{
  color:var(--couleur1);
  display: block;
}

.container-mini-reference:nth-child(odd) .mini-reference .texte{
	text-align: left;
}

.mini-reference .texte h3{
	color:var(--couleur1);
	font-family: var(--typoTitre);
	font-weight: var(--fontWeightTitre);
	text-transform: uppercase;
	margin-bottom: 3rem;
	font-size: 2.3rem;
  line-height: 2rem;
	position: relative;
	margin-right: 10%;
	-webkit-transition: 0.5s all;
	-o-transition: 0.5s all;
	transition: 0.5s all;
  padding-top: 0;
}

.container-mini-reference.inview-action .mini-reference .texte h3{
	margin-right: 25%;
}

.mini-reference .texte h3 a{
	color:var(--couleur1);
}

.mini-reference:hover .texte h3 a{
	color:var(--couleur5);
}

.mini-reference .texte h3 span{
  text-transform: none;
  font-size: 0.8rem;
  left: 0;
  margin-left: 0.2rem;
  line-height: 0.8rem;
  margin-top: 0.5rem;
}

.container-mini-reference:nth-child(even) .mini-reference .texte h3 span{
  left:auto;
  right: 0;
  margin-left: 0;
  margin-right: 0.2rem;
}

.mini-reference .texte h3::after{
	content: "";
	position: absolute;
	top: 0;
	left: 102%;
	width: 999rem;
	height: 100%;
	background:var(--couleur1);
	opacity: 0.3;
	z-index: 1;
	-webkit-transition: 0.25s all;
	-o-transition: 0.25s all;
	transition: 0.25s all;
}

.mini-reference:hover .texte h3::after{
	background:var(--couleur5);
}

.container-mini-reference:nth-child(odd) .mini-reference .texte h3{
	margin-right: 0;
	margin-left: 10%;
}

.container-mini-reference:nth-child(odd).inview-action .mini-reference .texte h3{
	margin-left: 25%;
}

.container-mini-reference:nth-child(odd) .mini-reference .texte h3::after{
	left:auto;
	right: 102%;
}

.mini-reference .texte .description{
  font-size: 0.9rem;
}

.mini-reference .texte .meta{
  margin: 0;
  left: 3rem;
  position: absolute;
  bottom: 3rem;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.8rem;
}

.container-mini-reference:nth-child(even) .mini-reference .texte .meta{
  justify-content: flex-end;
} 

.mini-reference .texte .meta li{
  margin-bottom: 0;
}

.mini-reference .texte .meta li a{
  padding:0.2rem 0.5rem;
  display: block;
}

.mini-reference .texte .meta li a span{
  color:var(--couleur1);
  display: inline;
}

.mini-reference .texte .meta li a:hover{
  transform: scale(1.1);
  color:var(--couleur1);
}

.container-mini-reference:nth-child(even) .mini-reference .texte .meta{
  left: auto;
  right: 3rem;
}

.mini-reference .texte ul.meta li::before{
  display: none;
  margin-left: 0;
}

.mini-reference .photo{
  flex:1;
	height: 40vh;
	width: 100%;
	position: relative;
	background-size:120% auto;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}

.mini-reference .photo .deco{
	position: absolute;
	right: -7px;
	top: -1px;
	bottom:-1px;
	width: 75px;
	z-index: 1;
	overflow: hidden;
	-webkit-transform: scale(-1);
	-ms-transform: scale(-1);
	-o-transform: scale(-1);
	transform: scale(-1);
}

.mini-reference .photo svg{
	position: absolute;
	top: 0;
	height: 100%;
	right: 0;
}

.mini-reference .photo .motif_dechire_vertical{
	fill:#FFF;
}

.container-mini-reference:nth-child(odd) .photo .deco{
	background-position: bottom right;
	right: auto;
	left: -7px;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}


.mini-reference .texte .more{
	position: absolute;
	bottom: 0;
	right: -50%;
	height: 40px;
	background:var(--couleur1);
	color:#FFF;
	text-transform: uppercase;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-ms-align-items: center;
	align-items: center;
	font-family: var(--typoSousTitre);
	font-weight:var(--fontWeightSousTitre);
	padding-right:52px;
	padding-left: 16px;
	-webkit-transition: 0.5s all;
	-o-transition: 0.5s all;
	transition: 0.5s all;
}

.mini-reference:hover .texte .more{
	color:#FFF;
}

.mini-reference .texte .more::before{
	content:"";
	position: absolute;
	right: 100%;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 40px 40px;
	border-color: transparent transparent var(--couleur1) transparent;
}

.mini-reference:hover .texte .more{
	right: 0;
}

.container-mini-reference:nth-child(odd) .mini-reference .texte .more{
	right: auto;
	left: -50%;
	padding-left:52px;
	padding-right: 16px;
}

.container-mini-reference:nth-child(odd) .mini-reference .texte .more::before{
	right: auto;
	left: 100%;
	border-width: 0 40px 40px 0px;
}

.container-mini-reference:nth-child(odd) .mini-reference:hover .texte .more{
	right: auto;
	left: 0;
}

/*******************************/
/* Popup référence             */
/*******************************/

#popup_reference{
  position: fixed;
  left: 10vw;
  right: 10vw;
  top: 7vh;
  bottom: 13vh;
  background:#FFF;
  z-index: 111;
  border: 1px solid rgba(0,0,0,0.4);
  border-right:7px solid var(--couleur1);
  border-left:7px solid var(--couleur1);
  opacity: 0;
  display: none;
  flex-direction: column;
  justify-content: stretch;
  user-select: none;
}

#popup_reference .popup_loader{
	content : '';
	background: #FFF url('img/spinner.svg');
	background-size: 50px 50px;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	top : 0;
	left : 0;
	bottom : 0;
	right : 0;
	z-index : -1;
	opacity : 1;
	-webkit-transition: all 1s;
	   -moz-transition: all 1s;
	    -ms-transition: all 1s;
	     -o-transition: all 1s;
	        transition: all 1s;
}

#popup_reference.active{
  opacity: 1;
  display: flex;
}

#popup_reference.loaded .popup_loader{
	opacity : 0;
}

#popup_reference .contenu_popup{
  display: flex;
  max-height: 69vh;
  min-height: 69vh;
  padding-top: 1rem;
}

.contenu_col_gauche{
  height: 100%;
  overflow: visible;
}

#popup_reference .contenu_popup .col_gauche{
  display: flex;
  width: 43vw;
  position: relative;
  flex-direction: column;
  justify-content: stretch;
}

#popup_reference .contenu_popup .col_droite{
  display: flex;
  width: 37vw;
  position: relative;
}

#popup_reference .close{
  position: absolute;
  z-index: 10;
  left: 100%;
  margin-left: -16px;
  margin-bottom: -16px;
  bottom:100%;
  width: 34px;
  height: 34px;
  background:var(--couleur1);
  color:#FFF;
  transition: 0.25s all;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  padding:0.35rem;
  opacity:1;
  transform: rotate(45deg);
}

#popup_reference .close:hover{
  transform: scale(1.2);
  color:rgba(0,0,0,0.7);
}

#popup_reference .close i{
  transform: rotate(-45deg);
}

#popup_reference .close span{
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  color:var(--couleur1);
  text-transform: uppercase;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 0.25rem;
}

#visuel_popup_reference{
  max-height: 16vh;
  min-height: 16vh;
  background-size:cover;
  background-repeat:no-repeat;
  background-position: center;
  position: relative;
  overflow: hidden;
}

#popup_reference h3{
  font-size: 2.6rem;
  position: absolute;
  left: 0;
  bottom: 0;
  padding:0.5rem 4rem 0.6rem 2rem;
  margin: 0;
  font-family: 'oswald';
  background:var(--couleur1);
  color:#FFF;
  font-weight: 100;
  text-shadow: 0px 0px 3px rgba(255,255,255,0.6);
  opacity: 0;
  transition: 1s all ease-in-out;
  z-index: 2;
}

#popup_reference h3.active{
  opacity: 1;
}

#popup_reference h3 span{
  display: block;
  font-family: 'opensans';
  text-transform: uppercase;
  font-size: 0.8rem;
  transform: translateX(30px);
  z-index: 1;
  color:rgba(255,255,255,0.8);
  transition: 1s all ease-in-out;
}

#popup_reference h3::before{
  content:"";
  position: absolute;
  left: 100%;
  margin-left: 15px;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 100px 0 0 150px;
  border-color: transparent transparent transparent var(--couleur3);
}

#popup_reference h3::after{
  content:"";
  position: absolute;
  left: 100%;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 100px 0 0 150px;
  border-color: transparent transparent transparent var(--couleur1);
}


#visuel_popup_reference .visuel_image{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color:var(--couleur4);
  z-index: 1;
  opacity:0;
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}

#visuel_popup_reference .visuel_image.active{
  opacity:0.4;
}

#description_popup_reference{
  flex:1;
  font-size: 1.2rem;
  line-height: 1.5rem;
  font-weight: 100;
  margin:0 2rem 2rem 2rem;
  padding-right: 2rem;
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: 1s, 1s;
  transition-timing-function: ease-in-out;
  transform: translateY(20px);
}

#description_popup_reference strong{
  font-weight: 300;
  color:rgba(0,0,0,0.8);
}

#description_popup_reference.active{
  opacity: 1;
  transform: translateY(0px);
}

#description_popup_reference p{
  margin-bottom: 0;
}

#description_popup_reference p + p{
  margin-top: 1rem;
}

#competences_popup_reference,
#competences_reference{
  list-style-type: none;
  display: flex;
  padding-left: 2rem;
  position: relative;
  padding-top: 3.5rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px dotted var(--couleur1);
  border-top: 1px dotted var(--couleur1);
  opacity: 0;
  transition: 1s opacity ease-in-out;
}

#competences_reference{
  opacity: 1;;
}

#competences_popup_reference.active{
  opacity: 1;
}

#competences_popup_reference > span,
#competences_reference > span{
  position: absolute;
  color:var(--couleur5);
  top: 0.7rem;
  font-size: 1.6rem;
  font-family: 'oswald';
  font-weight: 100;
}

#competences_popup_reference li + li,
#competences_reference li + li{
  margin-left: 0.5rem;
  padding-left: 1rem;
  position: relative;
}

#competences_popup_reference li + li::before,
#competences_reference li + li::before{
  content:"";
  color:rgba(0,0,0,0.5);
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background:var(--couleur1);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

#intervenants_popup_reference,
#intervenants_reference{
  flex:0.1;
  position: absolute;
  bottom: 3.8vh;
  color:var(--couleur1);
  list-style-type: none;
  display: flex;
  padding-left: 2rem;
  padding-top: 3.5rem;
  padding-bottom: 0.7rem;
  margin: 0;
  opacity: 0;
  transition: 1s opacity ease-in-out;
}

#intervenants_reference{
  opacity: 1;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#intervenants_popup_reference.active{
  opacity: 1;
}

#intervenants_popup_reference > span,
#intervenants_reference > span{
  position: absolute;
  color:var(--couleur5);
  top: 0.7rem;
  font-size: 1.6rem;
  font-family: 'oswald';
  font-weight: 100;
}

#intervenants_popup_reference li,
#intervenants_reference li{
  display: flex;
}

#intervenants_popup_reference li + li,
#intervenants_reference li + li{
  margin-left: 1.5rem;
}

#intervenants_popup_reference li a,
#intervenants_reference li a{
  display: flex;
}

#intervenants_popup_reference li a:hover,
#intervenants_reference li a:hover{
  text-decoration: none;
}

#intervenants_popup_reference li span.photo,
#intervenants_reference li span.photo{
  width: 50px;
  height: 50px;
  background-size:cover;
  border-radius: 50px;
  margin-left: 0.5rem;
}

#intervenants_popup_reference li p,
#intervenants_reference li p,
#intervenants_popup_reference li p a,
#intervenants_reference li p a{
  margin: 0;
  line-height: 0.9rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  font-size: 0.75rem;
  text-transform: uppercase;
  white-space: nowrap;
}

#intervenants_popup_reference li p strong,
#intervenants_reference li p strong{
  width: 100%;
  font-weight: 100;
  text-transform: none;
  font-size: 1.3rem;
  line-height: 1.2rem;
  margin-top: 0.55rem;
  color:var(--couleur5);
  font-family: 'oswald';
  text-align: right;
}

#video_popup_reference,
#image_popup_reference,
#video_popup_reference .vimeo_player{
  width: 40vw;
  height:22.5vw;
}

#video_popup_reference,
#image_popup_reference{
  position: absolute;
  z-index: 10;
  border:2px solid var(--couleur1);
  display: flex;
  align-items: center;
  justify-content: center;
  background:#FFF;
  background-position: center;
  background-repeat: no-repeat;
  background-size:contain;
  box-shadow: 8px 8px 3px rgba(0,0,0,0.15);
  opacity:0;
  transition:1s opacity;
  right: -2rem;
  transform: translateY(-2rem);
  overflow: hidden;
}

#video_reference iframe{
  width: 100%;
  height: 100%;
}

#video_popup_reference .vimeo_player{
  position: relative;
}

#video_popup_reference .tac_activate{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
  padding:1rem;
  background:#FFF;
  border:1px solid var(--couleur1);
  border-radius: 5px;
}

#image_popup_reference.image-haute{
  top:auto;
  bottom: 25%;
}

#image_popup_reference img{
  width: 100%;
  height: auto;
}

#video_popup_reference.active,
#image_popup_reference.active{
  opacity:1;
}

#video_popup_reference.loading{
  background:#FFF url('img/spinner.svg');
  background-size: 50px 50px;
  background-position: center;
  background-repeat: no-repeat;
}

#video_popup_reference::after,
#image_popup_reference::after{
  content:"";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: 1;
  border-style: solid;
  border-width: 20px 0 0 20px;
  border-color: transparent transparent transparent var(--couleur1);
}

#video_popup_reference::before,
#image_popup_reference::before{
  content:"";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  z-index: 1;
  border-style: solid;
  border-width: 0 20px 20px 0;
  border-color: transparent var(--couleur1) transparent transparent;
}

#video_popup_reference iframe {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 100% !important;
  height: 100% !important;
}

#learn_more_popup_reference,
#learn_more_reference{
  display: none;
  opacity: 0;
  position: absolute;
  bottom: 0;
  right: 0;
  background:var(--couleur1);
  color:#FFF;
  height: 44px;
  padding:0.3rem 1rem 0 1rem;
  align-items: center;
  justify-content: center;
}

#learn_more_reference{
  position: relative;
  bottom:auto;
  right: auto;
  display: flex;
  opacity: 1;
  width: 20vw;
}

#learn_more_popup_reference::before,
#learn_more_reference::before{
  content:"";
  position: absolute;
  z-index: 1;
  right: 100%;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 44px 50px;
  border-color: transparent transparent var(--couleur1) transparent;
}

#learn_more_popup_reference::after,
#learn_more_reference::after{
  content:"";
  position: absolute;
  right: 100%;
  margin-right: 10px;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 44px 50px;
  border-color: transparent transparent var(--couleur3) transparent;
}

#learn_more_popup_reference strong,
#learn_more_reference strong{
  font-size: 1.3rem;
  font-weight: 100;
  line-height: 1rem;
  font-family: 'oswald';
}

#learn_more_popup_reference span,
#learn_more_reference span{
  position: relative;
  display: block;
  text-transform: uppercase;
  font-size: 0.9rem;
  color:rgba(255,255,255,0.8);
  font-family: 'opensans';
  transition:0.25s all;
}

#learn_more_popup_reference:hover span,
#learn_more_reference:hover span{
  padding-left: 1rem;
}

#learn_more_popup_reference i,
#learn_more_reference i{
  margin-left: 1rem;
  font-size: 1.7rem;
  margin-bottom: 0.3rem;
  opacity:0.8;
  transition:0.25s all;
}

#learn_more_popup_reference:hover i,
#learn_more_reference:hover i{
  margin-left: 2rem;
  margin-right: -0.5rem;
  opacity: 1;
}

#learn_more_popup_reference.active{
  display: flex;
  opacity: 1;
}

#nav-reference{
  position: fixed;
  bottom: 0;
  left: 50%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background:var(--couleur1);
  color:#FFF;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  transform: translateX(-50%) translateY(100%);
  z-index: 150;
  transition: 0.5s transform ease;
}

#nav-reference.active{
  transform: translateX(-50%) translateY(0%);
}

#nav-reference span{
  padding:0.2rem 2rem;
  font-size: 2rem;
  cursor: pointer;
  transition: 0.25s all ease-in-out;
}

#nav-reference span:hover{
  color:var(--couleur3);
}

.overlay{
  position: fixed;
  z-index: 110;
  background:rgba(255,255,255,0.9);
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  cursor: pointer;
  display: none;
  opacity: 0;
}

.overlay.active{
  opacity: 1;
  display: block;
}


/*******************************/
/* Page référence simple       */
/*******************************/

#visuel_reference{
  background-size: cover;
  background-position: center;
  margin-bottom: 10vh;
}

#visuel_reference h2{
  color:var(--couleur1);
  font-size: 2.8rem;
  font-weight: 300;
  text-transform: none;
  padding: 7rem 0;
  background:rgba(255,255,255,0.8);
}

#description_reference{
  font-size: 1.8rem;
  padding-right: 3rem;
  margin-bottom: 2rem;
}

.flex-1{
  flex:1;
}

#reference_nav{
  margin:4rem 0 0rem 0;
  display: flex;
  justify-content: center;
  font-size: 1.5rem;
}

#reference_nav a+a{
  margin-left: 6rem;
}

#reference_nav a i{
  margin:1rem;
  color:var(--couleur1);
}

#image_reference{
  border:2px solid var(--couleur1);
}

#video_reference iframe{
  border:2px solid var(--couleur1);
  width: 100%;
  height: 24vw;
}

/*******************************/
/* ajustements blocs gutenberg */
/*******************************/

.wp-block-media-text__media img{
	height : auto;
}

.wp-block-media-text:not(.has-media-on-the-right) .wp-block-media-text__content{
	padding-right : 0px;
}

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content{
	padding-left : 0px;
}

blockquote.wp-block-quote {
    border-left: none;
    margin: 2em 0 2em 2em;
    padding-left: 1em;
    padding-top : .5em;

/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#23ada6+3,ffffff+47&0.41+2,1+47 */
background: -moz-linear-gradient(left,  rgba(35,173,166,0.41) 2%, rgba(35,173,166,0.42) 3%, rgba(255,255,255,1) 47%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(35,173,166,0.41) 2%,rgba(35,173,166,0.42) 3%,rgba(255,255,255,1) 47%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(35,173,166,0.41) 2%,rgba(35,173,166,0.42) 3%,rgba(255,255,255,1) 47%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6923ada6', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */

}

blockquote.wp-block-quote p{
	font-family : var(--main-title-font);
	font-size :  1.5em;
	font-style : italic;
}

blockquote.wp-block-quote.real-quote p::before{
	content : '\201C';
}

blockquote.wp-block-quote.real-quote p::after{
	content : '\201D';
}

li a {
    color: var(--couleur3);
}

li a:hover {
    color: var(--couleur3);
    text-decoration: underline;
}

ul:not([class]){
	margin-left : 2em;
}

ul:not([class]) li::before {
    color :  var(--couleur1);
}

body.single .wp-block-image:not(.no-corners) figure img,
body.single .wp-block-media-text:not(.no-corners) figure img,
body.single .wp-block-gallery:not(.no-corners) figure img,
img.cornered-image{
	clip-path: url('#svg-img-inside-content');
	-webkit-clip-path: url('#svg-img-inside-content');
}

figcaption,
li.blocks-gallery-item figure figcaption.blocks-gallery-item__caption
{
	color : var(--couleur1)!important;
	font-style : italic;
	font-size : .8125rem!important;
}


/******************************/
/* galerie gutenberg homogène */
/******************************/

:root{
	--gallery-image-width : 260px;
	--gallery-image-height : 260px;
}

ul.blocks-gallery-grid{
	display: flex;
	justify-content: flex-start;
	padding : 0px;
    flex-wrap : wrap;
    height : auto;
}

li.blocks-gallery-item::before{
	display: none;
	content : '';
}

li.blocks-gallery-item a img{
	-webkit-transition: all .3s;
	   -moz-transition: all .3s;
	    -ms-transition: all .3s;
	     -o-transition: all .3s;
	        transition: all .3s;
}


li.blocks-gallery-item:hover a img{
	-webkit-transform: scale(1.02);
	   -moz-transform: scale(1.02);
	    -ms-transform: scale(1.02);
	     -o-transform: scale(1.02);
	        transform: scale(1.02);

}

.wp-block-gallery.columns-3 li.blocks-gallery-item {
    width: var(--gallery-image-width);
    height : var(--gallery-image-height);
    margin-right: 35px;
    position: relative;
    flex : none;
    display : block;
    margin-bottom : 50px;
}

.wp-block-gallery.columns-3 .blocks-gallery-item:nth-of-type(3n) {
    margin-right: 35px;
}

li.blocks-gallery-item figure{
	width : 100%;
	height : auto;
	margin: auto;
}

li.blocks-gallery-item figure figcaption.blocks-gallery-item__caption{
	position: absolute;
	padding : 16px 5px;
	background : transparent;
	bottom : 0px;
	color : var(--main-title-color);
	font-family : var(--main-text-font);
	font-size : 1.5em;
}

figure.wp-block-gallery:not(.is-cropped) figure{
	align-items: center;
	justify-content: center;
}

figure.wp-block-gallery.aligncenter ul.blocks-gallery-grid{
	justify-content: center;
}

/******************************/
/* fin galerie gutenberg homogène */
/******************************/

/********/
/*FOOTER*/
/********/

footer{
	min-height : 680px;
	background-color : var(--couleur3);
  padding-top: 9rem;
}

#arrow-up{
	position : fixed;
	z-index : 100;
	left : -50px;
	bottom : 30px;
	width : 50px;
	height : 50px;
	background-image : url('img/arrow-circled.svg');
	background-size : cover;
	background-repeat : no-repeat;
	cursor : pointer;

	-webkit-transition: all var(--long-transition);
	   -moz-transition: all var(--long-transition);
	    -ms-transition: all var(--long-transition);
	     -o-transition: all var(--long-transition);
	        transition: all var(--long-transition);
}

#arrow-up.active{
	left : 50px;	
}

#arrow-up:hover{
	bottom : 40px;
}

.home footer{
	margin-top : -100px;
}

footer .menu-footer a{
  color:#FFF;
}

footer a:hover{
  color:#FFF;
}

footer .wpcf7-form a:hover{
	color : var(--couleur3);
}

footer .container-fluid{
	padding : 0 var(--padding-right) 0 var(--padding-left);
}

footer .form-container{
	display: flex;
	justify-content: space-between;
	padding : 120px 0 90px 0;
  margin-bottom: 0rem;
}

footer .form-intro{
	display: flex;
	justify-content: center;
	align-items: center;
	font-family : var(--main-title-font);
	font-size : 3.375em;
	color : #fff;
	max-width : 50%;
	padding-left : 10%;
}

footer .wpcf7{
	width : 35%;
	position: relative;
}

.wpcf7-form{
	padding-bottom : 10px;
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder{
  font-weight: 600;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus{
  outline:1px solid rgba(0,0,0,0.5);
}

/* disparition auto du placeholder des formulaires */
::-webkit-input-placeholder { font-weight : bold ; opacity: .3; -webkit-transition: opacity .5s; transition: opacity .5s; }  /* Chrome <=56, Safari < 10 */
::-moz-placeholder { font-weight : bold ; opacity: .3; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 4-18 */
::-moz-placeholder { font-weight : bold ; opacity: .3; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 19-51 */
:-ms-input-placeholder { font-weight : bold ; opacity: .3; -ms-transition: opacity .5s; transition: opacity .5s; } /* IE 10+ */
::placeholder { font-weight : bold ; opacity: .3; transition: opacity .5s; } /* Modern Browsers */
    
*:focus::-webkit-input-placeholder { opacity: 0; } /* Chrome <=56, Safari < 10 */
*:focus::-moz-placeholder { opacity: 0; } /* FF 4-18 */
*:focus::-moz-placeholder { opacity: 0; } /* FF 19-50 */
*:focus:-ms-input-placeholder { opacity: 0; } /* IE 10+ */
*:focus::placeholder { opacity: 0; } /* Modern Browsers */


footer .wpcf7 input#acceptance + span{
	font-size : .8em;
	color : #555;
}

footer .wpcf7 .send-message{
	position: absolute;
	top: 100%;
  margin-top: 0.5rem;
	right : 0px;
	display: flex;
	justify-content: flex-end;
}

div.wpcf7 p{
  margin: 0;
}

div.wpcf7 p + p{
  margin-top: 1rem;
}

div.wpcf7 .ajax-loader{
  position: absolute;
  right: 110%;
  top: 5px;
  background-image:url(img/spinner-blanc.svg);
  background-size: contain;
  width: 37px;
  height: 37px;
  display: flex;
  z-index: 1;
}

.wpcf7 form .wpcf7-response-output{
  position: absolute;
  left: 0;
  top: 100%;
  margin: 0;
  margin-top: 0.5rem;
  padding: 0.7rem 1rem 0.8rem 1rem;
  right: 28%;
  background:#FFF;
  border-radius: 10px;
  font-size: 0.9rem;
  line-height: 1.1rem;
  font-weight: 500;
  border-width:4px;
}

.wpcf7-form.wpcf7-acceptance-as-validation.invalid {
	background-color : #fff;
	border-radius : 10px;
}

.wpcf7-form
{
	background-color : #fff;
	border-radius : 10px;
}

.wpcf7-textarea{
	height : 100px;
}

.wpcf7-form::after{
	display: none;
}

.wpcf7 input.wpcf7-text,
.wpcf7 input.wpcf7-text:active,
.wpcf7 input.wpcf7-submit,
.wpcf7 input.wpcf7-submit:active,
.wpcf7 textarea.wpcf7-textarea,
.wpcf7 textarea.wpcf7-textarea:active
{
	border : none;
}

.wpcf7::before{
	content : '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 30px 30px 30px 0;
	border-color: transparent #ffffff transparent transparent;
	position: absolute;
	left : -30px;
	top : calc(50% - 30px);
}

.wpcf7-spinner{
  position: absolute;
  top: 100%;
  right: 0;
  margin: 0.5rem 0.5rem 0 0;
}

.wpcf7-form input.wpcf7-submit{
	padding : 0.6rem 1rem 0.6rem 1rem;
	color : var(--couleur1);
	font-weight : 600;
  text-transform: uppercase;
	position: relative;
	cursor : pointer;
	border-radius : 8px;
  outline:none;
}

.wpcf7-form .send-message:hover input.wpcf7-submit{
  padding-right : 3.4rem;
}

.wpcf7-form .letter-low{
	content : '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0px 20px 0 0;
	border-color: var(--couleur1) transparent transparent transparent;
	position: absolute;
	right : 13px;
	top : 43px;
	-webkit-transition: all.3s;
	   -moz-transition: all.3s;
	    -ms-transition: all.3s;
	     -o-transition: all.3s;
	        transition: all.3s;
}

.wpcf7-form .letter-high{
	content : '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0px 0 0 20px;
	border-color: transparent transparent transparent var(--couleur1);
	position: absolute;
	right : 13px;
	top : -10px;
	-webkit-transition: all.3s;
	   -moz-transition: all.3s;
	    -ms-transition: all.3s;
	     -o-transition: all.3s;
	        transition: all.3s;
}
.send-message:hover .letter-high{
	top : 11px;
  border-width: 10px 0 0 20px;
}

.send-message:hover .letter-high + .letter-low{
	top : 23px;
  border-width: 10px 20px 0 0;
}

.wpcf7-list-item{
	line-height : 1;
}

.wpcf7-list-item label{
	margin-bottom : 0;
}

.row-menu-footer{
  position: relative;
  margin-top: 5rem;
  margin-bottom: 5rem;
	border-top : 3px solid var(--couleur5);
	display: flex;
  justify-content: flex-end;
  font-size: 0.9rem;
  font-weight: 100;
  margin-bottom: 1.5rem;
  height: auto;
}

.spacerfooter{
  height: 1px;
}

.menu-footer-container{
	display: flex;
	justify-content: flex-end;
}

section.menu-footer{
	display: flex;
	justify-content: flex-end;
  margin: 0;
  padding: 0;
}

footer .menu{
  margin: 0;
}

footer .social-icons{
  position: relative;
  width: 10vw;
}

footer .copyright{
  position: absolute;
  left: 0;
}

.social_icones{
  position: absolute;
  display: flex;
  right: 1rem;
  margin: 0;
  padding: 0;
  background: var(--couleur1);
  border-radius: 99em;
  padding:0.2rem 0.8rem;
  transform: translateY(-50%);
  border:3px solid var(--couleur5);
}

ul.social_icones li{
  margin-bottom: 0;
}

.social_icones li + li{
  margin-left: 0.5rem;
}

.social_icones li a{
  font-size: 1.8rem;
  line-height: 1.8rem;
  color:rgba(255,255,255,0.9);
  display: block;
}

.social_icones li a:hover{
  color:rgba(0,0,0,0.6);
}

#tarteaucitronIcon{
  display: none !important;    
}

#tarteaucitronAlertBig{
	z-index: 100;
}

#tarteaucitronMainLineOffset{
  background:var(--couleur3);
  color:var(--couleur4);
  text-align: center;
}

#tarteaucitronMainLineOffset .tarteaucitronName {
    margin-bottom: 1.3rem;
}

.tarteaucitronTitle button {
    color: var(--couleur4);
}

#tarteaucitronAlertBig .tarteaucitronAlertBigBtnWrapper button:hover {
    color: #fff;
}

#tarteaucitron #tarteaucitronPrivacyUrlDialog{
    color: #fff;	
}

#tarteaucitron #tarteaucitronPrivacyUrlDialog:hover {
    color: #fff;
}

#tarteaucitronClosePanel{
	color : #fff;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: -0.8rem;
  padding:0.5rem 1.3rem;
}

.nav_suiv_prec{
  font-size: 1.3rem;
  width: 100%;
}

.nav_suiv_prec a[rel=prev] i{
  margin-right: 1rem;
}
.nav_suiv_prec a[rel=next] i{
  margin-left: 1rem;
}

/* Carte de Voeux */
body.page-id-642 .wp-block-image{
  width: 30vw;
  margin:0 auto;
}

body.page-id-642 .wp-block-image figure{
  width: 100%;
}

body.page-id-642 .wp-block-image figure a{
  display: block;
  background:rgba(0,0,0,0.04);
  padding:2rem;
  border:3px solid var(--couleur3);
  border-radius: 5px;
  box-shadow: 0px 0px 0px rgba(0,0,0,0);
}

body.page-id-642 .wp-block-image figure a:hover{
  transform: scale(1.05);
  box-shadow: 5px 5px 9px rgba(0,0,0,0.6);
}

body.page-id-642 .wp-block-image img{
  border: 1px dotted var(--couleur1);
  width: 100%;
  height: auto;
}