body {
  height: 100vh!important;
  overflow: hidden;
  background: #fff;
}
.presentation-container  {
overflow: hidden;
height: 100%;
background-color: linear-gradient(to top right,var(--primaire),var(--primaire));
background-image: url(../img/bg-pattern.png);
background-position: center center;
position: relative;
}
.presentation-container::before  {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.presentation-container-width,.connexion-container  {
width: 40%;
position: relative;
}
.presentation-container .bar-top,.presentation-container .bar-bottom{
background-color: var(--secondaire);
background-color: var(--primaire);
border-radius: 5rem;
rotate: 45deg;
height: 3.5rem;
position: absolute;
}
.presentation-container .bar-top{
left: 0;
}.presentation-container .bar-bottom{
right: 0;
}
.presentation-container .bar-top:nth-child(1) {
top: -2rem;
inset-inline-start: -1.5rem;
width: 17rem;
}
.presentation-container .bar-top:nth-child(2) {
top: 2rem ;
inset-inline-start: -5rem;
width: 20rem;
}
.presentation-container .bar-top:nth-child(3) {
top: 3rem;
inset-inline-start: -9rem;
width: 17rem;
}
.presentation-container .bar-bottom:nth-child(7){
  bottom: 0;
  bottom: -2rem;
  inset-inline-end: -1.5rem;
  width: 17rem;
}
.presentation-container .bar-bottom:nth-child(6) {
bottom: 2rem ;
inset-inline-end: -5rem;
width: 20rem;
}
.presentation-container .bar-bottom:nth-child(5) {
bottom: 3rem;
inset-inline-end: -9rem;
width: 17rem;
}
.logo{
  width:10rem;
  margin-bottom:1rem;
}
.presentation-container p{
  text-align: center;
  font-size: 1.25rem;
  margin: 0 auto 2rem;
  font-family: "AirbnbCerealMedium";
}
.connexion-container{
position: relative;
}
.connexion-container em{
  display: block;
  text-align: center;
  font-size: .9rem;
}
.connexion-container  .input-group {
  padding:0 1rem;
  border: 1px solid var(--primaire);
  margin: 2rem 0;
  border-radius: .75rem;
  background: rgba(255,255,255,.7);
}
.connexion-container .input-group input{
  border: 0;
  background-color: transparent;
}
.connexion-container .input-group:focus-within {
background: rgba(255,255,255,1);
}
.connexion-container .input-group:focus-within input{
background: transparent;

}
.input-group span.icon {
text-align: center;
width:6%;
/* padding: 1rem 0px; */
color: var(--primaire);
font-size: 1.25rem;
display: flex;
align-items: center;
}
.connexion-container a {
  font-size: .9rem;
  display: inline-block;
  font-family: "AirbnbCerealLight";
  margin-top: -1rem;
    margin-bottom: 1rem;
    cursor: pointer;
}
.connexion-container a:hover{
  text-decoration: underline;
}
.connexion-container button,.connexion-container a.button {
  background: var(--primaire);
  border: none;
  color: #fff;
  padding: 1rem;
  border-radius: .75rem;
  width: 100%;
  text-align: center;
  font-family: "AirbnbCerealBook";



  /* display: inline-flex;
    align-items: center;
    justify-content: center;
    border-width: 1.5px;
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    background-color: rgba(76, 53, 222, var(--tw-bg-opacity));
    padding: .875rem 1.25rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    line-height: 1.5rem;
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, var(--tw-text-opacity));
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgba(76,53,222,var(--tw-ring-opacity));
    --tw-ring-opacity: 0.4;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s; */
}
.connexion-container .btn-block:hover{
  background: var(--primaire-700);
}
.footer{
  position: absolute;
  bottom: 1rem;
}