/* ===== SECTION SERVICES ===== */
.services-section {
    position: relative;
    z-index: 5;
    color: white;
    text-align: center;
    padding-top: 230px; /* Sous la navbar */
    height: 100vh;
    overflow: hidden;
  }
  
  /* ===== TITRE ===== */
  .services-title {
    font-size: 2.4rem;
    margin-bottom: 70px;
    letter-spacing: 1px;
  }
  
  /* ===== CARROUSEL ===== */
  .carousel-container {
    margin-top: 0px !important; /* 🔹 remonte un peu moins, pour coller sous le titre */
    height: 00px !important;      /* 🔹 hauteur ajustée pour recentrer les cartes */
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0%; 
}
  
  .carousel-track {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: transform 1s ease;
  }
  
  /* ===== CARTES ===== */
  .service-card {
    position: absolute;
    top: 0;
    width: 320px;
    height: 350px;
    background: rgba(12, 22, 45, 0.75);
    backdrop-filter: blur(10px);
    border-radius: 45px;
    padding: 40px 25px;
    color: white;
    text-align: center;
    box-shadow: 0 4px 25px rgba(0,0,0,0.25);
    transition: all 1s ease;
    opacity: 0.6;
    transform: scale(0.8);

  }
  
  .service-card.active {
    transform: scale(1);
    opacity: 1;
    z-index: 5;
  }
  
  /* ===== POSITION DES CARTES ===== */
  .service-card.left {
    transform: translateX(-400px) scale(0.8);
    opacity: 0.6;
    z-index: 3;
  }
  .service-card.center {
    transform: translateX(0) scale(1.2);
    opacity: 1;
    z-index: 5;
  }
  .service-card.right {
    transform: translateX(400px) scale(0.8);
    opacity: 0.6;
    z-index: 3;
  }
  

  
  .img-placeholder img {
    width: 90%;
    height: 90%;
    object-fit: cover; /* pour remplir le cadre sans déformer */
    border-radius: 40px;
    padding-bottom: 15px;
    margin-top: -10px;
  }
  
  /* ===== FLÈCHES ===== */
  .arrow {
    position: absolute;
    top: 140px !important; /* 🔹 centre parfaitement verticalement */
    transform: translateY(-50%);  /* 🔹 compense la hauteur du bouton */
    width: 45px !important;
    height: 45px !important;
    font-size: 2rem !important;
    border-radius: 40px;
 }
  .arrow.left {
    left: 9% !important; /* 🔹 légèrement plus centré horizontalement */
  }
  .arrow.right {
    right: 9% !important;
  } 
  
  
  /* === PATCH NAVBAR + CARROUSEL VISIBILITÉ === */

/* Forcer la navbar à apparaître au bon endroit */
.navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100%;
    padding: 40px 0 0 6%;
    z-index: 999 !important;
    opacity: 1 !important;
    transform: none !important;
  }
  
  /* Logo au premier plan */
  .logo {
    position: fixed !important;
    top: 35px !important;
    right: 90px !important;
    z-index: 1000 !important;
    opacity: 0.6 !important;
  }
  
  /* Le fond ne doit plus couvrir le reste */
  .background,
  .overlay {
    pointer-events: none !important;
    z-index: -10 !important;
  }
  
  /* Correction du conteneur carrousel */
  .carousel-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 500px; /* 🔹 donne une vraie hauteur visible */
    margin-top: 60px;
  }
  
  /* On rend visibles les cartes */
  .service-card {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) scale(0.8);
    opacity: 0.6;
    transition: all 0.8s ease;
  }
  
  /* Réajustement global du titre et section */
  .services-section {
    padding-top: 220px !important;
    height: 100vh !important;
    z-index: 10 !important;
    overflow: hidden;
  }

/* ===== BOUTON VOIR PLUS ===== */
.btn-voir-plus {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 25px;
  background-color: white;
  color: rgba(12, 22, 45, 0.75);
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  border: 2px solid #13284b;
  border-radius: 30px;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  margin-bottom: 10%;
  
}

/* --- Effet au survol --- */
.btn-voir-plus:hover {
  background-color: rgba(12, 22, 45, 0.75);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}