/**
 * Menu Transition Broye.
 *
 * Les valeurs par défaut reprennent le rendu de l'ancien widget ElementsKit.
 * Chacune passe par une variable, surchargée depuis l'onglet Style du widget.
 */

.tb-nav {
	/* Barre desktop */
	--tb-nav-bar-height: 60px;
	--tb-nav-link-color: var(--e-global-color-primary);
	--tb-nav-link-color-hover: var(--e-global-color-accent);
	--tb-nav-link-color-active: var(--e-global-color-accent);
	--tb-nav-link-padding: 0 20px;

	/* Bouton hamburger */
	--tb-nav-toggle-size: 48px;
	--tb-nav-toggle-radius: 12px;
	--tb-nav-toggle-bg: var(--e-global-color-19c0c5a);
	--tb-nav-toggle-bg-hover: var(--e-global-color-secondary);
	--tb-nav-toggle-color: var(--e-global-color-primary);
	--tb-nav-toggle-color-hover: var(--e-global-color-e86f8c5);
	--tb-nav-bar-width: 22px;
	--tb-nav-bar-thickness: 3px;
	--tb-nav-bar-gap: 5px;

	/* Panneau */
	--tb-nav-panel-width: 350px;
	--tb-nav-panel-max-width: 85vw;
	--tb-nav-panel-bg: var(--e-global-color-secondary);
	--tb-nav-panel-padding: 10px 0;
	--tb-nav-panel-link-color: var(--e-global-color-e86f8c5);
	--tb-nav-panel-link-color-hover: var(--e-global-color-accent);
	--tb-nav-panel-link-padding: 8px 15px 8px 30px;

	/* Logo du panneau */
	--tb-nav-logo-max-width: 140px;
	--tb-nav-logo-max-height: 70px;
	--tb-nav-logo-margin: 7px 0 30px 25px;

	/* Voile et animation */
	--tb-nav-overlay-color: rgba(51, 51, 51, 0.5);
	--tb-nav-speed: 0.6s;
	--tb-nav-close-delay: 0.4s;

	position: relative;
}

/* ---------- Listes ---------- */

.tb-nav__list {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tb-nav__list li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tb-nav__list a {
	display: block;
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-size: var(--e-global-typography-accent-font-size);
	font-weight: var(--e-global-typography-accent-font-weight);
	text-transform: var(--e-global-typography-accent-text-transform);
	font-style: var(--e-global-typography-accent-font-style);
	text-decoration: var(--e-global-typography-accent-text-decoration);
	letter-spacing: var(--e-global-typography-accent-letter-spacing);
	transition: color 0.2s ease;
}

/* ---------- Barre desktop ---------- */

.tb-nav__list--desktop {
	height: var(--tb-nav-bar-height);
	justify-content: center;
}

.tb-nav__list--desktop a {
	padding: var(--tb-nav-link-padding);
	color: var(--tb-nav-link-color);
}

.tb-nav__list--desktop a:hover,
.tb-nav__list--desktop a:focus {
	color: var(--tb-nav-link-color-hover);
}

.tb-nav__list--desktop .current-menu-item > a,
.tb-nav__list--desktop .current-menu-ancestor > a {
	color: var(--tb-nav-link-color-active);
}

/* ---------- Bouton hamburger ---------- */

/*
 * Le bouton sert aussi de fermeture : il doit rester cliquable au-dessus du
 * panneau (9998) et du voile (9997), qui sont ses frères dans le même
 * contexte d'empilement.
 */
.tb-nav .tb-nav__toggle {
	display: none;
	position: relative;
	z-index: 9999;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: var(--tb-nav-bar-gap);
	width: var(--tb-nav-toggle-size);
	height: var(--tb-nav-toggle-size);
	padding: 0;
	border: 0;
	border-radius: var(--tb-nav-toggle-radius);
	background-color: var(--tb-nav-toggle-bg);
	cursor: pointer;
	float: right;
	transition: background-color 0.25s ease;
}

.tb-nav .tb-nav__bar {
	display: block;
	width: var(--tb-nav-bar-width);
	height: var(--tb-nav-bar-thickness);
	border-radius: calc(var(--tb-nav-bar-thickness) / 2);
	background-color: var(--tb-nav-toggle-color);
	transition: background-color 0.25s ease, transform 0.25s ease, opacity 0.2s ease;
}

/* La barre du milieu est plus courte : un peu de caractère, comme le kit. */
.tb-nav .tb-nav__bar:nth-child(2) {
	width: calc(var(--tb-nav-bar-width) * 0.65);
	align-self: flex-start;
	margin-left: calc((var(--tb-nav-toggle-size) - var(--tb-nav-bar-width)) / 2);
}

.tb-nav .tb-nav__toggle:hover,
.tb-nav .tb-nav__toggle:focus-visible {
	background-color: var(--tb-nav-toggle-bg-hover);
}

.tb-nav .tb-nav__toggle:hover .tb-nav__bar,
.tb-nav .tb-nav__toggle:focus-visible .tb-nav__bar {
	background-color: var(--tb-nav-toggle-color-hover);
}

.tb-nav .tb-nav__toggle:hover .tb-nav__bar:nth-child(2) {
	width: var(--tb-nav-bar-width);
}

/* Croix lorsque le panneau est ouvert. */
.tb-nav.is-open .tb-nav__bar:nth-child(1) {
	transform: translateY(calc(var(--tb-nav-bar-thickness) + var(--tb-nav-bar-gap))) rotate(45deg);
}

.tb-nav.is-open .tb-nav__bar:nth-child(2) {
	opacity: 0;
}

.tb-nav.is-open .tb-nav__bar:nth-child(3) {
	transform: translateY(calc((var(--tb-nav-bar-thickness) + var(--tb-nav-bar-gap)) * -1)) rotate(-45deg);
}

/* ---------- Voile ---------- */

/*
 * Le voile ne fait pas de fondu : il reste opaque et sort de l'écran par le
 * même côté que le panneau. Sa fermeture est retardée pour que le panneau
 * parte en premier.
 */
.tb-nav__overlay {
	position: fixed;
	top: 0;
	z-index: 9997;
	width: 100%;
	height: 100%;
	background-color: var(--tb-nav-overlay-color);
	transition: left var(--tb-nav-speed) cubic-bezier(0.6, 0.1, 0.68, 0.53) var(--tb-nav-close-delay);
}

.tb-nav--left .tb-nav__overlay {
	left: -100%;
}

.tb-nav--right .tb-nav__overlay {
	left: 100%;
}

.tb-nav.is-open .tb-nav__overlay {
	left: 0;
	transition: left var(--tb-nav-speed) cubic-bezier(0.22, 0.61, 0.24, 1) 0s;
}

/* ---------- Panneau ---------- */

.tb-nav__panel {
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: 9998;
	width: var(--tb-nav-panel-width);
	max-width: var(--tb-nav-panel-max-width);
	padding: var(--tb-nav-panel-padding);
	overflow-y: auto;
	background-color: var(--tb-nav-panel-bg);
	transition: transform var(--tb-nav-speed) cubic-bezier(0.6, 0.1, 0.68, 0.53) 0s;
}

.tb-nav--left .tb-nav__panel {
	left: 0;
	transform: translateX(-100%);
}

.tb-nav--right .tb-nav__panel {
	right: 0;
	transform: translateX(100%);
}

.tb-nav.is-open .tb-nav__panel {
	transform: translateX(0);
	transition: transform var(--tb-nav-speed) cubic-bezier(0.22, 0.61, 0.24, 1) 0s;
}

.tb-nav__panel-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 10px 0;
}

.tb-nav__logo {
	display: block;
	margin: var(--tb-nav-logo-margin);
	padding: 5px;
}

.tb-nav__logo img {
	display: block;
	width: auto;
	height: auto;
	max-width: var(--tb-nav-logo-max-width);
	max-height: var(--tb-nav-logo-max-height);
}

.tb-nav__list--panel {
	flex-direction: column;
	align-items: stretch;
}

.tb-nav__list--panel a {
	padding: var(--tb-nav-panel-link-padding);
	color: var(--tb-nav-panel-link-color);
}

.tb-nav__list--panel a:hover,
.tb-nav__list--panel a:focus,
.tb-nav__list--panel .current-menu-item > a {
	color: var(--tb-nav-panel-link-color-hover);
}

/* ---------- Bascule ---------- */

@media (max-width: 1024px) {
	.tb-nav__list--desktop {
		display: none;
	}

	.tb-nav .tb-nav__toggle {
		display: flex;
	}
}

@media (min-width: 1025px) {
	.tb-nav__panel,
	.tb-nav__overlay {
		display: none;
	}
}

/* Blocage du défilement quand le panneau est ouvert */
body.tb-nav-locked {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.tb-nav__panel,
	.tb-nav__overlay,
	.tb-nav__list a,
	.tb-nav__bar {
		transition: none;
	}
}