/* @import url('https://fonts.googleapis.com/css2?family=Expletus+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&display=swap'); */

            /*! CSS FONT **/
            /** FONT VARIABLE **/

@font-face {
    font-family: 'Expletus Sans';
    src        : url('fonts/expletusSansVariable.woff2') format("woff2-variations");
    font-weight: 1 700;
    font-style : normal;
  }

@font-face {
    font-family: 'Expletus Sans';
    src        : url('fonts/expletusSansVariable-Italic.woff2') format("woff2-variations");
    font-weight: 1 700;
    font-style : italic;
  }

@font-face {
    font-family: 'Nunito';
    src        : url('fonts/nunitoVariable.woff2') format("truetype-variations");
    font-weight: 1 1000;
    font-style : normal;
  }

@font-face {
    font-family: 'Nunito';
    src        : url('fonts/nunitoVariable-Italic.woff2') format("truetype-variations");
    font-weight: 1 1000;
    font-style : italic;
  }


            /** FONT NORMAL **/

@font-face {
    font-family: 'Expletus Sans';
    src        : url('fonts/expletusSansRegular.woff2') format("woff2");
    font-weight: 400;
  }

@font-face {
    font-family: 'Expletus Sans';
    src        : url('fonts/expletusSansBold.woff2') format("woff2");
    font-weight: 700;
  }

          /*! CSS COULEURS !*/

.violet {
  background: #B3A1BE;
  color     : #502F4C;
}

.orange {
  background: #FCB97D;
  color     : #803D01;
}

.vert {
  background: #33A699;
  color     : #013134;
}

.gris {
  background: #7B8382;
  color     : #222626;
}

          /*! CSS BOUTONS !*/
.tag {
  font-family: 'Nunito', sans-serif;
  box-shadow : 2px 2px 4px 0px rgba(7, 57, 60, 0.15);
}

.tag_moyen {
  font-size    : 1.75em;
  border-radius: 7.5px;
  padding      : 0.20em 0.35em;
  min-width    : max-content;
}

.tag_petit {
  font-size    : 1.1em;
  border-radius: 5px;
  padding      : 2px 5px;
  min-width    : max-content;
}

        /*! CSS GLOBAL !*/


  html {
    background     : #FCFAFA;
    font-family    : 'Nunito', sans-serif;
    color          : #222626;
    font-size      : 62.5%;
    scrollbar-width: none;
  }

  body {
    margin: 0;
  }

  main {
    margin: 12rem 8rem 0 8rem;
  }

  .main_body {
    position  : absolute;
    top       : 0;
    left      : 0;
    height    : 0%;
    width     : 100%;
    background: rgba(21, 24, 24, 0);
    transition: background ease-in-out 500ms, height 1ms 1s ;
    position  : fixed;
  }

  .main_filter {
    z-index   : 2;
    height    : 100%;
    background: rgba(21, 24, 24, 0.5);
    transition: background ease-in-out 500ms;
  }

  .body_filter {
    overflow: hidden;
  }

  ::-webkit-scrollbar {
    display: none;
  }

  ul {
    padding: 0;
  }
 


        /*! CSS TITRAGES !*/

  h1 {
    font-family: 'Expletus Sans', cursive;
    font-weight: 500;
                /* font-size:9.6rem; */
    font-size: 5.5vw;
    color    : #502F4C;
    margin   : 0 0 0.5rem 0;
  }

  h2 {
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
                /* font-size:4rem; */
    font-size : 2vw;
    font-style: italic;
    color     : #33A699;
    margin    : 0 0 5rem 0;
  }

  h3 {
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
            /* font-size  : 2.5vw; */
    font-size: 4rem;
    color    : #363A3A;
    color    : #502F4C;
    margin   : 0;
  }

  h4 {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size  : 2.5rem;
    color      : #07393C;
            /* font-style: italic; */
    margin     : 0 0 20px 0;
    line-height: normal!important;
    
  }

  p {
    font-size: 2.2rem;
            /* font-size: 1.2vw; */
  }

@media screen and (max-width:992px) {
  h1 {
    font-size: 10vw;
  }
  
  h2 {
    font-size: 5vw;
  }

          /* h3 {
    font-size: 6vw;
  } */

          /* p {
    font-size: 3vw;
  } */
}

        /*! CSS HEADER */
        /** CSS Header **/
  
  .header_fixed {
    position: fixed;
    width   : 100%;
    top     : 0;
    z-index : 5;
  }

  .header {
    height          : 80px;
    background      : #013134;
    display         : flex;
    justify-content : space-between;
    padding         : 0 8rem;
    box-shadow      : 4px 4px 6px 0px rgba(1, 49, 52, 0.15);
    transform-origin: top;
    transform       : scaleY(0%);
    opacity         : 0%;
  }

  .header_element {
    transform: scale(0%);
    opacity  : 0%;
  }

  .header_bg {
    opacity: 0%;
  }

  .header-hamburger {
    height         : 100%;
    width          : 110px;
    display        : flex;
    justify-content: flex-start;
    align-items    : center;
  }

  .header-hamburger_point {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    gap           : 10px;
    transform     : rotate(0deg);
    transition    : all 500ms ease-in-out;
  }

  .header-hamburger_point-active {
    transform : rotate(540deg);
    transition: all 500ms ease-in-out;
  }

  .header-hamburger_point:hover {
    cursor: pointer;
  }

  .header-hamburger_point-top, .header-hamburger_point-bot {
    display: flex;
    gap    : 20px;
  }

  .header-hamburger_point span {
    width        : 15px;
    height       : 15px;
    display      : flex;
    border-radius: 100%;
  }

  .header-hamburger_point-top span {
    background: #502F4C;
  }

  .header-hamburger_point-bot span:first-child {
    background: #33A699;
  }

  .header-hamburger_point-bot span:last-child {
    background: #9684A1;
  }

  .header-logo {
    height    : 100%;
    width     : 100px;
    background: #FCFAFA;
  }

  .header-logo a, .header-logo img {
    height         : 100%;
    display        : flex;
    justify-content: center;
    align-items    : center;
  }

  .header-rs {
    height         : 100%;
    width          : 110px;
    display        : flex;
    align-items    : center;
    justify-content: flex-end;
    gap            : 25px;
  }

@media screen and (max-width:992px) {
  main {
    margin: 12rem 4rem 8rem;
  }
  
  .header {
    padding: 0 4rem;
  }
}


@media screen and (max-width: 768px) {
  main {
    margin: 12rem 2rem 8rem;
  }

  .header {
    padding: 0 2rem;
  }

  .header-hamburger, .header-rs {
    width: 100px;
  }
}

            /** CSS Icones réseaux sociaux **/

.logo-rs {
  width           : max-content;
  height          : 32px;
  transform       : scale(1);
  transform-origin: center;
  transition      : all ease-in-out 300ms;
}

.logo-rs img {
  height: 100%;
  width : 100%;
}

.logo-rs:hover {
  transform       : scale(1.25);
  transform-origin: center;
  transition      : all ease-in-out 300ms;
}

            /** CSS Menu **/

  .header-menu {
    position  : fixed;
    top       : 80px;
    background: #07393C;
    width     : calc(50% - 50px);
    height    : 100vh;
    padding   : 50px 0;
    z-index   : 4;
    border-top: 1px solid #FCFAFA;
    box-shadow: 4px 4px 6px 0px rgba(1, 49, 52, 0.15);
    transform : translate(0vw, -250vh);
    transition: all 800ms ease-in-out;
  }

  .header-menu-active {
    transform      : translate(0, 0);
    transition     : all 500ms ease-in-out;
    overflow-y     : scroll;
    scrollbar-width: none;
  }

  .header-menu_ul {
                /* margin:1px 0 0 0; */
    padding: 0 9rem;
  }

  .header-menu_li {
    padding    : 35px 0;
    font-family: 'Expletus Sans', cursive;
    font-size  : 4rem;
    font-weight: 500;
    list-style : none;
    transform  : translateY(-25%);
    opacity    : 0;
  }

  .header-menu_bloc {
    overflow: hidden;
    width   : max-content;
    height  : 53px;
    position: relative;
  }

  .header-menu_bloc:after {
    content   : "";
    height    : 2px;
    width     : 100%;
    position  : absolute;
    left      : 0;
    bottom    : 0;
    background: #33A699;
    transform : translateX(-100%);
    transition: all .7s cubic-bezier(.77,0,.175,1);
  }

  .header-menu_bloc:hover:after {
    transform : translateX(0%);
    transition: all .7s cubic-bezier(.77,0,.175,1);
  }

  .header-menu_a {
    display        : flex;
    flex-direction : column;
    height         : 100%;
    color          : #FCFAFA;
    text-decoration: none;
    transform      : translateY(0%);
    transition     : all 300ms ease-in-out;
  }

  .header-menu_a:hover {
    color     : #33A699;
    transform : translateY(-100%);
    transition: all 300ms ease-in-out;
  }


            /** CSS current page active **/
  .current_page_item, .current_page_parent {
    list-style: initial;
    color     : #33A699;
  }

  .current_page_item a, .current_page_parent a {
    color: #33A699;
  }


  .header-menu_signature {
    margin : 60px 0 0 0;
    padding: 0 30px 0 90px;
    color  : #F0EDEE;

  }

  .gsap_signature {
    font-size: 1.6rem;
    overflow : hidden;
    opacity  : 0;
    transform: translateY(-40%);
  }

  .header-menu_signature a {
    position       : relative;
    overflow       : hidden;
    color          : #33A699;
    text-decoration: none;
    transition     : all ease-in-out 300ms;
  }

  .header-menu_signature a::after {
    content   : "";
    height    : 1px;
    width     : 100%;
    position  : absolute;
    left      : 0;
    bottom    : 0;
    background: #33A699;
    transform : translateX(-150%);
    transition: all .7s cubic-bezier(.77,0,.175,1);
  }

 

  .header-menu_signature a:hover::after {
    transform : translateX(0%);
    transition: all .7s cubic-bezier(.77,0,.175,1);
  }
 
@media screen and (max-width: 960px) {
  
  .header-menu_signature a::after {
    transform: translateX(-500%);
  }

  .header-menu {
    width: 100%;
  }

  .header-menu_ul {
    display        : flex;
    flex-direction : column;
    justify-content: center;
    padding        : 0 4rem;
  }

  .header-menu_li {
    margin    : auto;
    list-style: none;
  }

  .header-menu_signature {
    padding: 0 30px 200px 30px;
  }

  .header-menu_signature p {
    text-align: center;
  }
}  

            /*! CSS FOOTER */

  .footer {
    height         : 160px;
    background     : #013134;
    display        : flex;
    flex-direction : column;
    justify-content: center;
    padding        : 0 8rem;
    margin-top     : 500px;
              /* box-shadow     : 4px 4px 6px 0px rgba(1, 49, 52, 0.15); */
  }

  .footer-rs {
    display        : flex;
    justify-content: center;
    gap            : 25px;
  }

  .footer-signature {
    display        : flex;
    justify-content: center;
  }

  .footer-signature p {
    color     : #F0EDEE;
    font-size : 1.6rem;
    margin-top: 2rem;
    text-align: center;
    overflow  : hidden;
  }

  .footer-signature a {
    position       : relative;
    overflow       : hidden;
    color          : #33A699;
    text-decoration: none;
    transition     : all ease-in-out 300ms;
  }

  .footer-signature a::after {
    content   : "";
    height    : 1px;
    width     : 100%;
    position  : absolute;
    left      : 0;
    bottom    : 0;
    background: #33A699;
    transform : translateX(120%);
    transition: all .7s cubic-bezier(.77,0,.175,1);
  }

  .footer-signature a:hover::after {
    transform : translateX(0%);
    transition: all .7s cubic-bezier(.77,0,.175,1);
  }

@media screen and (max-width: 768px) { 
  .footer {
    height: 200px;
  }
}

    /*! CSS TIRAGE PAGE */
  
  .common-bloc_titre h1 {
    opacity  : 0%;
    animation: 1s ease-out 2.5s fade_top-short forwards;
  }

  .common-bloc_titre h2 {
    opacity  : 0%;
    animation: 1s ease-out 2.8s fade_top forwards;
  }

  .common-btns_circle  {
    display        : flex;
    justify-content: flex-start;
    width          : 100%;
    height         : 71px;
  }

  .btns_circle  {
    display        : flex;
    align-content  : center;
    justify-content: center;
    flex-direction : column;
          /* position       : relative; */
    
    z-index      : 1;
    padding      : 2px;
    border       : 1px solid #502F4C;
    border-radius: 100%;
    background   : #fff;
          /*box-shadow: 0px 0px 6px 0px rgba(150, 132, 161, 0.3); */
    overflow  : hidden;
    transition: all 300ms ease-in-out;
  }

  .btns_circle:hover {
    cursor    : pointer;
    background: #502F4C;
    transition: all 300ms ease-in-out;
  }

  .btns_circle-left {
    position        : fixed;
    transform-origin: center;
    transform       : scale(0%);
    animation       : 1s ease-out 2.2s scale forwards;
  }

  .btns_circle-top {
    position : relative;
    transform: scale(0%);
  }

  .btns_circle svg:nth-child(1) {
    transform : translate(0%, 0%);
    transition: all 300ms ease-in-out;
  }

  .btns_circle > svg:nth-child(2) {
    position  : absolute;
    transform : translate(0%, 0%);
    transition: all 300ms ease-in-out;
  }

  .btns_circle:hover > svg:nth-child(2) {
    transform : translate(0%, 0%);
    transition: all 300ms ease-in-out;
  }


  .btns_circle-top > svg:nth-child(2) {
    position  : absolute;
    transform : translate(0%, -150%);
    transition: all 300ms ease-in-out;
  }

  .btns_circle-top:hover > svg:nth-child(1) {
    transform : translate(0%, 150%);
    transition: all 300ms ease-in-out;
  }

  .btns_circle-left > svg:nth-child(2) {
    position  : absolute;
    transform : translate(150%, 0%);
    transition: all 300ms ease-in-out;
  }

  .btns_circle-left:hover > svg:nth-child(1) {
    transform : translate(-150%, 0%);
    transition: all 300ms ease-in-out;
  }

@media screen and (max-width: 768px) {  
          /* .common-bloc_titre {
    display       : flex;
    flex-direction: column;
    align-items   : center;
  } */

  .common-btns_circle {
    margin-bottom: 15px;
  }
}

    /*! Class CSS pour ANIMATION */

.anim-fade_top-short {
  opacity  : 0%;
  animation: 1s ease-out 3s fade_top-short forwards;
}

.anim-fade_left-short {
  opacity  : 0%;
  animation: 1s ease-out 3s fade_left-short forwards;
}


@keyframes fade_top {
  0% {  opacity: 0%;transform: translate(0%, -150%); }
  100% {  opacity: 100%; transform: translate(0%, 0%); }
}

@keyframes fade_top-short  {
  0% {  opacity: 0%;transform: translate(0%, -50%); }
  100% {  opacity: 100%; transform: translate(0%, 0%); }
}

@keyframes scale {
  0% {  transform: scale(0%); }
  100% {  transform: scale(100%); }
}

@keyframes fade_left-short {
  0% { opacity: 0%; transform: translate(-50%, 0%); }
  100% { opacity: 100%;transform: translate(0%, 0%); }
}

.page_mask {
  display        : flex;
  justify-content: center;
  align-items    : center;
  position       : fixed;
  width          : 100%;
  height         : 100%;
  background     : #013134;
  z-index        : 99;
  top            : 0;
  left           : 0;
  clip-path      : circle(0%);
  /* transition     : all 500ms ease-in-out; */
}

.page_mask_close {
  display        : none;
  justify-content: center;
  align-items    : center;
  position       : fixed;
  width          : 100%;
  height         : 100%;
  background     : #013134;
  /* z-index        : -99; */
  z-index        : 99;
  top            : 0;
  left           : 0;
  opacity        : 0;
}