body {
  /* height: 100vh!important;
  overflow: hidden; */
  background-image: url(../img/bg-pattern.png);
  background-position: center center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
body:before {
  content: '';
  position: absolute;
  background-color: var(--primaire-100);
  width: 50%;
  height: 100%;
  left: 0;
}
/*:::::::::::::::::::::: Page de presentation de l'application ::::::::::::::::::::::*/
.container-akwaba-sign-presentation{
  padding: 1rem;
  height: 100vh !important;
  overflow-y: visible;
  width: 100%;
  max-width: 64rem;
  max-width: 75rem;
  position: relative;
}
.container-akwaba-sign-presentation + .footer{ display: none!important;}
.container-akwaba-sign-presentation .container-akwaba-sign-presentation-titre{
  display: flex;
  background-color: #fff;
  border-radius: 1rem;
  padding: 0;
}
.container-akwaba-sign-presentation .container-akwaba-sign-presentation-titre > *{
  width: 100%;
  flex: 1 ;
}
.container-akwaba-sign-presentation .akwaba-sign-logo-container{
  display: flex;
  align-items: flex-end;
}
.container-akwaba-sign-presentation .akwaba-sign-logo{
  width: 20rem;
  margin-bottom: -2.1rem;
}
.container-akwaba-sign-presentation .akwaba-sign-logo + .app-version{
  font-size: var(--size-14);
  font-family: "AirbnbCerealBook";
  color: var(--gray-700);
}
.container-akwaba-sign-presentation .akwaba-sign-logo + .app-version b{
  font-family: "AirbnbCerealExtraBold";
  color: var(--primaire);
}
.container-akwaba-sign-presentation .container-akwaba-sign-presentation-titre .akwaba-sign-text{
  background-color: var(--gray-200);
  border-radius: 0 1rem 1rem 0;
}
.container-akwaba-sign-presentation .container-akwaba-sign-presentation-titre .akwaba-sign-text h6{
  font-size: .9rem;
  padding: .5rem;
  color: var(--gray-900);
  font-family: "AirbnbCerealLight";
}
.container-akwaba-sign-presentation .container-akwaba-sign-presentation-titre .akwaba-sign-text b{
  margin-top: .25rem;
  color: #000;
  font-size: .9rem;
  display: block;
}
.container-akwaba-sign-plateforme{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 2rem auto 1rem;
}
.container-akwaba-sign-plateforme h1{
  text-align: center;
  font-size: 1.25rem;
  text-transform: uppercase;
  font-family: "AirbnbCerealBold";
}
.container-akwaba-sign-plateforme p{
  font-size: .95rem;
  margin: .25rem auto;
}
.container-akwaba-sign-plateforme h5{
  text-align: center;
  font-size: 1.25rem;
  font-family: "AirbnbCerealMedium";
}
.container-akwaba-sign-appui{
  position: relative;
 }
.container-akwaba-sign-appui p{
  font-family: "AirbnbCerealBold";
  font-size: var(--size-16);
  text-align: left;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}
.container-akwaba-sign-presentation .container-akwaba-sign-actions{
  display: flex;
  align-items: flex-start;
  align-items: center;
}
.container-akwaba-sign-presentation .container-akwaba-sign-actions > *{
  width: 100%;
  flex: 1 ;
}
.container-akwaba-sign-appui .container-akwaba-sign-appui-logo{
  display: flex;
  align-items: flex-end;
  gap: 1rem;
}
.container-akwaba-sign-appui img{
    border-radius: 8px;
    overflow: hidden;
}
.container-akwaba-sign-appui img{
  width: 10rem;
}
.container-akwaba-sign-appui img.img-big{
  width: 15rem;
}
.container-akwaba-sign-illustration{
  padding: .5rem;
  height: 25rem;
  display:flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  background-image: url(../img/illustration-akwabasign.png),url(../img/illustration-afrique.jpg);
  background-image: url(../img/illustration-akwabasign.png);
  background-position: center,center;
  background-position: center;
  background-size: contain,30rem;
  background-size: 22rem;
  background-repeat: no-repeat,no-repeat;
  background-repeat: no-repeat;
}
.container-akwaba-sign-illustration a{
  background-color:var(--primaire);
  height: var(--size-38);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--size-4);
  color: #fff;
  filter: drop-shadow(0 2px 8px rgba(77, 194, 71, .44));
  padding: .25rem .5rem;
  font-size: var(--size-16);
  font-family: "AirbnbCerealMedium";
  word-break: keep-all;
  width: 100%;
  margin-bottom: -2rem;
  margin-left: 2rem; 
  gap: .5rem;
}
.container-akwaba-sign-illustration a:first-child{
  background-color:#fff;
  color: var(--primaire);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .24));
}
.container-akwaba-sign-illustration a i{
  font-size: var(--size-22);
  color: #fff;
}
.container-akwaba-sign-illustration a:first-child i{
  color: var(--gray-900);
}
/*:::::::::::::::::::::: Page de paiement de forfait ::::::::::::::::::::::*/
.container-recherche{
  max-width: 480;
}
.container-recherche .logo{
  width: 25rem;
  margin-bottom: -2rem;
}
.container-recherche h2{
  text-align: center;
  font-size: 1.125rem;
  margin: 0 auto 1rem;
  font-family: "AirbnbCerealMedium";
}
.container-recherche h1 {
  position: relative;
  max-width: 24rem;
  text-align: center;
  margin: 0 auto;
}
.container-recherche  h1::before,.container-recherche  h1::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30%;
  height: .125rem;
  background: linear-gradient(to left, #ff0000, #0000ff);
  z-index: 1;
}
.container-recherche  h1::before{
  background: linear-gradient(to left, var(--primaire), var(--primaire-100));
  left: 0;
}
.container-recherche  h1::after {
  background: linear-gradient(to right, var(--primaire), var(--primaire-100));
  right: 0;
}
.container-recherche h1 span {
  position: relative;
  z-index: 3;
  font-family: "AirbnbCerealBold";
  font-size: var(--size-14);
}
.container-recherche .container-forfait, .container-recherche  button-{
  position: relative;
  padding: 1rem 1.2rem!important;
  border-radius: 1rem;
  max-width: 21rem;
  text-align: center;
  margin: .5rem auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  gap: 1.5rem;
}
.container-connexion label,.container-connexion input[type="radio"],
.container-recherche .container-forfait label,.container-recherche .container-forfait input[type="radio"] {
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.container-recherche .container-forfait label,.input-group-pass,.container-connexion label {
	border-radius: .75rem;
  display: flex;
  align-items: center;
  padding: .75rem 1.5em;
  transition: background-color 0.3s;
  justify-content: space-between;
  border: 2px solid var(--gray-400);
  background-color: var(--gray-100);
}
.input-group-pass {
	border-radius: 2rem;
}
.container-connexion label:has(input[type="radio"]:checked),
.container-connexion label:hover,
.container-recherche .container-forfait label:has(input[type="radio"]:checked),
.container-recherche .container-forfait label:hover {
	background-color: var(--primaire-100);
  border-color: var(--primaire);
}
.container-connexion label span,.container-recherche .container-forfait label span {
	width: 100%;
  font-family: "AirbnbCerealMedium";
  font-size: var(--size-14);
}
.container-connexion input[type="radio"],.container-recherche .container-forfait input[type="radio"] {
	background-color: var(--gray-200);
	border-radius: 50%;
	flex-shrink: 0;
	position: relative;
	width: 1.25rem;
	height: 1.25rem;
	transition: background-color 0.3s, box-shadow 0.3s;
	-webkit-appearance: none;
	appearance: none;
}
.container-connexion input[type="radio"]:before,
.container-connexion input[type="radio"]:after,
.container-recherche .container-forfait input[type="radio"]:before,
.container-recherche .container-forfait input[type="radio"]:after {
	border-radius: 50%;
	content: "";
	display: block;
	position: absolute;
	transform: scale(0);
	transition: transform var(--trans-dur) var(--trans-timing);
}
.container-connexion input[type="radio"]:before,.container-recherche .container-forfait input[type="radio"]:before {
	top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.container-connexion input[type="radio"]:after,.container-recherche .container-forfait input[type="radio"]:after {
	background-color: var(--primaire);
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
}
.container-connexion input[type="radio"]:checked:before,
.container-connexion input[type="radio"]:checked:after,
.container-recherche .container-forfait input[type="radio"]:checked:before,
.container-recherche .container-forfait input[type="radio"]:checked:after {
	transform: scale(1);
}
.container-recherche .container-forfait .input-group-pass {
  padding: 0;
}
.container-recherche .container-forfait .input-group-pass span{
  padding: 0;
  margin-left: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6%;
  color: var(--primaire);
  font-size: 1.5rem;
  background-color: transparent;
}
.container-recherche .container-forfait .input-group-pass input{
  height: var(--size-48);
  border: 0;
  background-color: var(--gray-100);
  font-size: var(--size-14);
}
.container-recherche  button,.container-recherche  a.button{
  margin: 0 auto;
  width: 100%;height: var(--size-48);
  border-radius: 2rem !important;
  display: flex;
  align-items: center;
  padding: .75rem 1.5em !important;
  transition: background-color 0.3s;
  justify-content: space-between;
}
.container-recherche  button span,.container-recherche  a.button span{
  width: 100%;font-size: var(--size-16);
  color: #fff;
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}
.container-recherche  button i,.container-recherche  a.button i{
  font-size: var(--size-24);
  color: #fff;
}
.container-recherche .input-group-pass button{
  width: var(--size-48);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0 !important;
}
/*:::::::::::::::::::::: Page de presentation de l'application ::::::::::::::::::::::*/
.container-recherche,.container-connexion  {
  max-width: 520px;
  position: relative;
  width: 100%;
  text-align: center;
}
.container-connexion .logo{
  width: 25rem;
  margin-bottom: -2rem;
}
.container-connexion h2{
  text-align: center;
  font-size: 1.25rem;
  margin: 0 auto 1rem;
  font-family: "AirbnbCerealMedium";
}
.container-connexion  .input-group {
  padding: .2rem 1rem;
  border: 1px solid var(--primaire);
  margin: 2rem 0;
  border-radius: .75rem;
  background-color: rgba(255,255,255,.7);
  height: 3rem;
}
.container-connexion .input-group:focus-within {
background: rgba(255,255,255,1);
}
.container-connexion .input-group:focus-within input{
  background: transparent;
}
.container-connexion .input-group input,.container-connexion .input-group select {
  border: 0;
  background-color: transparent;
  height: 2.5rem;
}
.container-connexion .input-group select {
  margin: 0 -1rem;
}
.container-connexion .input-group span.icon,.container-connexion a.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width:6%;
  color: var(--primaire);
  font-size: 1.25rem;
  background-color: transparent;
}
/* .container-connexion button {
  padding: 1rem 1rem !important;
  font-size: 1rem;
} */
.container-connexion a {
  /* font-size: .9rem; */
  font-family: "AirbnbCerealLight";
  display: flex;
  align-items: center;
  justify-content: center;
}
.container-connexion a:not(.icon):hover{
  text-decoration: underline;
}
.container-connexion a.shadow {
  position: relative;
  font-size: .9rem;
  font-family: "AirbnbCerealLight";
  background: var(--primaire);
  color: #fff;
  margin: auto;
  padding: .8rem 3rem;
  box-shadow: 0px 15px 30px rgba(50, 50, 50, 0.21) !important;
  border-radius: var(--size-25);
  transition: all .4s ease;
  width: 19rem;
  text-align: center;
}
.container-connexion a.shadow:hover {
  box-shadow: 0px 15px 30px rgba(50, 50, 50, 0.41)!important;
	transition: all .4s ease;
  text-decoration: none;
}
a.close {
  position: absolute;
  top: 1rem;
  right: 1rem;
}
a.close:hover {
  opacity: .7;
  text-decoration: none;
}
a.close i {
  color: var(--danger);
  font-size: var(--size-45);
}
@media screen and (max-width: 767px) {
  body {
      padding-left: 1rem;
      padding-right: 1rem;
      padding-bottom: 1rem;
      overflow-y: visible;
      height: 100%!important;
  }
  body:before {width: 100%;height: 100%;top: 0;bottom: 0;}
  .container-akwaba-sign-presentation{
    padding: 0;
  }
  .container-akwaba-sign-presentation .akwaba-sign-logo-container {
    justify-content: center;
  }
  .container-akwaba-sign-presentation .akwaba-sign-logo{
    width: 80%;
    margin-bottom: -1.1rem;
  }
  .container-akwaba-sign-presentation .akwaba-sign-logo + .app-version{
    line-height: 1;
  }
  .container-akwaba-sign-plateforme {
    margin: 1rem auto;
  }
  .container-akwaba-sign-plateforme h1,.container-recherche h2{
    font-size: 1rem;
    color: #000;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .container-akwaba-sign-plateforme h5,.container-connexion h2{
    font-size: 1rem;
    font-family: "AirbnbCerealBold";
  }
  .container-akwaba-sign-appui p{
    margin-bottom: 0;
    text-align: center;
    font-size: var(--size-14);
  }
  .container-akwaba-sign-appui .container-akwaba-sign-appui-logo{
    width: 100%;
    justify-content: center;
  }
  .container-akwaba-sign-appui .container-akwaba-sign-appui-logo a{
    text-align: center;
  }
  .container-akwaba-sign-appui .container-akwaba-sign-appui-logo a img:not(.img-big){
    width: 6rem;
  }
  .container-akwaba-sign-appui .container-akwaba-sign-appui-logo a img.img-big{
    width: 8rem;
  }
  .container-akwaba-sign-presentation .container-akwaba-sign-actions{
      align-items: center;
      flex-direction: column-reverse;
  }
  .container-akwaba-sign-presentation .container-akwaba-sign-actions > * {
    width: 100%;
    flex: unset;
  }
  .container-akwaba-sign-presentation .container-akwaba-sign-actions .container-akwaba-sign-illustration{
    background-size: contain;
    height:15rem;
    margin-top: 0;
  }
  .container-akwaba-sign-illustration a{
    margin-left: 0;
    margin-bottom: -4rem;
  }
  .container-recherche .logo{
    width: 80%;
  }
  .container-akwaba-sign-appui{margin-top: 4rem;}
  .container-connexion .logo { width: 100%; }
  .container-recherche .container-forfait label, .container-connexion label {
    border-radius: .75rem;
    padding: .75rem .25rem;
}
  .footer{  position: relative; bottom: 0; }
  /* .whatsapp-button,.mail-button{
    top: 50%;
    transform: translateX(-50%);
    bottom: 0;
    right: -1rem;
  }
  .mail-button{
    top: 40%;
  } */
}