/* HEADER on gère l'affichage au niveau du scroll bas/haut */
.headerAnimScroll {
  animation: defilement-rtlScroll 1s infinite linear;
  animation-iteration-count: 1;
}
.headerAnimScrollBis {
  animation: defilement-rtlScrollbis 1s  ;
  animation-iteration-count: 1;
}

/* typed js ecriture */
.typed-cursor {
  
}
/* Animation -> Défilement du H2 Section Création Artisanale */
@keyframes defilement-rtlScroll {
  100% {
    transform: translate3d(0,-100%,0);  /* position finale à gauche */
  }
}
@keyframes defilement-rtlScrollbis {
  0% {
    transform: translate3d(0,-100%,0);  /* position finale à gauche */
  }
  100% {
    transform: translate3d(0,0,0);  /* position finale à gauche */
  }
}

/* Animation au hover du menu dans le header */
.menuHeader ul li {
    transition: all 0.2s ease-in-out;
}

.contentHeader .menuHeader li:hover {
    font-size: 16px;
    font-weight: 600;
    color: #F7B4AC;
}


svg {
    position: absolute;
    top: 483px;
    left: 7px;
    width: 3.75em;
    transform-origin: center;
    animation: rotate 2s linear 4;
    display: none;
    z-index: 11;
  }
  
  circle {
    fill: none;
    stroke: #F7B4AC;
    stroke-width: 2;
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out 4;
  }
  
  @keyframes rotate {
    100% {
      transform: rotate(360deg);
    }
  }
  
  @keyframes dash {
    0% {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
    }
    50% {
      stroke-dasharray: 90, 200;
      stroke-dashoffset: -35px;
    }
    100% {
      stroke-dashoffset: -125px;
    }
  }
  
    /* hover du boutton Prendre RDV */
    .buttonPrendreRdv {
      z-index: 1;
      position: relative;
      font-size: inherit;
      font-family: inherit;
      color: white;
      padding: 0.5em 1em;
      outline: none;
      border: none;
      background-color: black;
    }
  .buttonPrendreRdv::before {
    content: '';
    z-index: -1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #F7B4AC;
    transform-origin: center left;
    transform: scaleX(0);
    transition: transform 0.2s ease-in-out;
  }
  .buttonPrendreRdv:hover {
    cursor: pointer;
  }
  
  .buttonPrendreRdv:hover::before {
    transform-origin: center right;
    transform: scaleX(1);
  }


  /* hover du boutton Contact */
  .sectionContacter button {
    z-index: 1;
    position: relative;
    font-size: inherit;
    font-family: inherit;
    color: white;
    padding: 0.5em 1em;
    outline: none;
    border: none;
    background-color: #F7B4AC;
  }
  
  .sectionContacter button::before {
    content: '';
    z-index: -1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: black;
    transform-origin: center left;
    transform: scaleX(0);
    transition: transform 0.2s ease-in-out;
  }
  
  .sectionContacter button:hover {
    cursor: pointer;
  }
  
  .sectionContacter button:hover::before {
    transform-origin: center right;
    transform: scaleX(1);
  }

  /* -----------------        Desktop        ----------------- */
@media screen and (min-width:1200px) {
  /* Défilement des deux titre */
  .sectionReseau .titre1 {
    animation: defilement-rtla 15s infinite linear;
  }
  .sectionReseau .titre1bis {
    animation: defilement-rtlabis 15s infinite linear;
  }
  .sectionReseau .contentReseau .titre2 {
    animation: defilement-rtlb 15s infinite linear;
  }
  .sectionReseau .contentReseau .titre2bis {
    animation: defilement-rtlbbis 15s infinite linear;
  }

  /* typed js ecriture */
  .typed-cursor {
    
  }
  /* Animation -> Défilement du H2 Section Création Artisanale */
  @keyframes defilement-rtla {
      0% {
        transform: translate3d(0,0,0);      /* position initiale à droite */
      }
      100% {
        transform: translate3d(-100%,0,0);  /* position finale à gauche */
      }
  }
  @keyframes defilement-rtlabis {
    0% {
      transform: translate3d(+100%,0,0);      /* position initiale à droite */
    }
    100% {
      transform: translate3d(0,0,0);  /* position finale à gauche */
    }
  }
  @keyframes defilement-rtlb {
    0% {
      transform: translate3d(0,0,0);      /* position initiale à droite */
    }
    100% {
      transform: translate3d(+100%,0,0);  /* position finale à gauche */
    }
  }
  @keyframes defilement-rtlbbis {
    0% {
      transform: translate3d(-100%,0,0);      /* position initiale à droite */
    }
    100% {
      transform: translate3d(0,0,0);  /* position finale à gauche */
    }
  }
}