* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  background-color: #f9f9f9;
}

.container-header{
background-color: rgb(247, 247, 247);
width: 100%;
height: 22vh;
}
.bloc-one-header{
    background-color:  rgba(12, 19, 92, 0.897); ;
    width: 100%;
    height:6vh;
}
nav{
    border:  1px solid rgb(174, 22, 22);
    height:14vh;
    width: 100%;
}
/* Logo */
.nav-bar-menu img {
  height: 60px;
}

/* Menu principal */
.nav-bar-menu ul {
  display: flex;
  list-style: none;
  gap: 20px;
}

.nav-bar-menu ul li {
  position: relative;
}

.nav-bar-menu ul li a {
  display: block;
  padding: 14px 16px;
  font-size:12pt;
  color: rgba(11, 2, 2, 0.922);
  text-decoration: none;
  transition: background 0.3s;
}

.nav-bar-menu ul li a:hover,
.nav-bar-menu ul li a:focus {
  background-color: #ffffff;
}


/* Sous-menu */
.nav-bar-menu ul li ul {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  background-color: #ffffff;
  flex-direction: column;
  min-width: 220px;
  z-index: 100;
}
.nav-bar-menu ul li:hover > ul,
.nav-bar-menu ul li:focus-within > ul{
  display: flex;
}


.nav-bar-menu ul li ul li a {
  padding: 14px 16px;
  font-size: 14pt;
}
/* Burger menu */
.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.menu-toggle div {
  width: 30px;
  height: 4px;
  background-color: white;
  margin: 5px 0;
}



/* Responsive pour tablettes et mobiles */
@media (max-width: 992px) {
  .menu-toggle {
    display: flex;
  }

  .nav-bar-menu ul {
    flex-direction: column;
    width: 100%;
    display: none;
    background-color: #111;
  }

  .nav-bar-menu ul.active {
    display: flex;
  }

  .nav-bar-menu ul li {
    width: 100%;
  }

  .nav-bar-menu ul li ul {
    position: static;
    display: none;
    width: 100%;
  }

  .nav-bar-menu ul li:hover > ul,
  .nav-bar-menu ul li:focus-within > ul {
    display: block;
  }
}

/* Grand écran Smart TV (≥1920px) */
@media (min-width: 1920px) {
  .nav-bar-menu {
    padding: 30px 80px;
  }

  .nav-bar-menu ul li a {
    font-size: 24px;
    padding: 20px 30px;
  }

  .nav-bar-menu ul li ul li a {
    font-size: 20px;
    padding: 16px 24px;
  }

  .menu-toggle div {
    width: 40px;
    height: 5px;
  }
}


/*design acceuil*/
.container-acceuil-main {
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
  background-color: rgba(79, 100, 121, 0.9); /* Couleur de fond de secours */
  transition: background-image 1s ease; /* Transition smooth */
}
.animate__animated {
  animation-duration: 3s;
  animation-fill-mode: both;
}

.animate__fadeInUp {
  animation-name: fadeInUp;
}

@keyframes fadeInUp {
  from {
      opacity: 0;
      transform: translate3d(0, 50%, 0);
  }

  to {
      opacity: 1;
      transform: none;
  }
}

.text-acceuil p{
  padding-top: 5%;
  color: #fff;
  font-family:inherit;
  text-align:left;
  font-size:14pt;
}