/***
    The new CSS reset - version 1.5.1 (last updated 1.3.2022)
    GitHub page: https://github.com/elad2412/the-new-css-reset
***/

/*
    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
    - The "symbol *" part is to solve Firefox SVG sprite bug
 */
*:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)) {
    all: unset;
    display: revert;
}

/* Preferred box-sizing value */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Reapply the pointer cursor for anchor tags */
a, button {
    cursor: revert;
}

/* Remove list styles (bullets/numbers) */
ol, ul, menu {
    list-style: none;
}

/* For images to not be able to exceed their container */
img {
    max-width: 100%;
}

/* removes spacing between cells in tables */
table {
    border-collapse: collapse;
}

/* revert the 'white-space' property for textarea elements on Safari */
textarea {
    white-space: revert;
}

/* minimum style to allow to style meter element */
meter {
    -webkit-appearance: revert;
    appearance: revert;
}

/* reset default text opacity of input placeholder */
::placeholder {
    color: unset;
}

/* fix the feature of 'hidden' attribute.
   display:revert; revert to element instead of attribute */
:where([hidden]) {
    display: none;
}

/* revert for bug in Chromium browsers
   - fix for the content editable attribute will work properly. */
:where([contenteditable]) {
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    overflow-wrap: break-word;
    -webkit-line-break: after-white-space;
}

/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable="true"]) {
    -webkit-user-drag: element;
}
            @font-face {
                font-family: GTAmerica-ExtRg;
                src: url('../fonts/GTAmerica-ExtRg.woff2') format('woff2'),
                     url('../fonts/GTAmerica-ExtRg.woff') format('woff');
                font-weight: normal;
                font-style: normal;
                font-display: swap;
            }

            @font-face {
                font-family: GTAmerica-ExtMd;
                src: url('../fonts/GT-America-Extended-Medium.woff2') format('woff2'),
                     url('../fonts/GT-America-Extended-Medium.woff') format('woff');
                font-weight: normal;
                font-style: normal;
                font-display: swap;
            }

            @font-face {
                font-family: GTAmerica-ExtBl;
                src: url('../fonts/GTAmerica-ExtBl.woff2') format('woff2'),
                     url('../fonts/GTAmerica-ExtBl.woff') format('woff');
                font-weight: 900;
                font-style: normal;
                font-display: swap;
            }


            :root {
                --fs-titre : 6.6rem;
                --transition1 : 0.8s ease-out;
            }

            @media only screen and (max-width: 600px) {
                :root {
                    --fs-titre : 3.5rem;
                }

            }

            html {
                font-size: 62.5%;
            }

            @media only screen and (min-width: 33.9em) { 
            /*    header {
                    background-color: indigo;
                }*/
            }
            @media only screen and (min-width: 61.875em) {
            /*   header {
                    background-color: cyan;
                    
                }*/
                section .content  {
                    max-width: 970px
                }
             }
            @media only screen and (min-width: 74.9em) { 
              /*  header {
                    background-color: orange;

                }*/
                section .content {
                    max-width: 1100px;
                    }
            }

            header {
                padding: 18px;
                text-align: center;
                height: 122px;
                position: sticky;
                top: 0;
                z-index: 100;
               background: #fff;
            }

            header.sticky {
                position: sticky;
            }

            header .logo {
                filter: invert(14%) sepia(77%) saturate(6024%) hue-rotate(265deg) brightness(92%) contrast(95%);
            }
            
            .container {
                max-width: 100%;
                margin: 0 auto;
                font-size: 1.6rem;
                position: relative;
            }

            section {
                position: relative;
            }

            section .content {
                margin: 0 auto;
                position: relative;
            }

            .slick-slider {
                z-index: 10;
            }
        
            .intro {
                padding: 0 0 250px 0;
            }

            .intro h1 {
                font-family: GTAmerica-ExtBl;
                font-size: var(--fs-titre);
                color: #FFE7E3;
                letter-spacing: 0;
                text-align: center;
                position: relative;
            }

            #swap {
                position:relative;
                margin:auto;
                padding-top: 20px;
            }

            #swap span {
                color:#EB5444;
                position:absolute;
                margin:0;
                padding:0;
                width:100%;
                text-align:center;
                visibility:hidden;
                left: 0;
                bottom:-80px;
                text-decoration: underline;
            }

            .intro #violet {
                position: absolute;
                right: 22%;
                top: 0;
            }

            .intro #jaune {
                position: absolute;
                right: 0;
                top: 80px;
                z-index: -1;
            }

            .intro img {
                position: absolute;
                right: 5%;
                top: 80%;
            }

            .expertises {
                padding: 100px 0;
                z-index: 1;
            }

            .expertises h2 {
                font-family: GTAmerica-ExtBl;
                font-size: var(--fs-titre);
                color: #EB5444;
            }
            .expertises .slick-slider {
                grid-template-columns: 1fr 1fr;
                display: grid;
                grid-gap: 1.5rem;
                margin-top: -70px;
            }

            .expertises .slick-prev {
                margin: 0 0 0 auto;
                grid-column: 1;
            }

            .expertises .slick-next {
                margin:0 auto 0 0;
                grid-column: 2;
                grid-row: 1;
            }
            .expertises .slick-list {
                grid-column: 1/3;
                grid-row: 2;
            }

            .expertises .slick-prev,
            .expertises .slick-next {
                border-radius: 50%;
                border:2px solid #7024E5;
                height: 66px;
                width: 66px;
                position: relative;
                transition: var(--transition1);
                cursor: pointer;
            }

            .expertises .slick-prev:hover,
            .expertises .slick-next:hover {
                background: #7024E5;
            }
            .expertises .slick-prev:hover img,
            .expertises .slick-next:hover img {
                filter: invert(100%) sepia(0%) saturate(7478%) hue-rotate(42deg) brightness(106%) contrast(106%);
            }

            .expertises .slick-prev img,
            .expertises .slick-next img {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                filter: invert(18%) sepia(61%) saturate(5234%) hue-rotate(261deg) brightness(89%) contrast(103%);
            }

            .expertises .slideExp .card {
                border-radius: 25px;
                background: #EB5444;
                padding: 30px 25px;
                display: flex;
              margin: 0 10px;
            }
            .expertises .slideExp .card .card__content {
                text-align: center;
            }

            .expertises .slideExp .card .card__content .card__title svg {
                width: 100%;
            }
            .expertises .slideExp .card .card__text {
                line-height: 3.5rem;
                font-size: 1.6rem;
                padding: 20px 0 5px;
                color: #fff;
                text-align: center;
                font-family: GTAmerica-ExtRg;

            }

            .expertises .courbe {
                position: absolute;
                top: 170px;
                left: calc(158px - 10%);
                width: calc(38% - 10%);
            }

            .art {
                margin-bottom: 100px;
            }

            .art h2{
                font-family: GTAmerica-ExtBl;
                font-size: 5.6rem;
                color: #7024E5;
                letter-spacing: 0;
                text-align: center;
                line-height: 66px;
                background: #FEF7F0;        
                padding: 60px 0 180px;
            }

            .art .bloc {
                grid-template-columns:2% 1fr 2% 39%;
                display: grid;
                margin-top: -160px;
                grid-template-rows: 190px auto;
            }

            .art .bloc .blend {
                grid-column-start: 2;
                position: relative;
                z-index: 1;
                grid-row: 1/3;
                border-radius: 10%;
                overflow: hidden;

                background: url(../images/art-de-vivre.jpg) no-repeat;
                 background-size: cover;
            }
            .art .bloc .blend img {
                mix-blend-mode: soft-light;
            } 

            .art .bloc .txt {
                grid-column-start: 4;
                font-family: GTAmerica-ExtRg;
                grid-row-start: 2;
                line-height: 4rem;
            }

            .art .bloc .txt h3 {
                font-family : GTAmerica-ExtBl;
                font-size: 2.2rem;
                margin-top: 30px;
            }
            .art .bloc .txt p {
                margin-top: 20px;
            } 
           
    
            .happy {
                background: #EB5444;
                z-index: 2;
            }

            .happy .content {
                padding-top: 100px;
            }

            .happy .bloc {
                grid-template-columns: 2% 1fr 1fr 2%;
                display: grid;
                grid-gap: 2%;
            }

            .happy .bloc .txt h2 {
                font-size: 5.6rem;
                font-family: GTAmerica-ExtBl;
                line-height: 7rem;
                margin: 0 0 30px 0;
            }

            .happy .bloc .txt h2 span {
                display: block;
                background: url(../images/onde.svg) no-repeat;
                height: 110px;
                padding: 13px 0 0px 37px;
                color: #EB5444;
                margin: -26px 0 -34px 0;
            }

            .happy .bloc .txt {
                grid-column-start: 2;
                font-family: GTAmerica-ExtRg;
                line-height: 4rem;
                color:#fff;
            }
            .happy .bloc .txt strong {
                font-family : GTAmerica-ExtBl;
            }
            .happy .bloc .txt p {
                margin-top:30px;
            }

            .happy .bloc .fleur {
                grid-column-start: 3;
            }

            .happy .bloc .fleur img {
                -webkit-mask: url(../images/fleur.svg) no-repeat center;
                mask: url(../images/fleur.svg) no-repeat center;
                mask-position: 0 0;
            }

            .happy .courbe {
                position: absolute;
                right: 0;
                top: 290px;
            }

            .vague {
                position: relative;
                z-index: 1;
                background:url(../images/vague.svg) repeat-x; height:168px
            }

            .contact {
                background:#F1F0EE;
                margin-top: -120px;
                padding-top: 100px; 
            }

            .contact .bloc {
                grid-template-columns: 54% 1fr;
                display: grid;
            }

            .contact h2 {
                font-family: GTAmerica-ExtBl;
                font-size: 5.6rem;
                color: #000000;
                letter-spacing: 0;
                line-height: 66px;
            }

            .contact .bloc .txt {
                grid-column-start: 2;
                font-family: GTAmerica-ExtRg;
                line-height: 4rem;
                color: #fff;
                display: flex;
                justify-content: center;
                align-items: flex-start;
                flex-direction: column;
            }

            .contact .bloc .txt a {
                font-family: GTAmerica-ExtMd;
                border: 1px solid #000;
                margin-top: 60px;
                color: #000;
                text-transform: uppercase;
                padding: 8px 80px;
                font-size: 1.4rem;
                letter-spacing: .35rem;
            }

            .contact .bloc .miroir {
                grid-column-start: 1;
            }

            .contact .bloc .miroir .visuel {
                margin-left: -100px;
            }
            .contact .bloc .miroir .site {
                position: absolute;
                z-index: 1;
            }

            .contact .bloc .miroir .coeur {
                position: absolute;
                z-index: 1;
                left: 250px;
                top: 198px;
            }

            .contact .bloc .txt a {
                font-family: GTAmerica-ExtMd;
                border: 1px solid #000;
                transition:var(--transition1);
            }
            .contact .bloc .txt a:hover {
                background: #7024E5;
                color:#fff;
            }

            .clients {
                padding-top: 80px;
            }

            .clients h2{
                font-family: GTAmerica-ExtBl;
                font-size: 5.6rem;
                color: #EB5444;
                text-align: center;
            }

            .clients h2 span {
                text-decoration: underline;
            }

            .clients .slick-slider {
                display: grid;
                grid-template-rows: 50px 1fr auto 50px;
                grid-template-columns: 1fr 1fr;
                width: 80%;
                margin: 0 auto;
            }

            .clients .slick-prev,
            .clients .slick-next {
                border-radius: 50%;
                border:2px solid #EB5444;
                height: 66px;
                width: 66px;
                position: relative;
                cursor: pointer;
                transition: var(--transition1);
            }

            .clients .slick-prev:hover,
            .clients .slick-next:hover {
                background: #EB5444;
            }
            .clients .slick-prev img,
            .clients .slick-next img {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                filter: invert(36%) sepia(17%) saturate(5253%) hue-rotate(336deg) brightness(110%) contrast(84%);
            }

            .clients .slick-prev:hover img,
            .clients .slick-next:hover img {
                filter: invert(100%) sepia(0%) saturate(7478%) hue-rotate(42deg) brightness(106%) contrast(106%);
            }

            .clients .slick-prev {
                grid-row-start: 3;
                margin: 30px 10px 0 auto;
            }
            .clients .slick-next {
                grid-row: 3;
                margin: 30px auto 0px 10px;
            }
            .clients .slick-slider .slick-list {
                grid-column: 1/3;
                grid-row: 2;
            }

            .clients .slick-slide img {
                margin: 0 auto;
            }

            .clients .slick-track {
                align-items: center;
            }

            .clients .slick-slide {
                margin: 0 20px;
              }

            .clients .courbe {
                position: absolute;
                left: 3%;
                z-index: -1;
                top: -80px;
                transform: translateX(-3%);
                width: 26%;
            }




            footer {
                background:#7024E5;
            }

            footer .logo {
               filter: invert(100%) sepia(0%) saturate(7478%) hue-rotate(42deg) brightness(106%) contrast(106%);
            }

            footer {
                background: #7024E5;
            }


            footer .footContent { 
                color: #FEF7F0;
                font-family: GTAmerica-ExtRg;
                display: grid;
                padding: 30px 0 60px;
                line-height: 4rem;
                max-width: 1340px;
                margin: 0 auto;
            }

            footer h4 {
                font-family: GTAmerica-ExtBl;
                font-size: 2.4rem;
                margin-bottom: 20px;
               
            }

            footer .qui {
                font-size: 1.2rem;
                grid-column-start: 2;
                line-height: 3rem;
            }

            footer .adresse {
                grid-column-start: 4;
            }

            footer .rejoindre {
                grid-column-start: 5;
            }
            footer .rejoindre p {
                margin-bottom: 15px;
            }
            footer .rejoindre a {
                font-family: GTAmerica-ExtMd;
                border: 1px solid #fff;
                color: #fff;
                text-transform: uppercase;
                padding: 20px 36px;
                font-size: 1.4rem;
                letter-spacing: .35rem;
                margin-top: 40px;
                transition: var(--transition1);
            }

            footer .rejoindre a:hover { 
                color: #7024E5;
                background: #fff;
            }

            footer .rs {
                display: flex;
            }

            footer .rs a {
                border: 2px solid white;
                border-radius: 50%;
                height: 56px;
                width: 56px;
                margin: 10px auto;
                position: relative;
                transition: var(--transition1);
            }

            footer .rs a img,
            footer .rs a svg {
                position: absolute;
                left: 50%;
                transform: translate(-50%, -50%);
                top: 50%;

            }
            footer .rs a:hover {
                background: #fff;
            }

            footer .rs a:hover svg g {
                fill: #7024E5;
            }

          @media only screen and (max-width: 33.8em) { 
         
                header {
                    height: 90px;
                }

                header .logo,
                footer .logo {
                    width: 40%;
                }

                .expertises .slick-prev, .expertises .slick-next,
                .clients .slick-prev, .clients .slick-next {
                    height: 46px;
                    width: 46px;
                }

                .txt {
                    text-align: center;
                    margin: 0 auto;
                }

                .slick-prev img,
                .slick-next img {
                    width: 40%;
                }

                .intro h1,
                .expertises h2,
                .art h2 {
                    font-size: var(--fs-titre);
                    text-align: center;
                }

                .intro {
                    overflow: hidden;
                    padding-bottom: 310px;
                }

                .intro img {
                    right: 0;
                    top: 137%;
                    width: 50%;
                }

                #swap span {
                    bottom:-45px;
                }

                .intro #violet {
                    position: absolute;
                    left: -270px;
                    top: -100px;
                    width: 488%;
                }
            
                .intro #jaune {
                    display: none;
                }

                .expertises {
                    padding: 0;
                }
                .expertises .slick-slider {
                    margin-top: 10px;
                }

                .art {
                    margin-bottom: 180px;
                  }

                .art h2 {
                    line-height: 4.5rem;
                }

                .art h2 img {
                    width: 90%;
                }

                .art .bloc {
                    grid-template-columns: 5% 1fr 5%;
                    grid-gap: 0;
                }

                .art .bloc .txt {
                    grid-column-start: 2;
                    grid-row-start: 3;
                    font-size: 1.5rem;
                  }

                  .art .bloc .blend { 
                      height: 340px;
                  }

                .courbe {
                    display: none;
                }

                .happy .content {
                    padding-top: 0;
                }
                .happy .bloc {
                    grid-template-columns: 5% 1fr 5%;
                    grid-gap: 0;
    
                }
                .happy .bloc .fleur {
                    grid-column-start: 2;
                    grid-row: 1;
                    margin-top: -140px;
                }

                .happy .bloc .txt h2 span {
                              padding: 13px 0 0px 0;
                    margin: -42px 0 -50px 0;
                    background-size: 50%;
                    background-position: 50%;
                  }

                .happy .bloc .txt h2 {
                    font-size: 3.8rem;
                }
                .vague {
                    margin-top: -1px;
                    height: 128px;
                }

                .contact .bloc {
                    grid-template-columns: 5% 1fr 5%;
                }
                .contact {
                    padding-bottom: 20px;
                }
                .contact .bloc .miroir .visuel {
                    display: none;
                }

                .contact .bloc .miroir {
                    grid-column-start: 2;
                    text-align: center;
                    margin: 0 0 30px 0;
                    position: relative;
                }

                .contact .bloc .miroir .site {
                    position: relative;
                    z-index: 1;
                    left: 0;
                    top: 0;
                    width: 60%;
                }

                .contact .bloc .miroir .coeur {
                    position: absolute;
                    z-index: 1;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%,-50%);
                    width: 18%;
                }

                .contact h2 {
                    font-size: var(--fs-titre);
                    line-height: 46px;
                    width: 100%;
                }

                .clients h2 {
                    margin-top: 40px;
                }

                .clients h2 {
                    font-size: var(--fs-titre);
                }

                footer .adresse {
                    grid-column-start: 4;
                    border-top: 1px solid white;
                    margin: 20px 0 0 0;
                    padding-top: 20px;
                    border-right: 0;
                }

                footer .rejoindre {
                    border-top: 1px solid white;
                    margin: 20px 0 0 0;
                    padding-top: 20px;
                  }

                footer .rejoindre p {
                    margin-bottom: 40px;
                }

                footer .footContent {
                    grid-template-columns: 5% 1fr 5%;
                    text-align: center;
                }
                footer .qui,
                footer .adresse,
                footer .rejoindre,
                footer .rs
                 {
                    grid-column-start: 2;
                }
                footer .rs {
                    flex-direction: row;
                    margin: 40px auto;
                }

                footer .rs a {
                    margin: 0 10px;
                }
            }


           @media only screen and (min-width: 33.9em) { 

            .intro img {
                top: 130%;
              }

              .intro #violet {
                position: absolute;
                right: 5%;
                top: 0;
              }

              

            .art h2 {
 
                padding: 60px 28px 180px;
              }

                .expertises h2 {
                    text-align: center;
                }
                .expertises .slick-slider {
                    margin-top: 10px;
                  }

                  .expertises .courbe {
                    top: 30px;
                    left: calc(-70px - 10%);
                    width: calc(78% - 10%);
                  }

                  .happy {
                      overflow: hidden;
                  }
                  .happy .courbe {
                    position: absolute;
                    right: -330px;
                    top: 190px;
                  }
                  .contact {
                    margin-top: -160px;
                  }

                  .clients .courbe {
                    left: -22%;
                    top: -90px;
                    width: 46%;
                  }
                  .contact .bloc {
                    grid-template-columns: 48% 1fr;
                  }
                  .contact .bloc .miroir .visuel {
                    margin-left: -40px;
                  }
                  .contact .bloc .miroir .coeur {
                    left: 19%;
                    top: 113px;
                    width: 10%;
                  }
                  .contact .bloc .miroir .site {
                    left: 11%;
                    top: 42px;
                    width: 26%;
                  }
                footer .adresse {
                    grid-column-start: 4;
                    border-top: 1px solid white;
                    margin: 20px 0 0 0;
                    padding-top: 20px;
                    border-right: 0;
                }

                footer .rejoindre {
                    border-top: 1px solid white;
                    margin: 20px 0 0 0;
                    padding-top: 20px;
                  }

                footer .rejoindre p {
                    margin-bottom: 40px;
                }
                footer .footContent {
                    grid-template-columns: 5% 1fr 5%;
                    text-align: center;
                }
                footer .qui,
                footer .adresse,
                footer .rejoindre,
                footer .rs
                 {
                    grid-column-start: 2;
                }
                footer .rs {
                    flex-direction: row;
                    margin: 40px auto;
                }
            }

            @media only screen and (min-width: 61.875em) {
                footer .footContent {
                    grid-template-columns: 2% 1fr 10% 1fr 1fr 6% 2%;
                    font-size: 1.5rem;
                    line-height: 3rem;
                    text-align: left;
                }
                footer .adresse {
                    margin-right: 60px;
                    border-top: 0;
                    border-right: 1px solid;
                    grid-column: 4;
                }
                footer .rejoindre {
                    border-top: none;
                    margin-right: 0;
                    grid-column: 5;

                }
                footer .rejoindre a {
                    padding: 10px 10px;
                    font-size: 1.2rem;

                }

                footer .rs {
                    flex-direction: column;
                    margin: 40px auto;
                    grid-column: unset;
                  }
             }

            @media only screen and (min-width: 61.9em) {
                .contact .bloc .miroir .site {
                    left: 8%;
                    top: 62px;
                    width: 29%;
                  }
             }

             @media only screen and (min-width: 61.875em) {

                .happy .courbe {
                    right: -170px;
                    top: 140px;
                }
                .contact .bloc .miroir .site {
                    left: 12%;
                    top: 52px;
                    width: 26%;
                  }
                  .contact .bloc .miroir .coeur {
                    left: 20%;
                    top: 140px;
                    width: 10%;
                  }


             }

             @media only screen and (min-width: 74.9em) { 

                .happy {
                    overflow: visible;
                }

                .happy .courbe {
                    z-index: 2;
                }
                .clients .courbe {
                    top: -110px;
                    left: calc(3px - 31%);
                    width: calc(61% - 4%);
                }
                .expertises {
                    padding: 180px 0;
                }
                .expertises h2 {
                    text-align: left;
                  }

                  .expertises .slick-slider {
                    margin-top: -70px;
                  }

                  .expertises .courbe {
                    top: 70px;
                    left: calc(-320px - 10%);
                    width: calc(78% - 10%);
                  }

                  .contact {
                    margin-top: -120px;
                  }

                .contact .bloc .miroir .site {
                    left: 12.5%;
                    top: 59px;
                  }

                  .contact .bloc .miroir .coeur {
                    left: 20.5%;
                    top: 161px;
                    width: 10%;
                  }

                footer .footContent { 
                    grid-template-columns: 1% 1fr 10% 1fr 1fr 6% 1%;
                }
                footer .adresse {
                    grid-column-start: 4;
                    border-top: 0;
                    border-right: 1px solid white;
                }

                footer .rejoindre {
                    margin-right: 110px;
                    grid-column: 5;
                    border-top: 0;
                }

                footer .rs {
                    grid-column-start: 6;

                    flex-direction:column ;
                }
            }
/*
            @media only screen and (min-width: 33.9em) { 
                    header {
                        background-color: indigo !important;
                    }
                }
                @media only screen and (min-width: 61.875em) {
                   header {
                        background-color: cyan !important;
                   }
                        
                 
                 }
                @media only screen and (min-width: 74.9em) { 
                   header {
                        background-color: orange !important;
    
                    }
                   
                }
*/