#accueil, #vision-mission, #organisation, #domaine, #projet, #contact {
  scroll-margin-top: 80px;
}

.container-navbar{
   box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.171);
}

.container-ul{
  display: flex;
  gap: 10px;
}

.container-ul li{
  font-size: 17px;
  font-weight: 700;
}

.nav-link.active-scroll {
  color: #102f86; /* Couleur quand actif */
  font-weight: 700;
  border-bottom: 2px solid #102f86; /* Soulignement */
  width: fit-content; /* Ajuste la largeur au contenu */
}


.container-accueil{
  padding-top: 140px;
  background:#000033; 
  color:#fff;
  width:100%;
}

.container-accueil h2{
  font-weight: 700;
}

.container-accueil h4{
  color: #edcc66;
}

.container-bouton .bouton{
  background-color: #edcc66;
  border: #edcc66 solid 2px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  padding: 10px 20px;
  transition: 0.4s ease;
}

.container-bouton .bouton:hover{
  background-color:#ffd64fe7;
  transform: scale(1.05);
}

.container-bouton a{
  text-decoration: none;
  color: #000033;
  font-size: 18px;
  font-weight: 600;
}

.container-image{
  display: flex;
  justify-content: center;
  align-items: center;
}
.container-image img{
  border-radius: 10%;
  width: 95%;
}

.container-marquee{
  background-color: #edcc66;
}
.container-marquee p,i{
  color: #04043e;
}

.container-vision-mission{
  padding-top: 70px;
  padding-bottom: 90px;
}

.container-vision-mission h1{
  text-align: center;
  font-weight: 700;
  color: #14399e;
}

.container-vision{
  background-color: #d5e5f9;
  padding: 30px;
  border-radius: 20px;
  transition: 0.3s ease;
  cursor: pointer;
}

.container-vision:hover{
  transform: scale(1.05);
}

.container-vision .vision{
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
}

.container-vision .vision span{
  font-size: 20px;
  color: #1E3A8A;
  font-weight: 700;
}

.container-vision .vision .icon-vision{
  background-color: #1E3A8A;
  border-radius: 50%;
  padding: 5px 7px;
}

.container-mission{
  background-color: #fff7d8;
  padding: 30px;
  border-radius: 20px;
  transition: 0.3s ease;
  cursor: pointer;
}

.container-mission:hover{
  transform: scale(1.05);
}

.container-mission .mission{
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
}

.container-mission .mission span{
  font-size: 20px;
  color: #B45309;
  font-weight: 700;
}

.container-mission .mission .icon-mission{
  background-color: #B45309;
  border-radius: 50%;
  padding: 5px 7px;
}

.container-organisation{
  background-color: #000033;
  padding: 70px 0px;
}

.container-organisation .row-container{
  color: black;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.container-organisation h1{
  text-align: center;
  color: #edcc66;
  font-weight: 700;
}

.container-organisation .section1{
  /* position: relative; */
  width: 250px;
  height: 300px;
  background-color: white;
  border-radius: 20px;
  padding: 20px 10px;
  cursor: pointer;
  border-top: none;
}

.container-organisation .section1::before{
  content: '';
  position: absolute;
  color: white;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  border-radius: 20px;
  background-color: #edcc66;
  clip-path: path(
    'M0,40 C100,0 150,80 250,40 C350,0 400,80 500,40 L500,500 L0,500 Z'
  );
  transition: height 1s ease-in-out;
  z-index: -1; /* toujours derrière */
}

.container-organisation .section1:hover::before{
  height: 100%;
  border-radius: 20px;
  z-index: -1;
}


.container-organisation .section1:hover{
  transform: scale(1.05);
  transition: 0.7s ease;
}

.container-organisation .icon-historique{
  background-color: #d5e5f9;
  border-radius: 50%;
  width: 45px;
  padding: 5px 7px;
}

.container-organisation .icon-siege{
  background-color: #FEF3C7;
}

.container-organisation .icon-objectif{
  background-color: #DCFCE7;
}

.container-organisation .icon-strucuture{
  background-color: #F3E8FF;
}

.container-organisation .section1 h4{
  font-weight: 600;
  
}

.container-organisation .section1 p{
  text-align: center;
  font-size: 16px;
  font-style: italic;
  font-weight: 500;
}

.container-domaines{
  padding: 70px 0px;
}

.container-domaines h1{
  text-align: center;
  color: #102f86;
  font-weight: 700;
}

.container-domaines .row-container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.container-domaines .domaine1{
  width: 350px;
  height: 380px;
  border-top: solid 3px #EF4444;
  background: linear-gradient(#faf8f8, #f7bebe);
  border-radius: 20px;
  padding: 20px 10px;
  cursor: pointer;
}

.container-domaines .domaine2{
  border-top: solid 3px #2563EB ;
  background: linear-gradient(#f0f5fc, #b9d5fa);
}

.container-domaines .domaine3{
  border-top: solid 3px #F59E0B;
  background: linear-gradient(#f8f6ed, #fff3c1);
}

.container-domaines .domaine4{
  border-top: solid 3px #16A34A;
  background: linear-gradient(#f4fcf7, #cdfadd);
}

.container-domaines .domaine5{
  border-top: solid 3px #9333EA;
  background: linear-gradient(#faf5ff, #e1c9fa);
}

.container-domaines .domaine6{
  border-top: solid 3px #0D9488;
  background: linear-gradient(#F0FDFA, #c8fcf1);
}

.container-domaines .domaine1:hover{
  transform: scale(1.05);
  transition: 0.7s ease;

}

.container-domaines .domaine1 .icon-sante{
  background-color: #EF4444;
  border-radius: 50%;
  width: 45px;
  padding: 5px 7px;
}

.container-domaines .domaine1 .icon-justice{
  background-color: #2563EB;
}

.container-domaines .domaine1 .icon-education{
  background-color: #F59E0B;
}

.container-domaines .domaine1 .icon-economique{
  background-color: #16A34A;
}

.container-domaines .domaine1 .icon-gouvernance{
  background-color: #9333EA;
}

.container-domaines .domaine1 .icon-environnement{
  background-color: #0D9488;
}

.container-domaines .domaine1 span{
  font-weight: 700;
  color: #374151
}

.container-projets{
  padding: 70px 0px;
  background-color: #000033;
}

.swiper-pagination-bullet {
  background: yellow !important; 
}

.swiper-pagination-bullet-active {
  background: #fff  !important;
} 

.container-projets h1{
  text-align: center;
  color: #edcc66;
  font-weight: 700;
}

.container-projets .row-container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.container-projets .projet1{
  width: 350px;
  height: 230px;
  background-color: white;
  border-radius: 20px;
  padding: 20px 10px;
  transition: 0.3s ease;
  cursor: pointer;
  border-bottom: solid 10px #edcc66;
  position: relative;
}

.container-projets .projet1:hover{
  transform: scale(1.05);
}

.container-projets .projet1 h4{
  font-weight: 600;
  font-size: 22px;
  color: #1E3A8A;
}

.container-projets .projet1 p{
  font-size: 17px;
  font-style: italic;
  font-weight: 600;
  /* color: ; */
}


.container-projets .projet1 .status{
  background-color: #DBEAFE;
  padding: 5px 10px;
  font-weight: 500;
  border-radius: 5px;  
  width: fit-content;
  color: #1E3A8A;
}

.container-projets .icon-sante{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #1E3A8A;
  border-radius: 50%;
  padding: 10px;
  position: absolute;
  top: -15px;
  right: -10px;
  width: 40px;
  height: 40px;
}

.container-projets .icon-sante i{
  color: white;
}

.container-projets .bouton-left-right{
  display: flex;
  justify-content: center;
  gap: 30px;
}

.container-projets .bouton-left-right i{
  font-size: 23px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000033;
}


.container-projets .arrow-left, .arrow-right{
  background-color: white;
  border-radius: 50%;
  border: solid 2px rgb(0, 110, 255);
  padding: 10px;
}

.container-projets .arrow-left:hover, .arrow-right:hover{
  border: solid 2px white;
}


.container-projets .arrow-left:hover, .arrow-right:hover{
  background-color: rgb(0, 110, 255);
  color: white;
  transition: ease 0.3s;
}


.container-contact{
  padding: 70px 5%;
}

.container-contact .row-container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.container-contact .contact1{
  padding: 20px;
  border-radius: 20px;
  background-color: #000033;
  color: white;
}

.container-contact h1{
  text-align: center;
  color: #102f86;
  font-weight: 700;
}

.container-contact .container-adresse{
  display: flex;
  align-items: center;
  gap: 10px;
}


.container-contact .container-adresse .localisation i{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background-color: #DBEAFE;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  color: #1E3A8A;
  font-size: 20px;
}

.contact-icons{
  display: flex;
  justify-content: center; 
  gap: 20px; 
  flex-wrap: wrap;
}

.container-contact a{
  text-decoration: none;
}

.container-contact .i1{
  background: linear-gradient(45deg, #1877f2, #3b5998);
}

.container-contact .i2{
  background: linear-gradient(45deg, #25d366, #128c7e);
}

.container-contact .i3{
  background: linear-gradient(45deg, #0077b5, #005582);
}

.container-contact .i4{
  background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
}

.container-contact .i5{
  background: red;
}

.container-contact .container-icon{
  position: relative;
  width: 60px;
  height: 60px;
}

.container-contact .container-icon:before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 2px dashed white;
  animation: icon-animation 7s linear infinite;
}

.container-contact .container-icon i {
  font-size: 25px;
  color: white;
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
}

@keyframes icon-animation {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.formulaire .succesMessage{
  text-align: center;
  position: fixed;
  top: 0; /* départ pour l'animation */
  left: 50%;
  transform: translateX(-50%);
  background-color: #4bb543;
  color: white;
  font-size: 18px;
  width: fit-content;
  padding: 15px 25px;
  border-radius: 25px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  animation: 
  apparition 0.5s forwards,
  disparition 0.5s 2.5s forwards;
}

@keyframes apparition {
  from {
    opacity: 0;
    top: 0;
  }
  to {
    opacity: 1;
    top: 150px;
  }
}

@keyframes disparition {
  from {
    opacity: 1;
    top: 150px;
  }
  to {
    opacity: 0;
    top: 0;
  }
}

.formulaire label{
  font-size: 22px;
  font-weight: 600;
  color:#102f86;
}

.formulaire label span{
  color: red;
}


.formulaire input, textarea{
  border: solid 1px rgba(128, 128, 128, 0.16);
  border-radius: 10px;
  padding: 10px;
  background-color: rgba(128, 128, 128, 0.096);
  font-size: 17px;
}
.formulaire input:focus, textarea:focus {
  border: 2px solid #1E3A8A;
  outline: none;
  color: #1E3A8A;
  font-weight: 500;
}

.formulaire textarea{
  height: 200px;
}

.formulaire .champ11{
  display: flex;
  flex-direction: column;
}

.formulaire button{
  background-color: #1E3A8A;
  color: white;
  border: none;
  border-radius: 10px;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 16px;
  transition: ease 0.3s;
}

.formulaire button:hover{
  transform: scale(1.05);
}

.container-footer{
  padding-top: 50px;
  padding-left: 0px;
  background-color: #000033;
  color: white;
}

.container-footer .row-container{
  display: flex;
  justify-content: space-evenly
}

.container-footer i{
  color: white;
}

.container-footer a{
  text-decoration: none;
  color: #edcc66;
  font-size: 17px;
  font-weight: 500;
  transition: ease 0.5s;
}

.container-footer a:hover{
  color: blue;
}


/* annimation */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: 1s;
}
.reveal-visible  {
  opacity: 1;
  transform: translateY(0);
}
.reveal-1{
  transition-delay: .2s;
}
.reveal-2{
  transition-delay: .4s;
}
.reveal-3{
  transition-delay: .6s;
}
.reveal-4{
  transition-delay: .8s;
}
.reveal-5{
  transition-delay: 1s;
}