/* Styles de la barre de menu */
.menu {
    position: fixed; /* Fixe le menu en haut de la page */
    top: 10px; /* Ajoute un espace de 10px par rapport au haut de la page */
    left: 50%; /* Centre le menu horizontalement */
    transform: translateX(-50%); /* Correction pour bien centrer */
    width: 90%; /* Réduit la largeur à 90% pour qu'il ne touche pas les bords */
    height: 60px; /* Hauteur du menu */
    background-color: rgba(220, 220, 220, 0.4); /* Fond gris clair avec opacité */
    backdrop-filter: blur(10px); /* Ajoute l'effet de flou */
    -webkit-backdrop-filter: blur(10px); /* Pour Safari */
    border-radius: 30px; /* Arrondi complet du menu */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000; /* Garde le menu au-dessus du contenu */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Légère ombre */
}

/* Fallback pour les navigateurs qui ne supportent pas backdrop-filter */
@supports not (backdrop-filter: blur(10px)) {
    .menu {
        /* Un fond plus opaque pour compenser l'absence de flou */
        background-color: rgba(200, 200, 200, 0.9);
    }
}

/* Conteneur du menu */
.menu-container {
    width: 100%; /* Prend toute la largeur du menu */
    display: flex; /* Aligne le logo et le CTA sur une ligne */
    justify-content: space-between; /* Espace le logo et le CTA */
    align-items: center;
    padding: 0 20px; /* Marge intérieure : 20px à gauche et à droite */
    box-sizing: border-box; /* Inclut le padding dans la largeur totale */
}


/* Logo */
.logo-container {
    display: flex;
    align-items: center; /* Centre le texte et l'image verticalement */
}

.logo {
    height: 30px; /* Taille de l'image du logo */
    margin-right: 10px; /* Espacement entre l'image et le texte */
}

.site-name {
    font-weight: 900;
    font-size: 22px;
    color: #000; /* Couleur noire pour le texte */
    text-decoration: none; /* Supprime le soulignement */
}

/* Bouton CTA */
.cta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FE41C4;
    color: white;
    font-weight: 500;
    font-size: 14px;
    border: none;
    border-radius: 30px;
    padding: 8px 20px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

/* Icône dans le bouton */
.cta-icon {
    width: auto; /* La largeur s'ajuste automatiquement */
    height: 16px; /* Fixe la hauteur pour s'assurer qu'elle s'affiche correctement */
    margin-right: 8px; /* Espacement entre l'icône et le texte */
    object-fit: contain; /* S'assure que l'image ne soit pas déformée */
}

/* Effet au survol */
.cta-button:hover {
    background-color: black; /* Couleur noire au survol */
}

a {
    text-decoration: none; /* Supprime le soulignement pour tous les liens */
}

/* Responsive */
@media (max-width: 1024px) {
    .menu-cta {
        display: none; /* Cache le bouton CTA sur les petits écrans */
    }
}