reset css html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    text-decoration: none;
}

/********* fin remise a 0 CSS ********/

:root {
    --main-bg: #FCFCFC;
    --black-color:  #011710;
    --gren-color: #B3E5BE;
    --blue-color: #DCEBF0;
  }

/* @import url('clash-display.css'); */


@font-face {
    font-family: 'porpora';
    src: url('./font/Porpora-Regular.woff') format('woff');
}

@font-face {
    font-family: 'ClashDisplay-Variable';
    src: url('./font/ClashDisplay-Variable.ttf') format('truetype');
}


h1, h2, h3, .item{
    font-family: 'ClashDisplay-Variable';
    font-weight: 550;
    word-spacing: 4px;
}

a, p{
    font-family: 'porpora';
}

@media only screen and (max-device-width: 1180px) {
    .cursor {
        display: none;
    }
}



/********* fin root ********/


.cursor{
    position: fixed;
    width: 24px;
    height: 24px;
    background-color: var(--main-bg);
    border-radius: 50%;
    pointer-events: none;
    mix-blend-mode: difference;
    z-index: 9999999;
    transition: all cubic-bezier(0.23, 0.75, 0.31, 0.99);
}


body{
    background-color: var(--main-bg);
    overflow-x: hidden;
    scroll-behavior: smooth;
}


header{
    height: auto;
    width: 100vw;
}

.container-menu{
    background-color: var(--main-bg);
    display: flex;
    justify-content: space-between;
    max-width: 100vw;
    padding: 1.5% 2.5%;
}

.logo{
    max-height: 100px;
    opacity: 0;
    animation: fade .8s cubic-bezier(0.23, 0.75, 0.31, 0.98) .8s forwards;
}

.container-menu-item{
    display: flex;
    align-items:center;
    opacity: 0;
    animation: fade .8s cubic-bezier(0.23, 0.75, 0.31, 0.98) .8s forwards;
}

.menu-item{
    display: flex;
    gap: 4px;
}

.item{
    display: block;
    width: 100px;
    padding: 12px 12px;
    text-align: center;
    text-decoration: none;
    color: var(--black-color);
    font-size: 16px;
}

.line{
    transform: translate(-50%,-50%);
    top: 45%;
    left: 50%;
    position: absolute;
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--black-color);
}


/* CSS HOVER MENU ITEM */
.link {
    height: 30px;
    align-items: center;
    justify-content: center;
    color: #000;
    text-decoration: none;
    display: flex;
  }
  
  /* Hide extra text */
  .mask {
    position: relative;
    padding: 0;
    height: 16px;
  
    /*  Remove overflow to see how it works　:) */
    overflow: hidden;
  }
  
  .link-container {
    transition: transform 0.4s ease;
  }
  
  .title {
    display: block;
  
    /*  Set same font-size and line height  */
    font-size: 16px;
    line-height: 16px;
  
    transition: transform 0.4s ease;
  }
  
  .link-title1 {
    transform-origin: right center;
  }
  
  .link-title2 {
    transform-origin: left center;
    transform: rotate(20deg);
  }
  
  
  /* Hover Action*/
  
  /* Move up two texts (20px = font-size) */
  .link:hover .link-container {
    transform: translateY(-16px);
  }
  
  /* Rotate texts a little bit */
  .link:hover .link-title1 {
    transform: rotate(20deg);
  }
  
  .link:hover .link-title2 {
    transform: rotate(0);
  }
  

.hero-banner{
    width: 95%;
    margin: auto;
    padding-top: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    animation: slidedown cubic-bezier(0.23, 0.75, 0.31, 0.98) 650ms forwards;
    animation-delay: .35s;
    -webkit-transform: translateZ(0) translate3d(0, 0, 0);
    transform: translateZ(0) translate3d(0, 0, 0);
    
}

@keyframes slidedown {
    0% {
        transform: scale(0.9);
        -webkit-transform: scale(0.9);
        margin-top: -100px;
        opacity: 0;
    }

    100%{
        transform: scale(1);
        -webkit-transform: scale(1);
        margin-top: 0;
        opacity: 1;
    }
  }

.planete{
    max-width: 105px;
    height: auto;
    margin-bottom: 40px;
}

.container-banner{
    width: 100%;
    position: relative;
    padding-top: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    gap: 64px;
}

.container-txt-banner{
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    flex-direction: column;
    width: 42%;
    gap: 56px;
}

.title-banner{
    min-width: 660px;
    text-transform: uppercase;
    font-size: 64px;
    line-height: 74px;
    font-weight: 550;
    text-align: center;
    text-shadow: 0px 0px 14px rgba(252, 252, 252, 0.50);
}

.pills-banner{
    border-radius: 50px;
    box-shadow: 0px 0px 10px rgba(252, 252, 252, 0.30);
}

.p-banner{
    max-width: 600px;
    min-width: 600px;
    text-align: center;
    text-shadow: 0px 0px 14px rgba(252, 252, 252, 0.50);
}

p{
    font-size: 24px;
}

.container-img-banner{
    width: 55%;
}

.img-banner{
    width: 100%;
}


/* BUTTON */

button{
    padding-block: 0 !important;
    padding-inline: 0 !important;
}

:active, :hover, :focus {
    outline: 0!important;
    outline-offset: 0;
  }

.btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: none;
    cursor: pointer;
    min-width: 300px;
    max-width: 350px;
    width: 100%;
  }

.btn span {         
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    font-family: 'ClashDisplay-Variable';
    font-weight: 550;
    font-size: 15px;
    text-transform: uppercase;
    top: 0; 
    left: 0;
    transition: 0.3s;
    padding: 24px 16px;
    max-width: 350px;
    width: 100%;
    text-align: center;
    word-spacing: 3px;
}


/*--- btn-1 ---*/

.btn-1 span::after{
        content: url(./img/arrow-w.svg);
        filter: invert(0);
    }

.btn-1::before {
    background-color: var(--black-color);
    transition: 0.6s cubic-bezier(0.23, 0.75, 0.31, 0.98);
    position: absolute;
    content: '';
  }
  .btn-1 span {
    color: var(--main-bg);
    border: 2px solid var(--black-color);
    transition: 0.2s 0.1s;
  }
  .btn-1 span:hover {
    color: var(--black-color);
    transition: width cubic-bezier(0.23, 0.75, 0.31, 0.98) 600ms;
  }

  .btn-1:hover span::after{
    filter: invert(1);
    transition: 0.2s 0.1s;
    }


/*--- btn-2 ---*/

.btn-2 span::after{
    content: url(./img/arrow-w.svg);
    filter: invert(1);
}

.btn-2::before {
background-color: var(--main-bg);
transition: 0.6s cubic-bezier(0.23, 0.75, 0.31, 0.98);
position: absolute;
content: '';
}
.btn-2 span {
color: var(--black-color);
border: 2px solid var(--main-bg);
transition: 0.2s 0.1s;
}
.btn-2 span:hover {
color: var(--main-bg);
transition: width cubic-bezier(0.23, 0.75, 0.31, 0.98) 600ms;
}

.btn-2:hover span::after{
filter: invert(0);
transition: 0.2s 0.1s;
}


/* 4. hover-filled-slide-right */
.btn.hover-filled-slide-right::before {
    top:0; bottom: 0; right: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    content: '';
  }
  .btn.hover-filled-slide-right:hover::before {
    width: 0%;
    position: absolute;
    content: '';
  }


.container-img-scroll{
    width: 100%;
    text-align: center;
    padding-top: 80px;
}


.btn-back{
    font-family: 'ClashDisplay-Variable';
    font-weight: 500;
    font-size: 15px;
    background-color: transparent;
    display: flex;
    justify-content: center;
    position: absolute;
    top: 5%;
    left: 2.5%;
    padding: 8px !important;
    border: none;
    color: var(--main-bg);
    cursor: pointer;
    gap: 12px;
    transition: cubic-bezier(0, 0.17, 0.28, 1.01) 300ms;
}

.btn-back::before{
    content: url(./img/back.svg);
    transition: cubic-bezier(0, 0.17, 0.28, 1.01) 300ms;
}

.btn-back:hover::before{
    transform: scale(1.2);
}

.btn-back:hover{
    gap: 14px;
}


.btn-next {
    color: var(--black-color);
    font-family: 'ClashDisplay-Variable';
    font-weight: 500;
    margin-top: 80px;
    padding: 32px;
    height: 100px;
    width: 100px;
    background-color: var(--blue-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    gap: 10px;
    font-size: 18px;
    transition: cubic-bezier(0, 0.17, 0.28, 1.01) 300ms;
    text-transform: uppercase;
}

.btn-next:hover{
    transform: scale(1.06);
    gap: 14px;
}


.up{
    display: flex;
    flex-direction: column;
    margin: auto;
}

.txt-next{
    order: 1;
    font-family: 'ClashDisplay-Variable';
    font-size: 20px;
}

#picto-next{
    transform: rotate(-90deg);
}


/* carousel */

@keyframes fadein {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    100%{
        transform: scale(1);
        opacity: 0.3;
    }
  }

.carousel-container {
    overflow: hidden;
    width: 100%;
    position: absolute;
    top: 435px;
    opacity: 0;
    animation: fadein cubic-bezier(0.23, 0.75, 0.31, 0.98) .9s forwards;
    animation-delay: .5s;
}

.slider-container {
    width: 100%;
    height: 250px;
    margin: auto;
    position: relative;
    place-items: center;
    display: grid;
  }
  
  @keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-650px * 6));
    }
  }
  
  
  .slider-track {
    display: flex;
    width: calc(650px * 12);
    animation: scroll 18s linear infinite;
  }
  
  .slide{
    height: 250px;
    width: 650px;
    display: flex;
    align-items: center;
    padding: 0;
  
  }
  
  .img-carousel {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  
  .slider-container::before,
  .slider-container::after{
    background: linear-gradient(to right, rgba(252, 252, 252, 1) 0%, rgba(252,252,252,0)100%);
    content: '';
    height: 100%;
    width: 12%;
    z-index: 2;
    position: absolute;
  }
  
  .slider-container::before{
    left: -8px;
    top: 0;
  }
  
  .slider-container::after{
    right: -8px;
    top: 0;
    rotate: 180deg;
  }
  




/******** MAIN ********/

main{
    margin-top: 250px;
}

section{
    width: 95%;
    margin: auto;
}

#main-home {
    position: relative;
    opacity: 0;
    animation: fade 400ms cubic-bezier(0.23, 0.75, 0.31, 0.98) .9s forwards;
}

@keyframes fade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.background-b{
    position: absolute;
    z-index: -1;
    width: 100vw;
    height: 1500px;
    background-color: var(--black-color);
}



/******* REA *******/

.container-rea{
    overflow: visible;
    margin-bottom: 300px;
    display: flex;
    flex-direction: column;
    gap: 56px;
}


.container-content-title{
    display: flex;
    gap: 24px;
    margin-bottom: 8px;
    flex-direction: column;
}

#container-content-title-rea{
    margin-top: 250px;
    color: var(--main-bg);
}

#title-rea{
    margin-bottom: 24px;
}

.container{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
}

.card{
    width: 20%;
    height: auto;
    transition: width cubic-bezier(0.23, 0.75, 0.31, 0.98) 600ms;
    display: flex;
    flex-direction: column;
    position: relative;
    cursor: pointer;
    color: var(--main-bg);
}

.img-rea{
    width: 100%;
    height: 450px;
    object-fit: cover;
    opacity: 0.3;
    transition: opacity linear 350ms;
}

.card::after{
    content: url(./img/hoverarrow.svg);
    position: absolute;
    bottom: 24px;
    right: 24px;
    max-height: 80px;
    opacity: 0;
}

.card:hover::after{
    opacity: 1;
    transition: opacity ease-out 350ms;
}

.card:hover{
    width: 75%;

    & .img-rea{
        opacity: 1;
        object-fit: cover;
    }
}

.number-card{
    font-family: 'ClashDisplay-Variable';
    text-transform: uppercase;
    font-weight: 580;
    font-size: 30px;
    margin-bottom: 8px;
    white-space: nowrap;
}

.title-card{
    font-family: 'porpora';
    text-transform: uppercase;
    font-weight: bold;
    font-size: 23px;
    margin-bottom: 24px;
    white-space: nowrap;
    width: 100%;
    min-width: 180px;
}



/******* CREA *******/


.container-crea{
    display: flex;
    gap: 32px;
    justify-content: space-between;
    margin-bottom: 180px;
}

.container-img-crea{
    width: 75%;
    max-height: 850px;
    min-height: 850px;
    display: flex;
    position: relative;
}

.img-crea-default{
    max-width: 100%;
    min-width: 350px;
    height: 100%;
    object-fit: cover;
    max-height: 850px;
    min-height: 850px;
    opacity: 1;
}

.container-img-crea-hover{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 9999;
}

.flex-start{
    justify-content: flex-start;
}

.flex-end{
    justify-content: flex-end;
}


.img-crea{
    max-width: 100%;
    min-width: auto;
    height: 100%;
    object-fit: cover;
    max-height: 850px;
    min-height: 850px;
}

.img-crea-hovered{
    width: 0%;
    min-width: 0%;
    opacity: 1;
    height: 100%;
    min-height: 730px;
    object-fit: cover;
    animation: width-animation cubic-bezier(0.23, 0.75, 0.31, 0.98) 0.8s forwards;
    z-index: 999;
}

@keyframes width-animation {
    0% {
        width: 0%;
    }

    100%{
        width: 100%;
    }
}

.img-crea-not-hovered{
    animation: width-out-animation cubic-bezier(0.23, 0.75, 0.31, 0.98) 0.8s forwards;
    z-index: 999;
}

@keyframes width-out-animation {
    0% {
        width: 100%;
    }

    100%{
        width: 0%;
    }
}
.container-selector-crea{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 96px;
    justify-content: flex-end;
}

.container-content-selector-crea{
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
}

h2{
    font-size: 45px;
    text-transform: uppercase;
}

.selector {
    height: 95px;
    width: 100%;
    border-bottom: var(--black-color) 2px solid;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    position: relative;
    transition: width 0.65s cubic-bezier(0.23, 0.75, 0.31, 0.98), opacity 0.65s cubic-bezier(0.23, 0.75, 0.31, 0.98);
}

.selector::before {
    content: '';
    position: absolute;
    z-index: -1;
    height: 95px;
    width: 0px;
    opacity: 0.8;
    background-color: var(--gren-color);
    transition: width 0.65s cubic-bezier(0.23, 0.75, 0.31, 0.98), opacity 0.65s cubic-bezier(0.23, 0.75, 0.31, 0.98);
}

.selector.hovered::before {
    width: 100%;
    opacity: 1;
}

.selector::after{
    content: url(./img/arrow.svg);
    padding-right: 8px;
    transition: padding-right 0.2s cubic-bezier(0, 0.17, 0.28, 1.01);
}

.selector.hovered::after {
    padding-right: 16px;
}

.txt-selector{
    font-family: 'porpora';
    font-size: 20px;
    font-weight: 500;
    padding-left: 8px;
    transition: padding-left 0.2s cubic-bezier(0, 0.17, 0.28, 1.01);
}

.selector.hovered .txt-selector {
    padding-left: 16px;
}


/******* SERVICES *******/

.container-services-home{
    width: 100VW;
    background-color: var(--black-color);
    padding-top: 140px;
    padding-bottom: 120px;
}

.container-content-services-home{
    max-width: 1800px;
    margin: auto;
}

.container-title-services{
    width: 95%;
    margin: auto;
    color: var(--main-bg);
}

.container-card-services-home{
    width: 98%;
    margin: auto;
    margin-top: 56px;
    display: flex;
    justify-content: center;
    gap: 32px;
}

.card-services-home{
    width: 100%;
    max-width: 100%;
    padding: 32px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 40px;
    background-color: var(--black-color);
    color: var(--main-bg);
}

.img-card-services-home{
    height: 100%;
    max-height: 100px;
    transition: 0.7s cubic-bezier(0.23, 0.75, 0.31, 0.98);
}

.p-card-services{
    font-size: 20px;
}

.card-services-home:hover .img-card-services-home{
    transform: scale(1.1);
}






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

footer{
    width: 100%;
    height: 90vh;
    background-color: var(--black-color);
    color: var(--main-bg);
    display: flex;
    justify-content: center;
    align-items: center;
}

.container-content-footer{
    display: flex;
    flex-direction: column;
    min-height: 120px;
    text-align: center;
    justify-content: space-between;
}

.txt-footer{
    font-size: 18px;
}

.container-img-footer{
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: center;
    min-height: 64px;
}

.img-rsx-footer{
    cursor: pointer;
    margin-top: 8px;
    transition: all 0.2s cubic-bezier(0, 0.17, 0.28, 1.01);
}

.img-rsx-footer:hover{
    margin-top: 0;
}




/************** RESPONSIVE ************/

@media screen and (max-width: 1280px) {

    .container-txt-banner{
        gap: 48px;
    }

    .title-banner{
        font-size: 56px;
        line-height: 66px;
    }

    .p-banner{
        min-width: auto;
        font-size: 20px;
        max-width: 550px;
    }

    h2{
        font-size: 38px;
    }

    .btn{
        max-width: 300px;
    }

    .btn span {
        font-size: 14px;
        padding: 18px 14px;
    }

    .carousel-container{
        top: 401px;
    }

    #card5{
        display: none;
    }

    .card{
        width: 25%;
    }

    .img-rea{
        height: 380px;
    }

    .background-b{
        height: 1200px;
    }

    .container-rea, .container-crea{
        margin-bottom: 200px;
    }

    #container-content-title-rea {
        margin-top: 160px;
    }

    /* PROJETS */

    .card-project {
        height: auto !important;
        padding: 16px !important;
        gap: 24px;
    }

}

@media screen and (max-width: 1280px) and (max-height: 680px) {

    .hero-banner{
        padding-top: 48px;
    }

    .planete{
        margin-bottom: 24px;
    }

    .container-banner{
        padding-top: 24px;
    }

    .carousel-container {
        top: 354px;
    }

    #main-home{
        margin-top: 180px;
    }

    .container-crea{
        margin-bottom: 140px;
    }

    .container-img-crea {
        max-height: 620px;
        min-height: 620px;
    }

    .img-crea-default, .container-img-crea-default, .img-crea {
        object-fit: cover;
        max-height: 620px;
        min-height: 620px;
    }

    .container-content-title {
        gap: 30px;
        margin-bottom: 16px;
    }

    .container-selector-crea {
        gap: 64px;
    }

    .container-content-selector-crea {
        gap: 16px;
        margin-bottom: 0;
    }

    .selector {
        height: 64px;
    }

    .selector::before {
        height: 64px;
    }
}

/* GRAND ECRAN */

@media screen and (min-width: 1900px) {

    header{
        background-color: var(--main-bg);
    }

    .container-menu, .hero-banner{
        max-width: 1800px;
        margin: auto;
    }

    .container-rea, .container-crea, .container-product-projet, .container-form-contact, .container-card-project, .container-project{
        max-width: 1800px;
    }

    .slider-container::before {
        left: -2px;
    }

    .slider-container::after {
        right: -2px;
    }
}