/* Mobile uniquement :
   escargot animé gauche -> droite,
   posé en bas du header, juste au-dessus de la nav,
   sans créer de débordement horizontal.
*/

html,
body{
  max-width:100% !important;
  overflow-x:hidden !important;
}

@supports (overflow-x: clip){
  html,
  body{
    overflow-x:clip !important;
  }
}

@media (max-width:768px){
  .header-animation{
    position:relative !important;
    overflow:hidden !important;
    max-width:100vw !important;

    /* hauteur du ciel avant la nav */
    height:126px !important;
    min-height:126px !important;

    margin-bottom:0 !important;
    padding-bottom:0 !important;
    box-sizing:border-box !important;
  }

  .header-animation #snail{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    position:absolute !important;
    left:-128px !important;
    right:auto !important;

    /* point important : posé en bas du header */
    top:auto !important;
    bottom:-2px !important;

    transform-origin:left bottom !important;
    animation:edoSnailWalkOnNavLine 22s linear infinite !important;

    z-index:20 !important;
    pointer-events:none !important;
  }

  .header-animation #shell,
  .header-animation #slug{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:none !important;
  }

  .header-animation #slime{
    display:none !important;
  }

  .custom-nav{
    margin-top:0 !important;
  }

  @keyframes edoSnailWalkOnNavLine{
    0%{
      transform:translateX(0) scale(.64);
    }
    100%{
      transform:translateX(calc(100vw + 130px)) scale(.64);
    }
  }
}

@media (max-width:430px){
  .header-animation{
    height:122px !important;
    min-height:122px !important;
  }

  .header-animation #snail{
    left:-120px !important;
    bottom:-2px !important;
  }

  @keyframes edoSnailWalkOnNavLine{
    0%{
      transform:translateX(0) scale(.58);
    }
    100%{
      transform:translateX(calc(100vw + 120px)) scale(.58);
    }
  }
}

@media (max-width:390px){
  .header-animation{
    height:118px !important;
    min-height:118px !important;
  }

  .header-animation #snail{
    left:-112px !important;
    bottom:-1px !important;
  }

  @keyframes edoSnailWalkOnNavLine{
    0%{
      transform:translateX(0) scale(.54);
    }
    100%{
      transform:translateX(calc(100vw + 112px)) scale(.54);
    }
  }
}