/* ==========================================================================
   Menu vertical (colonne de gauche) + sous-menus
   ========================================================================== */
.main-menu li {
	position: relative;
	border-bottom: 1px solid var(--color-border);
}

.main-menu .menu-link {
	display: block;
	padding: 0.75rem 1.25rem;
	color: var(--color-text);
	text-decoration: none;
}

.main-menu .menu-link:hover,
.main-menu .menu-link:focus {
	background: #783af4;
	color: var(--color-accent);
	text-decoration: none;
}

.main-menu li.current_page_item > .menu-link {
	background: #783af4; /* Le même bleu que pour le survol */
	color: #ffffff;      /* Force le texte en blanc pour assurer la lisibilité */
	font-weight: 700;    /* Conserve le texte en gras */
}

/* Bouton chevron pour déplier les sous-menus */
.submenu-toggle {
	position: absolute;
	top: 0;
	right: 0;
	width: 44px;
	height: 100%;
	background: transparent;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.submenu-toggle span {
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--color-text-muted);
	border-bottom: 2px solid var(--color-text-muted);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.submenu-toggle[aria-expanded="true"] span {
	transform: rotate(-135deg);
}

/* Sous-menu (niveau 2) */
.sub-menu {
	background: rgba(0, 0, 0, 0.03);
}

.sub-menu .menu-link {
	padding-left: 2.25rem;
	font-size: 0.95em;
}

/* Desktop : sous-menu replié par défaut, ouvert au clic (comme en mobile)
   pour rester cohérent — évite les sous-menus "au survol" peu accessibles
   au clavier et sur écrans tactiles desktop. */
.site-nav .sub-menu {
	display: none;
}

.site-nav li.has-submenu.is-open > .sub-menu {
	display: block;
}

/* S'applique uniquement aux écrans d'ordinateurs (992px et plus) */
@media (min-width: 992px) {
    .custom-logo-link {
        background-color: #ffffff !important;
        width: 303px !important;
        height: 160px !important; /* Hauteur forcée à 160px */
        
        /* Centrage horizontal du bloc blanc */
        display: flex !important; 
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        
        /* Centrage parfait de l'image dans le bloc */
        justify-content: center !important;
        align-items: center !important;
    }

    /* Force l'image à s'adapter à la nouvelle hauteur sans se déformer */
    .custom-logo-link img {
        max-width: 100% !important;
        max-height: 100% !important;
        height: 160px !important; /* Force l'image à faire 160px de haut */
        width: auto !important; /* Conserve les proportions d'origine (pas d'écrasement) */
        margin: 0 !important;
        padding: 0 !important;
        object-fit: contain !important; /* Empêche la déformation si les proportions changent */
    }
}





/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 960px) {
	.main-menu .menu-link {
		padding: 0.9rem 1.25rem;
	}
}

/* 1. Conteneur de la recherche : alignement au centre du menu vertical */
.menu-item-search {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0;
    width: 100%;
    box-sizing: border-box;
}

/* 2. Formulaire : définit la largeur occupée par la barre de recherche (ex: 80%) */
.menu-item-search form {
    display: flex;
    width: 80%; /* Ajustez ce pourcentage selon la largeur de votre menu */
    max-width: 300px; /* Limite la largeur maximale pour éviter qu'il soit trop étiré */
    height: 50px; /* Hauteur globale fixe */
}

/* 3. Le champ de saisie (Input) */
.menu-item-search input[type="search"] {
    width: 100%;
    height: 100%; /* Prend les 50px de hauteur du formulaire */
    padding: 0 15px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px 0 0 4px; /* Arrondi à gauche */
    box-sizing: border-box;
}

/* 4. Le bouton de validation (Loupe ou texte "Rechercher") */
.menu-item-search input[type="submit"] {
    height: 100%; /* Prend les 50px de hauteur */
    padding: 0 20px;
    background-color: #333;
    color: #fff;
    font-size: 16px;
    border: none;
    border-radius: 0 4px 4px 0; /* Arrondi à droite */
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.2s ease;
}

/* Effet au survol du bouton */
.menu-item-search input[type="submit"]:hover {
    background-color: #555;
}



/* 1. Par défaut (Desktop) : On met toute la zone de gauche en blanc */
.site-header-left {
    background-color: #464646 !important;
}

/* 2. Version Mobile : On adapte pour le menu hamburger */
@media (max-width: 768px) {
    /* On retire le fond blanc global de la zone gauche pour éviter de bloquer le hamburger */
    .site-header-left {
        background-color: #464646 !important;
    }

    /* On remet le fond blanc UNIQUEMENT sur le logo ou le titre */
    .site-header-left .custom-logo-link,
    .site-header-left .site-title-link {
        background-color: #ffffff !important;
        display: inline-block;
        padding: 5px 10px;
    }

    /* On s'assure que le hamburger reste sur fond transparent */
    .site-header-left .menu-toggle {
        background-color: transparent !important;
    }
}




/* ==========================================================================
   Puce blanche pour les sous-sous-menus (Niveau 3)
   ========================================================================== */
/* Décale le lien pour faire de la place à la puce */
.sub-menu .sub-menu .menu-link {
	padding-left: 3.25rem !important; /* Plus grand que les 2.25rem du niveau 2 */
	position: relative;
}

/* Crée la petite puce blanche sous forme de cercle */
.sub-menu .sub-menu .menu-link::before {
	content: "";
	position: absolute;
	left: 2.25rem; /* Aligné sur le texte du niveau supérieur */
	top: 50%;
	transform: translateY(-50%);
	width: 6px; /* Diamètre de la puce */
	height: 6px;
	background-color: #ffffff !important; /* Force la puce en blanc */
	border-radius: 50%; /* Rend la puce parfaitement ronde */
	opacity: 0.8; /* Légère transparence pour l'élégance */
}

/* Assure que la puce reste bien visible à 100% au survol */
.sub-menu .sub-menu .menu-link:hover::before {
	opacity: 1;
}