:root{
      --bg:#0b0f17;
      --accent:#06f;
      --panel-bg:#0f1720;
      --overlay: rgba(0,0,0,0.5);
      --radius:14px;
      --ease:cubic-bezier(.2,.9,.3,1);
      --width: 320px; /* largeur du menu */
    }
	/* Barre / bouton */
	.topbar {
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 16px;
	}
	.brand {
	font-weight: 700;
	letter-spacing: 0.4px;
	}

	.burger-transparent {
		cursor: pointer;
		}
	.burger {
	--size: 42px;
	width: var(--size);
	height: var(--size);
	display: inline-grid;
	place-items: center;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.04);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
	cursor: pointer;
	padding: 6px;
	outline: none;
	position: relative;
	}

	/* Overlay */
	.overlay {
	position: fixed;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 300ms var(--ease);
	background: var(--overlay);
	z-index: 10500;
	}
	.overlay.show {
	opacity: 1;
	pointer-events: auto;
	}

	/* Panneau latéral menu général (gauche) */
	.side-menu-general {
	position: fixed;
	top: 0;
	left: 0;
	height: -webkit-fill-available;
	width: var(--width);
	max-width: 100%;
	color:#e6eef8;
	background: linear-gradient(180deg, var(--panel-bg), #08111a);
	box-shadow: -18px 0 40px rgba(2, 6, 23, 0.6);
	transform: translateX(-110%);
	transition: transform 380ms var(--ease);
	border-left: 1px solid rgba(255, 255, 255, 0.03);
	padding: 18px 10px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	border-bottom-right-radius: var(--radius);
	border-top-right-radius: var(--radius);
	overflow: auto;
	z-index: 11000;
	}
	.side-menu-general.show {
	transform: translateX(0);
	}

	/* Panneau latéral menu membre (droite) */
	
	.side-menu-membre {
	position: fixed;
	top: 0;
	right: 0;
	height: -webkit-fill-available;
	width: var(--width);
	max-width: 100%;
	color:#333;
	background:linear-gradient(#fff,#e8f4ff);
	box-shadow: 18px 0 40px rgba(2, 6, 23, 0.6);
	transform: translateX(110%);
	transition: transform 380ms var(--ease);
	border-right: 1px solid rgba(255, 255, 255, 0.03);
	padding: 18px 10px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	border-bottom-left-radius: var(--radius);
	border-top-left-radius: var(--radius);
	overflow: auto;
	z-index: 11000;
	}
	@media(min-width:1000px){
	.side-menu-membre {
		width: 500px;
	}
	}
	
	.side-menu-membre.show {
	transform: translateX(0);
	}

	.side-menu-general header,
	.side-menu-membre header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	}

	.side-menu-general nav,
	.side-menu-membre nav {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 4px;
	}

	.side-menu-general a,
	.side-menu-lien a {
	color: inherit;
	text-decoration: none;
	padding: 10px;
	border-radius: 8px;
	font-family: Khand, Roboto, Arial, serif;
	font-size: 20px;
	}
	.side-menu-general a:focus,
	.side-menu-membre a:focus {
	outline: 2px solid rgba(6, 120, 255, 0.18);
	}

	.side-menu-general .cta,
	.side-menu-membre .cta {
	margin-top: auto;
	text-align:center;
	}

	.btn {
	display: inline-block;
	padding: 10px 14px;
	border-radius: 10px;
	background: linear-gradient(90deg, var(--accent), #7fd1ff);
	color: #02122a;
	font-weight: 700;
	text-decoration: none;
	}

	/* Small screens: full height slide (optional) */
	@media (max-width: 420px) {
	:root {
	--width: 92vw;
	}
	}

	/* Accessibility: respect reduced motion */
	@media (prefers-reduced-motion: reduce) {
	.side-menu-general,
	.side-menu-membre,
	.burger .lines::before,
	.burger .lines::after {
	transition: none;
	}
	}