/* =====================================================================
   MENU « CATALOGUE » — déroulant flottant vers les univers du réseau
   ---------------------------------------------------------------------
   Chaque ligne porte le favicon de son univers dans un cadre teinté de la
   couleur de marque (cobalt Digit, doré Talentio). Panneau blanc, rayon de
   carte, ombre douce, conformément à la charte du hub.
   ===================================================================== */

.eb-univers {
	position: relative;
	display: flex;
	align-items: center;
}

/* --- Le déclencheur : visuellement identique aux autres entrées du menu --- */
.eb-univers__trigger {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	cursor: pointer;
	transition: color .2s ease;
}

.eb-univers__trigger:hover,
.eb-univers__trigger[aria-expanded="true"] {
	color: var(--eb-link-hover, #ED7720);
}

.eb-univers__chevron {
	transition: transform .2s ease;
}

.eb-univers__trigger[aria-expanded="true"] .eb-univers__chevron {
	transform: rotate(180deg);
}

/* Focus clavier visible — le menu doit rester praticable sans souris. */
.eb-univers__trigger:focus-visible,
.eb-univers__item:focus-visible {
	outline: 2px solid var(--eb-magenta, #E5239C);
	outline-offset: 3px;
	border-radius: 4px;
}

/* --- Le panneau flottant --- */
.eb-univers__panel {
	position: absolute;
	top: calc(100% + .85rem);
	left: 50%;
	z-index: 200;
	min-width: 320px;
	padding: .4rem;
	transform: translateX(-50%);
	background: var(--eb-surface, #FEFEFE);
	border-radius: var(--eb-radius-card, 12px);
	box-shadow: 0 14px 38px rgba(50, 53, 50, .16);
}

.eb-univers__panel[hidden] {
	display: none;
}

/* Petite flèche reliant le panneau à son déclencheur. */
.eb-univers__panel::before {
	content: "";
	position: absolute;
	top: -6px;
	left: 50%;
	width: 12px;
	height: 12px;
	margin-left: -6px;
	background: var(--eb-surface, #FEFEFE);
	transform: rotate(45deg);
	border-radius: 2px;
}

/* Zone tampon invisible : évite que le menu se ferme si la souris
   traverse l'espace entre le déclencheur et le panneau. */
.eb-univers__panel::after {
	content: "";
	position: absolute;
	top: -.85rem;
	left: 0;
	right: 0;
	height: .85rem;
}

.eb-univers__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.eb-univers__row + .eb-univers__row {
	margin-top: 2px;
}

/* --- Une ligne d'univers : le motif liseré --- */
.eb-univers__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: .8rem;
	padding: .8rem .95rem;
	border-radius: 10px;
	color: var(--eb-text, #323532);
	text-decoration: none;
	transition: background-color .2s ease, transform .2s ease;
}

.eb-univers__item:hover,
.eb-univers__item:focus-visible {
	background-color: var(--eb-gris-tres-clair, #F9F9FC);
	transform: translateX(2px);
	text-decoration: none;
}

/* --- L'icône : le favicon de l'univers ---
   Posé dans un cadre à fond teinté de la couleur de marque. Ce cadre n'est pas
   décoratif : les favicons ont des fonds, des marges et des formats
   hétérogènes, et l'encadré leur donne une assise commune. `object-fit`
   garantit qu'aucune icône n'est déformée quelle que soit sa taille source. */
.eb-univers__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	/* Légèrement plus haut que large : le cadre accompagne le nom et sa
	   promesse sur deux lignes, un carré paraissait tassé en regard. */
	width: 40px;
	height: 48px;
	border-radius: 10px;
	background-color: color-mix(in srgb, var(--eb-univers-accent, #46B5AA) 12%, #FFFFFF);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eb-univers-accent, #46B5AA) 22%, transparent);
	transition: background-color .2s ease, box-shadow .2s ease;
}

/* Repli pour les navigateurs sans color-mix : fond neutre, jamais de trou. */
@supports not (background: color-mix(in srgb, red 10%, white)) {
	.eb-univers__icon {
		background-color: var(--eb-gris-tres-clair, #F9F9FC);
		box-shadow: inset 0 0 0 1px var(--eb-gris-clair, #C3C8CC);
	}
}

.eb-univers__icon img {
	display: block;
	width: 28px;
	height: 28px;
	object-fit: contain;
}

.eb-univers__item:hover .eb-univers__icon,
.eb-univers__item:focus-visible .eb-univers__icon {
	background-color: color-mix(in srgb, var(--eb-univers-accent, #46B5AA) 20%, #FFFFFF);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eb-univers-accent, #46B5AA) 40%, transparent);
}

.eb-univers__body {
	min-width: 0;
}

.eb-univers__name {
	display: block;
	font-family: var(--eb-font-head, "Ubuntu", sans-serif);
	font-weight: 700;
	font-size: .98rem;
	line-height: 1.3;
}

.eb-univers__tagline {
	display: block;
	margin-top: .15rem;
	color: var(--eb-text-muted, #829696);
	font-size: .82rem;
	font-weight: 400;
	line-height: 1.35;
}

/* --- Repli : aucun univers résolu, l'entrée redevient un lien simple --- */
.eb-univers__fallback {
	text-decoration: none;
}

/* =====================================================================
   MOBILE — dans l'overlay du menu, le panneau ne flotte plus :
   il se déplie dans le flux, sinon il sort de l'écran.
   ===================================================================== */
.wp-block-navigation__responsive-container.is-menu-open .eb-univers {
	display: block;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .eb-univers__panel {
	position: static;
	min-width: 0;
	margin-top: .5rem;
	padding: 0;
	transform: none;
	box-shadow: none;
}

.wp-block-navigation__responsive-container.is-menu-open .eb-univers__panel::before,
.wp-block-navigation__responsive-container.is-menu-open .eb-univers__panel::after {
	content: none;
}

/* =====================================================================
   Respect de la préférence « animations réduites ».
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	.eb-univers__trigger,
	.eb-univers__chevron,
	.eb-univers__item {
		transition: none;
	}

	.eb-univers__item:hover,
	.eb-univers__item:focus-visible {
		transform: none;
	}
}