Body {
  Margin : 0 ;
  background-repeat: no-repeat;
  Color : #E91E63 ;
}

 h1,h2,h3 {
  font-family: 'Dancing Script',cursive;
  text-align: center;
 }

.services {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.service-card {
  height: 500px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: 0.4s;
  pointer-events: none;
}

.service-card:hover .card-overlay {
  opacity: 1;
}

  
  Header {
    Background : linear-gradient(to right, #E91E63, #F5C16C) ;
    Color : white ;
    Padding : 10px ;
    Text-align : center ;
  }

  .navbar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  
  }

  .menu-icon {
    width: 35px;
    cursor: pointer;
    position: absolute;
    left: 20px;
  }
  
  .brand {
    text-align: center;
  }
  
  /* LOGO IMAGE */
  .Logo-img {
    width: 70px;
    height: auto;
    margin-bottom: 8px;
  }
  
/* Icône menu */
.menu-icon {
  Width : 35px ;
  Cursor : pointer ;
}

/* Sidebar */
.sidebar {
  Position : fixed ;
  Top : 0 ;
  Left : -260px ; /* caché */
  Width : 250px ;
  Height : 100% ;
  Background : white ;
  Padding-top : 60px ;
  Box-shadow : 2px 0 20px rgba(0,0,0,0.2) ;
  Transition : 0.4s ;
  z-index : 1000 ;
}

 /* Liens */
.sidebar a {
  Display : block ;
  Padding : 15px 25px ;
  Text-decoration : none ;
  Font-size : 18px ;
  Color : #f6c445 ;
  Font-weight : bold ;
}

.sidebar a :hover {
  Background : #f6c445 ;
  Color : white ;
}

/* Bouton fermer */
.close-btn {
  Position : absolute ;
  Top : 15px ;
  Right : 20px ;
  Font-size : 30px ;
  Cursor : pointer ;
  Color : #f6c445 ;
}

/* Overlay sombre */
.overlay {
  Position : fixed ;
  Top : 0 ;
  Left : 0 ;
  Width : 100% ;
  Height : 100% ;
  Background : rgba(0,0,0,0.4) ;
  Display : none ;
  z-index : 900 ;
}

/* Active Sidebar */
.sidebar.active {
  Left : 0 ;
}

/* Active Overlay */
.overlay.active {
  Display : block ;
}

.logo-img {
  Width : 90px ;
  Border-radius : 50% ;
  Background : white ;
  Padding : 8px ;
}

  .hero {
    Color :#E91E63 ;
    Padding : 50px ;
    Text-align : center ;
  }
  
  .gallery {
    Padding : 40px ;
    Text-align : center ;
  }
  
  .gallery .images {
    Display : flex ;
    Justify-content : center ;
    Gap : 15px ;
    Flex-wrap : wrap ;
  }
  
  .gallery img {
    Width : 250px ;
    Border-radius : 10px ;
    Cursor : pointer ;
    Transition : transform 0.3s ;
  }
  .gallery img:hover {
  Transform : scale(1.05) ;
  }

  /* Lightbox */
#lightbox {
  Position : fixed ;
  Top : 0 ;
  Left : 0 ;
  Width : 100% ;
  Height : 100% ;
  Background : rgba(0,0,0,0.9) ;
  Display : none ;
  Justify-content : center ;
  Align-items : center ;
  z-index : 9999 ;
  pointer-events: auto;
}

#lightbox.active {
  display: flex;
}


#lightbox img {
  Max-width : 90% ;
  Max-height : 90% ;
  Cursor : zoom-in ;
  Transition : transform 0.3s ;
  pointer-events: auto;
}

#close {
  Position : absolute ;
  Top : 20px ;
  Right : 30px ;
  Font-size : 40px ;
  Color : white ;
  Cursor : pointer ;
}


  .contact {
    Background : #f9f9f9 ;
    Padding : 40px ;
    Text-align : center ;
  }
  
  .btn-appointment {
    Background-color : #E91E63 ;
    Color : #fff ;
    Padding : 14px 30px ;
    Border : none ;
    Border-radius : 30px ;
    Font-size : 16px ;
    Cursor : pointer ;
    Transition : 0.3s ;
  
  }
  
  .btn-appointment:hover {
    Background-color : #b38d3a ;
  }
  
  .form-container {
    Max-height : 0 ;
    Overflow : hidden ;
    Transition : max-height 0.5s ease ;
    Margin-top : 20px ;
  }

  .form-container.open {
  max-height: 600px;
  }
  
  .form-container form {
    Padding : 20px ;
    Border-radius : 10px ;
  }
  
  .form-container input,
  .form-container textarea {
    Width : 100% ;
    Padding : 12px ;
    Margin-bottom : 12px ;
    Border-radius : 6px ;
    Border : 1px solid #ccc ;
  }
  
  .form-container button {
    Background : #E91E63 ;
    Color : #fff ;
    Border : none ;
    Padding : 12px ;
    Width : 50% ;
    Border-radius : 6px ;
    Cursor : pointer ;
  }
  

  Form {
    Font-family:'Poppins', sans-serif ;
    Max-width : 350px ;
    Margin : auto ;
  }
  
  Input, textarea {
    Width : 100% ;
    Padding : 10px ;
    Margin : 10px 0 ;
  }
  
  Button {
    Background : #E91E63 ;
    Color : white ;
    Border : none ;
    Padding : 12px ;
    Cursor : pointer ;
  }
  
  
  
  Footer {
    Background : #111 ;
    Color : white ;
    Text-align : center ;
    Padding : 15px ;
  }

  .pre {
    text-align: center;
  }
 
  .social-icons {
    Margin-top : 15px ;
    Display : flex ;
    Justify-content : center ;
    Gap : 20px ;
  }
  
  .social-icons img {
    Width : 35px ;
    Transition : 0.3s ;
    Cursor : pointer ;
  }
  
  .social-icons img:hover {
    Transform : scale(1.2) ;
  }

  #lightbox img.zoomed {
  transform: scale(2);
  cursor: zoom-out;
}