@media (max-width: 640px) {
	#focus h2, .article_actualites h1 { font-size: 1.875rem }
}

@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; }
	ul.portfolio { column-count: 3; }

}

@media screen and (max-width: 1100px) {
	#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, #outils { margin: auto; padding-top: var(--marge-l); max-width: 260px; }
	#menuprincipal a { padding: var(--marge-s); font-size: 1.25rem; text-transform: uppercase;}

	#actualites { margin: auto; max-width: 350px ;}

	.article_saison article.container, #embarquement .container { padding: 0;}

	#agendatempsfort a { margin: auto; max-width: 336px; }

	#frise-fourneau { border-left: 12px solid var(--coul-fushia); }
	#frise-fourneau h2 { padding-left: var(--marge-l); }
	#frise-fourneau .annees { padding-top: var(--marge-l);  }
	#frise-fourneau .puce { top: 10px; left: -30px; }

	#rechercher { margin-bottom: var(--marge); }
	#sociaux li:first-of-type { flex-basis: 100%; }

}

@media (min-width: 1100px) {

	:root {
		--marge: 1rem;
	}

	h1, .h1 { font-size: 4.6875rem; }
	h2, .h2 { font-size: 3.375rem; }
	h3, .h3 { font-size: 1.875rem; }

	#header .container { position: relative; padding: var(--marge) 0 var(--marge-s) 0; }
	.accueil { margin-bottom: var(--marge); padding-bottom: var(--marge); border-bottom: 2px solid var(--coul-gris); }
	.accueil a { position: relative; z-index: 10; }
	#navprincipale button.burger { display: none ;}
	#menuprincipal { display: flex; justify-content: center; gap: 2.5rem; font-size: 1rem;}
	#outils { display: flex; justify-content: space-between; position: absolute; z-index: 0; top: 0; left: 0;
		margin-top: 1.875rem; padding: 0 2.5rem; width: 100%; }

	#focus header { left: 120px; }
	#prochains_rdv, #actus { position: relative; padding: 0 var(--marge-l) ; }
	.page_rubrique #agenda, .page_article #agenda { padding: 0 var(--marge-l); }

	#prochains_rdv .btn, #actus .btn { position: absolute; right: 3rem; top: 1.5rem;}
	.resume_actualite a { display: flex; align-items: center; text-align: left;}
	.motclef_actualite { flex: 1;}
	.texte_actualite { padding: 0 var(--marge); flex-basis: 50%;}
	.vignette_actualite { flex-basis: 27.2%;}

	#missions { display: flex;  }
	#missions li { flex-basis: 33.3333%; }

	.demi-colonne { display: flex; justify-content: flex-end; align-items: flex-start; }
	.demi-colonne > * { width: 50% ; }
	.article_saison .demi-colonne > div:last-of-type, .article_presentation .demi-colonne > div:first-of-type { position: relative; z-index: 40; margin-top: -65px ; }

	#embarquement .wrapper { display: flex; flex-direction: row-reverse; align-items: center;}
	#embarquement .wrapper > * { flex-basis: 50%; }
	#embarquement .padding-contenu { padding-top: 0; padding-bottom: 0; }

	.article_saison .chapo, .article_tempsfort .chapo { padding-left: var(--marge-xl); padding-right: var(--marge-xl); }
	.article_tempsfort .demi-colonne { margin-bottom: var(--marge-l); }
	#agendatempsfort a { display: flex; justify-content: space-between; align-items: center;}
	#agendatempsfort .date_rdv, #agendatempsfort .lieu_rdv { width: 18%; }
	#agendatempsfort .visuel { width: 22%; }
	#agendatempsfort .infos { flex: 1; padding: 0 var(--marge); }

	#frise-fourneau .decenie { display: flex; justify-content: flex-end; }
	#frise-fourneau h2 { position: relative; text-align: center; width: 220px; overflow-wrap: break-word; font-size: 9.5rem;
		font-family: var(--font-contenu); line-height: 0.85em;}
	#frise-fourneau h2:after { position: absolute; right: -120px; top: 0; z-index: 10; display: block; content: ''; width: 10px; height: 100%; background: var(--coul-fushia); }
	#frise-fourneau .annees { padding-left: 200px; width: 72%; }
	#frise-fourneau .decenie:first-of-type .annees { padding-top: var(--marge-l);  }
	#frise-fourneau .annee.decale { display: flex; justify-content: flex-end; }
	#frise-fourneau h3 { font-size: 3.125rem }
	#frise-fourneau .puce { top: 0; left: -86px; }

	#menus-pied { display: flex; justify-content: flex-start; gap: 4rem; }
	#logos-partenaires { text-align: right;}

}

@media (min-width: 1550px) {

	#lexique { position: relative;}
	#lexique::before, #lexique::after { display: block; content: ''; position: absolute; top: 50%; left: 0;
		width: 104px; height: 225px; background: url(../images/demi-fleur.png) no-repeat; background-size: contain;
		transform: translate3d(0,-50%,0);}
	#lexique::after { left: auto; right: 0; transform: translate3d(0,-50%,0)  rotate3d(0,0,1,180deg); }

}

/* *** RWD *** */

@media (max-width: 640px) {
	/* layout */
	.container { display:inherit; }
	/*.wrapper,
	.main,
	.aside { width:100%; }*/

	.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 a { display: block; }
	.resultats-recherche .vignette_zcm { margin:0 0 1em 0; width: auto; }
}