@font-face {
	font-family: Oswald;
	font-display: block;
	src: url('/Oswald-VariableFont_wght.ttf') format("truetype")}

a {all:unset}
h3 {all:unset}
button:has(span) {display:contents}
p {	margin:unset;
	padding-block-start: 1em}
img {
	clear:right;
	max-width:50%;
	float:right}
img.center {display:block;max-width:100%;float:unset; margin-block-start:1rem}
img, main figure, [role=presentation], svg, main header, footer img {
	margin: 0 auto; width: fit-content;
}
.center {
	text-align:center;
	float:none;
	a {float:none}
}
ul.center {
	display: grid;
	grid-auto-flow: column;
	place-content:center;
	& li::marker {content: ""}
}
figcaption {
	width:fit-content;
	margin: 0 auto;
	margin-block: 4px;
	font-weight:bold;
	font-size:max(12px,.8em);
	text-align: center;
}
html, body {
    margin:0;
	overflow-wrap: break-word;
	scrollbar-width: none;}
address {
	text-align:center;
	font-weight:bold;
	text-decoration:underline;}
.contact {margin-bottom:0;text-align:center;}
button span:where(:hover,:focus),a:where(:hover,:focus) {
	color: white;
	text-shadow:0 10px 10px white;
	background: rgb(0 0 0 / 70%)}
main :is(a, button span) {
	text-decoration:underline;
	text-underline-offset:2px;
}
#main-nav ul {
	padding:0;
	list-style:none;
	display:flex;}
#main-nav>ul {
	align-content:center;
	> li {margin-inline:8px}
	justify-content: space-around;
	background: url("meandres.png") lightgray;
	background-blend-mode: soft-light;
	background-size: contain;
	font-size:smaller;
	padding-block:10px;
	flex-wrap: wrap;
}
#main-nav {
	a {	display:grid;
		align-self:center;
		text-align:center;
		font-weight:bold;
		&[aria-current] {
			scale:1.3;
			filter:drop-shadow(5px 2px 5px black)}
	}
	li{align-self: center;text-decoration: underline #5F4927}
	li.lang-item {background-color: rgb(from white r g b / .5)}
	li.lang-item a{height:12px;align-content: center;zoom:2.4;width:20px}
}
main ul {
	li::marker {content:" — "}
	margin: 0;}
p:has(+ul) {margin-bottom:0}

[role=heading] {padding-inline:4px}
table {
	border-collapse: separate;
	border-spacing: 0px;}
body, button span {
	font-family: Oswald;
	font-size: 20px;}
header h1 {
	line-height:1}
h1{ text-align:center;
	text-wrap:balance;
	margin: 0 0 20px 0;
	font-size: 2em;
	font-weight:normal;
	line-height:1.4em;
	font-family: Oswald;}
h2 {
	margin: 25px 0 5px 0;
	padding-bottom:2px;
	font-size:20px;
	font-weight:normal;
	text-align:left;
	line-height:1.3em;
	font-family: Oswald;
	border-bottom:1px solid rgba(0,0,0,0.3);}

/*****************************/
/* Classes de positionnement */
/*****************************/

body {
	background: url("bg-page.jpg") center top no-repeat fixed;
	background-size:cover;
}
p:last-of-type {
	margin-bottom:0;
	padding-bottom: 1rem;
}

#logo {
	display:block;
	height:100%;
	height: 200px;
	background: url("logo-epe.png") center no-repeat;
	background-size: contain;
}
#logo-mobile {
	display:block;
	width:230px;
	height:40px;
	background: url("logo-epe-mobile.png") center no-repeat;
  	background-size: contain;
}

#display-header{
	appearance: none;
	transition: all 0.5s;
	display:block;
	width:46px;
	height:46px;
	background: #FFF url("icon-nav-mobile.png") center no-repeat;
	border:1px solid #D5D0CA;
	border-radius:2px;
  	background-size: cover;
}

.left {
	float: left;
}

.alignright,
.right {
	float: right;
}

.alignright {
	margin:0 0 15px 20px;
}

.clear {
	clear: both;
}

.text-left {
	text-align: left;
}

.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

.content-area {
    position:relative;
    padding:20px 0 30px;
    background:#FFF;
}
.wrapper {
	overflow-wrap: break-word;
	max-width: 883px;
	margin: auto;
}

#site-content {
	min-height: 400px;
	padding-top: 92px;
	padding-bottom: 30px;
}

body.home #site-content {
	padding: 0;
}

.ellipsis {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

#page {
	padding-inline: 60px;
	background: url("bg-content-middle.png") top center repeat-y;
}

footer {
	display:flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
	background: url("bg-content-bottom.png") bottom center no-repeat;
	background-size:100%;
	padding-block:1rem;
	font-size:14px;
	font-weight:600;
	position: relative;
	article {
	  &::backdrop {background-color:rgb(0, 0, 0, 0.8)}
	  max-block-size: 90vh;
	  font-size:20px;
	  height:80vh;
	  font-weight:normal;
	  border:unset;
	  inline-size: min(80vw,600px);
	  margin-block:auto;
	  background: transparent;
	  scrollbar-width: none;
	  > * {padding-inline: max(1vw,60px); }
	  h1 {margin:unset}
	  header {
	    display: flex;
	    position:sticky;
	    top:0;
	    min-height:2lh;
	    max-height:fit-content;
	    justify-content: space-between;
	    align-items: center;
	    block-size:70px;
	    background: url("bg-content-top.webp") top center no-repeat;
	    background-size: 100%;
	  }
	  section {
	  	background: url("bg-content-middle.png") repeat-y;
		background-size: contain;
		overflow-y: auto;
		max-height: 85%;
		padding-bottom:1rem;
		scrollbar-width: none;
	  }
     footer::before {
	    content: "";
	    position: absolute;
	    left: 4px;
	    right: 4px;
	    bottom: 2rem;
	    height: 4rem;
	    background: rgb(222, 191, 145);
	    mask-image: linear-gradient(
	      to top,
	      rgb(0, 0, 0, 1) 0%,
	      rgb(0, 0, 0, 0) 100%
	    );
	  }
	  button {
	    background: none;
	    border: none;
	    font-size: 1.25rem;
	    cursor: pointer;
	  }
	}
}
.read-more {  
    padding: 2px 15px;  
    background: rgba(214, 69, 65, 0.9);
    border-radius: 2px;
	text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
}
.read-more:hover {
	background: rgba(170, 36, 34, 0.9);
}

@media screen and (width > 640px) {
	#main-nav {
		display:grid;
		background: url("bg-content-top.webp") top center no-repeat;
	}

	main header {
		height:150px;}
	#header-mobile {display:none}
	
}
@media screen and (max-width: 640px) {
	body {
		background: url("bg-content-middle.png") top center repeat-y;
	}
	header {display:none}
	article {max-height:100%}
	h2 {
		font-size:17px;
		text-align:left;
	}
	
	#main-nav {
		transition: .5s opacity;
		position:absolute;
		position-anchor: --header-mobile;
		top:anchor(bottom);
		opacity:0;
		>ul {padding:0;margin-block:0}
	}
	#header-mobile {
		anchor-name: --header-mobile;
		display:flex;
		position: sticky;
		top:0;
		flex-direction:row-reverse;
		align-items:center;
		justify-content: space-between;
		padding-inline: 1rem;
		height:80px;
		background:rgb(255, 240, 217);
		border-bottom:2px solid #AF8849;
		box-shadow:0 0 5px rgba(0,0,0,0.3);
	}
	#display-header:checked {
		body:has(&:checked) #content nav {z-index:1;opacity:1;}
		filter: brightness(.5);
		transform: rotate(90deg)}
	}
	#page{
		margin:0;
		padding:0 15px;
	}
	#glossaire {
		position:fixed;
		display:none;
		top:100%;
		left:50%;
		width:768px;
		height:85%;
		margin-left:-384px;
		background:#FFF;
		box-shadow:0 0 20px rgba(0,0,0,0.5);
		border-radius:3px;
		overflow:hidden;}
	#glossaire-title {
		position:absolute;
		display:table;
		z-index:10;
		top:0;
		left:0;
		width:100%;
		height:62px;
		padding:0 75px 0 20px;
		background: #F4F4F4;
		border-bottom:1px solid #DDD;
		font-family: 'Oswald';
		color:#555;}
	#glossaire-title .text {
		display:table-cell;
		vertical-align:middle;}
	#glossaire-content {
		position:relative;
		height:100%;
		padding-top:62px;}
	#glossaire-content .text {
		height:100%;
		padding:20px;
		overflow-y:scroll;}
	#black-overlay {
		position:fixed;
		display:none;
		top:0;
		left:0;
		width:100%;
		height:100%;
		background:rgba(0,0,0,0.7);
		opacity:0;}
	}
	.glossaire-footer {
		display:block;
	}		
}