@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
* {
  margin: 0px; 
  padding: 0px; 
  box-sizing: border-box;
}
#tablette-form{
	border: 1px solid #d4d4d4;
  	min-height: 500px;
  	border-radius: 7px;
  	margin: 35px;
  	width: 95%;
}

body{

}

#logo-img{
	background: white;
  	width: 105px;
  	margin: auto;
  	text-align: center;
}
#logo-img img{
	width: 90px;
	margin-top: -65px;
  	background: white;
}
.title-tablette{
	text-align: center;
	margin-top: -55px;
}
#form{
	padding:5px 30px!important;  
}
h2{
	margin-top: 20px
	margin-bottom: 35px;

	background: linear-gradient(95deg, rgba(9,25,2,1) 0%, rgba(15,84,148,1) 0%, rgba(210,110,206,1) 100%, rgba(0,231,255,1) 100%);
  background: linear-gradient(90deg, #b40808 0%, #fdcc0d 100%);
  padding: 15px;
  color: white!important;
}

#panier{
	text-align: right;
}
#panier h2{
	text-align: center;
  background: #2c2c2c;
  color: white;
  padding: 10px;
}
.montant-total{
	font-size: 22px;
  font-weight: bold;
}
#tablette-form-pay{
	text-align: center;padding: 15px;
  margin-bottom: 15px;
  margin-top:15px;
  display: flex;
  justify-content: space-between;
  padding: 15px 0px 15px 0px;
}
#tablette-form-pay button{
	width: 49%;
	padding: 15px;
}
button{
border-radius: 0px!important;
border: 0px!important;
}





/* HIDE RADIO */
[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type=radio] + img {
  cursor: pointer;
}

/* CHECKED STYLES */
[type=radio]:checked + img {
  outline: 2px solid #ff00a7;
  border-radius: 5px;
}

.menu-keneil{
  height: 40px;
  background: #f1f1f1;
}

.choix-poste a {
  text-decoration: none;
}
.choix-poste a h1{
color: black;
}

footer{
  margin-top: 90px;
  height: 75px;
  text-align: center;
  --bs-bg-opacity: 1;
  background-color: #202947!important;
  color: #b9b9b9;
  height: fit-content;
}
footer .text-body {
  color: white!important;
}
footer span{
  display:block;
  padding-top: 25px;
}

    .triangle-topright {
      width: 0;
      height: 0;
      border-top: 100px solid #de3333c7;
      border-left: 100px solid transparent;
      position: absolute;
  right: 0;
  margin-top: -16px;
    }

.triangle-topright span{
  position: absolute;
  right: -1px;
  margin-top: -77px;
  transform: rotate(45deg);
  color: white;
  font-weight: bold;
}    

.btn-warning{
  background: #358787 !important;
  color: white!important;
}
.btn-success{
  background: #67338b !important;
}



.list-unstyled img{
  max-width: 175px;
  max-height: 175px;
  width: auto;
  height: auto;
}

.circle {
  position: absolute;
right: 25px;
  top: 35px;
  transform: translateX(-50%) translateY(-50%);
  width: 20px;
  height: 20px;

  &:before {
    content: "";
    position: relative;
    display: block;
    width: 250%;
    height: 250%;
    box-sizing: border-box;
    margin-left: -75%;
    margin-top: -75%;
    border-radius: 45px;
    background-color: red;
    animation: pulse 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  }

  &:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: red;
    border-radius: 50px;
    animation: circle 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
  }
}

@keyframes pulse {
  0% {
    transform: scale(0.33);
  }
  80%,
  100% {
    opacity: 0;
  }
}

@keyframes circle {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}

.btn-info{
  background: #338b5e !important;
  color: white;
}

/* Container de la liste */
.nav-list {
  position: relative; /* Nécessaire pour les sous-menus positionnés absolument */
  height: 52px;
  background: #202947;
  max-width: 100%;
  overflow: visible; /* Permet l'affichage du sous-menu */
}

/* Liens du menu */
.nav-list .ul-list-item {
  width: 92.8%;
  margin: 0 auto;
  height: 53px;
  line-height: 46px;
  white-space: nowrap;
  transition: transform 0.3s ease;
  display: flex;
  overflow: hidden; /* On évite le décalage */
}

.nav-list .ul-list-item .first-ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style-type: none;
  width: 100%;
}

/* Style des éléments du menu */
.nav-list .ul-list-item ul li {
  margin-right: 10px;
  padding: 0 10px;
  position: relative;
  flex-shrink: 0;
}

.nav-list .ul-list-item ul li a {
  color: #aeb4c4;
  text-decoration: none;
  font-size: 16px;
}

.nav-list .ul-list-item ul li a:hover {
  color: white;
}

.nav-list .ul-list-item ul li a svg {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.nav-list .bi-chevron-down {
  width: 9px !important;
  margin-left: 10px;
}

/* Boutons de navigation */
.slide-left, .slide-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #454545;
  border-radius: 3.125rem;
  background: #373F5A;
  cursor: pointer;
  z-index: 2;
}

.slide-left {
  left: 10px;
}

.slide-right {
  right: 10px;
}

/* Styles pour le dropdown */
.dropdown-nav {
  position: relative; /* Nécessaire pour positionner les sous-menus par rapport à cet élément */
  z-index: 10; /* Ajoute un z-index pour s'assurer qu'il est au-dessus des autres éléments */
}

/* Sous-menu caché par défaut */
.dropdown-nav-content {
  display: none; /* Cache le sous-menu par défaut */
  position: absolute;
  left: 0;
  top: 100%; /* Positionne le sous-menu juste en dessous de l'élément parent */
  background-color: white;
  border: 1px solid #ccc;
  z-index: 1000; /* S'assurer que le sous-menu soit au-dessus de tout le reste */
  list-style-type: none;
  padding: 0;
  margin: 0;
  min-width: 150px;
  width: auto!important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ajoute une ombre pour plus de visibilité */
}

/* Lors du survol du menu, rendre le sous-menu visible */
.dropdown-nav:hover .dropdown-nav-content {
  display: block; /* Affiche le sous-menu */
  background: #202947;
  border: none;
}

.dropdown-nav-content li {
  padding: 10px;
  width: auto!important;
}

.dropdown-nav-content li a {
  color: black;
  text-decoration: none;
  display: block;
}



/* Styles pour le dropdown */
.dropdown-nav {
  position: relative; /* Nécessaire pour positionner les sous-menus par rapport à cet élément */
}

/* Sous-menu caché par défaut */
.dropdown-nav-content {
  display: none; /* Cacher par défaut */
  position: absolute;
  left: 0;
  top: 100%; /* Le sous-menu apparaîtra juste en dessous de l'élément parent */
  background-color: white;
  border: 1px solid #ccc;
  z-index: 1000; /* Assurer que le sous-menu est au-dessus des autres éléments */
  list-style-type: none;
  padding: 0;
  margin: 0;
  min-width: 150px;
}

/* Lorsque le menu est survolé, rendre le sous-menu visible */
.dropdown-nav:hover .dropdown-nav-content {
  display: block; /* Afficher le sous-menu */
  background: #202947;
  border: none;
}

/* Style des éléments du sous-menu */
.dropdown-nav-content li {
  padding: 10px!important;
}

.dropdown-nav-content li a {
  color: black;
  text-decoration: none;
  display: block;
}



.dropdown-nav-content {
  position: fixed; /* Ou absolute si tu veux le lier au parent */
  left: auto;
  right: auto;
  top: auto;
  display: none;
  background-color: white;
  border: 1px solid #ccc;
  z-index: 1000;
  min-width: 150px;
}

.dropdown-nav:hover .dropdown-nav-content {
  display: block;
}


.sticky-nav{
  position: sticky;
  top: 0;
  z-index: 1000;
}

.mega-menu{
  top: 116.317px;
  left: 0!important;
  width: 100% !important;
  background: none!important;

}
.mega-menu .container {
  background: #252d45!important;
}
.mega-menu .col{
  color:white;
}
.mega-menu ul li{
  list-style-type:none;
  text-align: left;
  display: flex;
  align-items: center;
}
.mega-menu ul li i{
  padding: 10px;
}
.mega-menu span{
padding: 15px 0px 0px 30px;
  font-size: 17px;
  display:block;
  border-bottom: 1px solid #f5f5f51a;
  text-align: left;
}
.mega-menu .col ul:not(:last-child) {
    border-right: 1px solid whitesmoke!important;
}
.keneil-icon img {
    width: 30px;
    vertical-align: middle;
}