body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-bottom: 125px; /* Hauteur de la navbar */
}

main {
    width : 100%;
    height: 100%;
 
}


.sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 100; /* Au-dessus du contenu principal */
        padding: 48px 0 0; /* Espace pour le top navbar */
        box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

.photo-espace {
     max-width: 128px;
}

.photo-list-espace {
     max-width: 92px;
}
   
.mynavbar {
        background-color:  #7DB4CD; /* Couleur de fond de la barre de navigation */
        position:fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1030; /* La valeur z-index typique pour les éléments superposés */
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 0.5rem;
        height : 72px;
    }


.navbar-hidden {
        visibility: hidden !important;
        opacity: 0 !important;
        transition: visibility 0s linear 300ms, opacity 300ms;
    }   

   

#usermenu {
    background-color: #66bdcf; /* Couleur de fond de la barre de navigation */
    z-index: 2000; /* La valeur z-index typique pour les éléments superposés */
    max-width: 96px; 
    border : none;
}    
    
.nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.nav-item {
    display: flex;
}

.nav-link {
    display: block;
    padding: 0rem;
    color: white;
    text-decoration: none;
}

.nav-link img {
    width: 64px; /* ou la taille que vous préférez */
    height: auto;
}

/* Réduisez la taille des icônes lorsque la largeur disponible est inférieure à 768px */
@media (max-width: 290px) {
    .nav-link img {
        width: 56px;
        height: auto;
    }
}

/* Réduisez la taille des icônes lorsque la largeur disponible est inférieure à 768px */
@media (max-width: 250px) {
    .nav-link img {
        width: 48px;
        height: auto;
    }
}

.nav-user {
    position:relative;
    bottom:33px;
    z-index:1;
}


.userimg {
    max-width: 64px; 
    
}


.nav-item.active .nav-link,
.nav-link:focus,
.nav-link:hover {
    background-color: #66bdcf; /* Couleur de fond pour l'élément actif ou focus */
    border-radius: 10px; /* Rayon de la bordure pour le focus (optionnel) */
}



.dropdown-menu {
    transform: translate3d(-40px, 0, 0);
    z-index: 2000
    
}




/* Ajouter ce CSS si vous utilisez Bootstrap pour le menu dropdown */
.dropdown-toggle::after {
    display: none; /* Cachez la flèche par défaut si vous n'en voulez pas */
}

/* Responsiveness: ajustements pour petits écrans si nécessaire */
@media (max-width: 576px) {
    .navbar {
        flex-direction: column;
    }
    
}

.detail-messages-intitule {
    position: relative;
    background-color: #4ba052;
    color: white;
    top: 6px;
    right: 0px;
    z-index: 10;

}

.detail-commandes-intitule {
    position: relative;
    background-color: #a82fbe;
    color: white;
    top: 6px;
    right: 0px;
    z-index: 10;

}

.detail-mes-commandes-intitule {
    position: relative;
    background-color: #3795b5;
    color: white;
    top: 6px;
    right: 0px;
    z-index: 10;

}

.pastille-panier {
    position: relative;
    background-color: #4ba052;
    color: white;
    top: 6px;
    right: 0px;
    z-index: 10;

}




.leaflet-popup-content {
    text-align: center; /* Centre le contenu */
    /* Autres styles... */
}

.leaflet-popup-content img {
    width: auto; /* Ajustez selon la taille souhaitée */
    height: 64px;
    margin-top: 10px;
}

/* Style pour le carrousel */
.list-group-item {
    border-style: none;
    text-align: center;
    max-height: 128px;  /* Hauteur fixe pour chaque élément du carrousel */
    width: 85px;
   
    padding : 5px;
}

/* Style pour les images dans le carrousel */
.list-group-item img {
    
    
    margin: auto; /* Centrer l'image */
}

/* Style pour les légendes (pseudos) */
.list-group-caption {
    position: static; /* Override du positionnement par défaut de Bootstrap */
    padding: 0; /* Supprime le padding par défaut */
    color: black; /* Couleur du texte pour le pseudo */
}

.vertical-center {
    
    align-items: center;
    min-height: 100vh;
 }



/* Styles globaux pour les éléments de formulaire */
input, 
select, 
textarea, 
button {
    padding: 8px; /* Ajustez la valeur selon vos besoins */
    margin: 5px;  /* Ajustez la valeur selon vos besoins */
}


.form-container {
    width: 90%;     /* Utilisez la largeur complète de l'écran */
    max-width: 600px; /* Ajustez selon la largeur maximale souhaitée pour votre formulaire */
    margin: 0 auto;  /* Centrage horizontal */
    padding-top: 15px; 
    padding-bottom: 10px;  /* Ajoutez du padding autour du formulaire */
   
    height: 100%;
}

form {
    display: block; /* Assurez-vous que le formulaire est un bloc pour que margin auto fonctionne */
}

.container-map-create {
    margin-top: 20px;
    margin-bottom: 20px;
    height: 100%;
    max-height: 200px;

}


/* Style pour la carte */
#map {
    padding:0px;
    margin:0px;
    position : absolute;
   
    height:92vh;
    width: 100%; /* Largeur complète */
    z-index : 2;
}

/* Style pour la carte */



#map-create {
        
    height: 200px;  
    width: 100%;  
    z-index : 1;
}


@media (max-height: 750px) {
    #map-create {
        
        height: 150px;  
        width: 100%;  
        z-index : 1;
    }
}

.card {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s;
}

.card-img-top-container {
    position: relative;
    width: 100%;
    height: 20vh; /* Hauteur fixe pour toutes les images */
    overflow: hidden;
}

.card-img-top {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garde les proportions et rogne si nécessaire */
    object-position: center; /* Centre l'image */
}

.card-body {
    padding: 1rem;
    background: white;
}

textarea {
    height: auto;
    max-height: 100px; /* Ajustez en fonction de vos besoins */
}

h5 {
    font-size: large;
}




.show {
    display: block; /* Afficher lorsque la classe 'show' est ajoutée */
}

.btn-specs {
    max-width: 200px; /* ou toute autre largeur souhaitée */
    margin: 0 auto; /* pour centrer le bouton */
    border: none;
    display: block; /* pour permettre le centrage avec margin auto */
    background-color: #1879a5; /* Couleur de fond de la barre de navigation */

}

.leaflet-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
}
.participant-badge {
    background-color: rgb(140, 185, 170);
    color: white;
    position: fixed;
    top: 2px; /* Décale le badge vers le haut */
    right: 6px; /* Décale le badge vers la droite */
    border-radius: 50%;
    padding: 2px 5px;
    font-size: 12px;
    width: 20px; /* Taille du badge */
    height: 20px; /* Taille du badge */
    text-align: center;
    line-height: 20px; /* Centrer le texte verticalement */
}

.activite-badge {
    background-color: rgb(100, 60, 151);
    color: white;
    position: fixed;
    top: 2px; /* Décale le badge vers le haut */
    right: 6px; /* Décale le badge vers la droite */
    border-radius: 50%;
    padding: 2px 5px;
    font-size: 12px;
    width: 20px; /* Taille du badge */
    height: 20px; /* Taille du badge */
    text-align: center;
    line-height: 20px; /* Centrer le texte verticalement */
}


.custom-icon {
    
    
    margin-left: auto;
    margin-right: auto;
    height: 36px; /* Taille de l'icône */
    background-color:transparent; /* ou autre couleur de fond */
}

.map-icon {
    
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 64px; /* Taille de l'icône */
    background-color:transparent; /* ou autre couleur de fond */
}

.icon-map {
    position: relative;
    display: flex;
    margin:auto;
    height: 64px; /* Taille de l'icône */
}

.custom-icon img {
    width: 36px; /* Remplir la taille de la div .custom-icon */
    height: fit-content;

}

.img-space {
    
    width: 40px; /* Taille de l'icône */
    height: 50px; /* Taille de l'icône */
}



.fill
{
    min-height: 100%;
    height: 100%;
    width: 100%;
    max-width: 100%;
}



#les_espaces {
    max-height: 650px; /* Ajustez cette valeur en fonction de vos besoins */
    overflow-y: auto;
}

#fab-container {
    position: absolute;
    right: 50%; /* Ajustez en fonction de la position souhaitée */
    bottom: 65px; /* Ajustez en fonction de la hauteur de votre navbar */
    transform: translateX(50%);
}

#fab-menu {
    position: absolute;
    width:200px;
    right: 50%;
    transform: translateX(50%);
    bottom: 85px; /* Ajustez en fonction de la hauteur de votre navbar et du FAB */
}

.fab-menu-item {
    display: block;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

.fab-menu-item:last-child {
    border-bottom: none;
}

.floating-action-button {
    position: absolute;
    top: -75px; /* Ajustez selon la hauteur de votre navbar */
    border : none;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background-color: #7DB4CD; /* Couleur du bouton */
    border-radius: 50%;
    padding: 10px;
    border-radius: 200px;

}

.floating-action-button img {
    width: 48px;
    height: 48px;
}

#id_adresse {
    position : relative;
    z-index: 1000;
    
    margin-bottom : 10px;


}

.mymodal {
    width: 280px;
    margin: auto;
}




.mymodal custom-icon {
    width : 48px;
}

.img-modal {
    height : 96px;
    width : auto;
    margin-bottom: 10px;
}

.btn-primary {
    --bs-btn-bg :#7DB4CD;
    --bs-btn-border-color:#538289;
    --bs-btn-active-bg: #1878a5e7;
    --bs-btn-hover-bg:#1878a5e7;
}

.modal-content {
    max-height: 80vh; /* 80% de la hauteur de la fenêtre */
   
}

.modal-body {
    max-height: 80vh; /* 80% de la hauteur de la fenêtre */
    overflow-y: auto; /* Défilement vertical si le contenu dépasse */
}


.icon-app {
    height : 48px;
    width : auto;
}

.iconS-app {
    height : 36px;
    width : auto;
}

.iconXS-app {
    height : 28px;
    width : auto;
}

.button-app {
    height : 64px;
    width : auto;
}




.carousel-inner {
    height: 100%;
}

.carousel-photos {
    height: 400px;
}



.fab-container {
    position: fixed;
    bottom: 96px; /* Ajustez selon la taille de votre FAB et la hauteur de votre navbar */
    right: 30px;
    z-index: 1030; /* Plus haut que la navbar pour s'assurer qu'il reste au-dessus */
}

.fab {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    text-align: center;
    font-size: 24px;
    line-height: 56px; /* Centre verticalement le texte ou l'icône */
    position: relative;
    z-index: 2;
}

.fab-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none; /* Masqué par défaut */
    position: absolute;
    bottom: 60px; /* Ajustez cette valeur pour la position du menu au-dessus du FAB */
    right: 0;
    z-index: 1;
}

.fab-menu li {
    margin-bottom: 10px;
}

.fab-menu li:last-child {
    margin-bottom: 0;
}

.fab-option {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    position: relative;
}
.step-button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background-color: #c5cacb;
    transition: .4s;
}
.step-button[aria-expanded="true"] {
    width: 60px;
    height: 60px;
    background-color: #5c6668;
    color: #fff;
}
.done {
    background-color: #66bdcf;
    color: #fff;
}
.step-item {
    z-index: 10;
    text-align: center;
}


.step-content {
    height: 400px; /* ajustez selon vos besoins */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


#progress {

    position: absolute;
    width: 80%;
    z-index: 5;
    height: 10px;
    margin-left: 18px;
    margin-bottom: 18px;
}
/* to customize progress bar */
#progress::-webkit-progress-value {
    background-color: #66bdcf;
    transition: .5s ease;
}
#progress::-webkit-progress-bar {
    background-color: #c5cacb;

}

.button-group {
    position: relative;
    top: 50px; /* ajustez selon vos besoins */
    display: flex;
    height : 50px;
    justify-content: space-between;

    
}

.button-group button {
    width: 125px; /* ou la largeur souhaitée */
}

.detail-img {
    
    height: 96px; /* Ajustez cette valeur selon vos besoins */
    width: fit-content;
    margin-right: 10px; /* Ajoute un petit espace entre les images */
    
}

.container-images {
    display: flex; /* Définit le conteneur pour utiliser flexbox */
    overflow-x: auto; /* Active le défilement horizontal si le contenu dépasse */
    gap: 10px; /* Espacement entre les éléments enfants, si vous ne souhaitez pas utiliser margin sur .detail-img */
}

.table-container {
    max-height: 400px; /* Ajustez selon vos besoins */
    overflow-y: auto;
}

.table-resultats {
    max-height: 65vh; /* Ajustez selon vos besoins */
    overflow-y: auto;
}

.table-resultats-recherche {
    max-height: 50vh; /* Ajustez selon vos besoins */
    overflow-y: auto;
}

.titre {
    width: 100%;
    font-size: large;
    text-align: center;


}

.titre-boutique {
    position:relative;
    top:-15px;
}

.description {
    width: 80%;
    margin: 0px 0px 5px 0px;
}

a img {
    /* styles pour votre image-lien */
    cursor: pointer; /* pour indiquer que l'image est cliquable */
}


.disabled {
    pointer-events: none;
    opacity: 0.5;
}

.button-invisible {
    border: none;
    background: none;
}



/* Image déclencheur du menu */
.dropdown-menu-trigger {
    cursor: pointer;
    display: block; /* ou inline-block */
    /* Ajoutez du style supplémentaire si nécessaire */
}

/* Contenu du menu déroulant */
.dropdown-menu-content {
    display: none;
    position: absolute;
    right: 15px; /* Ajustez selon votre mise en page */
    top: 70px; /* Juste en dessous de l'élément déclencheur */
    background-color:transparent; /* ou autre couleur de fond */
    z-index: 1000; /* Plus haut que le reste du contenu */
    
}

/* Afficher le menu au survol */
.dropdown-menu-container:hover .dropdown-menu-content {
    background-color:transparent; /* ou autre couleur de fond */
    display: block;
}

/* Style pour les éléments du menu */
.menu-item {
    display: block;
    cursor: pointer;
    height: 36px; /* Taille de l'icône */
    background-color:transparent; /* ou autre couleur de fond */
    margin-bottom: 15px;
    
}

.detail-act {
    position: static;
    min-height: 40%;
}

.back {
    position : fixed;
    width: 32px;
    height:auto;
    top : 25px;
    left : 25px;
}

.photo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Ajustez l'espacement */
}

.photo-slot {
    margin-bottom: 20px;
    flex: 1;
    min-width: 48px; /* Ajustez la largeur minimale */
    cursor: pointer;
}

.photo-slot .img_espace {
    width: auto;
    height: 96px;
}

.photo-slot .img_activite {
    width: 56px;
    height: auto;
}

.photo-slot .img_evenement {
    width: 56px;
    height: auto;
}

.photo-slot .img_event {
    width: 56px;
    height: auto;
}

input[type="file"] {
    display: none;
}

.logo-app {
    width : 192px;
}

.domaine {
    list-style-type: none;
}

.sousdomaine {
    list-style-type: none;
}

.photo-slot {
    position: relative;
    display: inline-block; /* ou autre, selon votre mise en page */
}

.delete-icon {
    position: absolute;
    top: -10px; /* Ajustez selon vos besoins */
    right: -10px; /* Ajustez selon vos besoins */
    background-color: red;
    color: white;
    padding: 5px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 10px;
    line-height: 1;
    text-align: center;
    width: 20px;
    height: 20px;
}  







.comments {
    margin-top : 20px;
}



.btn-image-text {
    background-color: #7DB4CD; /* Couleur de fond du bouton */
    
    border: none; /* Aucune bordure */
    color: white; /* Couleur du texte */
    margin : 10px;
    padding: 8px 8px; /* Padding autour du texte et de l'image */
    text-align: center; /* Centrer le texte */
    text-decoration: none; /* Aucun soulignement pour le texte */
    display: inline-block; /* Display inline-block */
    font-size: 16px; /* Taille de la police */
    cursor: pointer; /* Curseur en forme de pointeur */
    border-radius: 5px; /* Bordures arrondies */
    vertical-align: middle;
}

.btn-image-text.disabled {
    opacity: 0.25;
    cursor: not-allowed;
    background-color: #e9ecef;
    pointer-events: none;
}

.btn-image-text img {
    
    

    margin-right: 5px; /* Espace entre l'image et le texte */
    vertical-align: middle; /* Alignement vertical de l'image avec le texte */
}

.quantite {
    width : 60px;
    height: 38px;
}

.panier-container {
    position: relative;
    top: -15px;
    left : 20px;
    justify-content: right;
    cursor: pointer;
}

.bg-civitas {
    position: relative;
    background-color: #2D545B;
    color: white;
    top: -10px;
    right: 20px;
    font-size: small;
}

.notif-messages {
    position: absolute;
    background-color: #4ba052;
    color: white;
    top: -34px;
    right: -8px;
    font-size: small;
    z-index:10;
}

.notif-mes-commandes {
    position: absolute;
    background-color: #3795b5;
    color: white;
    top: -52px;
    right: 21px;
    font-size: small;
    z-index: 10;
}      

.notif-les-commandes {
        position: absolute;
        background-color: #a82fbe;
        color: white;
        top: -34px;
        right: 49px;
        font-size: small;
        z-index: 10;    
}


@keyframes clickAnimation {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(0.70);
    }
    100% {
      transform: scale(1);
    }
  }
  
.button-clicked {
    animation: clickAnimation 0.5s ease;
  }

.messages {
    left:50%;
    margin-left:-25%;
    display : flex;
    justify-content : space-around;
    position : fixed;
    z-index:2000;
}

.messages p {
    margin: 10px 0;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0,0,0,.3);
    display: none; /* Cache par défaut */
    position: relative;
    width: 250px;
    background: #f8d7da; /* Couleur par défaut pour les messages d'erreur */
}

.messages p.info {
    background: #d1ecf1; /* Couleur pour les messages d'info */
}

.messages p.success {
    background: #d4edda; /* Couleur pour les messages de succès */
}

.center-bottom {
    z-index : 800;
    width : 70%;
    position:fixed;
    bottom:100px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
   
    
}

.top-banner {
    top: 0;
    height:80px;
    width:100%;
    position: fixed;
    padding: 10px 20px 5px 10px;
    background-color: #1879a58f;
    z-index: 10;
}

/* Styles de base pour les messages */
.les-messages {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.les-commentaires {
    display: flex;
    flex-direction: column;
    max-height: 30vh;
    
}

/* Bulles pour les messages des autres membres */
.their-message {
    position: relative;
    max-width: 80%;
    margin-bottom: 36px;
    margin-left: 40px;
    padding: 8px;
    background-color: #f1f0f0;
    border-radius: 20px 20px 20px 0;
    align-self: flex-start;
    word-wrap: break-word;
}  

/* Bulles pour vos messages */
.my-message {
    max-width: 80%;
    margin-bottom: 10px;
    margin-right: 34px;
    padding: 8px;
    background-color: #7db4cd;
    color: white;
    border-radius: 20px 20px 0 20px;
    align-self: flex-end;
    word-wrap: break-word;
}   

.message-profile-pic {
    width: 40px; /* Taille de l'image */
    height: 40px; /* Taille de l'image */
    border-radius: 50%; /* Rend l'image ronde */
    position: absolute;
    left: -40px;
    bottom: -27px;
    border: 2px solid #fff; /* Optionnel: ajoute une bordure blanche autour de l'image */
}

.readonly {
    background-color: #e9ecef; /* Couleur de fond grise pour simuler l'aspect désactivé */
    color: #495057; /* Couleur du texte */
    cursor: not-allowed; /* Change le curseur pour indiquer l'interdiction de l'édition */
    border: 1px solid #ced4da; /* Optionnel: ajoute une bordure pour mieux définir le champ */
}

.readonly:focus {
    background-color: #e9ecef; /* Conserve la couleur de fond grise */
    color: #495057; /* Conserve la couleur du texte */
    outline: none; /* Supprime le contour qui peut apparaître sur certains navigateurs */
}

.img-boutique {
    width : 96px;
    height:auto;
    max-height:96px;
}

.img-profil {
    width : 64px;
    height:auto;
    
}
.img-logo {
    width : auto;
    height: 42px;
}

/* Styles spécifiques pour les écrans plus larges (par exemple, desktop) */
@media (min-width: 768px) {
    .img-logo {
        width: auto;
        height: 120px; /* Taille différente pour desktop */
    }
}

.center-middle {
    display: flex;
    align-self: center;
    justify-content: center;
}

.switch-view-container {
    display: flex;
    justify-content: flex-start;
   
  }

.switch-view {
    cursor: pointer;
    margin-right: 10px;
    opacity: 0.5;
    transition: opacity 0.3s ease;
  }

.switch-view.active {
    opacity: 1;
}


.product-list {
    
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
    padding: 1rem;
    height: 70vh; /* Ajustez selon vos besoins */
    overflow-y: auto;
}

/* Ajoutez des media queries pour différentes tailles d'écran */
@media (max-height: 600px) {
    .product-list {
        height: 70vh;
    }
}

@media (min-height: 800px) {
    .product-list {
        height: 70vh;
    }
}



.top-right {
    right: 20px;
    top: 10px;
    position: fixed;
    display: block;
}

.invit_prod_map {
    width : 200px;
    height: 150px;
    display: block;
    position: fixed;
    top : 20px;
    right : 200px;
    z-index: 2000;
}

.invite-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background-color: #ffffff97;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transform: translateY(-100%);
    transition: transform 0.3s ease-out;
  }
  
  .invite-content {
    padding: 15px;
    text-align: center;
  }
  
  .invite-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
  }
  
  .invite-open {
    transform: translateY(0);
  }

  #suggestion-box {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
  }
  
  #suggestion-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    cursor: pointer;
    animation: shake 1s ease-in-out infinite;
  }
  
  #suggestion-form {
    position: absolute;
    right: -350px;
    width: 350px;
    padding: 20px;
    background: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease-in-out;
  }
  
  #suggestion-form.open {
    right: 0;
  }
  
  #close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    z-index: 1000;
  }
  
  form {
    margin-top: 20px;
  }
  
  label {
    display: block;
    margin-bottom: 5px;
  }
  
  input, textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    resize: none;
  }
  
  button {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
  }
  
  #cancel-btn {
    background: transparent;
    border: none;
    color: #007bff;
    cursor: pointer;
  }

  .unselectable {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
  }

  .user_espace {
    position: fixed;
    top: 100px;
    overflow-y:auto;
    height: 75%;
  }

  .image-container {
    position: relative;
    width:60px
   
}
  
  .overlay-image {
    width:36px;
    height:auto;
    position: absolute;
    top: 70%;
    left: 85%;
    transform: translate(-50%, -50%);
    
}
.overlay-statut {
    width: 16px;
    height: auto;
    position: absolute;
    top: -5%;
    left: 80%;
    
}

@keyframes slideInShake {
    0% {
      transform: translateX(-100%);
    }
    60% {
      transform: translateX(10%);
    }
    70% {
      transform: translateX(-5%);
    }
    80% {
      transform: translateX(5%);
    }
    90% {
      transform: translateX(-2%);
    }
    100% {
      transform: translateX(0%);
    }
  }
  
  
#invit {
    animation: slideInShake 1.5s forwards;
  }

input[type="checkbox"] {
    box-sizing: border-box;
    padding: 0.5rem;
    width: auto; /* ou une largeur fixe plus petite que la largeur du conteneur parent */
}


#new-order-icon {
    position: fixed;
    top: 20px;
    right: 20px;
    font-size: 2em;
    color: #ff6347;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }
  


.notification-circle {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 162px;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.95);
    border-top-left-radius: 150px;
    border-top-right-radius: 150px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: block;
    z-index:10;
}

.notification-circle.show {
    display: block;
}

.notifications-content {
    padding: 10px;
    text-align: start;
    max-height:250px;

}

.commandes-notif {
    position: relative;
    left: 0px;
    top: 0px;
    padding-bottom: 10px;
}

.commande-statut-notif {
    position: relative;
    left: 0px;
    top: 0px;
}

.messages-notif {
    position: relative;
    left: 0px;
    top: 0px;
}

.shake-icon {
    animation: shake 0.5s;
    animation-iteration-count: 2;
}

@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}

.carousel-image {
    max-height: 200px;
    width: auto;
    object-fit: scale-down;
}

.products-carousel {
    height: 100%;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 10px;
}

.carousel-horizontal {
    display: flex;
    overflow-x: auto; /* Activation du défilement horizontal */
    scroll-snap-type: x mandatory; /* Scroll fluide entre les items */
    gap: 15px; /* Espacement entre les éléments */
    padding: 10px 0;
    scrollbar-width: none; /* Cacher la barre de défilement pour Firefox */
}

.carousel-horizontal::-webkit-scrollbar {
    display: none; /* Cacher la barre de défilement pour Chrome/Safari */
}

.product-card {
    flex: 0 0 70%; /* Largeur de chaque carte (70% de l'écran pour mobile) */
    height:25vh;
    max-height: 200px;
    max-width: 300px; /* Limite la taille sur des écrans plus grands */
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 10px;
    text-align: center;
    scroll-snap-align: start; /* S'arrête au début de chaque item */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    
}



.product-detail-card {
    flex: 0 0 70%; /* Largeur de chaque carte (70% de l'écran pour mobile) */
    height:400px;
    width:90%;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 10px;
    text-align: center;
    scroll-snap-align: start; /* S'arrête au début de chaque item */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    
}

.product-card:hover {
    transform: scale(1.05); /* Effet de zoom au survol */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.product-thumbnail {
    width: 80%;
    height: 120px;
    object-fit: cover; /* Maintient le ratio de l'image */
    border-radius: 5px;
}

.product-title {
    font-size: 14px;
    font-weight: bold;
    margin-top: 10px;
    color: #333;
}

.plats_moments{
    margin-top: 25px;
    height: 40vh;
}

@media (max-height : 800px) {
    .plats_moments{
        
        height: 30vh;
    }
}



.flex-grow-1 {
    flex-grow: 1; /* Permet à cette section de s'étendre pour occuper tout l'espace disponible */
    overflow-y: auto; /* Ajoute une barre de défilement si nécessaire */
}

.mt-auto {
    margin-top: auto; /* Pousse l'élément vers le bas */
}

#message-form {
    width: 100%;
    
   
    
}

.hidden-scrollbar {
    overflow: auto; /* Permet le défilement */
    scrollbar-width: none; /* Masque la barre de défilement pour Firefox */
    -ms-overflow-style: none; /* Masque la barre de défilement pour Internet Explorer et Edge */
}

.hidden-scrollbar::-webkit-scrollbar {
    display: none; /* Masque la barre de défilement pour WebKit (Chrome, Safari) */
}


.navigation {
    bottom: 125px;
    position: fixed;
    width: 90%;
}


.button-action {
    margin-top: 50px;
}


.boarding-close-btn {
    display: none !important;
}

.boarding-prev-btn{
    display: none !important;
}

.prevent-select {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
  }

  .discussion-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: white;
}

.discussion-header {
    flex-shrink: 0;
    padding: 1rem;
    border-bottom: 1px solid #ddd;
    background: white;
    z-index: 100;
    height: auto;
    min-height: 60px;
    display: flex;
    align-items: center;
    
}

.discussion-title {
    margin: 0 0 0 1rem;
    font-size: 1.2rem;
}

.messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    margin-bottom: 190px; /* Hauteur de la zone de saisie */
    max-height: 70vh;
    scroll-behavior: smooth;

}

.saisie-container {
    position: fixed;
    bottom: 10px; /* Hauteur de la navbar */
    left: 0;
    right: 0;
    padding: 0.5rem;
    z-index: 100;
    margin-bottom: 85px;
}

/* Ajoutez ces styles dans votre fichier CSS */
.message-input {
    min-height: 36px;
    max-height: 100px;
    overflow-y: hidden;
    resize: none;
    padding: 8px;
    width: 100%;
    border-radius: 20px;
}

.prevent-select {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
  }


  .messages {
    position: fixed;
    top: 10px;
    left: 0; /* Modification ici */
    right: 0; /* Ajout */
    margin: 0 auto; /* Ajout */
    z-index: 2000;
    width: 90%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.alert {
    margin-bottom: 10px;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    opacity: 0;
    transform: translateY(-20px); /* On garde uniquement la translation verticale */
    transition: all 0.3s ease;
    pointer-events: auto;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Animation d'entrée */
.alert.show {
    opacity: 1;
    transform: translateY(0);
}

/* Styles pour les différents types de messages */
.alert-success {
    background-color: rgba(212, 237, 218, 0.95);
    border-color: #c3e6cb;
    color: #155724;
}

.alert-error {
    background-color: rgba(248, 215, 218, 0.95);
    border-color: #f5c6cb;
    color: #721c24;
}

.alert-warning {
    background-color: rgba(255, 243, 205, 0.95);
    border-color: #ffeeba;
    color: #856404;
}

.alert-info {
    background-color: rgba(209, 236, 241, 0.95);
    border-color: #bee5eb;
    color: #0c5460;
}

.messages-container {
    overflow-y: auto !important;
    position: relative;
    scroll-behavior: smooth;
    background: white;
    padding: 1rem;
    margin-bottom: 80px;
}

.card-annonce {
    height: 100%;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.card-annonce .card-img-top {
    width: 100%;
    height: 120px; /* Réduit pour mobile */
    object-fit: cover;
}

.card-annonce .card-body {
    padding: 0.5rem;
}

.card-annonce .card-title {
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
}

.card-annonce .category-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    
    justify-content: center;
    align-items: center;
    padding: 3px 6px;
    border-radius: 20px;
}

.card-annonce .category-badge img {
    
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    
}

/* Ajustements pour les très petits écrans */
@media (max-width: 320px) {
    .row-cols-2 > * {
        padding-left: 5px;
        padding-right: 5px;
    }
    
    .card-annonce .card-img-top {
        height: 100px;
    }
}

.distance-badge {
    position: absolute;
    top: 10px;
    right: 10px;

    background: #f2af95;
    border-radius: 20px;
    padding: 5px 10px;
    font-size: 0.8rem;
    color: #333;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 1;
    display: flex;          /* Ajout */
    align-items: center;    /* Ajout */
    justify-content: center;/* Ajout */
}

.distance-badge i {
    margin-right: 3px;
    color: #666;
}

.etat-badge {

    position: absolute;
    bottom: 44px;
    right: 7px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    /* border: 2px solid white; */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.etat-badge.green {
    background-color: #2ecc71;
}

.etat-badge.red {
    background-color: #e74c3c;
}

.etat-badge.grey {
    background-color: #c2c7cc;
}

.etat-badge.orange {
    background-color: #f17815;
}

.section-disabled {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.section-title {
    font-size: 1.0rem;
    margin-bottom: 1rem;
    color: #666;
    display: flex;
    align-items: center;
}

.section-title .status-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    border-radius: 50%;
}

.status-pending {
    background-color: #ccc;
}

.status-complete {
    background-color: #2ecc71;
}

.form-section {
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
   
    
    
}

.submit-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.submit-button.visible {
    opacity: 1;
    transform: translateY(0);
}


@keyframes slideIn {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.message-photo {
    max-width: 200px;
    border-radius: 8px;
    cursor: pointer;
}

.photo-preview {
    position: absolute;
    right: 10px;
    bottom: 100%;
    margin-bottom: 10px;
    z-index: 100;
}

.preview-container {
    position: relative;
    display: inline-block;
    background: white;
    right: 10px;
    padding: 5px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.preview-image {
    max-width: 100px;
    max-height: 100px;
    border-radius: 4px;
}

.remove-photo {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ff4444;
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    padding: 0;
    line-height: 1;
}

.remove-photo:hover {
    background: #ff0000;
}



.close {
    position: absolute;
    right: 35px;
    top: 15px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.message-author {
    font-weight: bold;
    margin-bottom: 5px;
}   

.photos-gallery-container {
    width: 100%;
    overflow-x: hidden;
    margin-bottom: 10px;
}

.photos-gallery {
    display: flex;
    flex-direction: row-reverse; /* Plus récent à gauche */
    overflow-x: auto;
    gap: 10px;
    padding: 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.gallery-item {
    flex: 0 0 auto;
}

.gallery-image {
    max-width: 200px;
    
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
}

#imagePreviewModal .modal-content {
    background-color: rgba(255, 255, 255, 0.95);
}

#imagePreviewModal .modal-header {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1050;
    background: transparent;
}

#imagePreviewModal .btn-close {
    background-color: white;
    padding: 0.5rem;
    margin: 0.5rem;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    border-radius: 50%;
    opacity: 1;
}

#modalPreviewImage {
    max-height: 90vh;
    max-width: 90vw;
    object-fit: contain;
}

/* Styles du carousel */
#photoCarousel {
    width: 100%;
    height: 50vh;
    
}


#photoCarousel .carousel-inner {
    height: 100%;
}

#photoCarousel .carousel-item {
    height: 100%;
    width: 100%;
    display: none;  /* Cache tous les items par défaut */
}

#photoCarousel .carousel-item.active {
    display: flex;  /* Affiche uniquement l'item actif */
    justify-content: center;
    align-items: center;
}

#photoCarousel .carousel-item img {
    max-height: 100%;
    max-width: 90%;
    object-fit: contain;
    margin: auto;
}