/* ===== Header Navigation (Desktop) ===== */
nav a, nav .group > a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: rgb(30,88,126); /* couleur par défaut */
  padding: 0.55rem 0.5rem; /* plus petit padding */
  font-size: 0.875rem; /* taille texte réduite */
  border-radius: 0.5rem;
  transition: all 0.3s ease;
}

nav a:hover, nav .group:hover > a {
  color: #FFD700;
  box-shadow: var(--hover-shadow);
}

nav a i {
  margin-right: 0.5rem; /* icône plus serrée */
  font-size: 0.9rem; /* icône plus petite */
  color: rgb(63, 137, 185); /* icône rouge */
}

nav .group ul li a {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem; /* sous-menu plus compact */
  font-size: 0.85rem; /* texte plus petit */
  color: rgb(30,88,126);
  transition: all 0.2s ease;
}

nav .group ul li a:hover {
  background-color: #FFD700;
  color: #fff;
  box-shadow: var(--hover-shadow);
}

header .container {
  display: flex;
  justify-content: space-between; /* déjà présent */
  align-items: center;
  gap: 9rem; /* <-- ajoute un gap pour plus d'espace */
}

header a img {
  margin-right: 5rem; /* espace entre logo et menu */
  gap: 2rem;
}


nav {
  padding-left: 1.5rem; /* espace intérieur côté logo */
}


nav .group ul li a i {
  margin-right: 0.1rem;
  font-size: 0.85rem;
  color: rgb(63, 137, 185); /* icône rouge */
}

nav .group ul li a:hover i {
  color: #fff; /* icône devient blanche au hover */
}

/* ===== Mobile Menu ===== */
#mobileMenu ul li a {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem; /* plus petit */
  font-size: 0.875rem;
  color: rgb(30,88,126);
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

#mobileMenu ul li a:hover {
  background-color: #FFD700;
  color: #fff;
  box-shadow: var(--hover-shadow);
}

#mobileMenu ul li a i {
  margin-right: 0.3rem;
  font-size: 0.85rem;
  color: rgb(63, 137, 185);
}

#mobileMenu ul li a:hover i {
  color: #fff;
}

#mobileMenu details summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  color: rgb(30,88,126);
}

#mobileMenu details summary:hover {
  background-color: #FFD700;
  color: #fff;
  box-shadow: var(--hover-shadow);
}

#mobileMenu details summary i {
  font-size: 0.85rem;
  color: red; /* icône rouge */
}

#mobileMenu details summary:hover i {
  color: #fff;
}


 html, body {
      margin: 0;
      padding: 0;
      min-height: 100%;
      display: flex;
      flex-direction: column;
    }
    main { flex: 1; }


    
/* Style pour le bouton Back to top */
 .back-to-top {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: var(--primary-color);
            color: #fff;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            text-decoration: none;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
            opacity: 0.9;
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        .back-to-top:hover {
            opacity: 1;
            transform: scale(1.1);
            background-color: var(--secondary-color);
        }


        .chatbot-toggle {
            position: fixed;
            bottom: 80px;
            right: 20px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            transition: all .3s ease;
            z-index: 1000;
            cursor: pointer;
            background: none;
            border: none;
        }
        .chatbot-toggle:hover {
            transform: translateY(-2px);
        }