body{
  background-color: #d9d5f27a;
margin:0;
font-family:Arial, Helvetica, sans-serif;
}

/* HEADER */

header{
display:flex;
justify-content:space-between;
align-items:center;
background:#0b6fa4;
padding:10px 40px;
color:white;
}

.logo{
gap: 30px;
height:60px;
padding-left: 20px;
display:flex;
align-items:justify;
margin-right: 40px; /* espace entre logo et menu */
}

nav ul{
list-style:none;
display:flex;
margin:0;
padding:0;
}

nav ul li{
position:relative;
}

nav ul li a{
display:block;
padding:15px 20px;
color:white;
text-decoration:none;
}

nav ul li:hover{
background:#095b86;
}

/* MENU DEROULANT */

nav ul li ul{
display:none;
position:absolute;
top:50px;
background:#0b6fa4;
flex-direction:column;
min-width:220px;
}

nav ul li:hover ul{
display:block;
}

nav ul li ul li{
border-bottom:1px solid #ffffff33;
}
    /* Section slider */
    .slider {
      position: relative;
      width: 80%;
      max-width: 900px;
      margin: 40px auto;
      overflow: hidden;
      border-radius: 20px; /* coins arrondis */
      box-shadow: 0 6px 12px rgba(0,0,0,0.25); /* ombre portée */
    }

    .slides {
      display: flex;
      transition: transform 0.6s ease-in-out;
    }

    .slide {
      min-width: 100%;
      transition: opacity 0.6s ease;
    }

    .slide img {
      width: 100%;
      display: block;
      border-radius: 20px; /* arrondi sur les images */
    }

    /* Navigation par points */
    .navigation {
      text-align: center;
      margin-top: 15px;
    }

    .dot {
      height: 12px;
      width: 12px;
      margin: 0 5px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .dot.active {
      background-color: #00695c;
    }
/* Main content */


.promoteur, .directeur {
  flex: 1;
  margin: 20px;
  text-align: center;
}

.promoteur img, .directeur img {
  width: 200px;
  height: auto;
  border-radius: 10px;
}
/* SECTION HERO */

.hero{
height:500px;
display:flex;
align-items:center;
justify-content:center;
color:rgba(82, 6, 214, 0.573);
text-align:center;
}

.hero h1{
font-size:45px;
background:rgba(52, 6, 235, 0.719);
padding:20px;
border-radius:10px;
}

/* SPECIALITES */

.specialites{
background-color: #1f07a95b;
padding:60px;
text-align:center;
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
}

.card{
background:rgba(4, 149, 33, 0.518);
padding:20px;
border-radius:8px;
box-shadow:0 0 10px rgba(0,0,0,0.1);
}

.card img{
width:100%;
height:150px;
object-fit:cover;
border-radius:5px;
}

.card h3{
margin-top:10px;
}

/* FOOTER */

footer{
background:#0b6fa4;
color:white;
text-align:center;
padding:20px;
}

.whatsapp-floating {
  position: fixed;
  top: 50%;
  right: 70px;
  transform: translateY(-50%);
  background-color: #3c25d370;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  animation: pulse 2s infinite;
}

.whatsapp-floating img {
  display: block;
}

/* Animation de pulsation */
@keyframes pulse {
  0% {
    transform: translateY(-50%) scale(1);
  }
  50% {
    transform: translateY(-50%) scale(1.1);
  }
  100% {
    transform: translateY(-50%) scale(1);
  }
}