@charset "utf-8";

/* GÉOMÉTRIE */
html, body {
	margin: 0;
	padding: 0;
}

body {
	width: 100%;
	min-height: 100vh;
}

body, * {
	box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6, p {
	margin: .6em auto 1em auto;
	padding: 0;
}
/*MODIFS_FA_20201201 Alignement des puces à 6em au lieu de 2em*/
ol, ul {
	padding: 0 0 0 6em;
}


/* IMAGES */
figure {
	display: table;
	clear: both;
}

figure > img, figure > svg {
	display: block;
	width: 100%;
	max-width: 98vw;
	max-height: 98vh;
}

figure > figcaption {
	display: table-caption;
	caption-side: bottom;
}

figure.centre {
	margin: 2rem auto;
	width: 100%;
}

@media (min-width: 25rem) {
	figure:not(.centre):nth-of-type(2n), figure.gauche {
		float: left;
	}
	figure:not(.centre):nth-of-type(2n+1), figure.droite {
		float: right;
	}
}

@media (max-width: 25rem) {
	figure {
		padding: 3vmin;
		margin: auto;
	}
}

figure + *:before {
	content: "";
	width: 8rem;
	display: block;
	overflow: hidden;
}


/* HEADER */
#langs {
	display: flex;
	align-items: flex-end;
}

.lang-a {
	padding: .3rem .5rem;
	flex-shrink: 0;
}

#nav1, #nav2 {
	justify-content: space-evenly;
	flex-flow: row wrap;
	white-space: nowrap;
	min-width: 4rem;
}

#nav1 {
	align-self: end;
	display: flex;
}

#nav2 {
	align-self: start;
	padding-top: 8px;
	display: flex;
}

#nav1 > a, #nav2 > a {
	margin: 0;
	padding: .6rem 1rem;
}

#main {
	padding: 3rem;
}

#logo {
	display: block;
	max-width: 100%;
}


/* TYPOGRAPHIE */
body {
	font-family: "Trebuchet MS", serif;
	font-size: .9rem;
	line-height: 1.4;
	cursor: default;
}

h1, h2, h3, h4, h5, h6, p, #main > * {
	max-width: 48rem;
}

figcaption {
	text-align: center;
}


/* COULEUR et STYLE */
body {
	background-color: #eee;
}

#main {
	background-color: white;
}

ol, ul {
	list-style-image: url(/images/puce.png);
}

a {
	color: rgb(0, 106, 159);
}

img {
	border: 0;
}
.txt-rouge { 
	color: red;
}

.txt-orange-titre { 
	color: orange;
	font-size: large;
	font-weight: bold;
}

.txt-bleu {
	color: slateblue;
	font-size: large;
}

.txt-bleu-petit {
	color: slateblue;
}

.lang-a, #nav1 > a, #nav2 > a {
	text-decoration: none;
}

.lang-a, #nav1>a {
	color: white;
	text-shadow: 1px 1px 1px black;
}

.lang-a.selected, .lang-a:hover {
	font-weight: bold;
}

#a-logo {
	position: relative;
}

#a-logo:before {
	content: "";
	position: absolute;
	height: 60%;
	width: 100%;
	box-shadow: 0 -4px 4px 2px rgba(0, 0, 0, 0.4);
	z-index: -1;
}

#nav1 > a, #nav1 > a:visited {
	border-bottom: 8px solid transparent;
}

#nav1 > a.selected {
	border-color: white;
}
#nav1 > a:not(.selected):hover {
	border-color: rgba(256, 256, 256, .7);
}

#nav2 > a.selected {
	color: white;
	background-color: rgb(0, 106, 159);
}
#nav2 > a:not(.selected):hover {
	color: white;
	background-color: rgba(0, 106, 159, .7);
}

#header:after {
	content: "";
	z-index: -20;
	background: white;
}

#langs, #nav2, #main, #footer {
	font-size: .9rem;
}


/* HORIZONS */
body:before {
	/*horizon haut*/
	content: "";
	z-index: -10;
	background: linear-gradient(#006AA0, #006396 70%, #003753);
}

body:after {
	/*horizon bas*/
	content: "";
	z-index: -10;
	background: linear-gradient(darkgrey, #ddd 20%, #eee);
}


/* FOOTER */
#footer {
	background-image: url(/images/cailloux.jpg);
	background-size: cover;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: end;
}

#footer > address, #facebook {
	background-color: rgba(255, 255, 255, 0.8);
	border: 1px solid rgb(190, 190, 190);
	padding: .75rem 1rem;
	margin: 4vmin 4vmin/* 1.5rem 2rem */;
}

#footer > address {
	font-style: normal;
}


/* PAGE LAYOUT */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	/*no grid support: IE>=10, not Edge*/

	#header, #main, #footer {
		box-sizing: border-box;
		width: 60rem;
		max-width: 100%;
		margin: auto;
	}

	main {
		display: block;
	}

	#header {
		/*pour horizon haut*/
		position: relative;
	}

	#header:before {
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
	}

	@media (min-width: 25rem){
		#a-logo {
			float: left;
		}
	}

	#a-logo:before {
		display: none;
	}

	#header:after, #main:after, #footer:after {
		content: "";
		display: block;
		clear: both;
	}

	#main {
		min-height: 30vh;
		margin: 0 auto;
	}

	#header, #nav2 {
		background: white;
	}
	#langs, #nav1 {
		background: rgb(0, 106, 159);
	}

	#footer {
		background: linear-gradient(darkgrey, #ddd 20%, #eee);
	}

}

@supports (display: grid) {

	body {
		display: grid;
		grid-template-columns: 1fr [g] fit-content(22rem) fit-content(42rem) [d] 1fr;
		grid-template-rows: minmax(3rem,auto) minmax(68px,auto) fit-content(50px) 1fr auto;
		grid-template-areas:
		". la . ."
		". lo n1 ."
		". lo n2 ."
		". co co ."
		". fo fo .";
	}

	#header {
		display: contents;
	}

	#langs {
		grid-area: la;
	}

	#a-logo {
		grid-area: lo;
		width: 325px;
		height: 117px;
	}

	#nav1 {
		/* grid-column: 3 / span 1; */
		grid-area: n1;
	}

	#nav2 {
		/* grid-column: 3 / 4; */
		grid-area: n2;
	}

	#nav1 > a, #nav2 > a {
		flex: 1 1 auto;
		text-align: center;
	}

	#main {
		grid-area: co;
		place-self: stretch;
	}

	img, svg {
		height: auto;
	}

	#footer {
		grid-area: fo;
	}

	#header:after {
		grid-row: 1/4;
		grid-column: 2/4;
	}

	/* horizons */
	body:before {
		grid-row: 1 / 3;
		grid-column: 1 / span 4;
	}

	body:after {
		grid-row: 5 / 6;
		grid-column: 1 / span 4;
	}

	@media (max-width: 46rem) {
		body {
			grid-template-areas:
			". lo la ."
			". n1 n1 ."
			". n2 n2 ."
			". co co ."
			". fo fo .";
			grid-template-columns: 1vw 25fr 5fr 1vw;
		}

		#langs {
			place-self: stretch;
			flex-flow: row wrap;
			align-content: start;
			align-items: start;
			justify-content: space-evenly;
		}
	}

}


@media (max-width: 46rem){

	#a-logo {
		width: unset;
		height: unset;
	}
	#a-logo:before {
		display: none;
	}
	.lang-a {
		padding: 2vmin;
	}
	#main {
		padding: 2vh 2vw;
	}
}


/* CONTENT SPECIAL CLASSES */
img.portrait {
	max-width: 10rem;
}