@media (max-width: 640px) { 

	/* layout */
	.container { display:inherit; }

	.aside { padding-top:1em; border-top: 1px solid #b6b6b6; }
	.header .spip_logo_site, .header #slogan { width:100%; text-align:center; }

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

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

}


@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: 960px) { 

	#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.25rem;}
	#menuprincipal a { padding: var(--marge-s); }

	#sociaux h2 { margin: var(--marge) auto; }

	#footer div.id { margin-bottom: var(--marge); }

}

@media (min-width: 960px) { 

	:root { 
		--marge-l: calc( var(--marge) * 3) ;
		--marge-xl: calc( var(--marge) * 5) ;
	}
	
	#header {position: fixed; z-index: 20; top: 0; width: 100%; background: var(--coul-emphase); color: var(--coul-fond);
		transition: box-shadow var(--duree-transition), transform var(--duree-transition), background-color var(--duree-transition);}
	.page_sommaire #header { background-color: transparent; }
	#header.cachee { transform: translateY(-100%); }
	#header.defile { background: var(--coul-emphase); box-shadow: 0 8px 10px 1px rgba(0,0,0,0.2); }
	#header .container { display: flex; justify-content: space-between; align-items: center; gap: var(--marge); }

	#navprincipale button.burger { display: none ; }
	#menuprincipal { display: flex; justify-content: space-between; gap: var(--marge); }

	#introaccueil { height: 100vh;  }
	#introaccueil header { top: 10rem; left: 5rem; }

	html:not(.article_contact) .chapo { margin: 0 calc( var(--marge-l) * -1) var(--marge-l) calc( var(--marge-l) * -1); padding: var(--marge-l); }
	.article_contact .wrapper { display: flex; gap: var(--marge); align-items: center; }
	.article_contact .wrapper > * { width: 50%; }

	#sociaux { display: flex; justify-content: center; align-items: center; gap: var(--marge); }
	#sociaux h2 { margin: 0; text-align: right;}

	#footer .container { display: flex; justify-content: space-between; align-items: flex-start; }
	#footer div.id { display: flex; align-items: flex-start; gap: var(--marge); text-align: left; }
	#footer nav { text-align: right; }

}