/*
 * Menu burger mobile - Les Cigognes de l'Espoir / Storks of Hope
 * Se superpose a css/menu2021.css UNIQUEMENT sous 52em (la ou menu2021 passe en mode mobile).
 * Sur ordinateur (>= 52em) rien ne change, a part le masquage des elements propres au mobile.
 */

/* Elements propres au mobile : invisibles sur ordinateur */
#menu .burger-brand,
#menu .burger-overlay,
#menu .burger-cta,
#menu .burger-text { display: none; }

@media (max-width: 51.99em) {

	/* --- Barre du haut, toujours visible --- */
	/* la barre reste collee en haut de l'ecran, sur toute la largeur */
	body { padding-top: 63px !important; }

	/* le grand logo fait doublon avec celui de la barre : on le masque sur mobile */
	header h1 { display: none !important; }
	header { padding-top: 14px !important; }
	#menu, #menu.fixedTop {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		z-index: 2000;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		margin: 0 !important;
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 6px 0 14px;
		box-sizing: border-box;
		background: #FFFFFF;
		border-bottom: 3px solid #DA5C4F;
		box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
	}
	#menu .burger-brand img { display: block; height: 44px; width: auto; max-width: 100%; }
	#menu .burger-brand {
		display: flex;
		align-items: center;
		height: 60px;
		text-shadow: none !important;
		font-family: Lato, sans-serif;
		font-weight: 700;
		font-size: 17px;
		line-height: 1.15;
		color: #384656 !important;
		text-decoration: none;
		background: none !important;
		border: 0 !important;
		padding: 0 !important;
		text-transform: none;
		max-width: 70%;
	}

	/* Le libelle "CLIQUEZ POUR VOIR LE MENU" devient le bouton burger */
	#menu #toggle-menu {
		position: relative;
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		padding: 0 !important;
		margin: 0;
		border: 0 !important;
		border-radius: 10px;
		background: transparent !important;
		color: transparent !important;
		font-size: 0 !important;
		cursor: pointer;
		text-shadow: none !important;
		-webkit-tap-highlight-color: transparent;
	}
	#menu #toggle-menu .drop-icon { display: none !important; }
	#menu #toggle-menu::before,
	#menu #toggle-menu::after {
		content: "";
		position: absolute;
		left: 12px;
		width: 24px;
		height: 2.5px;
		border-radius: 2px;
		background: #384656;
		transition: transform .2s ease, box-shadow .2s ease, top .2s ease;
	}
	#menu #toggle-menu::before { top: 16px; box-shadow: 0 7px 0 #384656; }
	#menu #toggle-menu::after  { top: 30px; }
	#menu #toggle-menu:focus-visible { outline: 3px solid #384656; outline-offset: 2px; }
	/* croix quand le menu est ouvert */
	#menu.is-open #toggle-menu::before { top: 23px; box-shadow: none; transform: rotate(45deg); }
	#menu.is-open #toggle-menu::after  { top: 23px; transform: rotate(-45deg); }

	/* --- Panneau lateral --- */
	#menu > input#tm { position: absolute !important; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
	#menu .main-menu {
		display: block !important;
		position: fixed !important;
		top: var(--burger-top, 60px);
		right: 0;
		bottom: 0;
		left: auto !important;
		width: min(86vw, 360px) !important;
		margin: 0 !important;
		padding: 6px 0 0 !important;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		background: #FFFFFF !important;
		box-shadow: -8px 0 24px rgba(0, 0, 0, .18);
		transform: translateX(105%);
		visibility: hidden;
		transition: transform .25s ease, visibility 0s linear .25s;
		z-index: 2002;
		text-align: left;
	}
	#menu > input#tm:checked ~ .main-menu,
	#menu.is-open .main-menu {
		transform: translateX(0);
		visibility: visible;
		transition: transform .25s ease, visibility 0s linear 0s;
	}

	/* voile sombre */
	#menu .burger-overlay {
		display: block;
		position: fixed;
		top: var(--burger-top, 60px); left: 0; right: 0; bottom: 0;
		background: rgba(28, 35, 44, .55);
		opacity: 0;
		visibility: hidden;
		transition: opacity .25s ease, visibility 0s linear .25s;
		z-index: 2001;
		cursor: pointer;
	}
	#menu > input#tm:checked ~ .burger-overlay,
	#menu.is-open .burger-overlay { opacity: 1; visibility: visible; transition: opacity .25s ease, visibility 0s linear 0s; }

	/* --- Elements de menu --- */
	#menu .main-menu li {
		position: relative;
		float: none !important;
		width: auto !important;
		display: block;
		margin: 0 !important;
		border: 0 !important;
		border-bottom: 1px solid #EFEBE8 !important;
		background: transparent !important;
		text-align: left;
	}
	#menu .main-menu > li > a {
		display: flex !important;
		align-items: center;
		min-height: 52px;
		padding: 8px 60px 8px 16px !important;
		box-sizing: border-box;
		font-family: Lato, sans-serif;
		font-size: 15px !important;
		font-weight: 700;
		letter-spacing: .02em;
		text-transform: uppercase;
		color: #384656 !important;
		background: transparent !important;
		text-shadow: none !important;
		border: 0 !important;
		border-left: 4px solid transparent !important;
		text-decoration: none !important;
	}
	#menu .main-menu > li > a .fa { margin-right: 8px; color: #B8473B; }
	#menu .main-menu > li.active > a,
	#menu .main-menu li.burger-current > a {
		color: #A8392E !important;
		border-left-color: #DA5C4F !important;
	}
	#menu .main-menu span.drop-icon { display: none !important; }
	#menu .main-menu .burger-text { display: inline !important; }

	/* fleche d'accordeon : zone de 52px a droite */
	#menu .main-menu label.drop-icon {
		display: flex !important;
		align-items: center;
		justify-content: center;
		position: absolute !important;
		top: 0 !important;
		right: 0 !important;
		width: 52px !important;
		height: 52px !important;
		margin: 0 !important;
		padding: 0 !important;
		border-radius: 0 !important;
		border-left: 1px solid #EFEBE8;
		background: transparent !important;
		color: #384656 !important;
		font-size: 18px !important;
		line-height: 1 !important;
		cursor: pointer;
		transition: transform .15s ease;
	}
	#menu .main-menu li.burger-open > a > label.drop-icon { transform: rotate(180deg); border-left-color: transparent; }

	#menu .main-menu input[type="checkbox"] { display: none !important; }

	/* sous-menus en accordeon */
	#menu .main-menu .sub-menu {
		display: none !important;
		position: static !important;
		width: auto !important;
		margin: 0 !important;
		padding: 2px 0 6px !important;
		border: 0 !important;
		box-shadow: none !important;
		background: #FBF7F5 !important;
	}
	#menu .main-menu input:checked + .sub-menu,
	#menu .main-menu li.burger-open > .sub-menu { display: block !important; }
	#menu .main-menu .sub-menu li { border-bottom: 0 !important; }
	#menu .main-menu .sub-menu li a {
		display: block !important;
		min-height: 44px;
		box-sizing: border-box;
		padding: 12px 60px 12px 30px !important;
		font-family: Lato, sans-serif;
		font-size: 15px !important;
		font-weight: 400;
		line-height: 1.3;
		text-transform: none !important;
		color: #384656 !important;
		background: transparent !important;
		text-shadow: none !important;
		border: 0 !important;
		text-decoration: none !important;
	}
	#menu .main-menu .sub-menu label.drop-icon { height: 44px !important; border-left: 0; }
	#menu .main-menu .sub-menu .sub-menu { background: #F5EEEA !important; }
	#menu .main-menu .sub-menu .sub-menu li a { padding-left: 46px !important; font-size: 14px !important; color: #4A5666 !important; }
	#menu .main-menu .sub-menu li.burger-current > a { font-weight: 700; color: #A8392E !important; }

	/* boutons du bas */
	#menu .main-menu li.burger-cta {
		display: flex !important;
		gap: 10px;
		padding: 16px !important;
		border-bottom: 0 !important;
	}
	#menu .main-menu li.burger-cta a {
		flex: 1;
		display: flex !important;
		align-items: center;
		justify-content: center;
		min-height: 48px;
		padding: 0 8px !important;
		border-radius: 10px;
		font-family: Lato, sans-serif;
		font-size: 15px !important;
		font-weight: 700;
		text-transform: none !important;
		text-decoration: none;
		box-sizing: border-box;
		text-shadow: none !important;
	}
	#menu .main-menu li.burger-cta a.burger-cta-main { background: #B8473B !important; color: #FFFFFF !important; border: 0 !important; }
	#menu .main-menu li.burger-cta a.burger-cta-alt  { background: #FFFFFF !important; color: #384656 !important; border: 2px solid #384656 !important; }

	/* page figee derriere le menu ouvert */
	html.burger-lock, html.burger-lock body { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
	#menu .main-menu, #menu .burger-overlay, #menu #toggle-menu::before, #menu #toggle-menu::after { transition: none !important; }
}