@import url("https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,900|Montserrat:200,300,400,400i,500,500i,600,700,800,900|Open+Sans:300,400,400i,600,700,800");
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");
:root{
  --color: rgba(0, 0, 0, 0.55);
  --text-color: #000;
  --nav-color:#f0f2f5;
  --spons-title-color: #696969;
  --post-bgcolor: #fff;
  --share: #049afd;
  --like: #fc4361;
  --police: Roboto Condensed,sans-serif;
  --font-size: 14px;
}

/* Css generale*/
body, select{
  color: var(--color);
}

.row, body *{
  max-width: 100%;
}
body {
  font-family: var(--police);
  position: relative;
}
.verified-icon {
  font-size: 0.88em;
}
.row.post > *{
  padding-right: 0;
  padding-left: 0;
}
.hydrated {
  overflow: hidden;
}
.max-height {
  height: calc(100vh - 53px);
}




        body {margin: 0; padding: 0;}
        .containeur { max-width: 1200px; margin: 2% auto; margin-top: 20px; background: #fff; }
        .header { display: flex; justify-content: space-between; align-items: center; padding: 10px; background: #333; color: white; }
        .tabs { display: flex; gap: 20px; padding: 10px; }
        .tab { cursor: pointer; padding: 10px; background: #ddd; border-radius: 5px; }
        .tab:hover { background: #bbb; }
        .content { display: none;}
.products-title{
  margin-left: 20px;
}
        .active { display: block; }
        .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
        .carte { background: white; padding: 10px; border-radius: 5px; box-shadow: 0 0 5px rgba(0,0,0,0.1); text-align: center; }
.carte .card-img {
  margin-bottom: 1em;
}
        .btn-smr { margin-top: 10px; padding: 8px 12px; background: #28a745; color: white; border: none; cursor: pointer; border-radius: 5px}
        .button:hover { background: #218838; }
        .bottom-menu {  position: fixed; bottom: 0; width: 100%; background: #333; padding: 10px; display: none; justify-content: space-around; }
        .bottom-menu button { background: none; border: none; color: white; font-size: 16px; cursor: pointer; padding: 10px; }
        .bottom-menu button:hover { color: #f4a261; }

        /* Header */
.afriMenu{
  width: 100%;
  padding: 2.5%;
  padding-top: 8px;
  padding-bottom: 8px;
  box-shadow: 0 0 6px #787272;
  margin-bottom: 0 !important;
  background: #333;
  color: #fff;
}
.menu-geant{
  display: flex;
  justify-content: space-between;    
  width: 100%;
  z-index: 998;
  padding: 2.5%;
  padding-top: 5px;
  padding-bottom: 5px;
}
.menu-geant .menu-bloc1.logo img{
  width: 100px;
  margin-left: 20px;
}
.afriMenu .menu-geant .menu-bloc2{
  width: 40%;
}
.form-seach .seach-content{
  border: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  background-color: #f8f8f8;
}
.form-seach .seach-icon{
  width: 10%;
  min-width: 30px;
  text-align: center;
  padding-top: 6px;
  color: #000;  
}
.form-seach .bi-search{
  font-size: 17px;
}
.form-seach input{
  width: 90%;
  padding: 9px;
  border: none;
  font-size: 15px;
}
.menu-geant .menu-bloc3 .profil img{
  width: 40px;
  height: 40px;
  border-radius: 100%;
  border: 1px solid #ccc;
}

input:focus-visible{
  outline: none;
}

.menu-bloc3 .flex-column .bi{
  font-size: 1.225rem;
  margin: 15px
}

@media (min-width: 501px){
  .search-sm-e{
    display: none;   
  }
}
@media (max-width: 500px){
  .menu-geant .menu-bloc1.logo img{
    width: 80px;
    margin-left: 20px;
  }
  .menu-geant .menu-bloc2 .form-seach{
    display: none
  }
  .search-sm-e{
    width: 90%;
    margin: auto;
    margin-top: 15px;
  }
}

#delivery-page .container { max-width: 900px; margin: 20px auto; padding: 20px; background: white; border-radius: 8px; }
#delivery-page .carte { background: #f8f8f8; padding: 20px; border-radius: 8px; text-align: center; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); margin-bottom: 1.5em;}
#delivery-page .carte img { width: auto; height: 100%; border-radius: 8px; }
#delivery-page .button { display: block; margin-top: 10px; padding: 10px 15px; background: #28a745; color: white; text-decoration: none; text-align: center; border-radius: 5px; }
#delivery-page .button:hover { background: #218838; }
#delivery-page .form-container {margin-top: 0px; margin-bottom: 20px; text-align: center; }
#delivery-page .form-container input { padding: 10px; width: 80%; margin-top: 10px; border: 1px solid #ccc; border-radius: 5px; }
#delivery-page .form-container button { margin-top:20px; border-radius: 5px; width: 40%; min-width: 100px;}

.promo-p{
  position: absolute;
  top: 10px;
  background-color: #b42e2e;
  color: #fff;
  padding: 2px;
  padding-left: 8px;
  padding-right: 8px;
  font-size: .9em
}