/*
Theme Name: Template Bisart
Theme URI: https://www.agencebisart.com/
Description: Theme Bisart
Version: 1.0
Author: Elodie B.
Author URI: https://www.elodieberger.com/
Text Domain: Bisart
*/

@font-face {
  font-family: 'Adieu';
  src: url(fonts/Adieu.eot);
  src: url(fonts/Adieu.eot?#iefix) format('embedded-opentype'),
       url(fonts/Adieu.otf) format('otf'),
       url(fonts/Adieu.svg#Adieu) format('svg'),
       url(fonts/Adieu.ttf) format('truetype'),
       url(fonts/Adieu.woff) format('woff');
}

:root {
  --Turquoise: #4EB798;
  --Black: #191919;
}

/* GENERAL */

html {font-size: 12px;}
body {font-size: 16px;line-height: 1.4; color: var(--Black); background-color: #fff; font-family: "Manrope", Arial, sans-serif;font-optical-sizing: auto;font-style: normal;font-weight: 400;}
p, ul, table {font-size: 1em;margin-bottom:1em;}
a {color: var(--Turquoise);text-decoration: none;}
b, strong {font-weight:700;}
h1 {color: var(--Black); font-size: 2em; margin-bottom: .8em; font-weight: 300;line-height: 1.1em;text-align: center;}
.bg--dark h1 {color: #fff;}
h2 {color: var(--Black); font-size: 1.55em; margin-bottom: .75em; text-transform: uppercase;line-height: 1.15em;}
h3 {color: #d1d1d1; font-size: 1.2em;  margin-bottom: .9em;font-family: 'Adieu'; text-transform: uppercase;line-height: 1.15em;}
@media (min-width: 480px) {
	h1 {font-size: 2.5em;}
	h2 {font-size: 1.6em;}
	h3 {font-size: 1.25em;}
}
@media (min-width: 768px) {
	h1 {font-size: 3.5em;}
	h2 {font-size: 1.7em;}
	h3 {font-size: 1.3em;}
}
@media (min-width: 992px) {
	h1 {font-size: 4em;}
	h2 {font-size: 1.8em;}
	h3 {font-size: 1.35em;}
}
@media (min-width: 1200px) {
	h1 {font-size: 4.5em;}
	h2 {font-size: 2em;}
	h3 {font-size: 1.4em;}
}
@media (min-width: 1500px) {
	h1 {font-size: 5em;}
	h2 {font-size: 2.1875em;}
	h3 {font-size: 1.4375em;}
}

.title-label {font-family: 'Adieu'; color: var(--Turquoise);margin-bottom: .2em; padding-top: 5px;}

.labeltype {display: inline-block; border-radius: 25px; border: 1px solid var(--Black); padding: 8px 20px;}

.rounded {border-radius: 15px;}

.bg--dark {background-color: var(--Black);}

.main-title {padding-top: 1.8em;}
.main-title--home h1 {text-align: left; text-transform: uppercase; margin-bottom: .4em;}
.bg--dark .main-title {border-top: 1px solid #5a5a5a;}
@media (min-width: 480px) {
	.main-title {padding-top: 2em;}
}
@media (min-width: 768px) {
	.main-title {padding-top: 2.5em;}
}
@media (min-width: 992px) {
	.main-title {padding-top: 3em;}
}
@media (min-width: 1200px) {
	.main-title {padding-top: 3.5em;}
}
@media (min-width: 1500px) {
	.main-title {padding-top: 4em;}
}


.m-text ul {padding-left: 0; list-style: none;}
.m-text li {position: relative; padding-left: 1em;margin-bottom: .3em;}
.m-text li:before {position: absolute;content: ""; width: 7px; height: 7px; border-radius: 50%;left: 1px; top: 7px;background-color: var(--Black);}
.m-text .list-unstyled li {padding-left: 0;}
.m-text .list-unstyled li:before {content: none;}

.btn, #submit {padding: 9px 20px 6px 8px; font-size: 16px; letter-spacing: .02em; border: 1px solid var(--Turquoise); background-color: var(--Turquoise);font-family: 'Adieu'; color: #fff; border-radius: 26px; margin-bottom: 0; text-decoration: none !important;}
.btn:hover, #submit:hover {color: var(--Black);background-color: #fff; border-color: var(--Black);  text-decoration: none;}
.btn:before, #submit:before {content: ""; width: 34px; height: 34px; display: inline-block; vertical-align: middle; margin-right: 8px;position: relative; top: -2px;background: url("images/arrow-right-round-white.svg") no-repeat center center; background-size: cover;}
.btn:hover:before, #submit:hover:before {background-image: url("images/arrow-right-round-black.svg");}

.btn--white {border-color: var(--Black); background-color: #fff;color: var(--Black);}
.btn--white:hover {color: #fff;background-color: var(--Black);}
.btn--white:before {background-image: url("images/arrow-right-round-black.svg");}
.btn--white:hover:before {background-image: url("images/arrow-right-round-white-2.svg");}

.btn--transparent {background-color: transparent; color: var(--Black);border-color: #fff;}
.btn--transparent:before {background-image: url("images/arrow-right-round-turquoise.svg");}
.btn--transparent:hover {background-color: var(--Black); color: #fff;}
.btn--transparent:hover:before {background-image: url("images/arrow-right-round-white-2.svg");}

/* ******************************* HEADER */

.page-header {background-color: var(--Black); z-index: 999;position: fixed; left: 0; right: 0; top: 0;-webkit-transition: all .4s 0s; transition: all .4s 0s;}
.page-header-top {padding: 15px 0;}
.page-header-scroll {padding: 5px 0;}

body.home .page-header-top {background-color: transparent;}
body.home.nav-is-open .page-header-top {background-color: var(--Black);}

.header-logo {-webkit-transition: all .4s 0s; transition: all .4s 0s;}
.page-header-top .header-logo {width: 90px;}
.page-header-scroll .header-logo {width: 80px;}
.header-logo a:hover {text-decoration: none;}
@media (min-width: 768px) {
	.page-header-top {padding: 20px 0;}
	.page-header-scroll {padding: 8px 0;}
	.page-header-top .header-logo {width: 96px;}
	.page-header-scroll .header-logo {width: 86px;}
}

/* ******************************* NAV */

.main-nav {position: relative;z-index: 997;font-family: 'Adieu'; text-transform: uppercase;}
.main-nav ul {margin: 0; padding: 0;}
ul.nav-menu li {display:block;position: relative;}
ul.nav-menu a {display: inline-block; color: #fff;}
ul.nav-menu a:hover {text-decoration: none; color: var(--Turquoise);}
ul.nav-menu ul.sub-menu a {text-transform: none;}

ul.nav-menu li.nav-brief a {position: relative;}
ul.nav-menu li.nav-brief a:after {content: "";width: 18px; height: 18px; display: inline-block; vertical-align: middle; margin-left: 10px; position: relative; top: -2px;background: url("images/arrow-right-round-turquoise.svg") no-repeat center center; background-size: cover;}
ul.nav-menu li.nav-brief a:hover {background-color: #fff; border-radius: 25px;}

.nav-toggle {display: block;}
.nav-icon {width: 40px; cursor: pointer;}
.nav-icon:after, 
.nav-icon:before, 
.nav-icon div {background-color: #fff; -webkit-border-radius: 3px; border-radius: 3px; content: ''; display: block; height: 5px; margin: 7px 0; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }
.nav-toggle.is-open .nav-icon:before {transform: translateY(12px) rotate(135deg); -webkit-transform: translateY(12px) rotate(135deg); }
.nav-toggle.is-open .nav-icon:after {transform: translateY(-12px) rotate(-135deg); -webkit-transform: translateY(-12px) rotate(-135deg); }
.nav-toggle.is-open .nav-icon div {-webkit-transform: scale(0); transform: scale(0); }

@media (max-width:767px) {
	#nav {display: none;}
	body.nav-is-open {overflow: hidden;}
	.main-nav {position: fixed; left: 0; right: 0; bottom: 0; padding-top: 15px; text-align: center; overflow-y:scroll; background-color: var(--Black);}
	.page-header-top .main-nav {top: 107px;}
	.page-header-scroll .main-nav {top: 78px;}
	ul.nav-menu > li {margin-bottom: 1.5em;}
	ul.nav-menu > li > a {padding: 10px 15px; font-size: 1.1em;}
	ul.nav-menu > li.nav-brief > a {padding: 5px 8px 3px; color: var(--Turquoise);}
	ul.nav-menu .sub-menu {margin:0;}
	ul.nav-menu .sub-menu a {padding: 9px 15px;}
}
@media (min-width:768px) {
	.main-nav {display: block !important;}
	ul.nav-menu > li {display: inline-block;font-size: 0.875em; margin-right: 12px;}
	ul.nav-menu > li:last-child {margin-right: 0;}
	ul.nav-menu > li > a {padding: 13px 8px 10px;}
	ul.nav-menu > li.nav-brief > a {padding: 5px 8px 3px;}
	ul.nav-menu li > a:hover, .nav-menu li:hover > a {text-decoration: none; color: var(--Turquoise);}
	ul.nav-menu ul.sub-menu {top: 100%; background: var(--Black); width: 210px; position: absolute; left: -999em;z-index: 999;}
	ul.nav-menu li:hover > ul.sub-menu {left: 0;}
	ul.nav-menu > li.current-menu-item > a,
	ul.nav-menu > li.current-menu-parent > a,
	ul.nav-menu > li.current-post-parent > a,
	ul.nav-menu > li.current-menu-ancestor > a,
	ul.nav-menu > li.current-post-ancestor > a,
	ul.nav-menu > li.current-page-ancestor > a,
	ul.nav-menu > li.current-category-ancestor > a {color: var(--Turquoise);}
	ul.nav-menu ul.sub-menu a {padding: 12px 15px;}
	ul.nav-menu ul.sub-menu li:hover a,
	ul.nav-menu ul.sub-menu a:hover {color: var(--Turquoise);}
}
@media (min-width: 992px) {
	ul.nav-menu > li:last-child {margin-left: 28px;}
}
@media (min-width: 1200px) {
	ul.nav-menu > li:last-child {margin-left: 30px;}
}
@media (min-width: 1500px) {
	ul.nav-menu > li:last-child {margin-left: 34px;}
}

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

.page-footer {background-color: var(--Black);padding: 75px 0 50px; color: #fff;}
.footer-collabo {border-bottom: 1px solid #fff;margin-bottom: 3em; padding-bottom: 1.5em;}
.collabo .label {color: var(--Turquoise);font-family: 'Adieu';}
.collabo .text {font-size: 2em; text-transform: uppercase; line-height: 1em; font-weight: 700; margin-bottom: 0;}
.footer-contact .subtitle {color: var(--Turquoise);font-family: 'Adieu';}
.footer-contact a {color: #fff; font-weight: 600;}
.footer-contact a:hover {color: var(--Turquoise);}
.footer-sitemap ul {list-style: none; padding: 0;margin: 0;}
.footer-sitemap ul li {margin-bottom: .2em;}
.footer-sitemap ul li a {color: #fff;text-decoration: underline;}
.footer-sitemap ul li a:hover {color: var(--Turquoise);}
.footer-mentions {font-size:0.875em; padding-top: 10px;}
.footer-mentions span:before {content:"";width: 1px; height: 10px; background-color: rgba(255,255,255,0.8); display: inline-block;margin: 0 8px;}
.footer-mentions span:first-child:before {content: none;}
@media (min-width: 480px) {
	.collabo .text {font-size: 2.5em;}
}
@media (min-width: 768px) {
	.collabo .text {font-size: 3.5em;}
}
@media (min-width: 992px) {
	.collabo .text {font-size: 4em;}
}
@media (min-width: 1200px) {
	.collabo .text {font-size: 4.5em;}
}
@media (min-width: 1500px) {
	.collabo .text {font-size: 5em;}
}

/* ******************************* */

#page {overflow: hidden; padding-top: 107px;}
body.home #page {padding-top: 0;}
@media (min-width: 768px) {
	#page {padding-top: 122px;}
}


/* ******************************* HOME */

.showreel {background-color: var(--Black); overflow: hidden;}
.showreel-wrap {position: relative;width: 100%;height: var(--showreel-h);overflow: hidden;--showreel-h: 600px;}
.showreel-wrap video {position: absolute;top: 50%;left: 50%; min-width: 100%; min-height: 100%; width: auto;height: auto;transform: translate(-50%, -50%);}
/* un iframe n'accepte pas object-fit : on l'agrandit soi-meme jusqu'a couvrir
   le cadre, en gardant le 16/9, puis on le recentre. */
.showreel-wrap iframe {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);border: 0;
	width: max(100%, calc(var(--showreel-h) * 16 / 9));aspect-ratio: 16 / 9;height: auto;}
@media (min-width: 480px) {
	.showreel-wrap {--showreel-h: 700px;}
}
@media (min-width: 768px) {
	.showreel-wrap {--showreel-h: 800px;}
}
@media (min-width: 992px) {
	.showreel-wrap {--showreel-h: 900px;}
}
@media (min-width: 1200px) {
	.showreel-wrap {--showreel-h: 956px;}
}

.homeexpertises-wrap {padding: 3.2em 0; position: relative;background-color: var(--Black);}
.homeexpertises-img,
.homeexpertises-img > span {position: absolute; left: 0; top: 0; right: 0; bottom: 0;}
.homeexpertises-img > span {opacity: 0;-webkit-transition: opacity 0.2s ease-in-out;transition: opacity 0.2s ease-in-out;background-position: center center; background-repeat: no-repeat; background-size: cover;}
.homeexpertises-img span.img1 {background-image: url("images/bg-expertise-1.jpg");}
.homeexpertises-img span.img2 {background-image: url("images/bg-expertise-2.jpg");}
.homeexpertises-img span.img3 {background-image: url("images/bg-expertise-3.jpg");}
.homeexpertises-img span.img4 {background-image: url("images/bg-expertise-4.jpg");}
.homeexpertises-img span.img5 {background-image: url("images/bg-expertise-5.jpg");}
.homeexpertises-wrap.expertise--1 .homeexpertises-img span.img1 {opacity: 1;}
.homeexpertises-wrap.expertise--2 .homeexpertises-img span.img2 {opacity: 1;}
.homeexpertises-wrap.expertise--3 .homeexpertises-img span.img3 {opacity: 1;}
.homeexpertises-wrap.expertise--4 .homeexpertises-img span.img4 {opacity: 1;}
.homeexpertises-wrap.expertise--5 .homeexpertises-img span.img5 {opacity: 1;}

.homeexpertises-list {color: #fff;}
.homeexpertises-list li {margin-bottom: 1.4em;}
.homeexpertises-list .title {display: block; cursor: pointer; text-transform: uppercase;font-weight: 300; margin-bottom: .2em; font-size: 2em;position: relative;-webkit-transition: all .4s 0s; transition: all .4s 0s; line-height: 1.1em;}
.homeexpertises-list .title:hover {padding-left: 30px;}
.homeexpertises-list .title:before {opacity: 0; content: ""; left:-30px; top: 6px; width: 20px; height: 20px; background: url("images/arrow-right-white.svg") no-repeat center center; background-size: 100% auto; position: absolute;-webkit-transition: all .4s 0s; transition: all .4s 0s;}
.homeexpertises-list .title:hover:before {left: 0;opacity: 1;}
.homeexpertises-list li .title.is-open {padding-left: 40px;}
.homeexpertises-list li .title.is-open:before {left: 0;opacity: 1;-webkit-transform: rotate(90deg); transform: rotate(90deg);}
.homeexpertises-list .text {opacity: 0; transform: scaleY(0); transform-origin: top;transition: all 0.26s ease;max-height: 0;}
.homeexpertises-list .text span {display: block;}
.homeexpertises-list li .title.is-open + .text {opacity: 1; transform: scaleY(1);max-height: 100%;}

@media (min-width: 480px) {
	.homeexpertises-wrap {padding: 3.5em 0;}
	.homeexpertises-list .title {font-size: 2.2em;}
	.homeexpertises-list .title:before {top: 10px;}
}
@media (min-width: 768px) {
	.homeexpertises-wrap {padding: 4em 0;}
	.homeexpertises-list .title {font-size: 2.5em;}
	.homeexpertises-list .title:hover {padding-left: 40px;}
	.homeexpertises-list .title:before {left:-40px; top: 8px; width: 30px; height: 30px;}
	.homeexpertises-list li .title.is-open {padding-left: 40px;}
}
@media (min-width: 992px) {
	.homeexpertises-wrap {padding: 4.5em 0;}
	.homeexpertises-list .title {font-size: 2.75em;}
	.homeexpertises-list .title:before {top: 10px;}
}
@media (min-width: 1200px) {
	.homeexpertises-wrap {padding: 5em 0;}
	.homeexpertises-list .title {font-size: 3em;}
	.homeexpertises-list .title:before {top: 13px;}
}
@media (min-width: 1500px) {
	.homeexpertises-wrap {padding: 6em 0;}
	.homeexpertises-list .title {font-size: 3.125em;}
	.homeexpertises-list .title:before {top: 14px;}
}



/* ******************************* AGENCE */

.agence-h2 {font-weight: 300;font-size: 1.6em;}

.chrono {background-color: var(--Black); color: #fff;}
.chrono-item {border-bottom: 1px solid #fff; padding: 2em 0;}
.chrono > .chrono-item:last-child {border-color: var(--Black);}
.chrono-item:hover {background-color: #fff; color: var(--Black);}
.chrono-item .date {font-family: 'Adieu'; width: 48%; margin-right: 2%; text-align: right;font-size: 1.55em;}
.chrono-item .description {text-align: center;width: 100%; padding-top: .6em;}
.chrono-item .description p {margin: 0;}
.chrono-item .fact {width: 48%; margin-left: 2%; text-transform: uppercase;font-size: 1.55em; font-weight: 300; position: relative; top: -3px;}
@media (min-width: 480px) {
	.agence-h2 {font-size: 1.7em;}
	.chrono-item .date,
	.chrono-item .fact {font-size: 1.6em;}
}
@media (min-width: 768px) {
	.agence-h2 {font-size: 1.85em;}
	.chrono-item .date,
	.chrono-item .fact {font-size: 1.7em;}
}
@media (min-width: 992px) {
	.agence-h2 {font-size: 2.5em;}
	.chrono-item .date {width: 20%;text-align: left;margin-right: 0;}
	.chrono-item .description {width: 56%;padding-top: 0;}
	.chrono-item .fact {width: 20%;text-align: right;margin-left: 0;top: auto;}
	.chrono-item .date,
	.chrono-item .fact {font-size: 1.8em;}
}
@media (min-width: 1200px) {
	.agence-h2 {font-size: 2.75em;}
	.chrono-item .date,
	.chrono-item .fact {font-size: 2em;}
}
@media (min-width: 1500px) {
	.agence-h2 {font-size: 3.125em;}
	.chrono-item .date,
	.chrono-item .fact {font-size: 2.1875em;}
}


/* ******************************* BANDE LOGOS DEFILANTS */

.bandmarques {background-color: var(--Black); padding: 40px 0;}
.bandmarques img {max-height: 80px; width: auto;margin: 0 20px;}
.slick-carousellogos .slick-slide {line-height: 80px;}
.slick-carousellogos .slick-slide img {display: inline-block; vertical-align: middle;}

/* ******************************* BLOCS CAROUSEL PROJETS */

.bloc-project {width: 300px; height: 389px; margin: 0 10px; background-position: center center; background-repeat: no-repeat; background-size: cover;position: relative; border-radius: 15px;overflow: hidden;}
.bloc-project-wrap {height: 100%;}
.bloc-project-wrap:before {content: ""; z-index: 30;opacity: .8; position: absolute; top: 50%; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom,  rgba(0,0,0,0) 20%,rgba(0,0,0,1) 60%);-webkit-transition: all .4s 0s; transition: all .4s 0s;}
.bloc-project:hover .bloc-project-wrap:before {opacity: 1;}
.bloc-project-wrap > div {position: relative; z-index: 50;height: 100%; padding: 20px;-webkit-transition: all .4s 0s; transition: all .4s 0s;}
.bloc-project-wrap > div:after {content: ""; opacity: 0; display: inline-block; z-index: 60; width: 35px; height: 35px; border-radius: 50%;background: url("images/arrow-right-round-white.svg") no-repeat center center; background-size: cover; position: absolute; bottom: 40px; right: 50px;-webkit-transition: all .4s 0s; transition: all .4s 0s;}
.bloc-project:hover .bloc-project-wrap > div:after {right: 40px;opacity: 1;}
.bloc-project a {display: block;color: #fff;font-family: 'Adieu'; text-transform: uppercase; font-size: 1.15em;margin-bottom: 8px;-webkit-transition: all .4s 0s; transition: all .4s 0s; line-height: 1.25em;}
.bloc-project a:after {content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0;}
.bloc-project .labeltype {color: #fff; border-color: #fff;}
@media (min-width: 768px) {
	.bloc-project {width: 400px; height: 518px;}
	.bloc-project-wrap > div {padding: 35px;}
	.bloc-project a {font-size: 1.2em;}
}
@media (min-width: 992px) {
	.bloc-project {width: 450px; height: 583px;}
	.bloc-project-wrap > div {padding: 45px;}
	.bloc-project a {font-size: 1.25em;}
}
@media (min-width: 1200px) {
	.bloc-project {width: 500px; height: 648px;}
	.bloc-project-wrap > div {padding: 50px;}
}



/* ******************************* EXPERTISES */

.mot {height: 100%;}
.mot .quote {font-size: 1.55em; margin: 0 0 1em; line-height: 1.15em; font-weight: 700;}
@media (min-width: 480px) {
	.mot .quote {font-size: 1.6em;}
}
@media (min-width: 768px) {
	.mot .quote {font-size: 1.7em;}
}
@media (min-width: 992px) {
	.mot {padding-left: 20px;}
	.mot .quote {font-size: 1.8em;}
}
@media (min-width: 1200px) {
	.mot {padding-left: 30px;}
	.mot .quote {font-size: 2em;}
}
@media (min-width: 1500px) {
	.mot {padding-left: 40px;}
	.mot .quote {font-size: 2.1875em;}
}


.bloc-expertise {border-radius: 15px;overflow: hidden;position: relative; height: 100%;}
.bloc-expertise .layer {padding: 30px; height: 100%;}
.bloc-expertise .layer > * {width: 100%;}
.bloc-expertise .layer-dark {color: #fff;background-color: #303030; min-height: 460px;position: relative;}
.bloc-expertise .layer-light {display: none; color: var(--Black);background-color: #fff;position: absolute; left: 0; top: 0; right: 0; bottom: 0;}
.bloc-expertise.is-open .layer-light {display: flex;}
.bloc-expertise .layer .mention {font-size: 1.1em; display: inline-block;}
.bloc-expertise .layer .title {font-size: 2em; text-transform: uppercase; line-height: 1.1em; margin-bottom: 1em;}
.bloc-expertise .layer-light ul li {margin-bottom: .6em;line-height: 1.2em; padding-left: 36px;position: relative;}
.bloc-expertise .layer-light ul li .number {display: inline-block; position: absolute; left: 0; top: 0;}
.bloc-expertise.is-open .layer-light ul > li {position: relative;transform: translateX(-50px); -webkit-transform: translateX(-50px);opacity: 0;}
.bloc-expertise.is-open .layer-light ul > li:nth-child(1) {animation: moveslide1 0.6s 0s ease forwards;-webkit-animation: moveslide1 0.6s 0s ease forwards;}
.bloc-expertise.is-open .layer-light ul > li:nth-child(2) {animation: moveslide1 0.6s .3s ease forwards;-webkit-animation: moveslide1 0.6s .3s ease forwards;}
.bloc-expertise.is-open .layer-light ul > li:nth-child(3) {animation: moveslide1 0.6s .6s ease forwards;-webkit-animation: moveslide1 0.6s .6s ease forwards;}
.bloc-expertise.is-open .layer-light ul > li:nth-child(4) {animation: moveslide1 0.6s .9s ease forwards;-webkit-animation: moveslide1 0.6s .9s ease forwards;}
.bloc-expertise.is-open .layer-light ul > li:nth-child(5) {animation: moveslide1 0.6s 1.2s ease forwards;-webkit-animation: moveslide1 0.6s 1.2s ease forwards;}
.bloc-expertise.is-open .layer-light ul > li:nth-child(6) {animation: moveslide1 0.6s 1.5s ease forwards;-webkit-animation: moveslide1 0.6s 1.5s ease forwards;}
.bloc-expertise.is-open .layer-light ul > li:nth-child(7) {animation: moveslide1 0.6s 1.8s ease forwards;-webkit-animation: moveslide1 0.6s 1.8s ease forwards;}
.bloc-expertise.is-open .layer-light ul > li:nth-child(8) {animation: moveslide1 0.6s 2.1s ease forwards;-webkit-animation: moveslide1 0.6s 2.1s ease forwards;}
@keyframes moveslide1 {to {transform: translateX(0);opacity: 1;}}
@-webkit-keyframes moveslide1 {to { -webkit-transform: translateX(0);opacity1;}}
@media (min-width: 480px) {
	.bloc-expertise .layer {padding: 40px;}
	.bloc-expertise .layer .title {font-size: 2.1875em;}
	.bloc-expertise .layer .mention {font-size: 1.25em;}
}
@media (min-width: 768px) {
	.bloc-expertise .layer {padding: 40px;}
	.bloc-expertise .layer .title {font-size: 2.1875em;}
	.bloc-expertise .layer .mention {font-size: 1.25em;}
}
@media (min-width: 992px) {
	.bloc-expertise .layer .title {font-size: 2.1875em;}
}
@media (min-width: 1200px) {
	.bloc-expertise .layer {padding: 30px;}
	.bloc-expertise .layer .mention {font-size: 1em;}
	.bloc-expertise .layer .title {font-size: 1.9em;}
	.bloc-expertise .layer-dark .text {font-size: .9em;}
}
@media (min-width: 1500px) {
	.bloc-expertise .layer {padding: 40px;}
	.bloc-expertise .layer .mention {font-size: 1.25em;}
	.bloc-expertise .layer .title {font-size: 2.1875em;}
	.bloc-expertise .layer-dark .text {font-size: 1em;}
}


/* ******************************* REALISATIONS */

.filters li {margin: 0 5px 10px;}
.filters li .button {display: inline-block; white-space: nowrap; font-size: .9em; padding: 8px 15px; border: 1px solid var(--Black); color: var(--Black); border-radius: 26px;}
.filters li .button:hover {background-color: #f2f2f2;}
.filters li.active .button {background-color: var(--Black); color: #fff;}
@media (min-width: 768px) {
	.filters li .button {padding: 9px 19px; font-size: 1em;}
}


.result {width: 48%; background-color: #eee; height: 200px; margin-bottom: 1em;border-radius: 15px; overflow: hidden;position: relative;}
.result .layer {opacity: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 15px 15px 5px; background: linear-gradient(to bottom,  rgba(0,0,0,0) 20%,rgba(0,0,0,0.65) 100%);height: 100%; -webkit-transition: all .4s 0s; transition: all .4s 0s;}
.result:hover .layer {opacity: 1; padding-bottom: 15px;}
.result .layer:after {content: ""; display: inline-block; width: 35px; height: 35px; top: 20px; right: 25px; border-radius: 50%;background: url("images/arrow-right-round-white.svg") no-repeat center center; background-size: cover; position: absolute; -webkit-transition: all .4s 0s; transition: all .4s 0s;box-shadow: 0 0 15px rgba(0, 0, 0, .8);}
.result:hover .layer:after {right: 15px;}
.result .img {height: 100%;}
.result .img img {height: 100%;width: 100%;object-fit: cover;-webkit-transition: all .4s 0s; transition: all .4s 0s;}
.result:hover .img img {-webkit-transform: scale(1.05);transform: scale(1.05);}
.result a {display: block;color: #fff;font-family: 'Adieu'; text-transform: uppercase; margin-bottom: 6px;-webkit-transition: all .4s 0s; transition: all .4s 0s; line-height: 1.25em;}
.result a:after {content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0;}
.result .labeltype {color: #fff; padding: 4px 10px;border-color: #fff; font-size: .75em; white-space: nowrap;border-radius: 25px;}
@media (min-width: 480px) {
	.result {height: 280px;margin-bottom: 2em;}
	.result .layer {padding: 20px 20px 10px;}
	.result:hover .layer {padding-bottom: 20px;}
	.result .layer:after {right: 30px;}
	.result:hover .layer:after {right: 20px;}
	.result .labeltype {font-size: .9em;}
}
@media (min-width: 768px) {
	.result {height: 328px;}
	.result a {font-size: 1.2em;}
	.result .labeltype {font-size: .95em;padding: 7px 18px;}
}
@media (max-width: 991px) {
	.results > .result:nth-child(even) {transform: translateY(50px); -webkit-transform: translateY(50px); margin-left: 4%;}
}
@media (min-width: 992px) {
	.result {width: 290px;height: 290px;margin-bottom: 27px;}
	.results > .result:nth-child(3n+2) {transform: translateY(60px); -webkit-transform: translateY(60px);margin-left: 27px; margin-right: 27px;}	
}
@media (min-width: 1200px) {
	.result {width: 350px;height: 350px;}
	.results > .result:nth-child(3n+2) {transform: translateY(70px); -webkit-transform: translateY(70px);}
	.result .layer {padding: 30px 30px 20px;}
	.result:hover .layer {padding-bottom: 30px;}
	.result .layer:after {right: 40px;bottom: 30px; top: auto; box-shadow: none;}
	.result:hover .layer:after {right: 30px;}
	.result a {font-size: 1.25em;}
	.result .labeltype {font-size: 1em;padding: 8px 20px;}
}
@media (min-width: 1500px) {
	.result {width: 480px;height: 480px;margin-bottom: 32px;}
	.results > .result:nth-child(3n+2) {transform: translateY(90px); -webkit-transform: translateY(90px);margin-left: 32px; margin-right: 32px;}

	.result .layer {padding: 40px 40px 30px;}
	.result:hover .layer {padding-bottom: 40px;}
	.result .layer:after {right: 50px;bottom: 40px;}
	.result:hover .layer:after {right: 40px;}
}


/* ******************************* FICHE PROJET */

.main-title--fiche {margin-bottom: 2.5em;}
.main-title--fiche h1 {text-align: left; margin-bottom: .3em;font-size: 1.4375em;font-family: 'Adieu'; text-transform: uppercase;}

.fiche-h2 {text-transform: none;}

.fiche-nav {padding: 2em 0 4em;overflow: hidden;}
.fiche-nav .prev,
.fiche-nav .next { -webkit-transition: all .2s 0s; transition: all .2s 0s; }
.fiche-nav .prev {margin-left: -20px;text-align: right;}
.fiche-nav .next {margin-right: -20px;text-align: left;}
.fiche-nav .prev img,
.fiche-nav .next img {width: 180px;position: relative; margin-bottom: 10px; height: auto;}
.fiche-nav .prev span,
.fiche-nav .next span {font-family: 'Adieu'; color: var(--Black);position: relative;}
.fiche-nav .prev span:before,
.fiche-nav .next span:after {content: ""; width: 16px; height: 11px; display: inline-block; vertical-align: middle; position: relative; top: -1px; background-position: center center; background-repeat: no-repeat; background-size: cover;}
.fiche-nav .prev span:before {background-image: url("images/arrow-left-black.svg"); margin-right: 8px;}
.fiche-nav .next span:after {background-image: url("images/arrow-right-black.svg");margin-left: 8px;}

.fiche-nav-btn {width: 100%; padding-top: 3.5em;}

@media (min-width: 480px) {
	.fiche-nav .prev img,
	.fiche-nav .next img {width: 200px;}
}
@media (min-width: 768px) {
	.fiche-nav .prev:hover {transform: translateX(10px); -webkit-transform: translateX(10px);}
	.fiche-nav .next:hover {transform: translateX(-10px); -webkit-transform: translateX(-10px);}
	.fiche-nav .prev span {margin-left: 20px;}
	.fiche-nav .next span {margin-right: 20px;}
}
@media (min-width: 992px) {
	.fiche-nav .prev,
	.fiche-nav .next {width: auto;text-align: center;}
	.fiche-nav .prev img,
	.fiche-nav .next img {margin-bottom: 0;}
	.fiche-nav-btn {width: auto;padding-top: 0;}
}
@media (min-width: 1200px) {
	.fiche-nav .prev {margin-left: -40px;}
	.fiche-nav .next {margin-right: -40px;}
	.fiche-nav .prev:hover {transform: translateX(30px); -webkit-transform: translateX(30px);}
	.fiche-nav .next:hover {transform: translateX(-30px); -webkit-transform: translateX(-30px);}
	.fiche-nav .prev img,
	.fiche-nav .next img {width: 260px;}
	.fiche-nav .prev span {margin-left: 30px;}
	.fiche-nav .next span {margin-right: 30px;}
}
@media (min-width: 1500px) {
	.fiche-nav .prev span {margin-left: 40px;}
	.fiche-nav .next span {margin-right: 40px;}
}

/* ******************************* */

/* SOCIALS */
.socials button {width: 34px; height: 34px; margin-right: 3px; border: none; border-radius: 4px; background-color: #fff; padding: 0; text-align: center; cursor: pointer; display: inline-block; vertical-align: middle;}
.socials button svg {display: block; height: 22px; margin: 6px auto;}
.socials > button:last-child {margin-right: 0;}
.socials button svg path {fill: var(--Black);}
.socials button:hover {background-color: var(--Turquoise);}
.socials button:hover svg path {fill: #fff;}


/* SLICKSLIDER */

.slick-slider {position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.slick-list {position: relative; display: block; overflow: hidden; margin: 0; padding: 0; }
.slick-list:focus {outline: none; }
.slick-list.dragging {cursor: pointer; cursor: hand; }
.slick-slider .slick-track, .slick-slider .slick-list {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.slick-track {position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; }
.slick-track:before, .slick-track:after {display: table; content: ''; }
.slick-track:after {clear: both; }
.slick-loading .slick-track {visibility: hidden; }
.slick-slide {display: none; float: left; height: 100%; min-height: 1px; }
[dir='rtl'] .slick-slide {float: right; }
.slick-slide img {display: block; }
.slick-slide.slick-loading img {display: none; }
.slick-slide.dragging img {pointer-events: none; }
.slick-initialized .slick-slide {display: block; }
.slick-loading .slick-slide {visibility: hidden; }
.slick-vertical .slick-slide {display: block; height: auto; border: 1px solid transparent; }
.slick-arrow.slick-hidden {display: none; }
.slick-loading .slick-list:after { background-color: rgba(0, 0, 0, .3); content:""; display:block; width: 40px; height: 40px; position: absolute; left: 50%; margin-left: -20px; top: 50%; margin-top: -20px; -webkit-animation: rotate-loading 1.2s infinite ease-in-out; animation: rotate-loading 1.2s infinite ease-in-out; }
@-webkit-keyframes rotate-loading {0% { -webkit-transform: perspective(120px)} 50% { -webkit-transform: perspective(120px) rotateY(180deg)} 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)} }
@keyframes rotate-loading {0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg);-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)} 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)} 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);} }
/* Arrows */
.slick-prev, .slick-next {width: 35px; height: 35px;border: 1px solid var(--Turquoise); border-radius: 50%;font-size: 0; line-height: 0; position: absolute; z-index: 99; top: 50%; display: block;  padding: 0; text-decoration: none !important; overflow: hidden;-webkit-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: transparent;  outline: none; background-repeat: no-repeat; background-position: center center; background-size: cover;}
.slick-prev {left: -35px;background-image: url("images/arrow-left-round-turquoise.svg");}
.slick-next {right: -35px;background-image: url("images/arrow-right-round-turquoise.svg");}
.slick-prev:hover, .slick-next:hover {outline: none;border-color: var(--Black);}
.slick-prev:hover {background-image: url("images/arrow-left-round-white-2.svg");}
.slick-next:hover {background-image: url("images/arrow-right-round-white-2.svg");}
/* Dots */
.slick-dots {bottom: 0;position: absolute; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; }
.slick-dots li {width: 20px; height: 20px; margin: 0 5px;position: relative; display: inline-block; padding: 0; cursor: pointer; }
.slick-dots li button {width: 15px; height: 15px;background: var(--Turquoise); opacity: 0.5;font-size: 0; line-height: 0; display: block; cursor: pointer; color: transparent; border: 0; outline: none;border-radius: 50%;}
.slick-dots li button:hover, .slick-dots li button:focus {outline: none; opacity: .75;}
.slick-dots li.slick-active button {opacity: 1;}


/* ******* */

.slick-reviews {margin: 0 auto;}
.slick-reviews .slick-list {padding: 0 !important;}
.slick-reviews .slick-track {display: flex;}
.slick-reviews .slick-slide {height: auto;}

.review {position: relative; width: 360px; margin: 24px auto;opacity: .35; -webkit-transition: all .4s 0s; transition: all .4s 0s; -webkit-transform: scale(.875); transform: scale(.875);}
.slick-reviews .slick-slide.slick-current .review {opacity: 1; -webkit-transform: scale(1); transform: scale(1);}
.slick-reviews .slick-slide .review:before {content: "";  position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 15px; background-color: var(--Black); z-index: 10;transform: rotate(0); -webkit-transform: rotate(0);-webkit-transition: transform .4s .2s; transition: transform .4s .2s;}
.slick-reviews .slick-slide.slick-current .review:before {opacity: 1; transform: rotate(-8deg); -webkit-transform: rotate(-8deg);}
.review-wrap {background-color: #F2F2F2; border-radius: 15px;padding: 50px;position: relative; z-index: 50;margin: 24px auto;}
.review .stars {margin-bottom: 1.4em;}
.review .stars svg {width: 1.25em; margin-right: 2px;}
.review .stars svg path {fill: var(--Turquoise);}
.review blockquote {margin: 0 0 15px; border-bottom: 1px solid var(--Black); padding-bottom: 1.1em;}
.review cite {font-family: 'Adieu'; font-style: normal; display: block; line-height: 1.2em;}
.review span {display: inline-block;line-height: 1.2em;}
@media (min-width: 480px) { 
	.review {width: 396px;}
}
@media (max-width: 767px) { 
	.slick-reviews {padding-bottom: 55px;}
	.slick-reviews .slick-prev,
	.slick-reviews .slick-next {left: 50%;-webkit-transform: none; transform: none; bottom: 0; top: auto;}
	.slick-reviews .slick-prev {margin-left: -42px;}
	.slick-reviews .slick-next {right: auto;margin-left: 8px;}
}
@media (min-width: 768px) { 
	.slick-reviews .slick-prev {left: 0;}
	.slick-reviews .slick-next {right: 0;}
}
@media (min-width: 992px) { 
	.slick-reviews {width: 860px;}
	.slick-reviews .slick-prev {left: -45px;}
	.slick-reviews .slick-next {right: -45px;}
	.review {width: 396px; margin-left: 15px; margin-right: 15px;}
}
@media (min-width: 1200px) { 
	.slick-reviews {width: 1170px;}
	.slick-reviews .slick-prev {left: -55px;}
	.slick-reviews .slick-next {right: -55px;}
	.review {width: 360px;}
}
@media (min-width: 1500px) { 
	.slick-reviews {width: 1278px;}
	.slick-reviews .slick-prev {left: -65px;}
	.slick-reviews .slick-next {right: -65px;}
	.review {width: 396px;}
}


/* FORMS */

.form-control {font-size: 16px;padding: 24px 15px; background-color: #EBEBEB; border: 1px solid #EBEBEB; border-radius: 15px;}
#respond textarea {max-width: 100%;}
.form-control:focus {border-color: #ccc;}
.form-control::-moz-placeholder,
.form-control::placeholder {color:#AFAFAF; text-align: center;}
.form-select {font-size: 16px;padding: 24px 15px; border-radius: 15px; background-color: #EBEBEB; border: 1px solid #EBEBEB;background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");background-position: right 0.75rem center;background-size: 16px 12px;}
.form-select:focus {border-color: #ccc;}
.form-check {min-height: 20px;}
.form-check input {width: 20px;height: 20px;border: 1px solid #707070;background-size: contain;}
.form-check input:checked {background-color: var(--Black);border-color: var(--Black);}
.form-check input[type="checkbox"] {border-radius: 50%;}
.form-check input:checked[type=checkbox] {background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>");}
.form-check input:checked[type=radio] {background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='%23fff'/></svg>");}
.form-control::-webkit-file-upload-button {color: #fff; background-color: var(--Black);}
.form-control::file-selector-button {color: #fff; background-color: var(--Black);}
.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {background-color: var(--Black);}
.form-control:hover:not(:disabled):not([readonly])::file-selector-button {background-color: var(--Black);}

.wpcf7-acceptance {font-size: .9em;}

span.wpcf7-form-control-wrap,
span.wpcf7-form-control-wrap > span {display: block; width: 100%;}
span.wpcf7-list-item {display: block; margin: 0 0 1em 0;}
span.wpcf7-list-item.last {margin-bottom: 0;}
.form-check--inline span.wpcf7-list-item {display: inline-block; margin: 0 0 0 1em;}
.form-check--inline span.wpcf7-list-item.first {margin-left: 0;}

/* WPCF7 */
.wpcf7 .screen-reader-response {position: absolute; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); height: 1px; width: 1px; margin: 0; padding: 0; border: 0; }
.wpcf7 form .wpcf7-response-output {margin: 1.5em 0; padding: 0.8em 1em; border:0; border-radius: 2px;}
.wpcf7 form.init .wpcf7-response-output {display: none;}
.wpcf7 form.sent .wpcf7-response-output {background-color: #629c17;color:#fff; /* Green */}
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {background-color: #c03b17;color:#fff; /* Red */}
.wpcf7-form-control-wrap {position: relative;}
.wpcf7-not-valid-tip {color: red; font-size: .9em; font-weight: normal; display: block;padding-top: 4px;}
.wpcf7-not-valid.form-control {border-color: red;}
div.wpcf7 .ajax-loader {visibility: hidden; position: relative; display: inline-block; width: 20px; height: 20px; border: none; padding: 0; margin: 0 0 0 4px; vertical-align: middle;}
div.wpcf7 .ajax-loader:after {background-color: #000;width: 20px;height: 20px;content: ""; opacity: .8; position: absolute; top: 0; left: 0;display: inline-block;-webkit-animation: rotate-loading 1.2s infinite ease-in-out; animation: rotate-loading 1.2s infinite ease-in-out;}
div.wpcf7 .placeheld {color: #888;}
div.wpcf7 .ajax-loader.is-active {visibility: visible;} div.wpcf7 div.ajax-error {display: none;} div.wpcf7 input[type="file"] {cursor: pointer;} div.wpcf7 input[type="file"]:disabled {cursor: default;} div.wpcf7 .wpcf7-submit:disabled {cursor: not-allowed;} .wpcf7 input[type="url"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"] {direction: ltr;}
span.wpcf7-list-item-label::before, span.wpcf7-list-item-label::after {content: " ";}
span.wpcf7-list-item input {margin-right: 5px;}

/* complice web */

@media (min-width: 1500px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1920px;
  }
}

.visuels_projets img {height:100%;object-fit: cover;}


/* bloc video Vimeo : ratio fluide, l'iframe remplit le cadre */
.un_bloc_video {position: relative; width: 100%; overflow: hidden; aspect-ratio: var(--ratio-video, 16 / 9);}
.un_bloc_video iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; display: block;}

/* repli pour les navigateurs sans aspect-ratio */
@supports not (aspect-ratio: 16 / 9) {
	.un_bloc_video {height: 0; padding-top: 56.25%;}
}

/* grille des projets

   L'ancien montage etait un flex "justify-content-center" dont les gouttieres
   venaient uniquement des marges laterales de la vignette du milieu. Deux defauts :
   - une ligne incomplete (1 ou 2 projets) etait recentree sur la marge en trop,
     donc elle ne tombait plus sur les colonnes de la ligne du dessus ;
   - 3 x 480 + 2 x 32 = 1504 px, soit plus que le conteneur entre 1500 et 1552 px
     de large : la 3e vignette basculait a la ligne suivante.

   Une grille a 3 colonnes fluides (1fr) plafonnee a la largeur de la maquette
   regle les deux : les colonnes sont fixes quel que soit le nombre de projets,
   et la grille se reduit au lieu de deborder.

   Les gouttieres passent de margin-bottom a row-gap : la derniere rangee ne
   traine plus de marge basse, et le padding-bottom reserve alors exactement la
   descente du translateY de la vignette du milieu, qui sinon debordait de la
   grille et chevauchait le bouton "Voir plus de projets". */
.results {display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 4%; row-gap: 1em; justify-content: center; padding-bottom: 50px;}
.results > .result {width: auto; margin-bottom: 0;}
.results > .result > .img {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}

@media (min-width: 480px) {
	.results {row-gap: 2em;}
}
@media (max-width: 991px) {
	.results > .result:nth-child(even) {margin-left: 0;}
}
@media (min-width: 992px) {
	.results {grid-template-columns: repeat(3, 1fr); column-gap: 27px; row-gap: 27px; max-width: 924px; margin-left: auto; margin-right: auto; padding-bottom: 60px;}
	.results > .result {height: auto; aspect-ratio: 1 / 1;}
	/* meme specificite que la regle d'origine, mais plus bas dans la feuille :
	   sans ca la vignette du milieu garde ses marges laterales et retrecit d'autant */
	.results > .result:nth-child(3n+2) {margin-left: 0; margin-right: 0;}
}
@media (min-width: 1200px) {
	.results {max-width: 1104px; padding-bottom: 70px;}
}
@media (min-width: 1500px) {
	.results {column-gap: 32px; row-gap: 32px; max-width: 1504px; padding-bottom: 90px;}
}

/* La reserve du bas ne sert que si la derniere rangee contient une vignette
   decalee. Quand elle se resume a la colonne de gauche, on la retire pour ne pas
   laisser un trou avant le bouton. Un navigateur sans :has() ignore ces deux
   regles et garde la reserve : le repli est le cas sur. */
@media (max-width: 991px) {
	.results:has(> .result:nth-child(odd):last-child) {padding-bottom: 0;}
}
@media (min-width: 992px) {
	.results:has(> .result:nth-child(3n+1):last-child) {padding-bottom: 0;}
}