nav.navy {
	position: fixed!important;
	top: 0;
	left: 0;
	width: 100vw;
	height: 0;
  	z-index: 100;
	pointer-events: none;
	background: transparent;
}
nav .panel {
	display: none;
}
nav .panel:after {
	content: '';
	position: absolute;
	display: block;
	height: 0;
	width: 0;
	border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  border-top: 60px solid rgb(136, 199, 250);
	top: 0;
}
nav .panel.panel-left {
  margin: unset;
	left: 0;
}
nav .panel.panel-left:after {
	right: -35px;
}
nav .panel.panel-right {
  margin: unset;
	right: 0;
}
nav .panel.panel-right:after {
	left: -35px;
}

nav #menu_btn {
	display: none;
}
nav #menu_btn:after {
	display: none;
}

nav #menu {
	pointer-events: all;
	position: fixed;
	top: 80px;
	right: 10px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.15rem;
	width: 14rem;
	padding: 0.5rem;
	box-sizing: border-box;
	background: rgba(17, 17, 17, 0.9);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 0.5rem;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	visibility: hidden;
	opacity: 0;
	transform: translateY(-0.5rem);
	transition: transform .25s, opacity .25s, visibility .25s;
	z-index: 110;
}
nav #menu.open {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}
nav #menu a {
	display: block;
	width: 100%;
	color: var(--c-principal);
	text-decoration: none;
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.3px;
	padding: 0.55rem 0.75rem;
	border-radius: 0.375rem;
	transition: color .15s, background-color .15s;
	user-select: none;
}
nav #menu a:hover {
	color: #f0f0f0;
	background: rgba(255, 255, 255, 0.06);
}

nav #menu_btn:hover {
	transform: scale(1.3);
}
nav #menu_btn:hover ~ .panel {
	width: calc(50% - 70px);
}

nav #menu_btn:focus {
	transition: height .2s, transform 0s linear .2s;
	height: 0;
	outline: none;
	transform: scale(.6);
}
nav #menu_btn:focus ~ .panel {
	transition-delay: .2s;
	width: 50%;
}
nav #menu_btn:focus ~ #menu {
	transform: translateY(0);
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}

nav #menu_btn.loading {
	transform-origin: center 63%;
	animation-name: loading;
	animation-duration: .6s;
	animation-iteration-count: infinite;
}

@keyframes loading {
	0% {
		transform: scale(1) rotate(0deg);
	}
	45% {
	  transform: scale(.5) rotate(60deg);
	}
	45.0000001% {
	  transform: scale(.5) rotate(-60deg);
	}
	90% {
		transform: scale(1) rotate(0deg);
	}
	100% {
		transform: scale(1) rotate(0deg);
	}
}

.flexa {
        position: fixed;
        /* aligné sur .logo : même top (1.25rem), même inset (1.5rem) */
        top: 1.25rem;
        right: 1.5rem;
        /* sous le drawer (z:10000) : le burger passe derrière le backdrop
           quand le menu s'ouvre (comportement RECKLESS) — sinon son état
           X is-open + le X du .menu-panel__close s'affichent en doublon */
        z-index: 900;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        pointer-events: none;
}
.flexa > * {
	pointer-events: all;
}
.flexa .hamburger {
	position: relative;
	top: 0;
	right: 0;
	margin: 0;
	z-index: 110;
	cursor: pointer;
}
.flexa .chat-btn {
	position: relative;
	top: 0;
	right: 0;
}

.hamburger input {
	display: none;
}

.hamburger svg {
	height: 3em;
	transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hamburger .line {
	fill: none;
	stroke: white;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 3;
	transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
		        stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hamburger .line-top-bottom {
	stroke-dasharray: 12 63;
}

.hamburger input:checked + svg {
	transform: rotate(-45deg);
}

.hamburger input:checked + svg .line-top-bottom {
	stroke-dasharray: 20 300;
	stroke-dashoffset: -32.42;
}