@media (min-width: 640px) { 
	blockquote.spip { margin-bottom: 2em; padding-left: 3.5rem;  font-size: 1.25em; line-height: 1.5em; background-size: 50px 50px; }
}

@media screen and (max-width: 900px) { 

	#header { margin-bottom: var(--marge-l); text-align: center; }
	#navprincipale button.burger[aria-expanded="true"] + #menuburger { visibility:visible; opacity: 1; color: var(--coul-fond);}
	#menuburger { z-index: 1100; visibility: hidden; opacity: 0; position: fixed; top: 0; right: 0; 
		padding-top: 5rem; overflow-y: scroll; width: 100%; height: 100%; text-align: center; background: var(--coul-texte);
		overscroll-behavior-y: contain; overflow-y: auto;
		transition: opacity 0.35s; }
	#menuprincipal { padding-top: var(--marge-l); font-size: 1.875rem;}
	#menuprincipal a { padding: var(--marge-s); }

	#accueil li.bulle { margin-bottom: var(--marge-l); }

	#footer { text-align: center; }

}

@media (min-width: 900px) { 
	body { background: var(--coul-texte); }
	.container { background: var(--coul-fond)}
	#header { position: fixed; z-index: 10; top: 0; width: 100%; background: var(--coul-fond); box-shadow: 0 8px 10px 1px rgba(0,0,0,0.2); }
	#logo-entete { position: fixed; top: var(--marge); left: var(--marge); border-radius: 50%;}
	#navprincipale button.burger { display: none ; }
	#menuprincipal { display: flex; justify-content: space-around; }

	#accueil li.bulle { position: absolute; padding-left: var(--marge-l); padding-right: var(--marge-l); width: 400px; height: 400px; }
	#accueil li.bulle:nth-of-type(1) { left: 10%; top: 30%; }
	#accueil li.bulle:nth-of-type(2) { right: 5%; top: 10%; }
	#accueil li.bulle:nth-of-type(3) { right: 32%; bottom: 5%; }
	#accueil h2 { font-size: 1.875rem; }
	#bandeaudefilant { position: absolute; font-size: 1.25rem; }

	#main .container, #outils .container, #footer .container { padding: var(--marge-l) var(--marge-xxl); }
	#main .container { padding-top: 200px;}

	.liste-evenements a:link { display: flex; justify-content: space-between; align-items: center; gap: var(--marge-l); }
	.liste-evenements li:nth-of-type(even) a:link { flex-direction: row-reverse; text-align: right; }
	.liste-evenements .intro-evenement { flex: 1; }

	#footer .wrapper { display: flex; justify-content: space-between; }
	#footer .menus { text-align: right; }

}

/* *** RWD *** */

@media (max-width: 640px) { 
	/* layout */
	.container { display:inherit; }

	.header .spip_logo_site, .header #slogan { width:100%; text-align:center; }

	figure figcaption .legende { font-size:0.8em; }

	.page_recherche .main .resultats { margin:auto; max-width:360px; }
	.page_recherche .main .resultats .item a { display: block; }
	.page_recherche .main .resultats .item .vignette_zcm { margin:0 0 1em 0; width: auto; }
}