html::-webkit-scrollbar, body::-webkit-scrollbar {
width: 3px;
}
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track {
background: rgb(171, 171, 171);
}
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
background: rgb(1, 1, 1);
border-radius: 0;
}
html::-ms-scrollbar, body::-ms-scrollbar {
width: 3px;
}
html.lock, body.lock {
overflow-x: hidden;
overflow-y: hidden;
}
html.firefox, body.firefox {
scrollbar-color: #6d6d6d transparent !important;
scrollbar-width: thin !important;
}
body {
overflow-y: hidden;
}
body, html {
width: 100%;
scroll-behavior: auto;
-webkit-tap-highlight-color: transparent;
overflow-x: hidden;
}
html.lenis,
html.lenis body {
height: auto;
}
.lenis.lenis-stopped {
overflow-y: scroll;
overflow-x: hidden;
}
.lenis.lenis-smooth iframe {
pointer-events: none;
}
.nav-travaux-head {
display: none !important;
}
.nav-projects .btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
@media (max-width: 880px) {
.nav-projects .btn {
position: relative;
transform: none;
top: 0;
display: block;
width: 100%;
}
}
.nav-projects .btn a {
display: block;
}
@media (max-width: 880px) {
.nav-projects .elementor-widget-shortcode {
display: none !important;
}
}
.btn a {
position: relative;
overflow: hidden;
cursor: pointer;
}
.btn a:before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 0;
background: #010101;
transition: height 0.3s ease-out;
z-index: 0;
}
.btn a .elementor-button-content-wrapper {
position: relative;
z-index: 1;
}
.btn a:hover {
color: #fff;
}
.btn a:hover:before {
height: 100%;
}
.btn.black a:before {
background: #ffffff;
}
.btn.black a:hover {
color: #010101 !important;
}
#site-header {
display: none;
}
#main-nav .elementor-menu-toggle {
padding: 0;
z-index: 10000;
margin-left: auto;
}
#main-nav nav {
position: fixed;
left: 0 !important;
top: 0 !important;
width: 100% !important;
height: 100% !important;
display: grid;
grid-template-columns: repeat(13, 1fr);
grid-template-rows: repeat(5, 1fr);
background: transparent;
margin: 0;
padding: 70px 70px 0 70px;
}
#main-nav nav ul {
background: #010101;
grid-column: 4/span 4;
grid-row: 1/span 3;
justify-self: start;
align-self: start;
width: 85%;
height: 85%;
padding: 60px;
margin: auto;
}
@media (max-width: 1366px) {
#main-nav nav ul {
padding: 40px;
}
}
@media (max-width: 1024px) {
#main-nav nav ul {
position: absolute;
left: 0;
top: 0;
grid-column: auto;
grid-row: auto;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 40px;
}
}
#main-nav nav ul li a.elementor-item-active {
pointer-events: none;
}
#main-header {
width: 100%;
height: 100svh;
position: relative;
border: 70px solid #010101;
border-bottom: 0;
z-index: 1000;
}
@media (max-width: 1024px) {
#main-header {
border-width: 50px;
}
}
@media (max-width: 880px) {
#main-header {
border-width: 30px;
}
}
@media (max-width: 767px) {
#main-header {
border-width: 0;
}
}
#header-homepage {
position: absolute;
width: 100%;
height: 100%;
z-index: 1000;
overflow: hidden;
}
#header-homepage .html-header-homepage {
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
#header-homepage .html-header-homepage.elementor-element-edit-mode .grid-item {
opacity: 1 !important;
}
#header-homepage .html-header-homepage .moovesquare {
background: #010101;
position: absolute;
z-index: 1000;
transform-origin: center center;
translate: none;
rotate: none;
scale: none;
transform-style: preserve-3d;
transition: opacity 0.5s;
transition-delay: 0s;
opacity: 0;
}
#header-homepage .html-header-homepage .moovesquare.animated {
opacity: 1;
transition: opacity 0.5s;
transition-delay: 0.15s;
}
#header-homepage .html-header-homepage .elementor-element {
height: 100%;
}
#header-homepage .html-header-homepage .grid-container {
display: grid;
grid-template-columns: repeat(13, 1fr);
grid-template-rows: repeat(5, 1fr);
gap: 0;
position: relative;
height: 100%;
margin: 0;
padding: 0;
z-index: 100;
}
@media (max-width: 1024px) {
#header-homepage .html-header-homepage .grid-container {
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(5, 1fr);
}
}
@media (max-width: 767px) {
#header-homepage .html-header-homepage .grid-container {
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(8, 1fr);
}
}
#header-homepage .html-header-homepage .grid-container.menu-actif .grid-item {
overflow: visible !important;
}
#header-homepage .html-header-homepage .grid-container .grid-item {
background-color: transparent;
position: relative;
width: 100%;
height: 100%;
background: #010101;
transition: all 1s ease-in-out;
overflow: hidden;
transform: scale(1.01);
}
@media (max-width: 1024px) {
#header-homepage .html-header-homepage .grid-container .grid-item {
opacity: 1 !important;
transform: scale(1.04);
}
}
#header-homepage .html-header-homepage .grid-container .grid-item:not(.empty) {
opacity: 0;
}
#header-homepage .html-header-homepage .grid-container .grid-item.visible {
opacity: 1;
}
#header-homepage .html-header-homepage .grid-container .grid-item:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: #010101;
transition: transform 0.3s;
}
#header-homepage .html-header-homepage .grid-container .grid-item.empty {
background: transparent;
}
#header-homepage .html-header-homepage .grid-container .grid-item.empty:before {
background-color: transparent;
}
@media (max-width: 1024px) {
#header-homepage .html-header-homepage .grid-container .grid-item.tab {
background: #010101;
}
#header-homepage .html-header-homepage .grid-container .grid-item.tab:before {
background: #010101;
}
}
@media (max-width: 767px) {
#header-homepage .html-header-homepage .grid-container .grid-item.mob-hide {
background: #010101;
}
#header-homepage .html-header-homepage .grid-container .grid-item.mob-hide:before {
background: #010101;
}
#header-homepage .html-header-homepage .grid-container .grid-item.mob-show {
background: transparent;
}
#header-homepage .html-header-homepage .grid-container .grid-item.mob-show:before {
background: transparent;
}
}
#header-homepage .html-header-homepage .grid-container .grid-item.menu-open {
background: transparent;
}
#header-homepage .html-header-homepage .grid-container .grid-item.menu-open.hide-item:before {
transform: translateY(100%);
}
#header-homepage .html-header-homepage .logo-container {
grid-column: 1/4;
grid-row: 1/4;
z-index: 10;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
}
@media (max-width: 1024px) {
#header-homepage .html-header-homepage .logo-container {
grid-column: 1/6;
grid-row: 1/3;
}
}
@media (max-width: 767px) {
#header-homepage .html-header-homepage .logo-container {
grid-column: 1/7;
grid-row: 1/4;
}
}
#header-homepage .html-header-homepage .logo-container svg {
position: absolute;
left: 50%;
top: 50%;
height: 101%;
width: 101%;
display: block;
transform: translate(-50%, -50%);
}
#header-homepage .html-header-homepage .logo-container .sigle {
object-fit: cover;
width: 102%;
height: 102%;
position: absolute;
user-select: none;
}
#header-homepage #home-slider-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#header-homepage #home-slider-image .img-header-homepage {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 1;
z-index: 0;
z-index: 10;
}
#header-homepage #home-slider-image .img-header-homepage.static {
z-index: 11;
}
#header-homepage #home-slider-image .img-header-homepage img {
object-fit: cover;
height: 100%;
width: 100%;
}
#header-content {
transition: none !important;
z-index: 1;
}
#header-content .elementor-widget-image a {
display: block;
}
#header-content .elementor-widget-image a img {
display: block;
}
.fadeInUp {
animation-name: fadeInUp;
animation-duration: 1s;
animation-fill-mode: both;
animation-timing-function: ease-in-out;
}
@keyframes fadeInUp {
0% {
transform: translate3d(0, 50px, 0);
opacity: 0;
}
100% {
transform: none;
opacity: 1;
}
}
#header-homepage-content {
display: grid;
grid-template-columns: repeat(13, 1fr);
grid-template-rows: repeat(5, 1fr);
gap: 0;
position: relative;
height: 100%;
margin: 0;
padding: 0;
z-index: auto;
}
@media (max-width: 1024px) {
#header-homepage-content {
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(5, 1fr);
}
}
@media (max-width: 767px) {
#header-homepage-content {
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(8, 1fr);
}
}
#header-homepage-content #header-content {
grid-column: 8/span 6;
grid-row: 1/span 4;
justify-self: start;
align-self: start;
width: 100%;
height: 100%;
z-index: 1100;
}
@media (max-width: 1024px) {
#header-homepage-content #header-content {
grid-column: 5/span 6;
grid-row: 1/span 4;
}
}
@media (max-width: 767px) {
#header-homepage-content #header-content {
grid-column: 1/span 10;
grid-row: 1/span 8;
}
}
#header-homepage-content #header-content.elementor-element-edit-mode #main-nav svg {
transform: translateY(0) !important;
opacity: 1 !important;
}
#header-homepage-content #header-content.elementor-element-edit-mode h1 span {
transform: translateX(0) !important;
}
#header-homepage-content #header-content.actif #main-nav svg {
transform: translateY(0);
opacity: 1;
}
#header-homepage-content #header-content.actif h1 span {
transform: translateX(0);
}
#header-homepage-content #header-content h1 {
color: #ffffff !important;
text-align: right;
overflow: hidden;
display: flex;
flex-direction: column;
align-content: flex-end;
align-items: flex-end;
}
#header-homepage-content #header-content h1 span {
transform: translateX(101%);
transition: transform 0.6s ease-in-out;
transition-delay: 150ms;
}
@media (max-width: 1024px) {
#header-homepage-content #header-content h1 span {
transform: translateX(0) !important;
}
}
#header-homepage-content #header-content h1 span:nth-child(2) {
transition-delay: 300ms;
}
#header-homepage-content #header-content h1 span:nth-child(3) {
transition-delay: 450ms;
}
#header-homepage-content #header-content h1 span:nth-child(4) {
transition-delay: 600ms;
}
#header-homepage-content #header-content #main-nav svg {
transform: translateY(-50px);
opacity: 0;
transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
}
@media (max-width: 1024px) {
#header-homepage-content #header-content #main-nav svg {
transform: translateY(0);
opacity: 1;
}
}
#header-homepage-content #header-content .logo-supernature {
transform-origin: right;
}
#header-homepage-content #header-content .logo-supernature a {
width: 100%;
}
#header-homepage-content #header-content .logo-supernature a img {
display: block;
float: right;
}
main#content {
width: 100%;
max-width: 100%;
padding: 0;
}
.list-projet {
cursor: pointer;
}
.list-projet:hover .list-projet-img {
opacity: 0.05;
}
@media (max-width: 1024px) {
.list-projet:hover .list-projet-img {
opacity: 1 !important;
}
}
.list-projet:hover .list-projet-content {
opacity: 1;
}
.list-projet h2 {
color: #010101;
position: relative;
margin-bottom: 40px;
}
.list-projet h2:after {
content: "";
width: 25px;
height: 6px;
background: #010101;
position: absolute;
right: 0;
bottom: -20px;
transform: translateY(100%);
}
@media (max-width: 1024px) {
.list-projet h2:after {
right: auto;
left: 0;
bottom: -10px;
}
}
.list-projet .list-projet-img {
opacity: 1;
pointer-events: none;
user-select: none;
}
@media (max-width: 1024px) {
.list-projet .list-projet-img {
opacity: 1 !important;
}
}
.list-projet .tags-list-projet ul {
color: #010101;
list-style-type: none;
text-align: right;
padding: 0;
}
@media (max-width: 1024px) {
.list-projet .tags-list-projet ul {
text-align: left;
}
}
.list-projet .tags-list-projet ul li {
font-size: 55%;
}
.list-projet .list-projet-content {
opacity: 0;
}
@media (max-width: 1024px) {
.list-projet .list-projet-content {
position: relative;
opacity: 1 !important;
}
}
.list-projet .list-projet-content .elementor-page-title {
display: block !important;
}
#projet-detail-bloc p a {
color: #010101;
}
#projet-detail-bloc .projet-detail-copyright p:last-of-type {
margin: 0;
}
#projet-detail-bloc .projet-detail-images .bloc-image {
display: grid;
grid-template-columns: 1fr;
gap: 15px;
margin-bottom: 15px;
}
#projet-detail-bloc .projet-detail-images .bloc-image:last-of-type {
margin-bottom: 0 !important;
}
#projet-detail-bloc .projet-detail-images .bloc-image img {
width: 100%;
}
#projet-detail-bloc .projet-detail-images .bloc-image.two-col {
grid-template-columns: 1fr 1fr;
}
@media (max-width: 880px) {
#projet-detail-bloc .projet-detail-images .bloc-image.two-col {
grid-template-columns: 1fr;
}
}
#projet-detail-bloc .projet-detail-images .bloc-image.three-col {
grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 880px) {
#projet-detail-bloc .projet-detail-images .bloc-image.three-col {
grid-template-columns: 1fr;
}
}
.custom-post-navigation {
display: grid;
grid-template-columns: 1fr 1fr;
padding-top: 0;
margin-top: 0;
}
@media (max-width: 880px) {
.custom-post-navigation {
grid-template-columns: 1fr;
padding-top: 0;
padding: 40px;
gap: 30px;
}
}
.custom-post-navigation .prev-project a, .custom-post-navigation .next-project a {
display: flex;
gap: 100px;
align-items: center;
color: #010101;
}
.custom-post-navigation .prev-project a:hover b, .custom-post-navigation .next-project a:hover b {
text-decoration: underline;
}
.custom-post-navigation .prev-project .img-nav-project, .custom-post-navigation .next-project .img-nav-project {
width: 10vw;
height: 15vw;
background-size: cover;
position: relative;
}
@media (max-width: 880px) {
.custom-post-navigation .prev-project .img-nav-project, .custom-post-navigation .next-project .img-nav-project {
display: none;
}
}
.custom-post-navigation .prev-project .img-nav-project:after, .custom-post-navigation .next-project .img-nav-project:after {
content: "";
width: 100px;
height: 100px;
position: absolute;
right: 0;
top: 0;
transform: translate(100%, -100%);
background: #010101;
transition: transform 0.6s ease-in-out, width 0.6s ease-in-out;
}
@media (max-width: 1024px) {
.custom-post-navigation .prev-project .img-nav-project:after, .custom-post-navigation .next-project .img-nav-project:after {
display: none;
}
}
.custom-post-navigation .prev-project span, .custom-post-navigation .next-project span {
display: flex;
flex-direction: column;
line-height: 1.1;
font-size: 90%;
position: relative;
top: 0;
transition: all 0.6s ease-in-out;
}
.custom-post-navigation .prev-project span i, .custom-post-navigation .next-project span i {
font-style: normal;
font-size: 80%;
}
.custom-post-navigation .prev-project span b, .custom-post-navigation .next-project span b {
font-size: 60%;
font-weight: 800;
}
.custom-post-navigation .next-project .img-nav-project:after {
right: auto;
left: 0;
transform: translate(-100%, -100%);
}
.custom-post-navigation .next-project a {
flex-direction: row-reverse;
}
@media (max-width: 880px) {
.custom-post-navigation .next-project a {
flex-direction: unset;
}
}
.custom-post-navigation .next-project a span {
align-items: flex-end;
}
@media (max-width: 880px) {
.custom-post-navigation .next-project a span {
align-items: flex-start;
}
}
.barba-transition {
display: grid;
grid-template-columns: repeat(13, 1fr);
grid-template-rows: repeat(5, 1fr);
gap: 0;
position: fixed;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
pointer-events: none;
z-index: 20000;
}
@media (max-width: 1024px) {
.barba-transition {
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(5, 1fr);
}
}
@media (max-width: 880px) {
.barba-transition {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(5, 1fr);
}
}
.barba-transition.actif-menu {
z-index: 1;
}
.barba-transition .barba-item {
background-color: transparent;
position: relative;
width: 100%;
height: 100%;
background: #010101;
transition: opacity 0.5s ease-in-out;
overflow: hidden;
transform: scale(1);
opacity: 0;
}
@media (max-width: 1024px) {
.barba-transition .barba-item {
background: #0a0a0a;
}
}
.barba-transition .barba-item.visible {
opacity: 1 !important;
}
.barba-transition .barba-item.visible-menu-open {
opacity: 0.2;
}
#main-footer .text-left-footer {
position: relative;
}
#main-footer .text-left-footer:before {
content: "";
width: 70px;
height: 1px;
background: #fff;
position: absolute;
left: 0;
top: -30px;
}
@media (max-width: 1024px) {
#main-footer .text-left-footer:before {
display: none;
}
}
#main-footer p {
margin-bottom: 0;
}
#main-footer a {
color: #fff;
}
#main-footer a:hover {
color: #ccc;
}
.custom-cursor {
position: fixed;
width: 20px;
height: 20px;
border-radius: 50%;
background: #ffffff;
pointer-events: none;
transform: translate(-50%, -50%) scale(1);
mix-blend-mode: difference;
z-index: 100;
opacity: 0;
top: 0;
left: 50%;
transition: width 0.4s ease-in-out, height 0.4s ease-in-out, opacity 0.6s ease-in-out;
}
.custom-cursor.show {
opacity: 1;
}
.custom-cursor.actif {
width: 60px;
height: 60px;
transform-origin: center center;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.bloc-client {
position: relative;
cursor: none;
}
.bloc-client .elementor-widget-container a {
display: block;
}
.bloc-client img {
transform: scale(1);
transition: transform 0.4s ease-in-out;
display: block;
}
.bloc-client img:hover {
transform: scale(1.1);
}
#custom-cursor-text {
height: 150px;
width: 150px;
position: fixed;
animation: effect 20s linear infinite;
font-size: 0.5em;
font-weight: 600;
transform: translate(-50%, -50%);
transform-origin: 0 0px;
pointer-events: none;
color: #ffffff;
mix-blend-mode: difference;
opacity: 0;
top: 0;
left: 50%;
z-index: 200;
transition: opacity 0.4s ease-in-out;
}
#custom-cursor-text.actif {
opacity: 1;
}
@keyframes effect {
0% {
transform: rotate(0deg) translate(-50%, -50%);
}
100% {
transform: rotate(360deg) translate(-50%, -50%);
}
}
#custom-cursor-text span {
position: absolute;
left: 50%;
transform-origin: 0 75px;
text-transform: capitalize;
}
.nav-fixed {
position: fixed;
top: 70px;
right: 70px;
mix-blend-mode: difference;
}
.nav-fixed.actif {
z-index: 1000;
}
.nav-fixed svg {
height: 100%;
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-100%, -50%);
}
.nav-fixed.close-icon {
right: 0px;
transition: right 0.6s ease-in-out;
}
.nav-fixed.close-icon svg {
transform: translate(0, -50%);
}
.nav-fixed.close-icon.actif-close {
right: 70px;
}