/* :root {
    --backgroundcolor: rgb(255, 255, 255);
} */

.picture {
    height: 270px;
    background-image: url('BannerMusiqueNatureAI1.jpeg');

    background-size: cover;
    background-position: center; /* Centre l'image horizontalement et verticalement */
    background-repeat: no-repeat; /* Empêche la répétition de l'image si elle est plus petite que la zone */
}

body {
    /* background-color: rgb(223, 225, 222);  */
    background-color: rgb(126, 171, 187);

}

.nav-bar a.active {
  border-bottom:  solid 2px rgb(218, 224, 69);
  position: relative;
}

.nav-bar a.active::after{
  border-color: transparent transparent rgb(218, 224, 69) transparent; /* Couleur du triangle */
}

.index-home-layout h2{
    font-family: Verdana;
    font-size: 25px;
    padding-top: 1em;
  }

  .buttons {
    margin-top: 40px;
    margin-bottom: 40px;
  }
  
.card {
    box-shadow: 0 0.2rem 1.2rem rgba(0,0,0,0.2);
    background-color: #fff;
    overflow: hidden;
    border-radius: 6px;
    /* margin-bottom: 10px; */
    transition: transform 0.5s;
    transform: scale(1);
  }

  @media screen and (max-width: 700px) { 
    .card {
      margin-bottom: 20px;
    }
  }
  
  .card img {
    object-fit: cover;
    width: 100%;
    height: 450px;

    /* transition: transform 0.5s;
    transform: scale(1); */
  }
  
  .card:hover {
    cursor: pointer;
    transition: transform 0.5s;
    transform: scale(1.05);
  }
  
  .text-child {
    position: absolute;
    bottom: 6%;
    left: 10%;
    color: rgb(229, 228, 228);
    padding: 10px;
  }

  .text-h2 {
    background-color: rgb(57, 54, 52);
    border-radius: 5px;
    width: auto;
    text-align: center;
  }
  
  .text-child h2 {
    padding: 10px;
    font-family: Verdana;
    font-family: Arial;
    font-size: 25px;
    letter-spacing: 3px;
  }
  
  .undertext-child-date {
    background-color: rgb(30, 79, 130);
    border-radius: 5px;
    width: 80px;
    text-align: center;
    vertical-align: middle;

  }
  
  .undertext-child-date p {
    padding: 7px;
    font-family: Verdana;
    font-size: 15px;
    font-family: Arial;
    font-weight: bold;
    letter-spacing: 3px;
    vertical-align: middle;
  }
  
  .undertext-child-title {
    background-color: rgb(83, 109, 137);
    border-radius: 5px;
    width: auto;
    text-align: center;
  }
  
  .undertext-child-title p {
    padding: 7px;
    font-family: Verdana;
    font-size: 15px;
    font-family: Arial;
    font-weight: bold;
    letter-spacing: 3px;
  }


/* 
  transition: transform 0.5s;
        transform: scale(1.03); */
/* 
        transition: transform 0.5s;
    transform: scale(1); */