@font-face { font-family: 'Montserrat'; src: url('/fonts/Montserrat-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: optional; }
@font-face { font-family: 'Montserrat-Bold'; src: url('/fonts/Montserrat-ExtraBold.ttf') format('truetype'); font-weight: bold; font-style: normal; font-display: optional; }

@media screen and (max-width: 767px) {
	html, body { font-family: system-ui, sans-serif; }
}


html, body { min-height:100%; padding:0px; margin: 0px; font-family: 'Montserrat', system-ui, sans-serif; color:#ffffff;  overflow-x: hidden;}
body { position: relative; }

picture { display: inline-block; max-width: 100%; }
picture img[width][height]:not(.logo) { max-width: 100%; height: auto; }
.background-container picture,
.background-container .background-image { max-width: none; width: 100%; height: 100%; }
.topmenu > a:first-child { display: inline-flex; align-items: center; line-height: 0; }
.topmenu picture { height: 80px; width: auto; line-height: 0; vertical-align: middle; }
.topmenu picture img.logo { height: 80px; width: auto; max-width: 100px; vertical-align: middle; }
.footer picture { height: 120px; width: auto; line-height: 0; }
.footer picture img.logo { height: 120px; width: auto; max-width: 140px; }
.mainbody .services picture img { height: 120px; width: auto; }

.center { margin: 0 auto; text-align:center; }
.left { text-align:left; }
.big {font-size:2em; margin: 48px 0px 16px 0px; }

.block { display:inline-block; }

a { color:#ffffff; text-decoration:none; }
a.txtlink { color:#c0c0c0; }
a.txtlink:hover { color:#e000e0; text-decoration:underline; }
.footer a,
.footer a.txtlink { color:#ffffff; }
.footer a.txtlink:hover { color:#ff80ff; text-decoration:underline; }

.retourmail { margin:0 auto; text-align:center; margin:30px 0px 30px 0px; color: #00a000; font-weight:bold; font-size:1.5em; }

.background-container { position: fixed; inset: 0; z-index: 0; overflow: hidden; contain: strict; }
.background-container picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.background-image { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease-in-out; aspect-ratio: 1920 / 1280; }
.mainbody { contain: layout; }
.background-image.active { opacity: 1; }
.topmenu, .mainbody, .actualites, .footer, .retourmail, .formcontact { position: relative; z-index: 1; }

.footer { margin: 10px 0px 0px 0px; padding: 20px 10px 20px 10px; background-color: rgba(0, 0, 0, 0.85); text-align:center; }
.footer .logo {vertical-align:top; height:120px; margin:0px; }
.footer .block { display:block; text-align:center;  margin-bottom:40px;}
.footer .item { margin:16px 0px 0px 0px; }

.topmenu { position: -webkit-sticky; position: sticky; background-color: rgba(0,0,0, 0.5); z-index: 100; top: 0; display: flex; flex-wrap: wrap; align-items: center; padding: 10px; box-sizing: border-box; }
.topmenu > a:first-child { flex: 0 0 auto; }
.topmenu .menutoggle { margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; line-height: 0; }
.topmenu .logo { vertical-align: middle; margin: 0; }
.topmenu .menutoggle picture { line-height: 0; }
.topmenu .menutoggle img.menuicon { width: 48px; height: 48px; max-width: 48px; object-fit: contain; }
.topmenu .menuitem { color: #ffffff; font-size: 1.2em; margin: 5px 0; }
.topmenu .menubloc { width: 100%; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 1s ease, opacity 1s ease; text-align: center; }
.topmenu .menubloc.show { opacity: 1; max-height: 50vh; }

.mainbody { margin: 10px 0px 0px 0px; padding: 20px 10px 20px 10px; background-color: rgba(0, 0, 0, 0.5); line-height: 1.5em; color: #ffffff; }
.mainbody b, .mainbody strong { color: #ffffff; }
.mainbody .titre { font-size:1.4em; font-weight:bold; color: #ffffff; }
.mainbody .titre span { font-size:0.8em; }

@media screen and (max-width: 767px) {
	.mainbody,
	.actualites { background-color: rgba(0, 0, 0, 0.88); }
	.bigtitle { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }
}

.mainbody .illust picture { display: block; margin: 0 auto; max-width: 100%; }
.mainbody .illust picture img { display: block; width: 95%; max-width: 100%; height: auto; margin: 0 auto; }
.mainbody .services { display:block; margin: 20px; position: relative; min-height: 120px; }
.mainbody .services picture { display: inline-block; line-height: 0; }
.mainbody .services img.services-img { height: 120px; width: auto; display: block; filter: brightness(70%); transition: filter 0.3s ease; }
.mainbody .services .texte { position:absolute; top: 50%; left:50%; transform: translate(-50%, -50%); text-align: center;  z-index:1; }

.bigtitle { margin:5vh auto; text-align:center; font-size:2em; text-transform: uppercase; }
.bigtitle .bar { margin:24px auto; background-color:#ffffff; width:1px; height:40px; }

.formcontact { margin: 0 auto;  text-align:center; font-size:0.8em;}
.formcontact .titre { font-size:1.4em; margin:16px 0px 6px 0px; text-align:left;  }
.formcontact .fieldname { font-weight: bold; text-align:left; }
.formcontact .field input,
.formcontact textarea,
.formcontact input[type='submit'] { width:95%; color:#000000; background-color:#ffffff; border:1px solid #cccccc; }
.formcontact .field input { width:95%; }
.formcontact input[type='submit'] { width:auto; margin-top:16px; padding:8px 24px; cursor:pointer; font-weight:bold; }
.formcontact .nb { font-size:0.8em; text-align:left; line-height: 1.2em; margin-top:15px; color:#ffffff; }

.actualites { padding: 20px 10px 20px 10px; background-color:rgba(0,0,0, 0.5); line-height:1.5em; margin: 50px auto; width:90vw;}
.actualites .block { display: block; margin-bottom:50px; }
.actualites .block .date { font-style:italic; font-size:0.8em; }
.actualites .block .titre { font-size:1.2em; font-weight:bold; }
.actualites .block .resume {color:#c0c0c0; }
.actualites table {border-collapse:collapse; border : 2px solid #ffffff; }
.actualites table th, td { border : 1px solid #ffffff; padding:4px 10px 4px 10px; }



@media screen and (min-width: 768px) {
	.topmenu { padding: 12px 20px; flex-wrap: nowrap; min-height: 124px; }
	.topmenu > a:first-child {
		margin-right: 3vw;
		flex-shrink: 0;
		width: 82px;
		height: 100px;
		min-width: 82px;
		min-height: 100px;
	}
	.topmenu > a:first-child picture {
		display: block;
		width: 82px;
		height: 100px;
		line-height: 0;
	}
	.topmenu > a:first-child picture img.logo {
		width: 82px;
		height: 100px;
		max-width: 82px;
		object-fit: contain;
	}
	.topmenu .menuitem { display: inline-block; margin: 0 20px; font-size: 1.3em; }
	.topmenu .menutoggle { display: none; }
	.topmenu .menubloc { display: flex; align-items: center; justify-content: center; flex: 1; width: auto; opacity: 1; max-height: none; overflow: visible; flex-wrap: wrap; }

	.mainbody { margin: 50px auto; width:60vw; }
	.mainbody .titre { font-size:2.4em; }
	.mainbody .titre span { font-size:0.6em; }
	.mainbody .illust picture img { width: 75%; }
	.mainbody .services { display:inline-block; margin: 20px;}
	.mainbody .services .texte { opacity:0; transition: opacity 0.3s ease; }
	.mainbody .services { min-height: 170px; }
	.mainbody .services img.services-img { height: 170px; filter: unset; }
	.mainbody .services:hover img.services-img { filter: brightness(70%); }
	.mainbody .services:hover .texte { opacity:1 }
	
	.bigtitle { font-size:2.8em; }

	.footer .block { display:inline-block; vertical-align:top;  margin:0px 0px 0px 7vw;  text-align:left; }

	.formcontact .titre { font-size:1.5em; margin:30px 0px 6px 0px; }
	.formcontact .fieldname { display: inline-block; width:30%; font-size:1.2em;  text-align:right;  margin: 6px 10px 6px 0px;}
	.formcontact .field { display: inline-block; width:55%; text-align:left; margin: 6px 0px 6px 0px;}
	.formcontact .field input { width:100%; padding:4px; }
	.formcontact textarea { width:95%; padding:4px; }

	.actualites { margin: 50px auto; width:60vw; text-align:center; }
	.actualites .block { display: inline-block; width: 25vw;  margin: 50px 20px 0px 20px;  text-align:left;  vertical-align:top; }
	.actualites .bigtitle { font-size:2em; width:70%; line-height:1.4em; }
}