/* screen - profil */

.profil {
  align-items: flex-start;
  background-color: var(--white);
  border: 1px none;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  width: 100%;
}

.profil .frame-1356 {
  align-items: center;
  background-color: var(--sangria);
  box-shadow: 0px 0px 4px #00000040;
  display: flex;
  height: 82px;
  min-width: 100%;
  padding: 9px 26px;
  z-index: 10000;
  position: fixed;
}

.profil .feather-icon-menu {
  height: 20px;
  margin-top: 6.0px;
  width: 20px;
}

/*.profil .overlap-group4 {
  align-items: flex-end;
  background-color: var(--white);
  display: flex;
  height: 35px;
  margin-left: 51px;
  margin-top: 5.0px;
  min-width: 330px;
  padding: 4px 6px;
}*/

.profil .icon-search {
  height: 26px;
  width: 27px;
}

.profil .group-94 {
  align-items: center;
  align-self: flex-start;
  display: flex;
  gap: 24px;
  margin-left: auto;
  margin-right: 0px;
  min-width: 447px;
}

.profil .overlap-group-1 {
  height: 40px;
  margin-bottom: 2.95px;
  position: relative;
  width: 232px;
}

.profil .rectangle-272 {
  background-color: var(--mint-julep);
  border-radius: 50px;
  height: 39px;
  left: 0;
  position: absolute;
  top: 1px;
  width: 232px;
}

.profil .acheter-des-jetons {
  height: 39px;
  left: 13px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  text-align: center;
  top: 0;
  width: 176px;
}

.profil .openmojicoin {
  height: 39px;
  left: 184px;
  position: absolute;
  top: 1px;
  width: 43px;
}

.profil .group-82 {
  height: 32px;
  margin-top: 1.0px;
  width: 103px;
}

.profil .rectangle-6 {
  height: 63px;
  object-fit: cover;
  width: 64px;
}

.profil .flex-row {
  align-items: flex-start;
  display: flex;
  gap: 42px;
  height: 100%;
  min-width: 100%;
}

.profil .rectangle-10 {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 296px;
  min-height: 500px;
  margin-top: 150px;
  border-right: solid 2px var(--sangria);
  padding: 68px 0;
  width: 206px;
  height: 500px;
}

.profil .frame-7 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  height: 296px;
  margin-right: 24.0px;
  margin-top: -75px;
  width: 98px;
}

.profil .accueil {
  color: var(--black-2);
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-xxxl);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  white-space: nowrap;
}

.profil .span-1 {
  color: var(--eerie-black);
}

.profil .rectangle-5 {
  background: linear-gradient(180deg, rgba(238, 236, 250, 0) 0%, rgb(249, 249, 249) 51.44%, rgba(238, 236, 250, 0) 100%);
  border-radius: 18px;
  height: 40px;
  margin-top: 41px;
  width: 2px;
}

.profil .rectangle-9 {
  background-color: var(--white);
  height: 198px;
  margin-right: 0;
  transform: rotate(-1.57deg);
  width: 100%;
}

.profil .flex-col {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-top: 7.5%;
  min-height: 80%;
  width: 80%;
  margin-right: auto;
  
}

.profil .title {
  height: 83px;
  letter-spacing: 0;
  line-height: normal;
  margin-right: 0.8px;
  margin-top: -1px;
  width: 651px;
}

.profil .group-126 {
  align-items: center;
  display: flex;
  gap: 39px;
  height: 573px;
  margin-top: 50px;
  min-width: 100%;
}

.profil .div {
  align-items: center;
  background-color: var(--white);
  border-radius: 12px;
  box-shadow: 0px 1px 6px #0000000a , 0px 1px 15px #0000000a;
  display: flex;
  flex-direction: column;
  margin-top: 0.4px;
  min-height: 225px;
  padding: 0 3.6px;
  width: 385px;
}

.profil .rectangle-6-1 {
  height: 200px;
  margin-left: 32.0px;
  margin-top: -134px;
  object-fit: cover;
  width: 195px;
}

.profil .div-1 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-right: 12.61px;
  min-height: 87px;
  padding: 1.6px 76.9px;
  width: 304px;
}

.profil .name {
  align-self: center;
  height: 22px;
  letter-spacing: 0;
  line-height: normal;
  margin-right: 0.54px;
  margin-top: 25px;
  min-width: 115px;
  text-align: center;
}

.profil .p {
  align-items: flex-start;
  align-self: flex-end;
  display: flex;
  gap: 31px;
  height: 27px;
  margin-top: 31px;
  min-width: 360px;
  padding: 4.0px 87.7px;
}

.profil .group-74 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  min-height: 573px;
  width: 80%;
  margin-left: 80px;
}

.profil .div-2 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 20px;
  width: 782px;
}

.profil .modifier-mon-nom-du {
  height: 16px;
  letter-spacing: 0;
  line-height: normal;
  margin-left: 15px;
  margin-top: 1px;
}

.profil .div-3 {
  align-self: center;
  height: 1px;
  width: 752px;
}

.profil .form {
  margin-top: 48px;
  min-height: 150px;
}

.profil .overlap-group1 {
  height: 42px;
  margin-top: -6px;
  position: relative;
  width: 769px;
}

.profil .input {
  align-items: flex-start;
  background-color: var(--white);
  border-radius: 1.6px;
  display: flex;
  height: 35px;
  left: 0;
  min-width: 769px;
  padding: 7.8px 12.8px;
  position: absolute;
  top: 6px;
}

.profil .amel {
  height: 17px;
  letter-spacing: 0;
  line-height: normal;
}

.profil .overlap-group-2 {
  height: 11px;
  left: 3px;
  position: absolute;
  top: 0;
  width: 121px;
}

.profil .labelafter {
  width: 121px;
}

.profil .nom-et-prnom-pseudo {
  height: 11px;
  left: 0;
  letter-spacing: 0;
  line-height: 10.2px;
  position: absolute;
  top: 0;
  white-space: nowrap;
}

.profil .div-4 {
  align-items: center;
  align-self: flex-end;
  display: flex;
  gap: 27px;
  margin-top: 16px;
  min-width: 774px;
}

.profil .choisissez-votre-langue-pour-les-emails {
  height: 20px;
  letter-spacing: 0;
  line-height: 19.2px;
  margin-bottom: 3.4px;
  min-width: 219px;
  white-space: nowrap;
}

.profil .button {
  background-color: var(--cararra);
  gap: 3px;
  height: 35px;
  min-width: 52px;
  padding: 6.8px 16.8px;
}

.profil .button-1 {
  background-color: var(--sangria);
  box-shadow: 0px 1px 3px 1px #00000026 , 0px 1px 2px #00000026;
  height: 40px;
  margin-top: 24px;
  overflow: hidden;
  padding: 9.2px 40.8px;
  width: 150px;
}

.profil .div-5 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  margin-top: 78px;
  min-height: 20px;
  width: 782px;
}

.profil .modifier-mon-mot-de-passe {
  height: 20px;
  letter-spacing: 0;
  line-height: 19.2px;
  margin-left: 15px;
  margin-top: -1px;
  white-space: nowrap;
}

.profil .div-6 {
  align-self: center;
  height: 1px;
  width: 752px;
}

.profil .form-1 {
  margin-left: 4px;
  margin-top: 31px;
  min-height: 226px;
}

.profil .overlap-group1-1 {
  height: 42px;
  margin-top: -6px;
  position: relative;
  width: 782px;
}

.profil .div-7 {
  align-items: flex-start;
  background-color: var(--white);
  border-radius: 1.6px;
  display: flex;
  height: 35px;
  justify-content: flex-end;
  left: 0;
  min-width: 782px;
  padding: 0 377.4px;
  position: absolute;
  top: 6px;
}

.profil .text-7 {
  height: 13px;
  letter-spacing: 0;
  line-height: 12.8px;
  margin-top: -153.22px;
  white-space: nowrap;
}

.profil .overlap-group-3 {
  height: 11px;
  left: 10px;
  position: absolute;
  top: 0;
  width: 102px;
}

.profil .ancien-mot-de-passe {
  height: 11px;
  left: 0;
  letter-spacing: 0;
  line-height: 10.2px;
  position: absolute;
  top: 0;
  white-space: nowrap;
}

.profil .overlap-group {
  height: 42px;
  margin-top: 10px;
  position: relative;
  width: 782px;
}

.profil .div-8 {
  align-items: flex-start;
  background-color: var(--white);
  border-radius: 1.6px;
  display: flex;
  height: 35px;
  justify-content: flex-end;
  left: 0;
  min-width: 782px;
  padding: 0 377.4px;
  position: absolute;
  top: 6px;
}

.profil .text-8 {
  height: 13px;
  letter-spacing: 0;
  line-height: 12.8px;
  margin-top: -165.04px;
  white-space: nowrap;
}

.profil .overlap-group-4 {
  height: 11px;
  left: 10px;
  position: absolute;
  top: 0;
  width: 111px;
}

.profil .nouveau-mot-de-passe {
  height: 11px;
  left: 0;
  letter-spacing: 0;
  line-height: 10.2px;
  position: absolute;
  top: 0;
  white-space: nowrap;
}

.profil .text-9 {
  height: 13px;
  letter-spacing: 0;
  line-height: 12.8px;
  margin-top: -176.85px;
  white-space: nowrap;
}

.profil .overlap-group-5 {
  height: 11px;
  left: 10px;
  position: absolute;
  top: 0;
  width: 185px;
}

.profil .button-2 {
  background-color: var(--sangria);
  box-shadow: 0px 1px 3px 1px #00000026 , 0px 1px 2px #00000026;
  height: 40px;
  margin-top: 16px;
  overflow: hidden;
  padding: 9.2px 40.8px;
  width: 150px;
}

.profil .mes-factures {
  height: 83px;
  letter-spacing: 0;
  line-height: normal;
  margin-right: 0.8px;
  margin-top: 79px;
  text-align: center;
  width: 651px;
}

.profil .content-frame {
  align-items: flex-start;
  align-self: center;
  display: flex;
  gap: 67px;
  height: 528px;
  margin-right: 1.8px;
  margin-left: -300px;
  margin-top: 43px;
  min-width: 60%;
  padding: 0 36px;
}

.profil .stats-item {
  align-items: center;
  background-color: var(--coconut);
  border-radius: 12px;
  box-shadow: 0px 1px 2px #1018280f;
  display: flex;
  flex-direction: column;
  min-height: 500px;
  padding: 23px 0;
  width: 653px;
}

.profil .text-1 {
  letter-spacing: 0;
  line-height: normal;
  min-height: 52px;
  width: 605px;
}

.profil .heading {
  width: 605px;
}

.profil .frame-4 {
  align-items: flex-start;
  display: flex;
  height: 364px;
  margin-top: 9px;
  min-width: 605px;
}

.profil .column-1 {
  align-items: center;
  padding: 15px 4.2px;
}

.profil .invoice-1 {
  align-self: flex-end;
  color: var(--black-2);
  font-family: var(--font-family-ibm_plex_sans);
  font-size: var(--font-size-xxl);
  font-weight: 700;
  min-width: 123px;
}

.profil .invoice {
  margin-right: 30.25px;
  min-width: 73px;
}

.profil .column {
  align-items: flex-start;
  padding: 15px 24px;
}

.profil .column-2 {
  align-items: flex-start;
  padding: 15px 5.2px;
}

.profil .shop-1 {
  align-self: flex-end;
  min-width: 122px;
}

.profil .shop {
  margin-left: 18.75px;
}

.profil .stats-item-1 {
  align-items: center;
  background-color: var(--coconut);
  border-radius: 12px;
  box-shadow: 0px 1px 2px #1018280f;
  display: flex;
  flex-direction: column;
  min-height: 528px;
  padding: 23px 0;
  width: 368px;
  margin-left: -50px;
}

.profil .text-2 {
  letter-spacing: 0;
  line-height: normal;
  min-height: 52px;
  width: 320px;
}

.profil .heading-1 {
  width: 320px;
}

.profil .payment-frame-1 {
  align-items: flex-start;
  display: flex;
  gap: 223px;
  height: 72px;
  margin-top: 9px;
  min-width: 320px;
  padding: 25px 0;
}

.profil .text-3 {
  letter-spacing: 0;
  line-height: 20px;
  min-width: 44px;
  white-space: nowrap;
}

.profil .text-4 {
  letter-spacing: 0;
  line-height: 20px;
  white-space: nowrap;
}

.profil .payment-frame {
  align-items: center;
  display: flex;
  gap: 24px;
  height: 72px;
  margin-top: 8px;
  min-width: 320px;
}

.profil .client-1 {
  padding: 1px 0;
}

.profil .text-5 {
  letter-spacing: 0;
  line-height: 20px;
  white-space: nowrap;
}

.profil .text {
  letter-spacing: 0;
  line-height: 20px;
  margin-bottom: 2.0px;
  min-width: 78px;
  white-space: nowrap;
}

.profil .client {
  padding: 17px 0;
}

.profil .text-6 {
  letter-spacing: 0;
  line-height: 20px;
  white-space: nowrap;
}

.profil .text-10 {
  letter-spacing: 0;
  line-height: 20px;
  white-space: nowrap;
}

.profil .button-3 {
  align-items: flex-start;
  border-radius: 50px;
  display: flex;
}

.profil .client-2 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  min-height: 72px;
  width: 194px;
}

.profil .column-3 {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-height: 364px;
  width: 151px;
}

.profil .form-2 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  width: 782px;
}

.profil .heading-2 {
  letter-spacing: 0;
  line-height: 20px;
  margin-top: 8px;
  opacity: 0.7;
  white-space: nowrap;
}

.profil .invoice-2 {
  letter-spacing: 0;
  line-height: 20px;
  white-space: nowrap;
}

/*%%%%%%%%%% Afrique Technologie %%%%%%%%%%%%%
  /* Style du formulaire de recherche */
  .search-form {
    display: flex;
    align-items: center;
  }

  /* Style du champ de saisie */
  .search-form input {
    flex: 1;
    padding: 10px;
    border: none;
    background-color: white; /* Couleur du champ de saisie */
    color: black; /* Couleur du texte dans le champ de saisie */
    border-radius: 0px;
    width: 100%; /* Le champ de saisie occupe toute la largeur du formulaire */
    margin-bottom: -4px;
    margin-left:-5px;
  }

  /* Style du bouton de recherche */
  .search-form button {
    background: none;
    border: none;
    cursor: pointer;
    margin-left: -40px; /* Marge à gauche pour séparer le bouton du champ de saisie */
  }

  /* Style de l'image dans le bouton de recherche */
  .search-form .icon-search {
    width: 20px; /* Ajustez la taille de l'icône selon vos besoins */
    height: 20px;
  }

  /* Style optionnel pour la classe overlap-group4 (la classe d'origine) */
  .overlap-group4 {
    /* Ajoutez des styles spécifiques si nécessaire */
      align-items: flex-end;
  background-color: white;
  display: flex;
  height: 35px;
  margin-left: 51px;
  margin-top: 5.0px;
  min-width: 330px;
  padding: 4px 6px;
  }