/*
 * Police
 */

@font-face {
  font-family: 'Roboto-Bold';
  src: url('police/Roboto-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Roboto-Light';
  src: url('police/Roboto-Light.ttf') format('truetype');
}


/*
 * Corps de page
 */
.body {
  font-family: 'Roboto-Bold', Tahoma, Geneva, Verdana, sans-serif;
  background: #e7ecef;
  color: hsl(0, 0%, 21%);
}

.nav {
  background-color: white;
}

.card,
.card-text {
  color: hsl(0, 0%, 21%);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Roboto-Bold';

}

p {
  font-family: 'Roboto-Light';
}

b {

  font-family: 'Roboto-Bold';

}

#intro {
  color: hsl(0, 0%, 21%);
  height: auto;

}


.font-blanc {
  background-color: white;
}


/* Conteneur du menu */
.menu-container {
  display: flex;
  justify-content: flex-end;
  flex-wrap: nowrap;
  flex-direction: row;
  height: 70px;
  align-items: center;
  color: white;
  text-decoration: none;
}

/* items du menu */
.menu {
  padding: 30px;
  color: white;

}

.disposition_footer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0px;
  grid-auto-rows: auto;

}

.card:hover {
  box-shadow: rgba(255, 255, 255, 0.5) 0px 4px 24px;
  /* box-shadow: rgba(43, 96, 148, 0.719) 0px 8px 24px; */
}


.test {
  padding: calc(var(--s)/5);
  ;
  width: 120%;
  text-align: center;
}

.gradient-custom-2 {
  /* fallback for old browsers */
  background: #072471;

  /* Chrome 10-25, Safari 5.1-6 */
  background: -webkit-linear-gradient(to right, #05143D, #072471, #0D3BBA);

  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ 
  background: linear-gradient(to right, hsl(231, 86%, 54%), hsl(204, 73%, 58%), #76d4ff, #adfaff);*/
  background: linear-gradient(to right, #05143D, #072471, #0D3BBA);
  
}

.instock-color {
  color: white;
  background-color: #4aa945b6;
}


@media (min-width: 768px) {
  .gradient-form {
    height: 100vh !important;
  }

}

@media (min-width: 769px) {
  .gradient-custom-2 {
    border-top-right-radius: .3rem;
    border-bottom-right-radius: .3rem;
  }
}


/*Desktop 
@media only screen and (min-width: 1024px) {
  .footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0
  }
}
*/