/*image de fond du site*/
/* body { 
  background-image: url(../annonces/img_68c919ff06e97.jpg) ;
  background-size: cover;        
  background-repeat: no-repeat;  
  background-attachment: fixed;  
  background-position: center;   
  color: #333;                 
}   */
@font-face {
    font-family: "Poppins-Regular";
    src: url("./fonts/Poppins-Regular.ttf") format("woff2"),
         url("./fonts/Poppins-Regular.ttf") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Roboto_Condensed-Regular";
    src: url("./fonts/Roboto_Condensed-Regular.ttf") format("woff2"),
         url("./fonts/Roboto_Condensed-Regular.ttf") format("woff");
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: "Roboto_Condensed-Regular", sans-serif;
} 

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins-Regular', sans-serif !important;
    font-weight: 600;
}

p {
    font-family: 'Roboto_Condensed-Regular', sans-serif;
}


 /* === Couleur de fond de la section <main> sur tout le site === */
 main {
   background-color: white;
   /* Couleur de fond claire – modifiable */
   padding: 30px 0;
   /* Optionnel : espace haut/bas */
   min-height: 400px;
   /* Optionnel : garantit une certaine hauteur */
 }

 /*------------------------ Style header bannière (navbar)---------------- */
 .banniere-bg {
   background-color: #f1f1f1;
   /* Bleu foncé */
 }

 /* Texte dans la navbar */
 .banniere-bg .nav-link {
   /* color: rgb(18, 17, 1); */
   color: #333;
   /* Texte sombre */
 }

 /* Effet au survol */
 .banniere-bg .nav-link:hover {
   color: #ffc107;
   /* Jaune Bootstrap */
 }


 /*---------------------------- Style footer ------------------------------ */

 /* === Couleur de fond pour le footer === */
 .footer-bg {
   background-color: #f1f1f1;
   /* Gris clair */
 }

 /* === Liens dans le footer === */
 .footer-bg a {
   color: #333;
   /* Texte sombre */
   text-decoration: none;
 }

 .footer-bg a:hover {
   color: #ffc107;
   /* Bleu foncé au survol */
   text-decoration: underline;
 }


 /*---------------------------- Style formulaire de contact ------------------------------ */

 /* === Couleur de fond pour la page Contact === */
 .contact-bg {
   background-color: #f1f1f1;
 }

 #contact_form .form-control {
   /* pour la couleur de bordure input, texterea,...*/
   border: 2px solid #ccc;
   /* gris clair par défaut */
   border-radius: 10px;
   /* angles arrondis */
 }


 /* Lien et texte dans la zone adresse */
 .contact-bg h3 {
   margin-top: 30px;
 }

 .contact-bg p,
 .contact-bg li {
   color: #333;
   font-size: 15px;
 }

 /*---------------------------- Style formulaire d'inscription ------------------------------ */
 .form-container {
   /* Couleur gris claire */
   /* padding: 30px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
   /* Optionnel : un peu d'ombre */
   border: 2px solid #ccc;
   /* gris clair par défaut */
   border-radius: 10px;
   /* angles arrondis */
 }

 /*---------------------------- Style formulaire de connexion -----------------------*/
 .form-container {
   /* background-color: #f1f1f1; */
   /* gris clair - tu peux changer */

   /* équivalent à Bootstrap p-4 */
   border-radius: 8px;
   /* équivalent à Bootstrap rounded */
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   /* légère ombre */
 }

 /*--------------------------- Style formulaire mot de pass oublié -------------------------*/
 .form-container {
   /* background-color: #f1f1f1; */
   /* gris clair */
   /* padding: 2rem; */
   padding: 30px;
   border-radius: 8px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }

 /*---------------------------------Style formulaire modifier infos utilisateur--------------------------------------*/
 .formulaire-bg {
   /* background-color: #f1f1f1; */
   /* gris clair, tu peux choisir ta couleur */
   padding: 30px;
   border-radius: 8px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   max-width: 800px;
 }

 .usertable input[type="text"] {
   width: 350px;
   /* ajuste selon ton besoin */
   padding: 8px;
 }


 /*---------------------------------Style formulaire deposer_annonce.php--------------------------------------*/
 .compact-form {
   max-width: 400px;
   /* largeur maximale du formulaire */
 }


 /*---------------------------- CSS cookies ------------------------------*/
 .popupCookie {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.5);
   /* fond semi-transparent */
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 9999;
 }

 .popupCookieform {
   background-color: white;
   /* Couleur de fond du formulaire */
   padding: 30px;
   border-radius: 10px;
   max-width: 500px;
   width: 90%;
   text-align: center;
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
 }

 .popupCookieform h5 {
   margin-bottom: 15px;
 }

 .popupCookieform p {
   font-size: 14px;
   margin-bottom: 20px;
 }

 .popupCookieform a {
   color: #007bff;
   text-decoration: none;
 }

 .popupCookieform a:hover {
   text-decoration: underline;
 }

 .popupCookieform .submit {
   padding: 10px 20px;
   margin: 0 10px;
   border: none;
   background-color: #007bff;
   color: white;
   border-radius: 5px;
   cursor: pointer;
 }

 .popupCookieform .submit:hover {
   background-color: #0056b3;
 }

 /*---------------------------Style css pour gerer la taille des images sur la vitrine de la page d'accueil ------------------------------*/
 .card-img-top {
   height: 200px;
   /* même hauteur pour toutes les images */
   object-fit: cover;
   /* recadre sans déformer */
   width: 100%;
   /* occupe toute la largeur */
   border-bottom: 1px solid #ddd;
 }

 /*-----------------------------------Style css titre et taille police dans carousselle--------------------------------------*/
 .carousel-caption h5 {
   color: #ffcc00;
   /* couleur du titre */
   font-size: 2rem;
   /* taille de police du titre */
   font-weight: bold;
 }

 .carousel-caption p {
   color: #ffffff;
   /* couleur du texte */
   font-size: 1.2rem;
   /* taille de police du texte */
 }

 /*-----------------------------------Style css design page annonce.php pour détail de l'annonce----------------------------------*/

 .carousel-inner img {
   height: 400px;
   object-fit: cover;
   width: 100%;
 }

 .thumbnail img {
   height: 80px;
   object-fit: cover;
   cursor: pointer;
 }

 /*--------------------------------------------css pour caroussel page accueil-------------------------------------------------*/

 #carouselExampleCaptions img {
   width: 100%;
   height: 250px;
   object-fit: cover;
 }

 @media (min-width: 768px) {
   #carouselExampleCaptions img {
     height: 270px;
   }
 }

 @media (min-width: 1200px) {
   #carouselExampleCaptions img {
     height: 270px;
   }
 }

 /*-------------------------------Affichage des icones categories------------------------------*/
 .category-card {
   background: #ffffff;
   transition: all 0.3s ease;
   cursor: pointer;
 }

 .category-card:hover {
   background: #e6f0ff;
   transform: translateY(-5px);
 }

 .category-card i {
   color: #007bff;
 }

 .category-card h6 {
   margin-top: 5px;
   font-weight: 600;
   color: #333;
 }

 /*-------------------------------Effet Zoom au survol des images sur la page d'accueil------------------------------*/

 .card-img-top {
    transition: transform 0.4s ease, filter 0.4s ease;
}

.card:hover .card-img-top {
    transform: translateY(-15px);
    filter: brightness(1.1);
}