*,*::before,*::after{box-sizing: border-box}



/*************ICONE HAMBURGER*******************/
input[type="checkbox"] {

position: absolute;
left: -100vw;

} 
    
.hamburger+label{
cursor: pointer;
width: 55px;
height: 55px;
display:flex;
align-items:center;
justify-content: center;
position: fixed;
top:0.5rem;
left:0rem;
z-index:1;
background:#fff;
border-radius: 9999px;
box-shadow:0 0 5px rgba(0, 0, 0, 0.4);
background: linear-gradient(#A9EAFE 0%, transparent 50%) 0 0/100% 100%;

  
}
    
.hamburger+label span {
  
background: #6753ea;
width: 30px;
height: 5px;
position: relative;

 
}
    
.hamburger+label span::before, 
.hamburger+label span::after {

  position: absolute;
  background: #6753ea;
  width: inherit;
  height: inherit;
  content: "";
}
  
.hamburger+label span::before {
  top: -10px;
}
.hamburger+label span::after {
  top: 10px;
}
  
.hamburger:checked+label span {
  
  background: transparent;
  
}
  
.hamburger:checked+label span::after,
.hamburger:checked+label span::before {

top: 0;
  
}
  
.hamburger:checked+label span::before {
  
  transform: rotate(45deg);
  
}
  
.hamburger:checked+label span::after {
  
  transform: rotate(-45deg);
  
}
/*************ICONE HAMBURGER*******************/



/*************MENU SLIDE*******************/
menu {
  
position: fixed;
left: 0;
top: 0;
height: 100%;
width: min(50%,240px);
background: #010113e0;
transform: translateX(-100%);
will-change: transform;

}
menu ul{
list-style-type: none;
padding-left:0%; 
margin-top: 6rem;
  
}
  
menu ul li{margin:1rem}  

menu a {
font-size:1rem;
color:white;
opacity: 0;
visibility: hidden;

}
  
.hamburger:checked+label~ menu{ 
  
transform: unset; /*on revient à l'état initial*/
    
}

.hamburger:checked+label~ menu a {
 
visibility: visible;
opacity: 1;
}

/*************MENU SLIDE*******************/


/*************Accessibilité*******************/
.hamburger:focus-visible~label,
menu a:focus-visible,
menu a:focus {

  outline: 2px solid #6753ea;
  outline-offset: 1px;
}
  
.hamburger:not(:focus-visible)~label,nav a:not(:focus):focus-visible{
  
    outline: none;
  } 
  
.hamburger:not(:focus-visible):focus~label{
  
  box-shadow: 0 0 0 4px hsl(248, 78%, 58%)
  
  }
  


@media (prefers-reduced-motion: no-preference) {
.hamburger+label span {transition: background 10ms 300ms;}
.hamburger+label span::before, 
.hamburger+label span::after{transition: top 300ms 350ms, transform 300ms 50ms;}
.hamburger:checked+label span::after,
.hamburger:checked+label span::before {transition: top 300ms 50ms, transform 300ms 350ms;}  
  
.hamburger:focus-visible~label,menu a:focus-visible,
menu a:focus  {transition: outline-offset .25s ease;}
  
menu{transition: transform 0.5s;}
menu a{transition: visibility 500ms,opacity 500ms 300ms;}
  
  
  }

.content{
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}
.content header{
  font-size: 30px;
  font-weight: 700;
}
.content .text{
  font-size: 30px;
  font-weight: 700;
}
.space{
  margin: 10px 0;
}
menu .logo.space{
  color: red;
  padding: 0 5px 0 0;
}
@media (max-width: 980px){
  menu .menu-icon,
  menu .cancel-icon,
  menu .search-icon{
    margin: 0 20px;
  }
  menu form{
    right: 30px;
  }
}
@media (max-width: 350px){
  menu .menu-icon,
  menu .cancel-icon,
  menu .search-icon{
    margin: 0 10px;
    font-size: 16px;
  }
}
.content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.content header{
  font-size: 30px;
  font-weight: 700;
}
.content .text{
  font-size: 30px;
  font-weight: 700;
}
.content .space{
  margin: 10px 0;
}

menu .connect{
margin-left: 30%;
padding-top: 70%;
}

li a:hover {
  color: #79F8F8;
}

.connect a:hover {
  color: #79F8F8;
}

/*************Accessibilité*******************/