/**
 * Navigation — menu principal, sous-menus (style dropdown Bitelo),
 * méga menus, menu mobile, pagination pilule.
 */

/* ---- Menu principal ---- */
.bt-theme #et-navigation > ul > li > a,
.bt-theme ul#et-menu > li > a {
	color: var(--bt-color-text);
	font-family: var(--bt-font) !important;
	font-weight: 500;
	font-size: 16.5px;
	letter-spacing: 0;
	transition: color var(--bt-transition-fast);
}

.bt-theme #et-navigation > ul > li > a:hover,
.bt-theme ul#et-menu > li > a:hover {
	color: var(--bt-color-accent);
	opacity: 1;
}

/* Élément actif : accent bleu, comme le .nav-link.active de Bitelo */
.bt-theme ul#et-menu > li.current-menu-item > a,
.bt-theme ul#et-menu > li.current_page_item > a,
.bt-theme ul#et-menu > li.current-menu-ancestor > a {
	color: var(--bt-color-accent) !important;
}

/* Préservation de la règle héritée : pas de majuscules sur ce menu */
.bt-theme .nom_app a {
	text-transform: none !important;
}

/* ---- Sous-menus : dropdown Bitelo (blanc, ombre 24px, items pleins au hover) ---- */
/* overflow visible : un sous-menu imbriqué (3e niveau) se déploie à
   côté de son parent et ne doit pas être rogné par celui-ci */
.bt-theme #et-navigation .sub-menu,
.bt-theme ul#et-menu .sub-menu {
	background: var(--bt-color-surface);
	border: 0;
	border-radius: var(--bt-radius-md);
	box-shadow: var(--bt-shadow-lg);
	padding: var(--bt-spacing-sm);
	overflow: visible;
}

/* Sous-menu imbriqué : posé à droite de son parent, avec un léger
   chevauchement contrôlé pour garder la continuité du survol */
.bt-theme ul#et-menu .sub-menu .sub-menu {
	left: calc(100% - 6px);
	top: 0;
}

/* Les libellés des sous-menus restent sur UNE seule ligne : le panneau
   s'élargit à la largeur de son contenu (hors méga menus, qui gardent
   leurs colonnes) */
.bt-theme ul#et-menu li:not(.mega-menu) .sub-menu {
	width: max-content;
	min-width: 220px;
	max-width: 300px;
}

.bt-theme #et-navigation .sub-menu li,
.bt-theme ul#et-menu .sub-menu li {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important; /* Extra met 30px de chaque côté */
	box-sizing: border-box;
}

body.bt-theme #main-header #et-navigation .sub-menu li a,
.bt-theme #et-navigation .sub-menu li a,
.bt-theme ul#et-menu .sub-menu li a {
	display: block !important; /* la pilule de survol remplit le panneau */
	box-sizing: border-box;
	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
	color: var(--bt-color-text);
	font-size: 0.95rem;
	font-weight: 400;
	padding: 0.7rem 1.2rem;
	border-radius: var(--bt-radius-sm);
	white-space: nowrap;
	transition: color var(--bt-transition-fast), background-color var(--bt-transition-fast);
}

.bt-theme ul#et-menu li.mega-menu .sub-menu li a {
	white-space: normal;
}

body.bt-theme #main-header #et-navigation .sub-menu li a:hover,
.bt-theme #et-navigation .sub-menu li a:hover,
.bt-theme ul#et-menu .sub-menu li a:hover {
	color: #ffffff !important;
	background-color: var(--bt-color-accent) !important;
	opacity: 1;
}

/* Indicateur des éléments avec enfants : chevron après le libellé,
   couleur héritée du lien (currentColor via mask), rotation à l'ouverture */
.bt-theme ul#et-menu > li.menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-left: 0.4rem;
	vertical-align: middle;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 4.5l4 4 4-4'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 4.5l4 4 4-4'/%3E%3C/svg%3E") no-repeat center / contain;
	opacity: 0.5;
	transition: transform var(--bt-transition-fast), opacity var(--bt-transition-fast);
}

.bt-theme ul#et-menu > li.menu-item-has-children:hover > a::after,
.bt-theme ul#et-menu > li.menu-item-has-children > a:focus-visible::after {
	transform: rotate(180deg);
	opacity: 1;
}

/* ---- Méga menu ---- */
.bt-theme ul#et-menu li.mega-menu > .sub-menu {
	border-radius: var(--bt-radius-lg);
	box-shadow: var(--bt-shadow-lg);
	padding: var(--bt-spacing-lg);
}

.bt-theme ul#et-menu li.mega-menu > .sub-menu > li > a {
	font-weight: 600;
	color: var(--bt-color-heading);
	font-size: var(--bt-font-size-sm);
	border-bottom: 2px solid var(--bt-color-accent);
	border-radius: 0;
	margin-bottom: var(--bt-spacing-sm);
}

.bt-theme ul#et-menu li.mega-menu > .sub-menu > li > a:hover {
	background: transparent;
	color: var(--bt-color-accent);
}

/* ---- Menu mobile ---- */
.bt-theme .et_mobile_menu {
	background: var(--bt-color-surface);
	border: 0;
	border-radius: var(--bt-radius-lg);
	box-shadow: var(--bt-shadow-lg);
	padding: var(--bt-spacing-sm);
	margin-top: 0.5rem;
}

.bt-theme .et_mobile_menu li a {
	color: var(--bt-color-text);
	padding: 0.85rem 1.2rem;
	border-bottom: 1px solid var(--bt-color-border);
	border-radius: var(--bt-radius-sm);
	transition: color var(--bt-transition-fast), background-color var(--bt-transition-fast);
}

.bt-theme .et_mobile_menu li:last-child a {
	border-bottom: 0;
}

.bt-theme .et_mobile_menu li a:hover {
	color: #ffffff;
	background: var(--bt-color-accent);
	opacity: 1;
}

.bt-theme .mobile_menu_bar::before {
	color: var(--bt-color-text);
}

/* ---- Pagination : pilules Bitelo ---- */
.bt-theme .paged-navigation a,
.bt-theme .pagination a,
.bt-theme .wp-pagenavi a,
.bt-theme .wp-pagenavi span,
.bt-theme .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.6rem;
	height: 2.6rem;
	padding: 0 0.8rem;
	border: 1px solid var(--bt-color-border);
	border-radius: var(--bt-radius-pill);
	background: var(--bt-color-surface);
	color: var(--bt-color-text);
	font-weight: 500;
	font-size: var(--bt-font-size-sm);
	transition: color var(--bt-transition-fast), background-color var(--bt-transition-fast),
		border-color var(--bt-transition-fast);
}

.bt-theme .paged-navigation a:hover,
.bt-theme .pagination a:hover,
.bt-theme .page-numbers:not(.current):hover {
	color: #ffffff;
	background: var(--bt-color-accent);
	border-color: var(--bt-color-accent);
}

.bt-theme .page-numbers.current,
.bt-theme .wp-pagenavi span.current {
	color: #ffffff;
	background: var(--bt-color-accent);
	border-color: var(--bt-color-accent);
}

/* ---- Pagination AJAX des catégories Extra (ul.pagination) ----
   Pastilles Bitelo alignées, sans les floats/chevauchements d'Extra */
.bt-theme ul.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	list-style: none;
	padding: 0;
	margin: var(--bt-spacing-lg) 0;
	float: none;
	width: 100%;
}

/* Pas de display forcé : Extra masque lui-même les ellipses inutiles,
   et les enfants d'un conteneur flex sont déjà blockifiés */
.bt-theme ul.pagination li,
body.bt-theme #page-container ul.pagination li {
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	border: 0 !important;
	width: auto !important;
	height: auto !important;
	background: transparent !important;
	box-shadow: none !important;
}

body.bt-theme #page-container ul.pagination li a,
.bt-theme ul.pagination li a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.6rem;
	height: 2.6rem;
	padding: 0 0.85rem;
	margin: 0 !important;
	border: 1px solid var(--bt-color-border) !important;
	border-radius: var(--bt-radius-pill) !important;
	background: var(--bt-color-surface) !important;
	color: var(--bt-color-text) !important;
	font-weight: 500;
	font-size: var(--bt-font-size-sm);
	box-shadow: var(--bt-shadow-sm);
	transition: background-color var(--bt-transition-fast), color var(--bt-transition-fast),
		border-color var(--bt-transition-fast);
}

/* L'ID est nécessaire sur les états hover/active pour rester devant la
   règle de base (qui porte aussi l'ID #page-container) */
body.bt-theme #page-container ul.pagination li a:hover,
.bt-theme ul.pagination li a:hover {
	background: var(--bt-color-accent) !important;
	border-color: var(--bt-color-accent) !important;
	color: #ffffff !important;
}

body.bt-theme #page-container ul.pagination li.active a,
.bt-theme ul.pagination li.active a {
	background: var(--bt-color-accent) !important;
	border-color: var(--bt-color-accent) !important;
	color: #ffffff !important;
}

body.bt-theme #page-container ul.pagination li.ellipsis a,
.bt-theme ul.pagination li.ellipsis a {
	border: 0 !important;
	background: transparent !important;
	box-shadow: none;
	pointer-events: none;
	color: var(--bt-color-text-muted) !important;
}

/* Fil d'ariane */
.bt-theme .breadcrumbs,
.bt-theme #breadcrumbs {
	font-size: var(--bt-font-size-sm);
	color: var(--bt-color-text-muted);
}

.bt-theme .breadcrumbs a:hover,
.bt-theme #breadcrumbs a:hover {
	color: var(--bt-color-accent);
}