/* Styles pour le mégamenu desktop */
#menu-altacuir-desktop {
    position: relative;
    z-index: 1000;
    background-color: white;
    color: #333;
    border-bottom: 1px solid rgb(240,240,240);
}

.seo-links-hidden {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
  }

.mega-menu-columns .link {
    pointer-events: all; /* Assurez-vous que les éléments sont cliquables */
    z-index: 10; /* Assurez-vous que le lien est bien au-dessus d'autres éléments */
}

.top_bar_new {
    position: relative;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 100%;
    background: #333333;
}

.top_bar_new svg{
    margin-right: 5px;
    font-size: 20px;
}

.top_bar_new p {
    color: white;
    font-size: 13px;
    margin-bottom: 0;
}

.menu-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.menu_logo img {
    width: 180px;
}

.separator_v {
    height: 30px;
    width: 1px;
    margin-right: 20px;
    border-left: 1px solid #333333;
}

.header_info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.phone_number {
    font-weight: 800;
    font-size: 16px;
    color: #333333;
    letter-spacing: 0.5px;
}

.horaires {
    color: #333333;
    font-size: 11px;
    line-height: 18px;
}

.menu-icons {
    display: flex;
    align-items: center;
}

.search-toggle, .cart-icon {
    background: none;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    position: relative;
}

.search-toggle:focus, .cart-icon:focus {
    outline: none;
}

.cart-count {
    position: absolute;
    top: -7px;
    right: -4px;
    background: #333333;
    color: #fff;
    border-radius: 50%;
    padding: 0px 3px;
    font-size: 12px;
    width: 19px;
    height: 19px;
    text-align: center;
}

span.logged_proof {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    position: relative;
    display: block;
    background: rgb(25, 221, 25);
    top: -31px;
    right: -22px;
}

.menu-content {
    padding-left: 50px;
}

.menu-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-item {
    padding-left: 20px;
    padding-right: 20px;
    position: relative;
    cursor: pointer;
}

.menu-item a {
    color: #333333;
    font-size: 1em;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    padding-bottom: 5px; /* Espace pour le trait */
    transition: all 0.3s ease-in;
    display: inline-block; /* Pour que le trait prenne la largeur du texte */
}

.menu-item a:hover{
    font-weight: bold;
}

.menu-item a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background-color: #333; /* Couleur du trait */
    width: 0; /* Par défaut, le trait est caché */
    transition: width 0.4s ease-in-out; /* Animation de l'apparition douce */
}

.menu-item a:hover::after,
.menu-item a.active::after {
    width: 100%; /* Le trait prend la largeur du lien */
}

.menu_tool_bar {
    display: flex;
}

.menu_tool_bar svg {
    font-size: 27px;
    margin-left: 5px;
    margin-right: 5px;
}

/* Megamenu */
/* Overlay initialement caché */
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2); /* Semi-transparent */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    z-index: 998; /* Sous le mégamenu mais au-dessus du reste */
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s;
}

#overlay.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0s;
}

#mega_menu {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    z-index: 999; /* Au-dessus de l'overlay */
    top: 100%;
    left: 0;
    width: 100%;
    background-image: linear-gradient(to right, #ffffff, #fafafa, #f4f4f4, #efefef, #eaeaea);
    color: #333333;
    transform: translateY(-20px);
    transition: all 0.2s ease-in-out;
}

#mega_menu.active {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

#mega_menu.open {
    transform: none;
    transition: none; /* Désactive les transitions une fois que le menu est ouvert */
}

/* Contenu du mégamenu */
.mega-menu-columns {
    display: flex;
    justify-content: center;
    padding: 20px;
    margin-left: 25%;
    margin-right: 25%;
}

.mega-menu-columns .column {
    flex: 1 1 20%; /* Les colonnes prendront chacune 20% de la largeur, adaptative */
    margin: 10px;
    min-width: 180px; /* Taille minimale pour une colonne */
}

.column-title {
    font-weight: bold;
    font-size: 1em;
    margin-bottom: 20px;
    display: block;
}

.link {
    display: block;
    margin-bottom: 15px;
    cursor: pointer;
    font-size: 0.9em;
    color: #333; /* Couleur des liens */
    transition: color 0.2s ease;
}

.link:hover {
    text-decoration: underline;
}

/* Responsive adaptation */
@media screen and (max-width: 1200px) {
    .mega-menu-columns .column {
        flex: 1 1 45%; /* 2 colonnes côte à côte pour les écrans plus petits */
    }
}

/* Styles pour la colonne Kit */
.kit-column {
    position: relative;
    width: 100%;
    min-width: 250px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
}

.kit-text {
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
    text-align: left;
}

.kit-column img.kit-image {
    position: relative;
    top: 0px;
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: cover;
    border-radius: 5px;
}

.kit-column .rating {
    border: none;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    position: relative;
    top: 0px;
}

/* Demi-étoile stylisée avec la méthode clip */
.stars{
    margin-right:5px;
}
.half-star {
    position: relative;
    display: inline-block;
    width: 12px; /* Ajuster la taille selon vos besoins */
    height: 24px; /* Hauteur de l'étoile */
}

.half-star::before {
    content: "★";
    position: absolute;
    left: 0;
    color: gold;
    clip: rect(0px, 12px, 24px, 0px); /* Couper la moitié de l'étoile */
}

.half-star::after {
    content: "☆";
    position: absolute;
    left: 0;
    color: grey; /* Couleur de l'étoile vide */
}

.nb-avis {
    font-size: 12px;
    color: #333333;
}

span.note {
    font-size: 13px;
    margin-right: 15px;
}



/*Animation du contenu de la colonne Kit*/

/* Initialement caché avec translation vers la droite */
.kit-column .kit-text,
.kit-column img.kit-image,
.kit-column .rating {
    opacity: 0;
    transform: translateX(50px); /* Glisse depuis la droite */
    transition: opacity 0.5s ease, transform 0.5s ease; /* Animation fluide */
}

/* Classe pour déclencher l'apparition */
.kit-column.appear .kit-text,
.kit-column.appear img.kit-image,
.kit-column.appear .rating {
    opacity: 1;
    transform: translateX(0); /* Revenir à la position normale */
}

/* Ajout de délais pour différer légèrement l'apparition de chaque élément */
.kit-column.appear .kit-text {
    transition-delay: 0.05s;
}

.kit-column.appear img.kit-image {
    transition-delay: 0.2s;
}

.kit-column.appear .rating {
    transition-delay: 0.3s;
}


/*Barre de recherche*/
#barre_recherche {
    display: none; /* Cacher par défaut */
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease, opacity 0.3s ease; /* Transition pour l'animation */
}

#barre_recherche.active {
    display: block; /* Afficher l'élément */
    opacity: 1;
    height: 100px; /* Ajustez cette hauteur en fonction de vos besoins */
}






/*Dropdown Account*/
/* Style pour le menu dropdown */
.account-dropdown {
    position: absolute;
    top: 100%; /* Positionne le dropdown juste sous le SVG */
    left: 0;
    display: none; /* Caché par défaut */
    background-color: white;
    
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 180px;
    z-index: 999;
}

.account-dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.account-dropdown ul li {
    padding: 8px 12px;
}

.account-dropdown ul li a {
    text-decoration: none;
    color: #333;
    font-size: 14px;
}

.account-dropdown ul li a:hover {
    background-color: #f0f0f0;
}

/* Afficher le menu au survol de la zone contenant le SVG */
.login_wrapper:hover .account-dropdown {
    display: block;
}

/* Alignement du dropdown sous le compte */
.login_wrapper {
    position: relative; /* Permet de positionner le dropdown */
}


/* Afficher le menu au survol du SVG et du wrapper */
.login_wrapper:hover .account-dropdown {
    opacity: 1;
    visibility: visible;
}










/*Nouvelle barre de recherche*/

#cherche {
    display: none;
    opacity: 0;
    max-height: 0;
    position: relative;
    z-index:799;
    transition: max-height 0.5s ease, opacity 0.5s ease;
    -webkit-transition: max-height 0.5s ease, opacity 0.5s ease;
    background: white;
}

/* Lorsque l'élément est visible, on ajuste sa hauteur et son opacité */
#cherche.show {
    display: block;
    opacity: 1;
    max-height: 50px; /* Ajuste la hauteur maximum selon le contenu */
}

.search-toggle {
    cursor: pointer; /* Ajoute un curseur en forme de main pour indiquer que c'est cliquable */
}

div#input_cherche {
    width: 50%;
    margin: auto;
    height: 35px;
}

#cherche input.elementor-search__input.ui-autocomplete-input {
    height: 35px;
    width: 30% !important;
    font-weight: 900;
    line-height: 1em;
    padding-bottom: 6px;
}

#cherche input.elementor-search__input.ui-autocomplete-input::placeholder{
    font-weight: 900;
}

form.elementor-search {
    height: 35px;
}

#cherche .elementor-search__container {
    height: 35px;
    margin-bottom: 5px;
}

#cherche ul#ui-id-1 {
    width: 100% !important;
}

#cherche .elementor-search__product-name {
    font-weight: 500;
    color: #333333;
}