/* Style personnalisé */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

a.nav-link {
    color: white;
    transition: color 0.2s ease;
}

a.nav-link:hover {
    color: #FFC107;
}

h1, h2, h3, h4 {
    font-weight: bold;
}



/* Styling spécifique pour le footer */
.footer-fixed {

  width: 100%;
  background-color: #000;
  color: #fff;
  text-align: center;
  padding: 20px;
  position : fixed;
  bottom : 0px;
}


.clim-img {
  background-image:url('/projet-artisan/assets/img/climatisation.jpg'); /* adapte le chemin */
  background-size: cover;
  background-position: center;
  min-height: 250px; /* hauteur minimale visible */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* texte en bas */
  padding: 1.5rem;
  color: white;
  position: relative;
  overflow: hidden;
}

.clim-img::before {
  content: "";
   position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.400); /* ajustable */
  z-index: 1;
}

.clim-img h5,
.clim-img p {
  position: relative;
  z-index: 2;
}

.elec-img {
background-image:url('/projet-artisan/assets/img/elec-img.jpg'); /* adapte le chemin */
  background-size: cover;
  background-position: center;
  min-height: 250px; /* hauteur minimale visible */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* texte en bas */
  padding: 1.5rem;
  color: white;
  position: relative;
  overflow: hidden;
}

.elec-img::before {
    content:"";
    position:absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.400);
    z-index: 1;
}

.elec-img h5,
.elec-img ul,
.elec-img p {
  position: relative;
  z-index: 2;
}

.plomberie-img {
background-image:url('/projet-artisan/assets/img/plomberie.jpg'); /* adapte le chemin */
  background-size: cover;
  background-position: center;
  min-height: 250px; /* hauteur minimale visible */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* texte en bas */
  padding: 1.5rem;
  color: white;
  position: relative;
  overflow: hidden;
}

.plomberie-img::before {
    content:"";
    position:absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.400);
    z-index: 1;
}

.plomberie-img h5,
.plomberie-img ul,
.plomberie-img p {
  position: relative;
  z-index: 2;
}

.peintre-img {
background-image:url('/projet-artisan/assets/img/peintre.jpg'); /* adapte le chemin */
  background-size: cover;
  background-position: center;
  min-height: 250px; /* hauteur minimale visible */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* texte en bas */
  padding: 1.5rem;
  color: white;
  position: relative;
  overflow: hidden;
}

.peintre-img::before {
    content:"";
    position:absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.400);
    z-index: 1;
}

.peintre-img h5,
.peintre-img ul,
.peintre-img p {
  position: relative;
  z-index: 2;
}

.col-md-6 {
    padding: 12px;
}

  .animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
  }

  .fade-in {
    opacity: 1;
    transform: translateY(0);
  }

    @media (max-width: 767px) {
      html, body {
        height: 100%;
        display: flex;
        flex-direction: column;
      }
  .footer-fixed {
    position: static ;
    }
    header {
      padding: 0px 20px;
      width: 100%;
      padding: 0px 20px;
      position : fixed;
      top : 0px;
      z-index: 1000;
      }
    h1 {
      margin-top: 40px; ;
    }
    main {
      flex: 1;
    }
  }