body, html{
    box-sizing: border-box;
    scroll-behavior: smooth;
}


body{
    margin: auto;
}


/* Commandes Bootstrap*/

/* Couleurs */
.text-primary{
    color: #2C2C2C !important;
}

.text-secondary{
    color: #2e6349 !important;
}

.text-body-secondary{
    color: white !important;
}

.bg-primary{
    background-color: #2C2C2C !important;
}

.bg-secondary{
    background-color: #222222 !important;
}

.bg-third{
    background-color: #222222;
}

.border-primary{
    border-color: black !important;
}

.btn-primary{
    background-color: transparent !important;
    transition: 0.3s;
    color: #2c2c2ca1 !important;
}

.btn-primary:hover{
    color: #222222 !important;
}

.navbar-light{
    color: #2C2C2C !important;
}

.navbar-dark{
    color: #ffffff !important;
}

.hover{
    transition: 0.3s;
    color: #ffffffa2 !important;
}

.hover:hover{
    color: #ffffff !important;
}



/* Typographie */
h1{
    font-family: "Bebas Neue", sans-serif;
    font-size: 6rem;
    color: #2C2C2C;
}

h2{
    font-family: "Bebas Neue", sans-serif;
    font-size: 3rem;
    color: #2C2C2C;
}

h3{
    font-family: "Bebas Neue", sans-serif;
    font-size: 1.875rem;
    color: #2C2C2C;
}

h4{
    font-family: "Bebas Neue", sans-serif;
    font-size: 1.25rem;
    color: #2C2C2C;
}

h5{
    font-family: "Bebas Neue", sans-serif;
    font-size: 1.125rem;
    color: #2C2C2C;
}


p{
    font-family: "Open Sans", sans-serif;
    color: #2C2C2C;
}

.ft-16{
    font-family: "Bebas Neue", sans-serif;
    font-size: 1rem !important;
}

.ft-20{
    font-family: "Bebas Neue", sans-serif;
    font-size: 1.25rem;
}

.ft-10{
    font-family: "Open Sans", sans-serif;
    font-size: 0.625rem;
}


/* Width & Height*/

/* Height */

.min-vh-80{
    min-height: 80vh;
}

.min-vh-40{
    min-height: 40vh;
}

.min-vh-25{
    min-height: 25vh;
}

.h-120{
    height: 120vh;
}


/* Width */
.w-5{
    width: 5vw;
}

.w-15{
    width: 15vw;
}

.w-30{
    width: 30vw;
}

.w-40{
    width: 40vw;
}

.w-60{
    width: 60vw;
}

.w-80{
    width: 80vw;
}

.max-w-92{
    max-width: 92.5vw;
}



/* Autres */
.rotate-250{
    transform: rotate(300deg);
}

@media screen and (min-width: 768px) {
    
    .rotate-250{
        transform: rotate(250deg);
    }
}

.img-logiciels{
    width: 80px;
    height: 80px;
}

.no-style{
    list-style: none;
}

.accordion-button:not(.collapsed){
    background-color: transparent;
}


.petite {
  width: 100%;
  height: auto;
  display: block;
}

.card {
  flex: 1 1 280px;
  max-width: 320px;
}

#filterable-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

@media screen and (max-width : 770px) {
    .footer-reseaux{
        margin: auto;
    }
}

#mobileMenu {
  background-color: white; /* pour contraste */
  z-index: 1050;
}

#closeBtn.btn-close {
  filter: invert(0); /* par défaut noir */
  font-size: 1.5rem; /* agrandir un peu */
  position: absolute;
  top: 1rem;
  right: 1rem;
}






/* Galerie Photos */
	.petite, .grande {
		cursor: pointer
	}

	.grande {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.8);
		z-index:9999;
		display: none;
		align-items: center;
		justify-content: center;
	}

	.grande img {
		width: 40%;
		border: 4px white solid;
		border-radius: 5px;
	}

    @media screen and (max-width: 870px){
        .grande img{
            width: 90%;
        }
        
    }

		#filter-buttons button {
	  border-radius: 20px;
	  background: #fff;
	  border-color: transparent;
      transition: 0.3s;
	}
	#filter-buttons button:hover {
	  background: #ddd;
      border-radius: 20px;
	}
	#filter-buttons button.active {
	  color: #fff;
	  background: #2C2C2C;
      border-radius: 20px;
	}
	#filterable-cards .card {
	  width: 15rem;
	  border: 2px solid transparent;
	}
	#filterable-cards .card.hide {
	  display: none;
	}
	@media (max-width: 600px) {
	  #filterable-cards {
		justify-content: center;
	  }
	  #filterable-cards .card {
		width: 100%;
	  }
	}