@font-face {
    font-family: 'ChunkFive';
    src: url('../fonts/ChunkFive-Regular.woff2') format('woff2'),
         url('../fonts/ChunkFive-Regular.woff') format('woff'),
         url('../fonts/ChunkFive-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}


.container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;

}

/* Style général */
body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background-color: #D6D5B6;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Évite les débordements horizontaux */
}

/* En-tête */
header {
    
    border-bottom: 2px solid #e0e0e0;

    color: #fff;
}

h1 {
    font-size: 24px;
    margin-bottom: 20px;
}

/* Alertes */
.alert {
    margin-top: 20px;
}

/* Tableaux */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

table, th, td {
    border: 1px solid #e0e0e0;
}

th, td {
    padding: 12px;
    text-align: left;
}

th {
    background-color: #ffcccc;  /* Couleur rose pâle */
}

.chunk{
    font-family: 'ChunkFive', Arial, Helvetica, sans-serif;
    color:#656e57;
}

.pink {
    color:#ffcccc;
}

/* Boutons */
.btn {
    border-radius: 4px;
}

.btn-primary {
    background-color: #656e57;  /* Vert */
    color: #fff;
}

.btn-primary:hover {
    background-color: #960919;
}

.btn-danger {
    background-color: #d9534f;  /* Rouge vif */
    color: #fff;
}

.btn-danger:hover {
    background-color: #c9302c;
}

/* Formulaires */
.form-label {
    font-weight: bold;
}

/* Images */
img {
    max-width: 100%;
    height: auto;

}
.imgrnd{
    border-radius: 4px;
}
/* Liens */
a {
    text-decoration: none;
    color: #4858eb;  /* Rouge pastèque */
}

a:hover {
    text-decoration: underline;
}

/* Cartes d'annonces */
.card {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-bottom: 20px;
    padding: 15px;
    transition: box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%; /* Assure que la carte prend toute la hauteur disponible */
}

.card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card img {
    height: 200px; /* Fixe une hauteur pour toutes les images */
    object-fit: cover; /* Ajuste les images à cette hauteur sans déformation */
}

.card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Permet au corps de la carte de s'étendre */
}

.card-text {
    flex-grow: 1; /* S'assure que le texte prend tout l'espace rest ant */
}

card .btn {
    margin-top: auto; /* Place le bouton en bas de la carte */
}
/* Footer */
footer {
    text-align: center;
    padding: 20px;
    background-color: #fff;
    border-top: 1px solid #e0e0e0;
}

footer a {
    position: relative;
    transition: color 0.2s ease-in-out;
  }
  
  footer a:hover {
    color: #FFD700; /* Couleur de survol */
  }
  
  footer a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background-color: #FFD700; /* Couleur du soulignement */
    bottom: 0;
    left: 0;
    transition: width 0.3s ease-in-out;
  }
  
  footer a:hover::after {
    width: 100%; /* Remplir la largeur du lien */
  }
  


.bg-olives {
    height: 450px; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between;    
}
.olive {
    object-fit: cover; 
    position: absolute; 
    right: 0; 
    top: -82px;
    pointer-events: none;
}
.ftolive {
    color:#606745;
}
.ftsaumon {
    color:#F4DED0;
}
.ftvertleger {
    color:#f1f0da;
}

.ftvertmoyen {
    color:#656e57;
}

.bg-olives-light {
    background-color:#f1f0da;
}
.custom-list {
    list-style-type: none; /* Supprime les puces par défaut */
    padding-left: 0;
  }
  
  .custom-list li {
    position: relative;
    padding-left: 30px; /* Décalage pour l'image */
  }
  
  .custom-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); /* Centrage vertical de l'image */
    width: 20px; /* Largeur de l'image */
    height: 20px; /* Hauteur de l'image */
    /* background-image: url('../images/puceolive.png'); Remplacez par le chemin de votre image */
    background-size: cover; /* Assure que l'image est correctement redimensionnée */
    background-repeat: no-repeat;
  }
  

.bg-saumon {
    background-color: #F4DED0;
    /*height: 470px;*/
    display: flex; 
    flex-direction: column; 
    justify-content: space-between;    
}
.bg-darkgreen {
    background-color: #09360c;

}
.bg-olivegreen {
    background-color: #606745;
}
.first-bg {
    background-color: #D6D5B6; /* Première couleur */
    padding-bottom: -60px; /* Pour que ça termine juste avant la première ligne */
    position: relative;
    z-index: 1;
}

.second-bg {
    background-color: #f1f0da; /* Deuxième couleur */
    padding-top: 40px; /* Pour qu'il y ait une belle transition */
    position: relative;
    z-index: 0;
}



.mycard {
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transition fluide */
}
.mycard:hover {
    transform: scale(1.05); /* Agrandissement de 5% */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Ombre portée douce */
}

.card-st1{
background-color: #F4DED0;
color:#656e57;  
width:250px;

}
.card-st2{
    background-color: #606745;
    color:#f1f0da;  
    width:250px;
    
}
.card-st3{
background-color: #f1f0da;
color:#656e57;  
width:250px;

}

.card-st4{
    background-color: #09360c;
    color:#f1f0da;  
    width:250px;    
}

.card-st5{
    background-color: #d6d5b6;
    color:#656e57;  
    width:250px;

}

.smalltitle {
    font-size: small;
}
.mycard-title {
    font-size:x-large;
    font-weight: bold;
    padding:0;
}

/* Style général de la navbar */
.navbar {
    /*background-color: #960919; /* Rouge pastèque pour la barre de navigation */
    background-color: #606745;
    color: white;   
    padding:0; 
    /*border-bottom: 4px solid #115215; /* Bordure verte pour évoquer la croûte de la pastèque */
}

.navbar-top {
    background-color: #F4DED0; 
    border-top-left-radius: 30px; border-top-right-radius: 30px;
    margin-top:10px;
}

.navbar-bottom {
    background-color: #606745;
}
.navbar-brand {
    text-decoration: none;
    font-size: 24px;
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
    color: #ffffff;
}

.navbar-brand:hover {
    transform: scale(1.1); /* Agrandit légèrement le texte */
    color: #6C7A89; /* Change la couleur du texte au survol */
}

.navbar-brand img {
    transition: transform 0.3s ease-out;
}

.navbar-brand:hover img {
    transform: scale(1.1);
    animation: plop 0.3s ease-out;
}

@keyframes plop {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.25);
    }
    100% {
        transform: scale(1.1);
    }
}
/* Style des liens de la navbar */
.navbar-nav .nav-link {
    color: #ffffff; /* Blanc par défaut pour les liens */
    padding: 10px 15px;
    font-size: 1rem;
    transition: background-color 0.3s ease, color 0.3s ease; /* Animation fluide pour le hover */
}

/* Lien au survol (hover) */
.navbar-nav .nav-link:hover {
    background-color: #A8B5A0; /* Vert croûte de pastèque au survol */
    color: #ffffff; /* Toujours en blanc */
    border-radius: 5px; /* Ajout d'un effet arrondi */
}

/* Style pour le lien actif */
.navbar-nav .nav-link.active {
    background-color: #A8B5A0; /* Vert croûte de pastèque pour le lien actif */
    color: #ffffff; /* Blanc sur fond vert */
    border-radius: 5px; /* Coins légèrement arrondis pour un aspect plus doux */
    font-weight: bold; /* Texte en gras pour distinguer davantage le lien actif */
}

/* Icône du bouton hamburger pour les petits écrans */
.navbar-toggler-icon {
    background-image: 'images/burger.png'; /* Retirer l'icône par défaut */
    color: #ffffff; /* Icône noire pour représenter les pépins de la pastèque */
    font-size: 1.5rem;
}

/* Bouton hamburger pour petits écrans */
.navbar-toggler {
    color: #ffffff; /* Texte blanc */
    border: 2px solid #000000; /* Bordure noire pour correspondre à l'icône */
    border-radius: 5px;
}

/* Menu responsive (mobile) */
.navbar-collapse {
    justify-content: flex-end; /* Aligner les éléments du menu à droite */
}

/* Style du texte dans les boutons de la navbar sur petits écrans */
.navbar-nav .nav-link {
    text-align: center; /* Centrer le texte */
    margin: 5px 0; /* Marges pour l'espacement */
}

.popup-alert {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1055; /* plus que modale bootstrap */
    min-width: 250px;
    max-width: 400px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    opacity: 0.95;
    transition: transform 0.3s ease, opacity 0.3s ease;
}



/* Style pour ajuster la navbar sur différents écrans */
@media (max-width: 900px) {
    .navbar-nav .nav-link {
        padding: 8px 10px;
    }
    .olive {
        opacity: 0.3;
        z-index: -1;
    }
    .image-ouneh {
        opacity: 0.3; /* Réduit l'opacité de l'image */
    }
    .bg-saumon {
        opacity: 0.8; /* Réduit l'opacité de l'image */
    }

    .ouneh {
        background-image: url('../images/arbre2_sml.png');
        background-size: cover;
        background-position: center;
      }
    
      .ouneh img {
        display: none;
      }


    .ouneh2 {
        background-image: url('../images/fleurs_2_sml.png');
        background-size: cover;
        background-position: center;
      }
    
      .ouneh2 img {
        display: none;
      }
    
      .ouneh3 {
        background-image: url('../images/lpnr2.png');
        background-size: cover;
        background-position: center;
      }
    
      .ouneh3 img {
        display: none;
      }

      
}
 /* Pour les petits écrans : superposition du texte sur l'image */



/* Animation pour faire glisser la modale depuis le haut */
@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Appliquer l'animation lors de l'affichage de la modale */
.modal-content.slide-down {
    animation: slideDown 0.5s ease;
}
.modal-content {
    background-color: rgba(255, 255, 255, 0.97); /* Pour voir à travers un peu si besoin */
    backdrop-filter: blur(3px); /* optionnel pour effet flouté */
}
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.3) !important; /* ou 0.1 pour encore plus léger */
}
.hidden {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.show {
    opacity: 1 !important;
    transform: translateY(0);
}
 
 
    #map {
        height: 400px; /* Hauteur de la carte */
        width: 100%;   /* Largeur de la carte */
        box-shadow: inset 0px 1px 2px rgba(255, 255, 255, 0.2); /* Effet de lumière */
    }   


.image-thumbnail {
    display: inline-block;
    position: relative;
    margin-right: 10px;
}
.remove-image {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: red;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}
.pellicule {
    display: flex;
    overflow-x: auto;
    padding-top: 10px;
    gap: 10px;
}

/* Styles pour la zone de description */

.description-box {
    background-color: #ffffff;
    border: 1px solid #e3e3e3;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.image-container {
    width: 100%; /* Force le conteneur à utiliser toute la largeur de la colonne */
    height: 200px; /* Hauteur fixe pour chaque image */
    overflow: hidden; /* Cache les parties débordantes de l'image */
    border-radius: 10px; /* Bords arrondis pour le conteneur */
    background-color: #f8f9fa; /* Couleur de fond pour mieux faire ressortir l'image */

}

.image-container img {
    width: 100%; /* L'image remplit toute la largeur du conteneur */
    height: 100%; /* L'image remplit toute la hauteur du conteneur */
    object-fit: cover; /* Récupère la proportion de l'image et remplit le conteneur */
    cursor: pointer; /* Change le curseur en une main lorsqu'on survole l'image */
    transition: transform 0.2s; /* Ajoute une transition douce pour le zoom */
}


.image-container img:hover {
    transform: scale(1.05); /* Légère augmentation de la taille de l'image au survol */
}

.list-group-item.active {
    z-index: 2;
    color: var(--bs-list-group-active-color);
    background-color: #577E85;
    border-color: #577E85;
}
.list-group-item {
    cursor: pointer;
}
.list-group-item:hover {
    cursor: pointer; /* Changer le curseur pour indiquer que c'est cliquable */
    background-color: #f8f9fa; /* Changer la couleur de fond au survol */
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); /* Légère ombre pour effet de profondeur */
}
.list-group-item.active:hover {
    cursor: pointer; /* Changer le curseur pour indiquer que c'est cliquable */
    background-color: #A8B5A0;
    border-color: #A8B5A0;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); /* Légère ombre pour effet de profondeur */
}
.message {
    margin-bottom: 20px; /* Un peu d'espace entre chaque message */
    display: flex;
    flex-direction: column;
}

.message-bubble {
    max-width: 80%; /* Limite la taille des bulles pour éviter qu'elles prennent trop de place */
    padding: 10px;
    border-radius: 15px;
    background-color: #f1f1f1;
    word-wrap: break-word;
    position: relative;
}

.message.sent .message-bubble {
    background-color: #d1e7dd;
    align-self: flex-end; /* Aligner la bulle de l'expéditeur à droite */
}

.message.received .message-bubble {
    background-color: #f1f1f1;
    align-self: flex-start; /* Aligner la bulle du récepteur à gauche */
}

.message-date {
    font-size: 0.8rem;
    /*text-align: left;*/
    margin-top: 5px;
    align-self: flex-start; /* Aligner la date à gauche */
    width: 100%; /* Assure que la date peut dépasser si elle est plus longue que la bulle */
    white-space: nowrap; /* Evite que la date se divise en plusieurs lignes */
    overflow: hidden; /* Evite le dépassement du texte */
    text-overflow: ellipsis; /* Ajoute des points de suspension si le texte est trop long */
}

.date-recieved {
    text-align: left;
}

.date-sent {
    text-align: right;
}

.badge {
    font-size: 0.8rem;
    padding: 0.3em 0.6em;
    border-radius: 10px;
}


#filters-section {
    overflow: hidden;
    max-height: 0; /* Par d�faut, on cache la section */
    transition: max-height 0.3s ease-out; /* L'effet de transition */
}

#filters-section.show {
    overflow: auto;
    height: 100%;
    max-height: 100%; /* Maximum que vous voulez pour l'expansion */

}

.readonly {
    background-color: #f8f9fa; /* Couleur de fond gris�e */
    cursor: not-allowed; /* Curseur qui indique une zone non modifiable */
    border: 1px solid #ced4da; /* Bordure l�g�re */
}

/* Lorsque le champ est modifiable (pas en readonly), on revient au style normal */
.type-nom:not([readonly]) {
    background-color: #fff; /* Fond blanc */
    cursor: text; /* Curseur normal pour un champ texte */
}

.carousel-caption {
    background: rgba(0, 0, 0, 0.6); 
    padding: 15px;
    border-radius: 5px;
}
.carousel img {
    border-radius: 10px;
}

#formsearch {
    overflow: visible !important;
    height: auto !important;
}

#containerins {
    max-width: 500px;
    margin-top: 50px;
}
#cardins {
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

#containerctc {
    max-width: 70%;
    margin-top: 50px;
}