/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

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

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

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

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

/*
 * A better looking default horizontal rule
 */

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

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

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

/*
 * Remove default fieldset styles.
 */

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

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

textarea {
  resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
*{
	font-family: proxima-nova,sans-serif;
	font-weight: 400;
	font-style: normal;
}

p{
	font-size: 1.125em;
	color: #2a2a2a;
}
body{
	position: relative;
}
.logo.white{
	fill:#FFF;
	z-index: 999;
	position: relative;
}
.logo.white .cls-1{
	filter: #FFF!important;
}

.header-container{
	padding: 1em;
	display: flex;
	justify-content: space-between;
}
header h1{
	margin: 0;
}
header .menu ul{
	display: flex;
}
header .menu li{
	display: block;
}
header .menu a{
	padding: 1em 0;
	margin: 0 1em;
	text-decoration: none;
	color:  #2a2a2a;
	font-weight:bold;
	letter-spacing: 1px;
	font-size:14px;
	text-transform: uppercase;
	position: relative;
}
header .menu a:after{
	content: "";
	width: 0;
	position: absolute;
	height: 10px;
	background: #E5CCAF;
	bottom: 40%;
	left: 0;
	transition: 500ms;
	z-index: -1;
}
header .menu a:hover:after{
	width: 100%;
	transition: 500ms;
}

header .menu .current-menu-item a:after{
	width: 100%;
	
}

header .menu .current-menu-item a{
	font-family: kepler-std, serif;
	font-weight: 400;
	font-style: italic;
	text-transform: lowercase;
	font-size: 1.3em;
	position: relative;
	bottom: 4px;

}

header .menu > li:last-child a{
	background-color: #000;
	color: #FFF;
	margin-left: 1em;
	padding-left: 1.5em!important;
	padding-right: 1.5em!important;
	font-family: proxima-nova,sans-serif!important;
	font-size: 14px!important;
	font-style: normal!important;
	text-transform: uppercase;
	font-weight:bold;
	bottom: 0!important;
}
header .menu li:last-child a:after{
	background-color: transparent;
}
header.home h1 svg{
	display: none;
}
.container{
	max-width: 1240px;
}
.h1{
	font-weight: 700;
	font-size: 3em;
	line-height: 1em;
	font-family: proxima-nova,sans-serif;
	color: #000;
	margin-top: 0;
}
.h1 p{
	margin: 0;
}
.h1 em{
	font-family: kepler-std, serif;
	font-weight: 400;
	font-style: italic;
	font-size: 1.10em;
	position: relative;
} 
.h1 em:after{
	position: absolute;
	bottom: 20px;
	content: "";
	left: 0;
	right: 0;
	background-color: #FCFAB9;
	z-index: -1;
	height: 15px;
	transform: rotate(-2deg);
	
}
.dark .h1 em:after{
	opacity: .5;
}
img{
	border-radius:30px;
}
.project__image img{
	border-radius:0;
}
.dark .h1{
	color: #F3F3F3;
}
.hero{
	align-items: center;
	text-align: center;
	padding: 6em 0em 4em;
}
.hero .container{
	max-width:800px;
}
.hero img{ 
	width: 100%;
	height: auto;
	margin-bottom: 1em;
	display: block;
}
.hero h1{
	
	max-width: 794px;
	font-weight: 500;
	font-size: 2.5em;
	line-height: 1.2em;
	margin: 0 auto;
	text-align: center;
	display: block;
}
.hero h1 span{
	position: relative;
	display: inline-block;
	font-family: kepler-std, serif;
	font-weight: 400;
	font-style: italic;
	font-size: 1.2em;
}
.hero h1 span:before{
	content: "";
	display: block;
	background-color: #ffe664;
	
	width: 100%;
	z-index: -1;
	position: absolute;
	left: 0;
	top:35px;
	bottom: 25px;
	
}
.hero h1 svg{
	    display: block;
    margin: 0 auto;
    width: 8em;
    margin-bottom: 1em;
}
section{
	padding: 6em 0;
}

.service--link{
	padding: 1em;
	border:1px solid #000;
	margin-bottom: 30px;
	transition: 300ms;
	display: block;
	border-radius: 30px;
	cursor: pointer;
}
.service--link:hover{
	border-color: #86d1d1;
	border-width: 2px;
	transition: 500ms;
}
.tiles{
	margin-bottom: 2em;
	text-align: center;
}
.tiles ul{
	text-align: left;
}
.tiles img{
	    width: 40%;
    height: auto;
    margin: 0 auto;
    display: block;
}
.tiles__content{
	padding: 0 1em;
}
.tiles--img img{
	width: 60%;
	
}
.tiles__content p{
	margin: 0;
}
.dark .tiles ul{
	color: #FFF;
}
.encadre .tiles{
	border: 1px solid #FFF;
	border-radius: 30px;
}


.tiles h2{
	font-size:2em;
	margin: 0;
	color: #000;
	font-weight: 700;
	margin-bottom: 0.5em;
}
.dark .tiles h2 {
    color: #FCFAB9;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    font-size: 1.75em;
}
.dark .tiles{
	color: #000;
	background-color: transparent;
}
.services a{
	text-decoration: none;
	color: #000;
	position: relative;
	bottom: 0;
	transition: 500ms;
	cursor: pointer;
}
.services a:hover{
	bottom: 5px;
	transition: 500ms;
}
.tuile{
	display: block;
	margin-bottom: 1em;
	display: flex;
	align-items: center;
	padding: 1em;
	font-size: 1.125em;
	background: #FFF;
	color: #000;
	border-radius: 30px;
	box-shadow: 1px 1px 23px 1px rgba(0,0,0,0.17);
-webkit-box-shadow: 1px 1px 23px 1px rgba(0,0,0,0.17);
-moz-box-shadow: 1px 1px 23px 1px rgba(0,0,0,0.17);
}
.tuile svg{
	margin-right: 1em;
	width: 40px;
}
.tuile p{
	margin: 0.3em;;
}
.tuile a{
	color: #000;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 0.875rem;
}
.dark{
	background-color:  #000;
	color: #FFF;
}
.call h1{
	display: block;
	margin: 0 auto;
	max-width: 810px;
	text-align: center;
	font-weight: 700;
	margin-bottom: 2rem;
}
.call .btn{
	text-align: center;
	display: block;
	margin: 0 auto;
}
.call__text{
	font-size: 1.35em;
}


.button {
  position: relative;
  outline: none;
  text-decoration: none;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  text-transform: uppercase;
  height: 60px;
  width: 260px;
  opacity: 1;
  letter-spacing: 1px;
  color: #000;
  margin: 0 auto;
  background-color: #EDCDC2;
  font-size: 0.9rem;
 
}
.button span {
  color: #000;
  font-size: 0.875em;
  font-weight: 700;
  letter-spacing: 0.7px;
}
.button:hover {
  animation: rotat 0.7s ease-in-out both;
}
.button:hover span {
  animation: storm 0.7s ease-in-out both;
  animation-delay: 0.06s;
}
.dark .button{
	color: #FFF;
	border
}

@keyframes rotat {
  0% {
    transform: rotate(0deg) translate3d(0, 0, 0);
  }
  25% {
    transform: rotate(3deg) translate3d(0, 0, 0);
  }
  50% {
    transform: rotate(-3deg) translate3d(0, 0, 0);
  }
  75% {
    transform: rotate(1deg) translate3d(0, 0, 0);
  }
  100% {
    transform: rotate(0deg) translate3d(0, 0, 0);
  }
}
@keyframes storm {
  0% {
    transform: translate3d(0, 0, 0) translateZ(0);
  }
  25% {
    transform: translate3d(4px, 0, 0) translateZ(0);
  }
  50% {
    transform: translate3d(-3px, 0, 0) translateZ(0);
  }
  75% {
    transform: translate3d(2px, 0, 0) translateZ(0);
  }
  100% {
    transform: translate3d(0, 0, 0) translateZ(0);
  }
}
.row{
	    align-items: center;
}
.text p{
	font-size: 1.75em;
}
.text{
	max-width: 900px;
	margin: 0 auto;
}
.gd .row{
	align-content: center;
}
.gd a{
	color: #000;
	font-weight: bold;
}
.gd .button{
	margin:0;
}
.gd img{
	width: 100%;
	height: auto;
}

.imagefull img{
	width: 100%;
	height: auto;
}
.big-image{
	padding: 6em 0;
}
.big-image img{
	width: 100%;
	height: auto;
	border-radius: 30px;
}
.grande_image__text{
	text-align: center;
	max-width: 841px;
	margin: 0 auto;
}
#cursor {
  position: absolute;
  border: solid 1px #E1A306;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  pointer-events: none;
  transition: transform 300ms;
  z-index: 99999999999;
}
#cursor.active {
  background-color: #ECE96F;
  border-color: #ECE96F;
  transform: scale(8);
  opacity: 1;
  transition: transform 600ms;
  mix-blend-mode: exclusion;
}
#cursor.play{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 75px 0 75px 120px;
	border-color: transparent transparent transparent #ECE96F;
	border-radius: 0;
	transition: border-width 600ms;
  opacity: 1;
  transition: width 600ms; 	  
  mix-blend-mode: exclusion;
  transform: translateX(-38px) translateY(-60px);
}

.projectthumb{
	padding: 3em;
	transition: 500ms;
}
.projectthumb img{
	width: 100%;
	height: auto;
	transition: 500ms;
	border-radius:30px;
}
.projectthumb a{
	 text-decoration: none;
	 color: #000;
	 bottom: 0;
	 position: relative;
	 transition: 500ms;
	 display: block;
	 overflow: hidden;
}
.projectthumb a:hover{
	transition: 2500ms;
	
}
.projectthumb a:hover img{
	
	transition: 2500ms;
}
.projectthumb h2{
	font-size: 2em;
}
.project{
	padding: 0;
}
.project h1{
	font-size:5em;
	margin: 0;
}
.project__image img{
	width: 100%;
	height: auto;	
}

.link {
  width: 10rem;
  height: 10rem;
  display: inline-block;
  font: 300 1.55rem/1.4 "Josefin Sans";
  text-transform: uppercase;
  letter-spacing: 0.1175em;
  word-spacing: 0.3em;
  -webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;

}
.link__svg {
  width: 100%;
  height: auto;
  transform-box: fill-box;
  fill: #FFF;
  stroke: #FFF;
  stroke-width: 0.05em;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.link__cloud {
  transform-origin: 50% 50%;
  -webkit-animation: rotate normal infinite 60s linear;
          animation: rotate normal infinite 60s linear;
}
.link__face, .link__arrow {
  transform-origin: 50% 50%;
  transition: transform 0.15s cubic-bezier(0.32, 0, 0.67, 0);
}
.link:hover .link__face, .link:hover .link__arrow {
  transform: scale(1.1);
  transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
}
.link__arrow {
  stroke-width: 0.075em;
}
.link__text {
  -webkit-animation: rotateReverse normal infinite 20s linear;
          animation: rotateReverse normal infinite 20s linear;
  transform-origin: 50% 50%;
}
.link:hover .link__text {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
   
}
.link--alt {
  font-size: 1.15rem;
  letter-spacing: 0;
  word-spacing: 0;
}

@-webkit-keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotateReverse {
  to {
    transform: rotate(-360deg);
  }
}
@keyframes rotateReverse {
  to {
    transform: rotate(-360deg);
  }
}





.burger {
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 35px;
  height: 34px;
  transition: .3s ease-in-out;
  z-index: 9999999999999;
  display: none;
}

.burger span{
  position: absolute;
  height: 2px;
  border-radius: 0;
  width: 100%;
  background: #3d4146;
  top: 0;
  transition: transform .2s ease-in-out, opacity .2s ease-in-out;
}

.burger span:nth-child(1){
  top: -5px;
}
.burger span:nth-child(2),
.burger span:nth-child(3){
  top: 5px;
}
.burger span:nth-child(4){
  top: 15px;
}


.burger.active span{
  background: #fff;
}
.burger.active span:nth-child(1),
.burger.active span:nth-child(4){
  opacity: 0;
}

.burger.active span:nth-child(2){
  transform: rotate(45deg);
}

.burger.active span:nth-child(3){
  transform: rotate(-45deg);
}

/* Navigation */

.overlay{
  position: fixed;
  background: #000;
  top: 0;
  left: 0;
  width: 100vw;
  height: 0;
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .3s, visibility .3s, height .3s;
  z-index: 99999;
}

.overlay nav {
  font-size: 3rem;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  text-align: center;
  z-index: 99;
  position: relative;
}
.overlay nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.overlay nav ul li{
  opacity: 0;
  margin: 1rem 0;
}
.overlay nav ul li a{
  color: #fff;
  text-decoration: none;
  transition: opacity .2s ease;
  opacity: 1;
}
.overlay nav ul li a:hover{
  opacity: 1;
}

/* Animation */
@keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform: translate3d(-25%, 0, 0);
	}
	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}



.overlay.visible{
  opacity: 1;
  visibility: visible;
  height: 100%;
}
.overlay.visible li {
		animation: fadeInLeft .3s ease forwards;
	}
.overlay.visible li:nth-of-type(1){
  animation-delay: .23s;
}
.overlay.visible li:nth-of-type(2){
  animation-delay: .26s;
}
.overlay.visible li:nth-of-type(3){
  animation-delay: .29s;
}
.overlay.visible li:nth-of-type(4){
  animation-delay: .32s;
}
.overlay.visible li:nth-of-type(5){
  animation-delay: .35s;
}
.grandtitre h1{
	font-size: 3em;
	text-align: center;
	max-width: 800px;
    margin: 0 auto;
    padding: 3em 0 0;
}


.messagedefilant {
  display: block;
  padding: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 280px;
  padding-top: 2em;
  
}
 
.messagedefilant div {
  position: absolute;
  min-width: 100%; /* au minimum la largeur du conteneur */
}
 
.dark .messagedefilant div span, 
.dark .messagedefilant div:after {
	color: #FFF;
	
}
 
.messagedefilant div span, 
.messagedefilant div:after {
  position: relative;
  display: inline-block;
  font-size: 9rem;
  font-weight: bold;
  white-space: nowrap;
  top:0;
  color: #000;
}
 
.messagedefilant div span {
  animation: defilement 35s infinite linear;
}
.messagedefilant div span{
	font-family: kepler-std, serif;
	font-weight: 400;
	font-style: italic;
	}
 
.messagedefilant div:after {
  position: absolute;
  top:0; left:0;
  content:attr(data-text);
  animation: defilement2 35s infinite linear;
  font-family: kepler-std, serif;
	font-weight: 400;
	font-style: italic;

}
 
@keyframes defilement {
  0% { margin-left: 0; }
  100% { margin-left: -100%; }
}
 
@keyframes defilement2 {
  0% { margin-left: 100%; }
  100% { margin-left: 0%; }
}
.footer{
	background-color:  #f3f3f3;
	color: #000;
	    padding: 6em 0 3em;

}
.footer a{
	display: block;
	color: #000;
	 text-decoration: none;
	 font-size: 1.25em;
}
.logo-footer{
	fill:#000;
	display: block;
	max-width: 100%;
	    width: 400px;
    margin: 0 auto 6em ;
    
}
.footer ul{
	padding: 0;
	margin: 0;
}
.footer li{
	display: block;
	padding: 0.3em 0;
}
.footer h2{
	display: none;
}

.project-home{
	position: relative;
	overflow: hidden;
	clip-path: inset(0 0 0 0);
	text-align: center;
}

.project-home h1{
	text-align: center;
}
.project-home.dark a h2{
	color: #FFF;
}

.eye path{
	fill:#FFF;
}

.reel{
	width: 100%;
	height: auto;
}


.services .row{
	align-items: flex-start;
	justify-content: center;
}
.services h1 {
	text-align: center;
}
.clients{
	
}
.clients h1{
	text-align: center;
}
.slider img{
		width: 100%;
		height: auto;
	}
	.slick-slide{
		padding: 1em;
	}
	.points h1{
		text-align: center;
		    max-width: 814px;
    margin: 0 auto 1em;
	}
	.points h2{
		font-weight: bold;
		color: #000;
		font-size: 2em;
	}
.points ul{
	position: relative;
	padding: 0;
}
.points img{
	width: 100%;
	height: auto;
}
.points .container>ul:before{
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	top:0;
	bottom: 0;
	width:2px;
	background: #bae8e8;
	
}
.points.dark h2{
	color: #F3F3F3;
}

.points li span{
	background: #000;
	color: #bae8e8;
	display: block;
	width: 60px;
	height: 60px;
	text-align: center;
	line-height: 60px;
	position: absolute;
	    left: 100%;
    margin-left: -30px;
    font-weight: bold;
    font-size: 1.2em;
    border-radius:100%;
	
}
.points.dark li span{
	background: #bae8e8;
	color: #000;
}
.points .img-container {
	padding: 2em;
}
.points .text-container{
	padding: 3em;
}
.point:nth-child(even) .point__text{
	order: 2;
}
.point__img{
	order: 1;
}

.points .point:nth-child(even) span{
	left: 0;
	
}
.points .point span{
	top:41%;

}
.slick-slider{
	padding-left: 0;
}
.project--description{
	padding: 6em 0;
}
.project--description .description a{
	color: #000;
	font-weight: bold;
}
.project--description h2{
	text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 2px;
    color: #8a8a8a;
}

.project--description li{
	//font-size: 1.125em;
	margin-bottom: 0.5em;
}
.subtitle{
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #adadad;
	font-size: 1em;
}
.single__image img{
	width: 100%;
	height: auto;
	margin-bottom: 1em;
}
.single .container{
	max-width: 850px;
}
.single h1{
	font-size: 4em;
	font-weight: bold;
	margin: 0 0 0.3em;
}
.date{
	font-size: 0.85em;
	color: #a1a1a1;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.news img{
	width: 100%;
	border-radius: 30px 30px 0 0 ;
	height: auto;
}
.deuximages img{
	width: 100%;
	height: auto;
}
.other-projects img{
	width: 100%;
	height: auto;
}
.other-projects a{
	text-decoration: none;
	color: #000;
}
.other-projects.dark a{
	color: #FFF;
}

.bottom{
	background-color: #f3f3f3;
	color: #000;
	font-size: 1.15em;
}
.bottom a{
	color: #000;
	text-decoration: none;
	display: block;
}
.bottom .row{
	align-items: top;
}
.bottom .container{
	border-top:1px solid #D9D5D5;
	padding-top: 2em;
	padding-bottom: 2em;
}
.footer .description{
	font-size: 24px;
    max-width: 380px;
    color: #000;
    margin-top: 0;
}
.footer .description em{
	font-family: kepler-std, serif;
	font-style: italic;
	font-size: 1.1em;
}
.news a{
	text-decoration: none;
	color: #000;
	font-weight: bold;
	display: block;
}
.news h2{
	font-style: 2.25em;
	font-weight: bold;
	line-height: 1em;
	margin-top: 0;
}
.news .datum{
	font-size: 14px;
	text-transform: uppercase;
	margin-top: 1em;
	color:  #a1a1a1;
	font-weight: 400;
	letter-spacing: 1px;
	
}
.contact{
	font-size: 1.25em;
	text-align: center;
}
.contact h2{
	font-family: kepler-std, serif;
	font-style: italic;
	font-size: 1.4em;
	margin: 0;
}
.contact span{
	display: block;
}
.contact a{
	display: block;
	text-decoration: none;
	color: #000;
}
.contact h1{
	font-size: 5em;
}

.loading-screen {
  position: relative;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  background-color: #ECE96F;
  width: 100%;
  height: 100%;
  transform: scaleY(0) skewX(0);
  transform-origin: top left;
  z-index: 99999;
}

.loading-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 99999;
  pointer-events: none;
}
.single-projet section, .single-projet .big-image{
	padding: 0;
}
.project_details{
	padding: 6em 0;
	background: #080809;
}
.dark p{
	color: #FFF;
}
h1, h2, h3, h4, h5, h6{
	line-height: 1em;
}
.filtre{
	padding: 0;
}
.filtre li{
	display: inline-block;
}
.filtre a{
	display: block;
	padding: 1em 2em;
	text-decoration: none;
	color: #000;
	text-decoration: uppercase;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.check .button{
	margin: 0;
}
.check ul{
	padding: 0;
}
.services .button{
  position: relative;
  outline: none;
  text-decoration: none;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 0.875em;
  color: #000;
}
.project_details>div, .project_details>section{
	padding: 1em 0!important;
}
.taxonomy__content{
	text-align: left;
	max-width: 800px;
	margin: 0 auto 6em;
}
.project-list{
	column-count:3;
}
.project-list>div{
	break-inside: avoid-column;
}
.portfolio{
	text-align: center;
}
.portfolio .projectthumb{
	padding: 1em;
}


.cat{
	margin-top: 1em;
	display: inline-block;
}
.cat a{
	text-decoration: none;
	color: #8a8a8a;
	text-transform: uppercase;
	font-size: 0.875em;
	letter-spacing: 1px;
	border:1px solid #8a8a8a;
	display: inline-block;
	padding: 0.3em 1em;
	border-radius: 30px;
	margin: 0.3em;
	transition: 500ms;
}
.cat a:hover{
	background-color: #000;
	color: #FFF;
	transition: 500ms;
}
.relation{
	padding: 0;
}
.relation li{
	display: block;
}
.relation li img{
	width: 100%;
	height: auto;
}
.relation h2{
	color: #000;
}
.relation a{
	text-decoration: none;
}
.video-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; 
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.sublink{
	text-transform: uppercase;
	font-size: 0.875em;
	font-weight: bold;
	display: block;
	margin: 0 auto;
	text-align: center;
}
.sublink em{
	position: relative;
	left: 0;
	transition: 300ms;
}
.service--link:hover .sublink em{
	left:5px;
	transition: 500ms;
}



.faq .container{
	max-width: 700px;
}
.accordion .accordion-item {
  border-bottom: 1px solid #e5e5e5;
}
.accordion .accordion-item button[aria-expanded=true] {
  border-bottom: 1px solid #525252;
}
.accordion button {
  position: relative;
  display: block;
  text-align: left;
  width: 100%;
  padding: 1em 0;
  color: #7288a2;
  font-size: 1.15rem;
  font-weight: 400;
  border: none;
  background: none;
  outline: none;
}
.accordion button:hover, .accordion button:focus {
  cursor: pointer;
  color: #525252;
}
.accordion button:hover::after, .accordion button:focus::after {
  cursor: pointer;
  color: #525252;
  border: 1px solid #525252;
}
.accordion button .accordion-title {
  padding: 0;
  margin: 0;
  display: block;
}
.accordion button .icon {
  display: inline-block;
  position: absolute;
  top: 18px;
  right: 0;
  width: 22px;
  height: 22px;
  border: 1px solid;
  border-radius: 22px;
}
.accordion button .icon::before {
  display: block;
  position: absolute;
  content: "";
  top: 9px;
  left: 5px;
  width: 10px;
  height: 2px;
  background: currentColor;
}
.accordion button .icon::after {
  display: block;
  position: absolute;
  content: "";
  top: 5px;
  left: 9px;
  width: 2px;
  height: 10px;
  background: currentColor;
}
.accordion button[aria-expanded=true] {
  color: #000;
}
.accordion button[aria-expanded=true] .icon::after {
  width: 0;
}
.accordion button[aria-expanded=true] + .accordion-content {
  opacity: 1;
  max-height: 9em;
  transition: all 200ms linear;
  will-change: opacity, max-height;
  margin-bottom: 3em;
}
.accordion .accordion-content {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 200ms linear, max-height 200ms linear;
  will-change: opacity, max-height;
}
.accordion .accordion-content p {
  font-size: 1rem;
  font-weight: 300;
  margin: 2em 0;
}
.bloctexte h2{
	font-weight: bold;
	margin-top: 2em;
}
.formulaire{
	text-align: center;
}
.formulaire .h1{
	    max-width: 841px;
    margin: 0 auto 1em;
}
.form{
	max-width: 600px;
	margin: 0 auto;
	text-align: left;
}
.form p {
    margin: 0 0 0.5em;
}
.form label{
	text-transform: uppercase;
	font-size: 0.75em;
	letter-spacing: 1px;
	color: #727272;
}
.form input, .form textarea{
	width: 100%;
	padding: 1em;
	border-radius: 10px;
	border-style: solid;
	border-color:#000;
	border-width: 1px;
}
.form input[type="submit"]{
	background-color: #EDCDC2;
	border: none;
	text-transform: uppercase;
}
.form .wpcf7-not-valid-tip{
	font-size: 0.75em;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output{
	background-color: #ffb900;
    padding: 2em;
    max-width: 600px;
    margin: 0 auto;
    border-radius: 30px;
}
.wpcf7 form.sent .wpcf7-response-output {
    background-color: #46b450;
     padding: 2em;
    max-width: 600px;
    margin: 0 auto;
    border-radius: 30px;
    color: #FFF;
}
.grecaptcha-badge { 
    visibility: hidden;
}
header .menu .sub-menu{
	position: absolute;
	background-color: #f4f4f4;
	display: block;
	padding: 0;
	border-radius: 15px;
	display: none;
	z-index: 99;
	
}
header .sub-menu li{
	display: block;
}
header .sub-menu li a{
	padding: 0.5em;
	display: block;
	font-family: kepler-std, serif;
	font-style: italic;
	text-transform: inherit;
	font-size:1.25em;
}
header .menu .menu-item-has-children:hover .sub-menu{
	display: block;
}
footer .menu .sub-menu{
	display: none;
}
.belleimage{
	position: relative;
	background-size: cover;
	background-position: center center;
}
.belleimage:before{
	content:"";
	width: 65%;
	position: absolute;
	bottom: 0;
	left: 0;
	top: 0;
	background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0) 100%);
	z-index: 1;
	
}
.belleimage .container{
	position: relative;
	z-index: 2;
}
.belleimage .button{
	margin: 0;
}
.slick-track{
	display: flex;
	align-items: center;
}
.legend{
	text-align: center;
	color: #8f8f8f;
	display: block;
	font-size: 0.875em;
	margin: 0.3em;
}
.slick-arrow, .slick-dots{
	display: none!important;
	
}
.job .button{
	margin: 0 auto 0 0;
}
.jobs{
	text-align: center;
}
.job-item a{
	color: #000;
	text-decoration: none;
}
.job ul{
	font-size:1.125rem;
}
.job ul li {
    margin: 0.3em;
}
.job .bloctexte .container{
	max-width: 800px;
}
.project--description .row{
	align-items: flex-start;
}
.edc{
	padding: 0;
}
.edc img{
	width: 100%;
	height: auto!important:
}

.points .container > ul{
	background: #f3f3f3;
	padding: 1em;
	border-radius:50px;
}
.points.dark .container > ul{
	background: transparent;
	padding: 1em;
	border-radius:50px;
}
.story img{
	width: 100%;
	height: auto;
}
.story .row{
	align-items:flex-start;
}
.story__content{
	max-width: 841px;
	margin: 0 auto;
	text-align: center;
	margin-bottom: 2em;
}
.story a{
	display: block;
	position: relative;
	bottom: 0;
	transition: 500ms;
}
.story a:hover{
	bottom: 15px;
	transition: 500ms;
}
/*
.story a:after{
	content: "";
	width: 0; 
  height: 0; 
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  
  border-left: 40px solid #FFF;
	display: block;
	    position: absolute;
    left: calc(50% - 15px);
    top: calc(50% - 55px);
	transition: 500ms;
}
*/
.story a:hover:after{
	transform: scale(1.1);
	transition: 500ms;
}
.image_heroo{
width: 50%;
    margin-bottom: -5px;

}
.image_heroo img{
	border-radius: 0;
}
.heroo{ 
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.text-heroo{
	width: 50%;
	padding: 6em;
}
.equipe img{
	max-width: 100%;
}
.equipe a{
	display: block;
	color: #000;
	text-decoration: none;
	margin-bottom: 1em;
}
.point__text ul {
    padding-left: 1.5em;
}
.iframecontainer {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 177%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  border-radius: 30px;
}

/* Then style the iframe to fit in the container div with full height and width */
.short {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.postitem {
    margin-bottom: 2em;
    border: 1px solid #f1f1f1;
    border-radius: 30px;
    }
    .postitem--content{
	    padding: 1em 2em;
    }
    .video-hero {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    z-index: 9;
}
.project__image{
	position: relative;
	overflow: hidden;
	    display: flex;
    align-items: center;
    justify-content: center;
     height: 80vh;
}
.project__image h1{
	color: #FFF;
	z-index: 11;
	position: relative;
	text-align: center;
	font-size: 3rem;
}
.project__image img{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    z-index: 8;
}
 .single__image {
        background-image: url('<?php echo esc_url($image_url[0]); ?>');
        background-size: cover; /* Assure que l'image couvre tout l'élément */
        background-position: center; /* Centre l'image */
        background-repeat: no-repeat; /* Évite la répétition de l'image */
        width: 100%; /* Optionnel : ajuster la largeur */
        height: 40vh; /* Définir une hauteur ou ajuster dynamiquement */
    }
.single{
	padding: 0;
	background-color: #f7f7f7;
	padding-bottom: 3em;
}
.single .container{
	padding: 3em;
	background-color: #FFF;
	margin: -6em auto 0;
	border-radius: 16px;
	
}
.single .container img{
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}
.single h2{
	font-size: 2em;
}
.single h3{
	font-size: 1.5em;
	margin-bottom: 0;
}
.single h4{
	font-size: 1.25em;
}
.single li{
	font-size: 1.125em;	
}
.nav-links img{
	width: 100%;
	height: auto;
}
.nav-links a{
	text-decoration: none;
	color: #000;
	font-size: 1.5em;
	bottom: 0;
	position: relative;
	transition: 500ms;
}
.nav-links a:hover{
	bottom: 5px;
	transition: 500ms;
}
.nav-links a span{
	text-transform: uppercase;
	font-size: 0.875rem;
	letter-spacing: 1px;
	display: block;
	margin: 1em 0 0.5em;

}
.description h3{
	font-weight:bold;
	    font-weight: bold;
    font-size: 1.5rem;
    margin-bottom: 0;
    margin-top: 2em;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.nopadding{
	padding: 0!important;
}

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .sr-only class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */



@media only screen and (max-width: 960px) {
	 .project-list{
	column-count:2;
	}
	.points ul{
		padding-left: 3em;
	}
	.points ul:before{
		display: none;
	}
	.points li span{
		left: 0;
		
	}
	.points .text-container{
		padding-top: 0;
		padding-bottom: 0;
	}
	.point__text{
		order:1;
	}
	.point__img{
		order:2;
	}
	.belleimage:before{
		background:rgba(255,255,255,.8);
		width: 100%;
	}
	.project h1{
		font-size: 3em;
	}
	.heroo{
		display: block;
	}
	.text-heroo, .image_heroo{
		width: 100%;
	}
	.points .text-container, .points .img-container {
	    padding: 1em;
	}
	.story .col{
		flex: 0 0 33%;
	    max-width: 33%;
	    margin-bottom: 2em;
	}
	.single h1{
		font-size: 2.6em;
	}
	.single .container{
		padding: 3em 1em;
	}
	.nav-links a {
		padding: 1em 0;
		display: block;
	}
}
@media only screen and (max-width: 720px) {
  .burger{
	  display: block;
  }
   .project-list{
	column-count:1;
	}
	header .menu{
		display: none;
	}
	.projectthumb{
		padding: 1em;
	}
	.messagedefilant div span, .messagedefilant div:after{
		font-size: 5rem;
	}
	.messagedefilant{
		height: 170px;
	}
	#cursor{
		display: none;
	}
	.overlay .sub-menu{
		display: none;
	} 
	.gd .row .col-md-6:first-child{
		order:2;
	}
	.points li .number{
		display: none;
	}
	.text-heroo{
		padding: 6em 1em;
	}
	.h1{
		font-size: 2rem;
	}
	.story .col{
		flex: 0 0 50%;
    max-width: 50%;
    margin-bottom: 2em;
	}
	.contact h1 {
		font-size: 3em;
	}
	.contact .col-md-6{
		margin-bottom: 3em;
	}
	.contact{
		padding-bottom: 0;
	}
	.project_details>div, .project_details>section{
		padding: 0!important;
	}
	.project_details img, .project_details .iframecontainer{
		margin: 0.5em 0;
	}
}
@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  /*
   * Printing Tables:
   * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
   */
  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}