:root {
    --small-margin: 40px;
    --medium-margin: 70px;
    --large-margin: 100px;
    --dynamic-margin: 8vw;
    --Jaune-Clair: #FAE099;
    --jaune: #FBB700;
    --Vert-Clair: #C2ECBB;
    --vert: #30B71A;
    --gris: #606060;
    --gris-clair: #DFDFDF;
    --gris-fonce: #333333;
}

::selection {
    background-color: var(--jaune);
    color: white;
}

/* Firefox */
::-moz-selection {
    background-color: var(--jaune);
    color: white;
}
    /* width */
::-webkit-scrollbar {
    width: 2px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #676767;
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
    width: 2px;
}
body {
    background-color: white;
    font-family: 'Gotham';
}
* {
    font-family: 'Gotham';
    font-weight: 500;
    color: var(--gris);
}
body{
    overflow-x: hidden;
}
body.no-scroll{
    overflow: hidden;
}
#wrapper::after{
    content: "";
    transition: 0.4s ease-in-out all;
}
body.no-scroll #wrapper::after{
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: black;
    opacity: 0.4;
    z-index: 9000;
    height: 100vh;
}
.content-page{
    position: relative;
}
.container-first-page-main {
    position: relative;
    height: 100vh;
}
#wrapper.traiteur,#wrapper.resto{
    padding-top: 100px;
}

.logo-first-page {
    position: absolute;
    left: 50%;
    top: 50px;
    transform: translate(-50%, 0);
    z-index: 10;
    width: 270px;
    height: 180px;
}

.sub-logo-first-page {
    position: absolute;
    left: 50%;
    top: 250px;
    transform: translate(-50%, 0);
    z-index: 10;
}

.grid-home {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100vh;
}

.grid-home a {
    display: flex;
    position: relative;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.grid-home a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0) 6%, rgba(0, 0, 0, 0.45) 100%);
    z-index: 2;
    transition: 0.4s ease-in-out all;
}

.grid-home img {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    transition: 0.4s ease-in-out all;
}
.grid-home h2 {
    color: var(--Jaune-Clair);
    text-align: center;
    font-size: 99px;
    font-weight: 400;
    line-height: 114px;
    text-transform: uppercase;
    opacity: 0;
    transition: 0.4s ease-in-out all;
    z-index: 3;
}

.traiteur-access h2 {
    color: var(--Vert-Clair);
}

.grid-home p {
    position: absolute;
    left: 50%;
    bottom: 50px;
    transform: translate(-50%, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;

    text-align: center;
    font-size: 17px;
    line-height: 22px;
    font-weight: 400;
    text-transform: uppercase;
    z-index: 3;
    transition: 0.4s ease-in-out all;
}

.grid-home p svg {
    margin: 0 8px;
    position: absolute;
    right: 100%;
    transition: 0.3s ease-in-out all;
}

.grid-home p svg:last-of-type {
    left: 100%;
}

.grid-home p span {
    transition: 0.3s ease-in-out transform;
    transform: scale(1);
    position: static;
    color: white;
}

.grid-home a:hover p span {
    transform: scale(0);
}

.grid-home a:hover p svg {
    right: 50%;
    transition: 0.4s ease-in-out all;
}
.grid-home a:hover img{
    transform: scale(1.05);
}
.grid-home a:hover p svg:last-of-type {
    left: 50%;
}

.grid-home a:hover h2 {
    opacity: 1;
}

.grid-home a:hover::after {
    background-color: rgba(0, 0, 0, 0.5);
}


/****************
RESTAURANT
 */
#header {
    display: grid;
    grid-template-columns: 25% 1fr 20%;
    height: 100px;
    align-items: center;
    border-bottom: 1px solid var(--gris-clair);

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: white;
    z-index: 10000;
    transition: 0.4s ease-in-out all;
}
#header.scrolltop{
    transform: translate(0, -120px);
}
#branding {
    padding-left: calc(5% * 4);
}

#branding img {
    width: 220px;
    transition: 0.4s ease-in-out all;
}
#branding img:hover{
    opacity: 0.4;
}
.menu {
    display: flex;
}

.menu li {
    padding-right: 30px;
    font-size: 16px;
    text-transform: uppercase;
}
.menu a{
    transition: 0.4s ease-in-out all;
    font-size: 16px;
    font-weight: 500;
}
.menu a:hover{
    opacity: 0.4;
}
#menu .menu > .current_page_item > a {
    color: var(--jaune);
}

#menu .menu > .current_page_item > a::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--jaune);
    position: relative;
    bottom: -3px;
}

.other-website {
    width: 100%;
    height: 100%;
    background-color: #edfaeb;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.4s ease-in-out all;
}
.other-website p {
    color: var(--vert);
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 500;
    margin: 0;
    transition: 0.4s ease-in-out all;
}
.other-website path{
    transition: 0.4s ease-in-out all;
}
.other-website:hover {
    background-color: var(--Vert-Clair);
}
.other-website:hover p{
    color: white;
}
.other-website:hover path{
    stroke: white;
}
.other-website svg {
    margin-right: 10px;
}

/*Home*/
h1 {
    font-size: 160px;
    color: var(--Jaune-Clair);
    line-height: 175px;
    text-transform: uppercase;
    font-weight: 800;

    margin: 0;
}

h2 {
    text-transform: uppercase;
    font-size: 76px;
    line-height: 82px;
    color: var(--jaune);
    margin-bottom: 20px;
    margin-top: 0;
    font-weight: 800;

}

h3 {
    font-weight: 800;
    font-size: 22px;
    line-height: 35px;
    text-transform: uppercase;
    margin: 0 0 10px 0;
}

p {
    font-weight: 300;
    font-size: 22px;
    line-height: 35px;
    margin: 0 0 20px 0;
}
a{
    font-weight: 300;
    font-size: 22px;
    line-height: 35px;
}
.simple-header {
    position: relative;
    overflow: hidden;
    /*height: 650px;*/
    height: calc(100vh - 325px);
}
.simple-header>div{
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
    height: 100%;
    z-index: 2;
}

.simple-header img {
    width: 80%;
    /*height: 800px;*/
    height: calc(100vh - 125px);

    object-fit: cover;
    margin-top: -75px;
}

.simple-header::after {
    content: "";
    position: absolute;
    z-index: 1;
    height: calc(100vh - 325px);
    width: 80%;
    top: 0;
    left: 0;
    background-color: black;
    opacity: 0.2;
}

.simple-header h1 {
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translate(0, -50%);
    z-index: 2;
}

.left-large {
    /*padding: 0 10% 0 25%;*/
    padding: 0 15% 0 25%;
}
.left-less-large-right{
    padding: 0 15% 0 15%;
    /*padding: 0 10% 0 15%;*/
}
.left-less-large {
    padding: 0 0% 0 15%;
}
.left-large-page{
    padding: 0 15% 0 25%;

}

.txt-intro p {
    font-size: 24px;
    line-height: 36px;
    margin: 0;
    font-weight: 700;
}

.space {
    margin: 70px auto;
}
.big-space{
    margin: 140px auto;

}

.presta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 80px;
}

.presta div svg {
    position: relative;
    top: -40px;
    width: 100%;
    height: auto;
}

.presta div {
    text-align: center;
}

.presta div:nth-of-type(1),
.presta div:nth-of-type(2),
.presta div:nth-of-type(3) {
    padding-top: 40px;
    border-top: 1px solid var(--jaune);
}

.presta div:nth-of-type(4),
.presta div:nth-of-type(5),
.presta div:nth-of-type(6) {
    padding-bottom: 40px;
    border-bottom: 1px solid var(--jaune);
}

.presta div p {
    margin: 20px 0 0 0;
    font-weight: 500;
    color: var(--jaune);
    text-transform: uppercase;
    font-size: 15px;
    line-height: 18px;
}

.presta img {
    object-fit: contain;
    height: 85px;
    width: 100%;
}


.swiper-galerie {
    overflow: hidden;
}

.swiper-galerie img {
    object-fit: cover;
    height: 450px;
    width: 100%;
}

.slide-svg {
    margin-top: 30px;
    cursor: pointer;
}

.slide-prev {
    margin-right: 10px;
}


.today {
    font-weight: 800;
    font-size: 17px;
    color: var(--jaune);
    text-transform: uppercase;
}

/**********
Menu Day
 */
.grid-day-menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 50px;
}
.page-menu .price{
    display: none;
}
.type {
    text-transform: uppercase;
    color: var(--jaune);
    margin-bottom: 20px;
    display: inline-block;
}
.menu-jour{
    position: relative;
}
.menu-price {
    display: grid;
    grid-template-columns: 1fr 70px;
}
.menu-price h3{
    width: 80%;
}
.menu-price p{
    margin-bottom: 0;
}
.page-menu{
    margin-top: 40px;
}


/*reserver*/
.reserv-table{
    position: relative;
    margin-bottom: 280px;
    margin-top: 140px;
}
.reserv-table::after{
    content: "";
    position: absolute;
    left: 0;
    top: 140px;
    height: 100%;
    width: 100%;
    z-index: -1;
    background-color: var(--Jaune-Clair);
}
.reserv-table p, .reserv-table a {
    color: var(--gris-fonce);
}
.reserv-table h2{
    color: white;
}
.head-resa img {
    width: 100%;
    height: 550px;
    object-fit: cover;
    margin-bottom: 70px;
}

.btn_simple {
    font-weight: 700;
    font-size: 17px;
    text-transform: uppercase;
    display: inline-block;
    position: relative;
    transition: 0.3s ease-in-out all;
    z-index: 10;
    line-height: 22px;
    margin-right: 15px;
}

.btn_simple::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--gris-fonce);
    margin-top: 6px;
}
.btn_simple::before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--gris-fonce);
    position: absolute;
    bottom: -4px;
    left: 0;
    transition: 0.3s ease-in-out all;
    z-index: -1;
}
.btn_simple:hover{
    color: var(--Jaune-Clair);
}
.btn_simple:hover::before{
    height: 44px;
    left: -7.5%;
    width: 115%;
}
.txt-resa{
    max-width: 700px;
    margin-left: 0;
    margin-bottom: 40px;
}

.grid-adresse{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 40px;
}
.grid-adresse strong{
    text-transform: uppercase;
}
.grid-adresse em{
    font-weight: 300;
    font-size: 16px;
}


/**********
FOOTER
 */
#footer{
    background-color: var(--gris-fonce);
    /*margin-bottom: -21px;*/
    padding: 80px 15%;
    position: relative;
    margin-top: 70px;
    z-index: 10;
}
#footer>svg{
    width: 350px;
    height: 89px;
}
.grid-footer{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 40px;
    margin-top: 40px;
    width: 89%;
}

.grid-footer p, .grid-footer a{
    color: white;
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 10px;
    font-weight: 300;
    transition: 0.4s ease-in-out all;
}
.grid-footer a:hover{
    opacity: 0.4;
}
.grid-footer .titreft{
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 15px;
}
.info-footer{
    margin-top: 40px;
}
.info-footer p, .info-footer a{
    color: white;
    font-weight: 300;
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 0;
    transition: 0.4s ease-in-out all;
}
.info-footer a:hover{
    opacity: 0.4;
}
.info-footer svg{
    margin-bottom: -8px;
}
.social{
    position: absolute;
    right: 20%;
    bottom: 80px;
}
.social a:first-of-type, .social-share a:first-of-type{
    margin-right: 10px;
}
.social a, .social-share a{
    transition: 0.4s ease-in-out all;
}
.social a:hover, .social-share a:hover{
    opacity: 0.6;
}


/*****************
PAGE
 */

.light-pd{
    padding: 50px 5%;
}


.redirect-bottom{
    padding-left: 15%;
    position: relative;
    z-index: 10;
    /*margin-bottom: -70px;*/
}
.redirect-bottom::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 70px;
    background-color: var(--Jaune-Clair);
    height: 100%;
    z-index: -1;
}
.img-para{
    height: 550px;
    overflow: hidden;
    width: 100%;
}
.redirect-bottom img{
    width: 100%;
    height: 700px;
    margin-top: -75px;
}
.redirect-bottom a{
    text-transform: uppercase;
    margin-top: 70px;
    font-size: 46px;
    line-height: 54px;
    display: flex;
    align-items: center;
    font-weight: 800;
    color: white;
    transition: 0.4s ease-in-out all;
    width: fit-content;
}

.redirect-bottom a svg{
    margin-right: 15px;
}
.redirect-bottom a path{
    transition: 0.4s ease-in-out all;
}
.redirect-bottom a:hover{
    color: var(--jaune);
    transform: translate(10px,0px);
}
.redirect-bottom a:hover path{
    stroke: var(--jaune);
}


.social-share{
    display: flex;
    align-items: flex-end;
    justify-content: right;
    margin-top: 40px;
}

/********
EMPORTER
 */
.tab-san{
    margin-top: 10px;
    max-width: 1100px;
}
.grid-sandwich{
    display: grid;
    grid-template-columns: 1fr 125px 125px;
    margin-bottom: 30px;
}
.tab-san .grid-sandwich:first-of-type{
    margin-bottom: 10px;
}
.grid-sandwich h3{
    margin-bottom: 5px;
}
.grid-sandwich p{
    margin-bottom: 0;
}

.price{
    font-weight: 800;

}
.litleprice{
    font-size: 10px;
    font-weight: 300;

}
.sandwich-container h2:last-of-type{
    margin-top: 70px;
}

/***
PAge simple
 */

body:not(.home) .txt-intro{
    padding-right: 25%;
}
.intro-img{
    width: 100%;
    height: 700px;
    object-fit: cover;
    margin-top: 70px;
}

/************
CONTACT
 */
.grid-contact{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 30px 20px;
    margin-bottom: 30px;
}

.contact-form-simple p{
    margin: 0;
}
.contact-form-simple input, .contact-form-simple textarea{
    margin: 0;
    width: 100%;
    padding: 10px 0;
    border-bottom: 1px solid var(--jaune);
    background-color: transparent;
    font-weight: 300;

    font-size: 17px;
    font-family: 'Gotham';
}
.contact-form-simple textarea{
    resize: none;
    height: 150px;
}
.wpcf7-spinner{
    display: none;
}
.contact-form-simple form>p:last-of-type{
    position: relative;
    width: fit-content;
}
.contact-form-simple form>p:last-of-type::after{
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    bottom: -5px;
    height: 1px;
    background-color: var(--gris-fonce);
    transition: 0.4s ease-in-out all;
    z-index: -1;
}
.contact-form-simple form>p:last-of-type:hover::after{
    height: 50px;
    left: -7.5%;
    width: 115%;
}
.contact-form-simple form>p:last-of-type:hover input{
    color: var(--Jaune-Clair);
}
.wpcf7-not-valid-tip{
    font-size: 16px;
}
.contact-form-simple [type="submit"]{
    width: auto;
    color: var(--gris-fonce);
    border-bottom: 1px solid var(--gris-fonce);
    text-transform: uppercase;
    margin-top: 40px;
    transition: 0.4s ease-in-out all;
}
.front-with-msg{
    position: relative;
}
.close-restaurant{
    position: absolute;
    left: 5%;
    top: -200px;
    z-index: 10;
}
.close-restaurant p{
    position: absolute;
    left: 71px;
    top: 88px;
    font-weight: 800;

    color: var(--jaune);
    text-transform: uppercase;
    font-size: 16px;
    line-height: 22px;
    transform: rotate(-6deg);
}
.close-restaurant p span{
    display: block;
    font-weight: 800;

    color: var(--jaune);
    text-transform: uppercase;
}


.fixed-el{
    position: fixed;
    bottom: 110px;
    right: 0;
    padding: 10px;
    background-color: var(--jaune);
    height: 60px;
    width: 60px;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--jaune);
    border-left: 1px solid var(--jaune);
    border-bottom: 1px solid var(--jaune);
    transition: 0.4s ease-in-out all;
}
.fixed-el svg{
    width: 35px;
    height: 35px;
    margin-top: 18px;
}
.fixed-el path{
    transition: 0.4s ease-in-out all;
    fill: white;
    stroke: white;
}
.fixed-el:hover{
    background-color: white;
}
.fixed-el:hover path{
    fill: var(--jaune);
    stroke: var(--jaune);
}
.fixed-emporter{
    display: none;
}
.fixed-el span{
    display: none;
}
.fixed-week{
    bottom: 40px;
}

.tomato-home{
    position: absolute;
    left: 0;
    bottom: -200px;
}
.brochette-menu{
    position: absolute;
    right: 0;
    top: -75px;
    width: 475px;
    height: 500px;
}

.visite-container{
    position: relative;
    margin-bottom: 140px;
}
.brocol-home{
    position: absolute;
    right: 0;
    bottom: -269px;
}
.poivrons {
    position: absolute;
    left: 0;
    bottom: -200px;
}
.rela-aubergine{
    position: relative;
}
.aubergine{
    position: absolute;
    right: 0;
    top: -150px;
}
.hari{
    position: absolute;
    right: 0;
    top: -150px;
    z-index: -1;
}
.tomato-about{
    position: absolute;
    left: -50px;
    top: 750px;
    z-index: -1;
}
.carotte-about{
    position: absolute;
    left: -50px;
    top: 2000px;
    z-index: -1;
}
/************
TRAITEUR
 */

.traiteur .other-website{
    background-color: #fdf4dc;
}

.traiteur .other-website p {
    color: var(--jaune);
}
.traiteur .other-website path{
    stroke: var(--jaune);
}
.traiteur #menu .menu > .current_page_item > a{
    color: var(--vert);
}
.traiteur #menu .menu > .current_page_item > a::after{
    background-color: var(--vert);
}

.traiteur h1, .traiteur .btn_simple:hover{
    color: var(--Vert-Clair);
}
.traiteur h2{
    color: var(--vert);
}
.traiteur .presta div p{
    color: var(--vert);
}
.traiteur .presta div:nth-of-type(1), .traiteur .presta div:nth-of-type(2), .traiteur .presta div:nth-of-type(3){
    border-top: 1px solid var(--vert);
}
.traiteur .presta div:nth-of-type(4), .traiteur .presta div:nth-of-type(5), .traiteur .presta div:nth-of-type(6){
    border-bottom: 1px solid var(--vert);
}
.traiteur .presta path, .traiteur .slide-svg path{
    stroke: var(--vert);
}
.traiteur .redirect-bottom::after{
    background-color: var(--Vert-Clair);
}
.traiteur .contact-form-simple input, .traiteur .contact-form-simple textarea{
    border-bottom: 1px solid var(--vert);
}
.traiteur .contact-form-simple form>p:last-of-type:hover input{
    color: var(--Vert-Clair);
}
.traiteur .contact-form-simple [type="submit"]{
    border-bottom: 1px solid var(--gris-fonce);
}
.traiteur .other-website:hover{
    /*background-color: var(--jaune);*/
    background-color: var(--Jaune-Clair);
}
.traiteur .other-website:hover p{
    color: white;
}
.traiteur .other-website:hover path{
    stroke: white;
}
.traiteur .redirect-bottom a:hover{
    color: var(--vert);
}
.traiteur .redirect-bottom a:hover path{
    stroke: var(--vert);
}

.grid-partenaires{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0 70px;
}
.grid-partenaires div{
    padding: 40px 0 30px 0;
    text-align: center;
    border-bottom: 1px solid var(--vert);
}
.grid-partenaires a{
    line-height: 0;
}
.grid-partenaires div:nth-of-type(1),.grid-partenaires div:nth-of-type(2), .grid-partenaires div:nth-of-type(3){
    border-top: 1px solid var(--vert);
}
.grid-partenaires img{
    height: 100px;
    object-fit: contain;
    width: 100%;
}
.step-by-step{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 80px;
}
.nbstep{
    color: var(--vert);
    margin-bottom: 8px;
    display: block;
}
.special-txt-step{
    padding: 40px 0 40px 0;
    margin: 0;
    border-bottom: 1px solid var(--vert);
}

.special-txt-step:first-of-type{
    border-top: 1px solid var(--vert);
}
.special-txt-step p{
    margin: 0;
}
.home-bg{
    padding: 70px 0 375px 0;
    background-color: #e7f7e4;
}
.img-concept{
    padding-left: 25%;
    width: 100%;
    height: 500px;
    object-fit: cover;
    margin-top: -300px;
}
/*AVIS*/
.container-avis{
    position: relative;
    margin-top: 70px;
}
.swiper-avis{
    overflow: hidden;
}
.swiper-avis p{
    max-width: 360px;
    margin-bottom: 10px;
}
.container-avis .slide-svg{
    position: absolute;
    margin-top: 0;
    top: 0;
}
.container-avis .slide-svg path{
    transition: 0.4s ease-in-out all;
}
.container-avis .slide-svg:hover path{
    stroke: var(--vert);
}
.container-avis .slide-prev{
    left: 15%;
}
.container-avis .slide-next{
    right: 10%;
}
.traiteur .container-avis path{
    stroke: var(--Vert-Clair);
}
.container-avis h3, .container-avis .action-avis{
    color: var(--vert);
    font-size: 17px;
    margin: 0;
    line-height: 25px;
}
.swiper-pagination{
    position: static;
    text-align: left;
    margin: 40px 0 0 0;
}
.swiper-pagination-bullet{
    border-radius: 0;
    height: 6px;
    width: 6px;
    background-color: var(--gris-clair);
    opacity: 1;
    transition: 0.3s ease-in-out all;
}
.swiper-pagination-bullet-active{
    width: 26px;
    background-color: var(--vert);
}



/****
SERVICE
 */
.service-parralax{
    margin-top: 40px;
}
.container-servicetrait{
    margin-top: 100px ;
}
.service-contain{
    display: grid;
    grid-template-columns: 1fr 1fr;
    /*width: 90%;*/
    width: 80%;
    margin: 0 auto 70px auto;
}
.title-service{
    font-weight: 800;
    color: var(--Vert-Clair);
    font-size: 46px;
    line-height: 54px;
    text-transform: uppercase;
}
.service-bloc img{
    max-height: 450px;
    object-fit: cover;
}
.service-bloc>div{
    overflow: hidden;
    position: relative;
    z-index: 10;
}
.serv-1 .title-service{
    display: flex;
    width: fit-content;
    margin: 0 0 50px auto;
}
.serv-1 img{
    width: 80%;
}
.serv-2{
    text-align: right;
}
.serv-2 img{
    margin-left: auto;
    margin-top: 100px;
    width: 80%;
}
.serv-3 .title-service{
    width: 70%;
    margin: 100px auto 0 auto;
}
.serv-3 img{
    width: 80%;
    margin: 50px auto 0 auto;
    display: flex;
}
.serv-4 p{
    display: flex;
    width: fit-content;
    margin: 0 50px 50px auto;
}
.serv-4 img{
    width: 70%;
    margin-top: -30px;
}
.serv-5 p{
    margin: 0px 0 0 auto;
    display: flex;
    width: fit-content;
}
.serv-5 img{
    width: 70%;
    margin: 50px 50px 0 auto;
    display: flex;
}
.serv-6 p{
    display: flex;
    margin: -40px auto 0 auto;
    width: fit-content;
}
.serv-6 img{
    width: 80%;
    margin-left: auto;
    display: flex;
}

/******
PROPOSITION
 */
.container-all-proposition{
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-gap: 40px;
    padding-left: 5%;
    align-items: center;
}
.proposition-galerie{
    position: relative;
    height: 100vh;
}
.galerie-grid{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-gap: 5px;
    height: 100vh;
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
}

.galerie-grid.active{
    display: grid;
}

.proposition-galerie a:nth-of-type(1) {
    grid-area: 2 / 1 / 4 / 3;
    transform: translate(-79px, -132px);
    opacity: 0;
}
.proposition-galerie a:nth-of-type(2) {
    grid-area: 1 / 3 / 4 / 5;
    transform: translate(-22px, -132px);
    opacity: 0;
}
.proposition-galerie a:nth-of-type(3) {
    grid-area: 2 / 5 / 4 / 6;
    transform: translate(87px, -79px);
    opacity: 0;
}
.proposition-galerie a:nth-of-type(4) {
    grid-area: 4 / 2 / 6 / 4;
    transform: translate(-87px, 79px);
    opacity: 0;
}
.proposition-galerie a:nth-of-type(5) {
    grid-area: 4 / 4 / 6 / 6;
    transform: translate(60px, 120px);
    opacity: 0;
}
.proposition-galerie .galerie-grid.active a{
    opacity: 1;
    transform: translate(0, 0);
}

.proposition-galerie a{
    display: block;
    width: 100%;
    height: 100%;
    transition: 0.4s ease-in-out all;
}
.proposition-galerie img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.select-galerie{
    text-transform: uppercase;
    font-size: 17px;
    line-height: initial;
    font-weight: 700;

    margin-bottom: 15px;
    position: relative;
    cursor: pointer;
    transition: 0.4s ease-in-out color, 0.4s ease-in-out opacity;
}
.select-galerie.active{
    color: var(--vert);
    font-weight: 800;

}
.select-galerie.active::before{
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: var(--vert);
    top: 8px;
    right: calc(100% + 10px);
}
.select-galerie:hover{
    opacity: 0.6;
}
.mobile-link{
    display: none;
}


#cn-notice-text{
    font-family: "Gotham";
    font-weight: 300;
    color: white;
}
#cookie-notice .cn-button:not(.cn-button-custom){
    background-color: var(--jaune) !important;
}