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

  .home_mask-btn {
    display        : flex;
    justify-content: center;
    align-items    : center;
    position       : relative;
    height         : 400px;
    width          : 400px;
  }

  .home_mask-tiret[data="1"] {
    position: absolute;
    width   : 100%;
    height  : 100%;
  }
  .home_mask-tiret[data="2"] {
    position: absolute;
    width   : 73%;
    height  : 73%;
  }

  .home_mask-tiret_bloc {
    position     : relative;
    width        : 100%;
    height       : 100%;
    border-radius: 100%;
  }

  .home_mask-tiret span {
    position     : absolute;
    top          : 50%;
    left         : 50%;
    display      : flex;
    width        : 0px;
    border-radius: 25px;
  }

  .home_mask-tiret[data="1"] span {
    border   : 2px solid #FCFAFA;
    opacity  : 30%;
    height   : 25px;
    transform: translateY(-50%) translate(32em) rotate(90deg);
  }

  .home_mask-tiret[data="2"] span {
    border : 3px solid #FCFAFA;
    opacity: 70%;
    height : 40px;
        /* transform:translateY(-50%) translate(22em) rotate(90deg); */
  }


  .home_mask-titre {
    position     : relative;
    height       : 42%;
    width        : 42%;
    border-radius: 100%;
  }

  .home_mask-titre:hover {
    cursor: pointer;
  }

  .home_mask-titre:hover .home_mask-circle[data="2"] {
    box-shadow: 0px 0px 10px 10px rgba(252, 250, 250, 0.07);
    transition: all ease-in-out 300ms;
  }

  .home_mask-circle {
    display        : flex;
    align-items    : center;
    justify-content: center;
    border-radius  : 100%;
  }
  
  .home_mask-circle[data="1"] {
    height: 100%;
    width : 100%;
    border: 1.5px dashed #FCFAFA;
  }

  .home_mask-circle[data="2"] {
    height    : 90%;
    width     : 90%;
    border    : 3px solid #D0D8D7;
    transition: all ease-in-out 300ms;
  }

  .home_mask-circle[data="3"] {
    height    : 90%;
    width     : 90%;
    border    : 6px solid #33A699;
    background: #FCFAFA;
  }

  .home_mask-pulsa {
    position        : absolute;
    background-color: #33A699;
    height          : 100%;
    width           : 100%;
    border-radius   : 100%;
    opacity         : 0.08;
    top             : 0;
    left            : 0;
    z-index         : -1;
  }
  
  .home_mask-text {
    position   : absolute;
    transform  : translate(-50%, -50%);
    top        : 50%;
    left       : 50%;
    display    : flex;
    align-items: center;
    height     : 100%;
    width      : 100%;
    text-align : center;
    overflow   : hidden;
    font-family: 'Expletus Sans', cursive;
    color      : #013134;
    font-weight: 600;
  }
  .p-princi {
    display    : flex;
    align-items: center;
    position   : absolute;
    top        : 0;
    left       : 0;
    width      : 100%;
    height     : 100%;
    font-size  : 20px;
    margin     : 0;
    opacity    : 100%;
      /* --transform:-150%; */
  }

  .p-secon {
    display    : flex;
    align-items: center;
    position   : absolute;
    top        : 0;
    left       : 0;
    width      : 100%;
    height     : 100%;
    font-size: 20px;
    margin     : 0;
    opacity  : 0;
      /* transform:translateY(-250px); */
  }
  
@media screen and (max-width:480px) {
  .home_mask-btn {
    scale: 0.5;
    height: 350px;
    width: 350px;
  }

  .p-princi {
    display:none;
  }

  .p-secon {
    opacity  : 100%;
    font-size: 16px;
  }

  .home_mask-tiret_bloc {
    transform: scale(0.8);
  }
}  
    /* .home_mask-titre p:after {
    position : absolute;
    content  : 'Cliquez pour commencer';
    transform: translateY(var(--transform));
  } */
    /*! CSS home Visible **/
  .home_visible {
    position : relative;
    font-size: 30px;
  }

  .h1_home {
    font-weight: 700;
              /* font-size:12.8rem; */
    font-size     : 9.5vw;
    color         : #07393C;
    text-transform: uppercase;
    position      : relative;
    width         : max-content;
    margin-bottom : 15px;
    padding-bottom: 15px;
    z-index       : -1;
    overflow: hidden;
  }

  html {
    --myTranslate: translate(-100%, 0%);
    --myOpacity:0%;
  }

  .h1_home:after {
    content   : "";
    height    : 3px;
    width     : 100%;
    position  : absolute;
    left      : 0;
    bottom    : 0;
    background: #33A699;
    transform: var(--myTranslate);
  }

  .home_visible-tags {
    position: relative;
    width   : 100%;
    height  : 20vh;
  }

  .home_visible-tag {
    padding      : 0.28em 0.417em;
    width        : max-content;
    border-radius: 15px;
    position     : absolute;
    font-weight: 300;
    transform-origin: center;
    /* scale:0; */
    /* rotate:8deg; */
    transform: scale(0%);
  }

  .home_visible-tag:nth-child(1) {
    top: 65%;
    left: 30%;
    /* scale:0;
    rotate:6deg; */
    box-shadow: 4px 4px 6px 0px rgba(7, 57, 60, 0.15);
  }
  .home_visible-tag:nth-child(2) {
    top: 5%;
    left: 15%;
    /* scale:0;
    rotate:-8deg; */
    box-shadow: 4px 4px 6px 0px rgba(80, 47, 76, 0.15);
  }
  .home_visible-tag:nth-child(3) {
    top: 5%;
    left: 55%;
    /* scale:0;
    rotate:10deg; */
    box-shadow: 4px 4px 6px 0px rgba(128, 61, 1, 0.15);
  }
  .home_visible-tag:nth-child(4) {
    top: 65%;
    left: 75%;
    /* scale:0;
    rotate:-2deg; */
    box-shadow: 4px 4px 6px 0px rgba(21, 24, 24, 0.15);
  }

  .home_visible-picto {
    position: absolute;
    width   : 1em;
    height  : 1em;
    transform-origin: 0 0;
    scale:0;
    opacity:0.5;
  }

  .rond {
    border-radius: 100%;
  }

  .triangle {
    width             : 0;
    height            : 0;
    border            : 0 solid transparent;
    border-right-width: 0.55em;
    border-left-width : 0.55em;
  }

  .tr_orange {
    border-bottom: 1em solid #FCB97D;
    top          : 70%;
    right        : 7%;
    /* transform    : rotate(80deg) scale(60%); */
  }

  .tr_violet {
    border-bottom: 1em solid #502F4C;
    top          : 65%;
    right        : 90%;
    /* transform    : rotate(-170deg); */
  }

  .tr_gris {
    border-bottom: 1em solid #7B8382;
    top          : 30%;
    right        : 10%;
    /* transform    : rotate(25deg) scale(50%); */
  }

  .common-btns_circle {
    justify-content: center;
  }
 /* .h1_home {
    color: #33A699;
  }

  .h2_home {
    color: #502F4C;
  } */

@media screen and (min-width:992px) {
  .home_visible-titres, .home_category-titres {
    margin: 0 60px;
  }
}


@media screen and (max-width:1280px) {
/*? Modifie taille tag + formes géométrique home */
  .home_visible {
    font-size: 25px;
  }
  
  .home_visible-tags {
    height: 30vh;
  }
}

@media screen and (max-width:992px) {
  .home_visible-titres {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    height        : max-content;
  }

  .home_category-titres {
    text-align: center;
  }


  /*? Modifie taille tag + formes géométrique home */
  .h1_home  {
    font-size: 15vw;
  }

  .home_visible-tags {
    height: 45vh;
  }

  .home_visible-tag:nth-child(1) {
    top: 50%;
    left: 30%;
  }
  .home_visible-tag:nth-child(2) {
    top: 5%;
    left: 65%;
  }
  .home_visible-tag:nth-child(3) {
    top: 5%;
    left: 25%;
  }
  .home_visible-tag:nth-child(4) {
    top: 50%;
    left: 75%;
  }
}

@media screen and (max-width:768px) {
  /*? Modifie taille tag + formes géométrique home */
  .home_visible-tag:nth-child(1) {
    top: 5%;
    left: 25%;
  }
  .home_visible-tag:nth-child(2) {
    top: 30%;
    left: 25%;
  }
  .home_visible-tag:nth-child(3) {
    top: 55%;
    left: 25%;
  }
  .home_visible-tag:nth-child(4) {
    top: 80%;
    left: 25%;
  }
}

@media screen and (max-width:480px) {
  /*? Modifie taille tag + formes géométrique home */
  .home_visible {
    font-size: 20px;
  }
  
}

/*! CSS home catégorie **/

  .home_category {
    position: relative;
    margin: 100px 0 0 0;
  }

  .home_category-titres_tags {
    margin: 20px 0 40px 0;
  }

  .home_category-bloc {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 50px;
  }

  .home_category-card {
    width: 20%;
    min-width:300px;
    height:100%;
    perspective:1000px;
    text-decoration: none;

  }

  .home_category-card_content {
    text-decoration: none;
    background:#FFFFFF;
    border-radius:20px;
    box-shadow: 0px 0px 6px 0px rgba(1, 49, 52, 0.15);
    opacity:0.75;
    filter: grayscale(100%);
    transition:opacity ease-in-out 400ms, box-shadow ease-in-out 400ms,transform 150ms ease-out;
  }

  .home_category-card:hover > .home_category-card_content {
    opacity:1;
    filter: grayscale(0%);
    box-shadow: 0px 0px 10px 6px rgba(1, 49, 52, 0.15);
    transition:opacity ease-in-out 400ms, box-shadow ease-in-out 400ms,transform 150ms ease-out;
  }

  .home_category-card_light {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border-radius:20px;
    mix-blend-mode: hard-light;
    background:radial-gradient(circle at 50% 0%, rgba(51, 166, 153, 0), transparent);
    transition:transform 150ms ease-out;
  }

  .home_category-card_top {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 260px;
    border-radius: 20px 20px 0px 0px;
    overflow:hidden;
  }

  .home_category-card_top img {
    width: 60%;
    height: 60%;
    object-fit: contain;
  }

  .home_category-card_mid {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 5px;
    /* margin: 0 5px; */
    overflow-x: scroll;
    scrollbar-width: none;
    border-top: 1px solid #D0D8D7;
  }

  .home_category-card_mid span:first-child {
    margin-left:5px;
  }

  .home_category-card_bot {
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    height: 130px;
    background:#013134;
    border-radius: 0px 0px 20px 20px ;
    padding:20px 25px;
    overflow:hidden;
    transition:all ease-in-out 300ms;
  }

  .home_category-car_bot-title {
    display:flex;
    flex-direction: column;
    align-items: center;
  }

  .home_category-card_bot h3 {
    color: #FCFAFA;
    text-decoration: none;
  }

  .home_category-card_bot p {
    font-size:20px;
    color:#33A699;
    margin: 0;
  }

  .home_category-card_bot button {
    display:flex;
    justify-content: center;
    align-items: center;
    font-family    : 'Nunito', sans-serif;
    font-size:20px;
    color:#F0EDEE;
    background:#502F4C;
    border-radius:10px;
    text-align: center;
    height:40px;
    border:none;
    opacity:0%;
    translate: 0% 50%;
    transition:all ease-out 300ms;
    box-shadow: 2px 2px 4px 0px rgba(7, 57, 60, 0.5);
  }

  .home_category-card:hover button {
    opacity:100%;
    translate: 0% 0%;
    transition:translate ease-in 300ms, opacity ease-in-out 500ms;
  }

  .home_category-car_bot-icone {
    display:flex;
    position:relative;
  }

  .home_category-car_bot-icone > svg:nth-child(1) {
    opacity:0%;
    transform: translate(0%, 0%);
  }

  .home_category-card:hover .home_category-car_bot-icone > svg:nth-child(1) {
    animation: 1.65s cubic-bezier(.51,.01,1,.39) infinite fleche_left;
    /* transition: all 300ms ease-in-out; */
  }

/*! CSS pour TACTILE **/
  @media (hover: none) and (pointer: coarse)  {
  .home_category-card_content {
    opacity:1;
    filter: grayscale(0%);
    box-shadow: 0px 0px 10px 6px rgba(1, 49, 52, 0.15);
    transition:opacity ease-in-out 400ms, box-shadow ease-in-out 400ms,transform 150ms ease-out;
  }

  .home_category-card button {
    opacity: 100%;
    translate: 0% 0%;
    transition: translate ease-in 300ms, opacity ease-in-out 500ms;
  }

  .home_category-card .home_category-car_bot-icone > svg:nth-child(1) {
    animation: 1.65s cubic-bezier(.51,.01,1,.39) infinite fleche_left;
  }
}


/*! CSS home BOUTONS **/

  .home_category-button {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 50px;
    flex-wrap: wrap;
    margin: 150px auto;
  }


  .home_category-button button {
    font-family: 'Nunito', sans-serif;
    color: #F0EDEE;
    font-size: 2rem;
    width: 225px;
    height:50px;
    padding:1rem;
    border-radius:40px;
    border:1px solid #502F4C;
    background:#502F4C;
    box-shadow: 0px 0px 3px 0px rgba(7, 57, 60, 0.15);
    opacity:0%;
    transform: scale(0%);
    transition: background ease-in-out 300ms, color ease-in-out 300ms, box-shadow ease-in-out 300ms;
  }

  .home_category-button button:hover {
    cursor: pointer;
    color: #502F4C;
    background-color:#fff;
    box-shadow: 2px 2px 3px 0px rgba(7, 57, 60, 0.25);
    transition: background ease-in-out 300ms, color ease-in-out 300ms, box-shadow ease-in-out 300ms;
  }


/*! CLASS animation CSS **/

  #fade_top-h1, #fade_top-h2, #fade_left-h1 {
    opacity: 0%;
  }

/*! CLASS animation GSAP **/
  .gsap-home_titre {
    opacity:0;
    transform: translateY(-75px);
  }

  .gsap-home_card {
    opacity:0;
    transform: scale(0%);
  }

/*! ANIMATION CSS **/

@keyframes fleche_left {
  0% { opacity: 0%; transform: translate(0%, 0%); }
  50% { opacity: 100%; }
  100% { opacity: 0%;transform: translate(75%, 0%); }
}

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