html, body {
      margin: 0;
      padding: 0;
      width: 100%;
}

body {
      font-family: "Helvetica Neue",sans-serif;
      font-weight: lighter;
      
}

header {
      width: 100%;
      height: 10vh;
}


.navbar{
      background: url(hero.png) 100% 100%;
      background-size: 100%;
      text-align: center;
      
}

.navbar a {
      color: rgb(0, 88, 175) !important;
      font-weight: bold;
      background-color: rgb(255, 255, 255);
      margin-right: 30px;
      border-radius: 50px;
      font-size: 18px;
      padding: 20px;
      
}

.navbar a:hover {
      background-color: rgb(0, 88, 175);
      color: rgb(255, 255, 255) !important;
}


.navbar-toggler {
      background-color: rgb(255, 255, 255)!important;
      width: 80px;
      height: 80px;
}




p {
      line-height: 1.3;
}


.imgprod {
      width: 100%;
      height: auto;
}

.titreprod {
      width: 100%;
      height: 95px;
      font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
      font-size: 20px;
      font-weight: bold;
      display: flex;
      align-items: center; /* Alignement vertical */
      justify-content: center; /* Alignement horizontal (si nécessaire) */
    
}

.descprod {
      margin-top: 15px;
      font-size: 15px;
}



   
.accordion {
      display: flex;
      flex-direction: column;
      max-width: 300px;
      margin-top: 20px;
  }

  .accordion-item {
      border: 1px solid #ddd;
      margin-bottom: 5px;
  }

  .accordion-header {
      position: relative;
      padding: 1px;
      background-color: #f1f1f1;
      cursor: pointer;
  }


  /* Ajout de la flèche à l'en-tête */
  .accordion-header::after {
      content: '\25BC'; /* Code Unicode pour une flèche vers le bas */
      font-size: 16px;
      position: absolute;
      right: 10px;
      transition: transform 0.9s ease;
  }

  /* Rotation de la flèche lorsque l'accordéon est actif */
  .accordion-item.active .accordion-header::after {
      transform: rotate(180deg);
  }

  .accordion-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.9s ease;
  }

  .accordion-item.active .accordion-body {
      max-height: 1000px; /* Une valeur suffisamment grande pour couvrir la hauteur maximale possible du contenu */
  }


.ajouter {
      margin-bottom: 10px;
      margin-top: 10px;
      padding: 0 15px 0 15px;
      background-color: rgb(0, 255, 0);
      color: rgb(0, 0, 0);
      font-weight: bold;
      border: none;
      border-radius: 10px;
}

.ajouter:hover {
      background-color: #00c8ff;
}

.cadi {
      width: 20px;
      margin-right: 5px;
}



.taille {
      font-size: 15px;
      font-weight: bold;
}

#taille {
      font-size: 14px;
}



.logoa {
      display: block;
      width: 30%;
      margin: auto;

}

.logoa:hover {
      cursor: initial;
      transform: scale(1.0);
      transition: .3s ease-in-out;
    }

.mer{
      text-align: center;
      font-size: 80px;
      color:  #000000;
      text-shadow: 0px 0px 10px rgb(0, 88, 175);
      margin-top: 50px;
      font-family: 'Princess Sofia', cursive;
   
}

.txt {
      font-family: 'Satisfy', cursive;
      font-size: 35px;
      text-align: center;
      margin-top: 20px;

}

span{
      font-weight: bold;
}

.col {
      border: solid 20px rgb(0, 88, 175);
}

.content {
      width: 70%;
      margin: 4em auto;
      font-size: 20px;
      line-height: 50px;
      text-align: center;

}

.titrephoto {
      font-size: 65px !important;
      color:  #000000;
      text-shadow: 0px 0px 10px #000000;
      margin-bottom: 50px;
      margin-top: 50px;
      font-family: 'Princess Sofia', cursive;
      text-align: center;
    }
    
    .photo-gallery {
      color:#000000;
      background: #000000;
      padding: 80px 20px;
      box-shadow: 0px 0px 50px #000000;
    }
    
    
.vertu {
      position: sticky;
      top: 14%;
      z-index: 1;
      text-align: center;
      background-color: rgb(0, 88, 175);
      color: rgb(255, 255, 255);
      height: 70px;
      margin-bottom: 20px;
      border: solid 2px rgb(0, 170, 255);
}


.bvertu{
      text-decoration: none !important;
      background-color: rgb(0, 88, 175);
      color: rgb(255, 255, 255);
     
   

}

.bvertu:hover{
      background-color: rgb(0, 0, 0);
      color: rgb(255, 255, 255);
}



.logo {
      position: fixed;
      float: left;
      margin-left: 40px;
     
}

.retouracc {
      text-align: center;
      padding-top: 50px;
}

.retour {
      margin-top: 50px;
      font-size: 30px;
}


#message {
      padding: 20px;
      background-color: rgb(0, 255, 0);
      color: rgb(0, 0, 0);
      text-align: center;

  }


.ulpanier {
      text-align: left;
}

.supprimer {
      font-size: 20px;
      margin-bottom: 40px;
      padding: 2px 20px 2px 20px;
      background-color: rgb(147, 0, 0);
      color: rgb(255, 255, 255);
}

.validerdem {
      background-color: rgb(0, 170, 0);
      color: white;
}


.total {
      font-size: 25px;
      font-weight: bold;
}



.menu-icon {
      line-height: 60px;
      width: 100%;
      background: #000;
      text-align: right;
      box-sizing: border-box;
      padding: 15px 24px;
      cursor: pointer;
      color: #fff;
      display: none;
}

.lalito {
      font-size: 22px;
}

.fb-page {
      margin-bottom: 40px;
}

.container{
      text-align: center;
}











@media(max-width: 786px) {

      .logo {
            position: fixed;
            top: 0;
            margin-top: 6px;
      }

      .logoa {
            
            width: 50%;
            
      
      } 

      .navbar a {
            margin-right: 0px;
            margin-bottom: 5px;
            
      }

      .navbar-nav {
            align-items: center;
      }


      .navbar-toggler {
            border-radius: 50px !important;
      }


      .nav-item {
            width: 65%;
      }


      .dropdown-menu {
            border-radius: 50px !important;
      }


      .dropdown-item {
            border: solid 1px !important;

      }


      .menu-icon {
            display: block;
            color: rgb(255, 255, 255);
            background-color: black;
      }


      .titrephoto {
            font-size: 30px;
            
          }


      .mer {
            font-size: 65px;
            
      }

      .txt {
            font-size: 28px;
      }

      .vertu {
            top: 17%;
      }

      
}