/*STYLES GENERAUX*/
*{
  font-family: Avenir, sans-serif;
  padding: 0px;
  margin: auto 0px;
  box-sizing: border-box;
  background-color: #000;
  color: #fff;
  text-align: center;
}
html {
  width: 100%;
}
body{
  color: transparent;
  display: grid;
	grid-template-rows: 2.5em auto auto;
	grid-template-areas: 'header' 'main' 'footer';
	background-color: transparent;
}
body::-webkit-scrollbar {
  width: 5px; /* width of the entire scrollbar */
}
body::-webkit-scrollbar-track {
  background: black /* color of the tracking area */
}
body::-webkit-scrollbar-thumb {
  background-color: rgb(255, 255, 255); /* color of the scroll thumb */
  border-radius: 20px; /* roundness of the scroll thumb */
  border: 3px solid white; /* creates padding around scroll thumb */
} 
header {
  width: 100%;
  padding-top: 1rem;
  margin: 0 auto;
  grid-area: header;
  display: flex;
  flex-flow: column;
	background-color: #000;
	z-index: 3;
}
#head_er {
  text-align: center;
  color: #fff;
  font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 1.8em;
}
main {
  width: 100%;
  margin: 0 auto;
  grid-area: main;
  display: flex;
  flex-direction: column;
  padding-top: 8rem;
  margin-bottom: -15rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
footer {
  width: 100%;
  margin: 0 auto;
  background-color: #000;
  grid-area: footer;
  display: flex;
  flex-flow: column;
}
footer a {
  text-decoration: none;
}
footer a img{
  width: 100px;
  height: auto;
  margin: auto;
  /* display:flex; */
}
#progress{
  background-color: #ffffff;
  height: 3px;
  width: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999; /* Peut être important si vous avez un menu en position fixe */
}
.cat {
  position: relative;
  height: 170px;
  width: 192.1px;
  margin-bottom: 25em;
}
.ear {
  position: absolute;
  top: -30%;
  height: 60%;
  width: 25%;
  background: #fff;
}
.ear::before, .ear::after {
  content: "";
  position: absolute;
  bottom: 24%;
  height: 10%;
  width: 5%;
  border-radius: 50%;
  background: #161616;
}
.ear::after {
  transform-origin: 50% 100%;
}

.ear--left {
  left: -7%;
  border-radius: 70% 30% 0% 0%/100% 100% 0% 0%;
  transform: rotate(-15deg);
}
.ear--left::before, .ear--left::after {
  right: 10%;
}
.ear--left::after {
  transform: rotate(-45deg);
}

.ear--right {
  right: -7%;
  border-radius: 30% 70% 0% 0%/100% 100% 0% 0%;
  transform: rotate(15deg);
}
.ear--right::before, .ear--right::after {
  left: 10%;
}
.ear--right::after {
  transform: rotate(45deg);
}
.face {
  position: absolute;
  height: 100%;
  width: 100%;
  background: #161616;
  border-radius: 50%;
}
.eye {
  position: absolute;
  top: 35%;
  height: 30%;
  width: 31%;
  background: #fff;
  border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
}
.eye::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 100%;
  border-radius: 0 0 50% 50%/0 0 40% 40%;
  background: #161616;
  -webkit-animation: blink 4s infinite ease-in;
          animation: blink 4s infinite ease-in;
}
@-webkit-keyframes blink {
  0% {
    height: 0;
  }
  90% {
    height: 0;
  }
  92.5% {
    height: 100%;
  }
  95% {
    height: 0;
  }
  97.5% {
    height: 100%;
  }
  100% {
    height: 0;
  }
}
@keyframes blink {
  0% {
    height: 0;
  }
  90% {
    height: 0;
  }
  92.5% {
    height: 100%;
  }
  95% {
    height: 0;
  }
  97.5% {
    height: 100%;
  }
  100% {
    height: 0;
  }
}
.eye::before {
  content: "";
  position: absolute;
  top: 60%;
  height: 10%;
  width: 15%;
  background: #fff;
  border-radius: 50%;
}
.eye--left {
  left: 0;
}
.eye--left::before {
  right: -5%;
}

.eye--right {
  right: 0;
}
.eye--right::before {
  left: -5%;
}
.eye-pupil {
  position: absolute;
  top: 25%;
  height: 50%;
  width: 20%;
  background: #161616;
  border-radius: 50%;
  -webkit-animation: look-around 4s infinite;
          animation: look-around 4s infinite;
}
@-webkit-keyframes look-around {
  0% {
    transform: translate(0);
  }
  5% {
    transform: translate(50%, -25%);
  }
  10% {
    transform: translate(50%, -25%);
  }
  15% {
    transform: translate(-100%, -25%);
  }
  20% {
    transform: translate(-100%, -25%);
  }
  25% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes look-around {
  0% {
    transform: translate(0);
  }
  5% {
    transform: translate(50%, -25%);
  }
  10% {
    transform: translate(50%, -25%);
  }
  15% {
    transform: translate(-100%, -25%);
  }
  20% {
    transform: translate(-100%, -25%);
  }
  25% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
.eye--left .eye-pupil {
  right: 30%;
}
.eye--right .eye-pupil {
  left: 30%;
}
.eye-pupil::after {
  content: "";
  position: absolute;
  top: 30%;
  right: -5%;
  height: 20%;
  width: 35%;
  border-radius: 50%;
  background: #fff;
}
.muzzle {
  position: absolute;
  top: 60%;
  left: 50%;
  height: 6%;
  width: 10%;
  background: #fff;
  transform: translateX(-50%);
  border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;
}
.bloc {
  color: #fff;
}
#gal_img {
  top: -30%;
  height: 200px;
  width: 500px;
  margin: 50px auto;
  position: relative;
}
#gal_img img {
  border-radius: 10%;
  height: 115px;
  position: absolute;
  left: 0;
  offset-path: path('m 0 50 q 50-50 100-50 t 100 50 100 0 100-50 100 50');
  box-shadow: 1px 1px 3px #0008;
  transition: transform .4s ease-out, offset-path .4s cubic-bezier(.77,-1.17,.75,.84),box-shadow .3s, z-index .3s;
  z-index: 0;
}
#gal_img img:hover {
  transform: scale(4);
  /* on hover, the path gets a bit shorter & flattened & shifted to left/bottom a bit for nicer movement */
  offset-path: path('m 5 65 q 45-0 100-0 t 100 0 100 0 100-0 100 0');
  box-shadow: 3px 4px 10px #0006;
  z-index: 999;
}
/* 3 images */
#gal_img img:nth-last-child(3):first-child {
  offset-distance: 25%;
}
#gal_img img:nth-last-child(2):nth-child(2) {
  offset-distance: 50%;
}
#gal_img img:last-child:nth-child(3) {
  offset-distance: 75%;
}
#gal_img_2 {
  top: -25%;
  height: 200px;
  width: 500px;
  margin: 100px auto;
  position: relative;
  margin-bottom: -3em;
}
#gal_img_2 img {
  border-radius: 10%;
  height: 115px;
  position: absolute;
  left: 0;
  offset-path: path('m 0 50 q 50-30 100-30 t 100 30 100 0 100-30 100 30');
  box-shadow: 1px 1px 3px #0008;
  transition: transform .4s ease-out, offset-path .4s cubic-bezier(.77,-1.17,.75,.84),box-shadow .3s, z-index .3s;
  z-index: 0;
}
#gal_img_2 img:hover {
  transform: scale(4);
  /* on hover, the path gets a bit shorter & flattened & shifted to left/bottom a bit for nicer movement */
  offset-path: path('m 5 65 q 45-0 90-0 t 90 0 90 0 90-0 90 0');
  box-shadow: 3px 4px 10px #0006;
  z-index: 999;
}
/* 2 images */
#gal_img_2 img:nth-last-child(2):first-child {
  offset-distance: 30%;
}
#gal_img_2 img:nth-last-child(1):nth-child(1) {
  offset-distance: 49%;
}
#gal_img_2 img:last-child:nth-child(2) {
  offset-distance: 70%;
}
#contour_animation {
  border: none;
  background-color: transparent;
  font-family: inherit;
  position: relative;
  display: inline-block;
  padding: 20px;
  color: #ffffff;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: .5s;
  margin-top: -35px;
  letter-spacing: 4px;
  box-shadow: -1px -1px 2px #000000;

}
#contour_animation a {
  text-decoration: none;
  color: #ffffff;
  text-align: center;
}
#contour_animation:hover{
  box-shadow: -1px -1px 5px #000000;
}
#contour_animation > span {
  position: absolute;
  display: block;
}
#contour_animation > span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ffffff);
  animation: btn-anim1 1s linear infinite;
}
#contour_animation > span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #ffffff);
  animation: btn-anim2 1s linear infinite;
  animation-delay: .25s
}
#contour_animation > span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #ffffff);
  animation: btn-anim3 1s linear infinite;
  animation-delay: .5s
}
#contour_animation > span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #ffffff);
  animation: btn-anim4 1s linear infinite;
  animation-delay: .75s
}
#contour_animation:hover {
  background: #ffffff00;
  color: #fff;
  border-radius: 2px;
  box-shadow: 0 0 5px #ffffff,
                          0 0 25px #ffffffa2,
                          0 0 50px #ffffff57,
                          0 0 100px #ffffff00;
}
#contour_animation:hover {
  background: rgba(255, 255, 255, 0);
  color: #fff;
  border-radius: 2px;
  box-shadow: 0 0 5px #ffffff, 0 0 25px rgba(255, 255, 255, 0.6352941176), 0 0 50px rgba(255, 255, 255, 0.3411764706), 0 0 100px rgba(255, 255, 255, 0);
}
@-webkit-keyframes btn-anim1 {
  0% {
    left: -100%;
  }
  50%, 100% {
    left: 100%;
  }
}
@keyframes btn-anim1 {
  0% {
    left: -100%;
  }
  50%, 100% {
    left: 100%;
  }
}
@-webkit-keyframes btn-anim2 {
  0% {
    top: -100%;
  }
  50%, 100% {
    top: 100%;
  }
}
@keyframes btn-anim2 {
  0% {
    top: -100%;
  }
  50%, 100% {
    top: 100%;
  }
}
@-webkit-keyframes btn-anim3 {
  0% {
    right: -100%;
  }
  50%, 100% {
    right: 100%;
  }
}
@keyframes btn-anim3 {
  0% {
    right: -100%;
  }
  50%, 100% {
    right: 100%;
  }
}
@-webkit-keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }
  50%, 100% {
    bottom: 100%;
  }
}
@keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }
  50%, 100% {
    bottom: 100%;
  }
}
#insta {
  text-align: center;
  border-radius: 15%;
  color: #fff;
  background-color: #000;
  width: 100px;
  height: auto;
}
footer p {
  text-align: center;
  border-radius: 15%;
  color: #fff;
  background-color: #000;
}
.ligne::before {
  margin-top: 15px;
  margin-bottom: 15px;
content: ""; 
display: inline-flex;
background-color: #fff; 
height: 1px; 
animation-name: linenormal ;
animation-timing-function: ease-in-out;
animation-duration: 3s;
animation-direction: alternate;
animation-iteration-count: infinite;
}
@keyframes linenormal {
from {margin-left: 50%;
    width: 0%; opacity: 0;}
to {width: 100%; opacity: 1.0;}
}