@font-face {
	font-family:'Roboto';
	src:local('Roboto'), local('Roboto Regular'), local('Roboto-Regular'), url('fonts/Roboto-Regular.woff2') format('woff2');
	font-weight:400;
	font-weight:normal;
	font-style:normal;
}
@font-face {
	font-family:'Roboto';
	src:local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto-Light.woff2') format('woff2');
	font-weight:300;
	font-style:normal;
}
@font-face {
	font-family:'Roboto';
	src:local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto-Medium.woff2') format('woff2');
	font-weight:500;
	font-style:normal;
}
@font-face {
	font-family:'Roboto';
	src:local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto-Bold.woff2') format('woff2');
	font-weight:700;
	font-style:normal;
}
@font-face {
	font-family:'Roboto';
	src:local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto-Black.woff2') format('woff2');
	font-weight:900;
	font-style:normal;
}

/*
Blanc : #FFF;
Bleu : #335C84
Bleu foncé : #1E344F
Rouge : #E0000F
Gris : #EAEAEA
*/

*{
	margin:0;
	padding:0;
	border:0;
}

body{
	font-family:'Roboto',Arial, sans-serif;
	font-size:medium;
	font-weight:normal;
	letter-spacing:1px;
	color:#1E344F;
	background:#FFF;
	min-height:100vh;
	display:flex;
	flex-direction:column;
	width:100%;
	overflow-x:hidden;
}
body > nav{
	position:absolute;
	z-index:2;
	width:80%;
	height:150px;
	padding:0 10%;
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
}
body > nav h2{
	min-width:15%;
	max-width:300px;
	margin:0 20px;
}
body > nav h2 img{
	max-width:100%;
}
#menu_bouton{
	margin-bottom:50px;
	color:#FFF;
	text-transform:uppercase;
	cursor:pointer;
	display:flex;
	align-items:center;
}
#menu_bouton img{
	margin-left:10px;
}
#menu{
	display:block;
	position:absolute;
	top:0;
	right:-250px;
	width:250px;
	height:100vh;
	padding:20px 0;
	box-sizing:border-box;
	background: #EAEAEA;
	border-style:solid;
	border-color:#E0000F;
	border-width:3vh 0 10vh 1px;
	transition: 0.5s all ease;
	overflow:hidden;
}
#menu.active{
	right:0;
	transition: 0.5s all ease;
}
#menu > img{
	display:block;
	margin : 0 auto 5vh;
	cursor:pointer;
}
#menu > ul:first-of-type > li{
	margin:0 20% 0 0;
	list-style:none;
}
#menu > ul:first-of-type > li > a,
#menu > ul:first-of-type > li > a:link,
#menu > ul:first-of-type > li > a:active,
#menu > ul:first-of-type > li > a:visited{
	display:block;
	margin:0;
	padding:10px 10px 10px 20px;
	border-bottom:1px solid transparent;
  border-image: linear-gradient(to right, #E0000F 0 33%, transparent 33%) 1;
	color:#1E344F;
	font-size:0.8em;
	font-weight:500;
	text-transform:uppercase;
	text-decoration:none;
	cursor:pointer;
}
#menu > ul:first-of-type > li:hover > a{
	color:#E0000F;
}
#menu > ul:first-of-type > li > a.active{
	color:#E0000F;
	background:none;
	border-image:none;
	border-bottom:1px solid #E0000F;
}
#menu > ul:last-of-type{
	margin:5vh;
	width:calc(100% + -10vh);
	display:flex;
	justify-content:space-around;
	list-style:none;
}

footer{
	position:relative;
	padding-top:80px;
	background-color: #000;
	color:#FFF;
	font-size:0.9em;
}
footer img{
	max-width:200px;
}
footer>div:first-of-type{
	margin:0 auto;
	width:100%;
	max-width:1200px;
	box-sizing:border-box;
}
footer .col3 > *{
  width: 40%;
}
footer div div p,
footer ul li{
	padding:20px 30px;
	background-image: url(../images/ico-map.svg);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 20px;
}
footer div div p:last-of-type{
	background-image: url(../images/ico-telephone.svg);
}
footer a{
	color:inherit;
	text-decoration:none;
}
footer ul li{
	background-image: url(../images/ico-flecheD.svg);
	background-size: 15px;
	text-transform:uppercase;
}
#labels {
  width: 170px;
  display: flex;
  flex-direction: column;
  justify-content:space-around;
  align-items: center;
  gap: 1em;
}
#labels img{
  height: auto;
}
#footer_legals{
	margin-top:20px;
	width:100%;
	padding:0;
	max-width:none;
	background: #000;
	color:#FFF;
	border-top:1px solid #E0000F;
}
#footer_legals p{
	margin:0;
	padding:10px;
	font-size:0.7em;
	font-weight:300;
	text-align:center;
}

header{
	display:flex;
	height:100vh;
	align-items: flex-end;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	background-color:#000;
}
header h1{
	width: 35vw;
	box-sizing: border-box;
	margin:0 64vw 10vh 0;
	padding:20px;
	background:#335C84BB;
	color:#FFF;
	font-size: 2em;
	font-weight:900;
	letter-spacing:2px;
	text-align: right;
	text-transform:uppercase;
}
header h1 img{
	margin-left:5px;
	width:25px;
}

.large1000{
	margin:0 auto;
	width:100%;
	max-width:1000px;
	box-sizing:border-box;
}
.largeFull{
	width:100%;
	margin:0;
	padding:0;
}
.col2,
.col3,
.col4{
	display:flex;
	justify-content: space-between;
	align-items:stretch;
	flex-wrap:wrap;
	list-style:none;
}
.col4 {
	align-items:center;
  gap: 1em;
}
.col2 > *{
	width:48%;
	box-sizing:border-box;
}
.col3 > *{
	width:33.33%;
	box-sizing:border-box;
}
.col4 > *{
	width: calc(25% - 1em);
	box-sizing:border-box;
}

article.presentation > div:first-of-type{
	width:36%;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}
article.presentation > div:nth-of-type(2){
	width:44%;
	padding:200px 0;
	background:#EAEAEA;
}
article.presentation > div:last-of-type{
	width:20%;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}
article.presentation h2{
	padding:0 10%;
  margin-bottom:0.5em;
	color:#1E344F;
	border-bottom:1px solid transparent;
  border-image: linear-gradient(to right, #E0000F 0 33%, transparent 33%) 1;
}
article.presentation p{
	margin:0 10% 1em;
}
article.presentation ul{
	margin:0.5em 10% 3em;
}
article.presentation2 {
	background-color:#000;
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color:#FFF;
	align-items:center;
}
article.presentation2 > aside{
	width:100%;
	box-sizing: border-box;
	margin: 5vw 0;
	padding:5vw;
	border-top:1px solid #E0000F;
	border-bottom:1px solid #E0000F;
}
article.presentation2 > aside .col4 > *{
	text-align:center;
	text-transform:uppercase;
}
article.presentation2 > aside img{
	max-width:100%
}
article.presentation2 > div{
	width:64%;
	padding:200px 20vw 200px 5vw;
	border-left:1px solid #E0000F;
}
article.presentation2b{
  width:90vw;
  padding:5vw;
  margin:0;
	background-color:#000;
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color:#FFF;
}
article h2{
	margin-bottom:1em;
	font-weight:normal;
	font-size:1.8em;
	text-transform:uppercase;
}
article h3{
	margin-bottom:1em;
	font-weight:normal;
	font-size:1.4em;
	text-transform:uppercase;
}
article p{
	font-size: 1em;
	line-height: 1.5em;
	margin:0 0 1em;
}
article ul{
	list-style-position: inside;
	list-style-type: disc;
	font-size: 1em;
}
article img{
	max-width:100%;
}
article a{
	color:#E0000F;
}
article a:hover{
	color:#000;
}

.boutons{
	display:flex;
	padding:20px;
	background:#E0000F;
}
.boutons > *,
.boutons a:link,
.boutons a:active,
.boutons a:visited,
.bouton,
.bouton:link,
.bouton:active,
.bouton:visited{
	display:inline-block;
	margin:5px auto;
	padding:10px 20px;
	border-radius:3px;
	border:1px solid #FFF;
	background:#E0000F;
	color:#FFF;
	font-family:inherit;
	font-size:1em;
	font-weight:700;
	text-align:center;
	text-decoration:none;
	text-transform:uppercase;
	cursor:pointer;
}
.boutons > a:hover,
.boutons > *:hover,
.bouton:hover{
	border:1px solid #E0000F;
	background:#FFF;
	color:#E0000F;
}

/* Accueil */
.accueil header{
	background-image:url('../images/bg-accueil.webp');
	justify-content:center;
  align-items: center;
}
.accueil header h1{
  width: 60%;
	margin: 0 auto;
	padding:20px 40px;
  font-size: 3em;
	text-align:center;
	white-space:pre-line;
}
.accueil header h1 span {
	display: block;
  margin-top: 1em;
  font-size: 0.8em;
  font-weight: normal;
  width: 100%;
	text-transform:none;
}
/* Savoir-faire */
.savoir-faire header{
	background-image:url('../images/savoir-faire/bg-savoir-faire.jpg');
}
.savoir-faire article.presentation > div:first-of-type{
	background-image:url('../images/savoir-faire/bg-four-verrerie.webp');
}
.savoir-faire article.presentation > div:last-of-type{
	background-image:url('../images/savoir-faire/bg-morceaux-metal.webp');
}
.savoir-faire article.presentation2{
	background-image:linear-gradient(rgba(0, 0, 0 , 0.7), rgba(0, 0, 0 , 0.7)), url('../images/savoir-faire/bg-pieces-mecaniques.jpg');
}
/* Métiers */
.metiers header{
	background-image:url('../images/metiers/bg-metiers.jpg');
}
.metier{
	display:flex;
	justify-content:flex-end;
	padding-left:64vw;
	color:#FFF;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	background-color:#000;
}
.metier:first-of-type{
	background-image:url('../images/metiers/bg-bureau-etudes.webp');
	background-position: center top 20%;
}
.metier:nth-of-type(2){
	background-image:url('../images/metiers/bg-sciage.webp');
	background-position: top;
}
.metier:nth-of-type(3){
	background-image:url('../images/metiers/bg-metallisation.webp');
}
.metier:nth-of-type(4){
	background-image:url('../images/metiers/bg-fraisage.webp');
}
.metier:nth-of-type(5){
	background-image:url('../images/metiers/bg-tournage.webp');
	background-position: bottom;
}
.metier:nth-of-type(6){
	background-image:url('../images/metiers/bg-ajustage.webp');
}
.metier > div{
	display:flex;
	padding-top:40vh;
	background:#335C84AA;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	border-left: 2px solid transparent;
	border-image: linear-gradient(to top, #E0000F 0 25%, transparent 25%) 1;
}
.metier > div > span{
	width:10%;
	padding-top:10px;
	background:#335C84;
	color:#E0000F;
	font-size:1.8em;
	font-weight:700;
	text-align:center;
}
.metier > div > div{
	width:90%;
	padding:0 20px 2.5vw;
	box-sizing:border-box;
}
.metier h2{
	padding-top:10px;
	font-weight:700;
}
.metier:nth-of-type(even){
	padding-left:0;
	padding-right:64vw;
}
.metier:nth-of-type(even) > div{
	border-left: 0;
	border-right: 2px solid transparent;
}
.metier:nth-of-type(odd) > div > span{
	order:2;
}
.metier:nth-of-type(odd) h2{
	text-align:right;
}
/* Machines */
.machines header{
	background-image:url('../images/parc-machines/bg-parc-machines.webp');
}
.machines article.presentation > div:first-of-type{
	background-image:url('../images/parc-machines/bg-moyens-production.webp');
	background-position-x: 30%;
}
.machines article.presentation > div:last-of-type{
	background-image:url('../images/parc-machines/bg-atelier.webp');
	background-position-x: 30%;
}
/* QSN */
.qsn header{
	background-image:url('../images/qui-sommes-nous/bg-batiment-SNM.jpg');
}
.qsn article.presentation > div:first-of-type{
	background-image:url('../images/qui-sommes-nous/bg-pieces.webp');
}
.qsn article.presentation > div:last-of-type{
	background-image:url('../images/qui-sommes-nous/bg-machine-usinage.webp');
}
.qsn article.presentation2b{
	background-image:linear-gradient(rgba(0, 0, 0 , 0.7), rgba(0, 0, 0 , 0.7)), url('../images/qui-sommes-nous/bg-usinage.webp');
}
#europe {
	padding: 5vw;
	text-align: center;
}
#europe .col3 {
	align-items: center;
	margin-bottom: 1em;
}

/* Contact */
.contact header{
	background-image:url('../images/qui-sommes-nous/bg-batiment-SNM.jpg');
}
#contact_formulaire{
	padding:5vw;
}
.formulaire label,
.formulaire input[type=file]{
	display: none;
}
.formulaire input[type=text],
.formulaire input[type=email],
.formulaire input[type=tel],
.formulaire textarea,
.formulaire label.boutons{
	display:block;
	width:100%;
	box-sizing:border-box;
	padding:10px 1.5%;
	margin-bottom:20px;
	background:#FFFFFFAA;
	border:1px solid #E0000F;
	font-family: inherit;
	font-size:1em;
	color:#000;
}
#fcontact-action{
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.formulaire label.boutons > *{
	margin:0
}
.confirmation{
	color:green;
	text-align:center;
	background:#FFFFFF88;
}
.erreur{
	color:red;
	border-color:red !important;
	text-align:center;
	background:#FFFFFF88;
}
.formulaire .col-60-30 > div:last-child{
	align-self:stretch;
	padding:20px;
	background-color:#4B4A4A;
	color:#FFF;
	text-align: center;
	display:flex;
	flex-direction:column;
	justify-content:center;
}

#contact_map iframe{
	width: 100%;
	height: 400px;
}

/* Mentions */

.mentions-legales header,
.cookies header{
	background-image:url('../images/bg-accueil.webp');
	height:50vh;
}
.mentions-legales article,
.cookies article{
	padding:5vw;
}
.mentions-legales article > div,
.cookies article > form > div{
	display:flex;
	justify-content:space-between;
	align-items:center;
}

/* RGPD */
@keyframes anim-rgpd {
	from {bottom:-100px;}
	to {bottom:0;}
}
#rgpd{
	position:fixed;
	background-color:#000;
	color:#FFF;
	border-top:1px solid #FFF;
	bottom:0;
	width:100%;
	min-height:50px;
	z-index:9999;
	animation-name:anim-rgpd;
	animation-duration:1s;
}
#rgpd>div{
	max-width:1200px;
	padding:10px 20px 10px 10px;
	margin:0 auto
}
#rgpd p a{
	color:inherit;
	text-decoration:underline;
}
#rgpd .boutons{
	padding: 1em 0;
	background: none;
}
#rgpd_f button{
	border:1px solid #FFF;
	padding:3px;
	font-family:inherit;
}

.mobile,
.cacher{
	display:none;
}

@media screen and (max-width:900px) { /* Smartphones */
	body > nav{
		height:100px;
	}
	#menu{
		right:-100%;
		width:100%;
	}
	footer{
		padding-top:50px;
	}
	footer > .col3{
		padding:5vw;
	}
  #labels {
    width: 100%;
    flex-direction: row;
  }
	#footer_legals p{
		white-space:pre-line;
	}
	header h1{
		width: 90vw;
		margin-right:10vw;
		font-size: 1.25em;
	}
	header h1 img{
		width: 1em;
		vertical-align: top;
	}
	.accueil header h1{
		width:80%;
		box-sizing:border-box;
		font-size: 2em;
	}
	.col2 > *,
	footer .col3 > *,
	footer .col3 .col2 > div{
		flex:none;
		width:100%;
		max-width:100%;
	}
	.col4 > *{
		flex:none;
		width: calc(50% - 1em);
		max-width:100%;
	}
	article h2 {
		font-size: 1.5em;
	}
	article.presentation > div:first-of-type,
	article.presentation > div:last-of-type{
		width:15%;
	}
	article.presentation > div:nth-of-type(2){
		width:70%;
		padding:50px 0;
	}
	article.presentation2 > aside{
		padding:5vw;
	}
	article.presentation2 > div{
		width:100%;
		padding:5vw;
		border:0;
	}
	/* Métiers */
	.metier{
		padding-left:10vw;
	}
	.metier:nth-of-type(even){
		padding-right:10vw;
	}
	.metier > div > span{
		width:15%;
	}
	/* QSN */
	.qsn article.presentation2 aside .col2 > *{
		margin:2vw;
		width:38vw;
		max-width:none;
	}
	/* Contact */
	#contact_formulaire .col2 > *{
		margin-bottom:0;
	}

	/* Mobile */
	.mobile{
		display:block;
	}
	.mobile_no{
		display:none !important;
	}
}
@supports (-webkit-overflow-scrolling: touch) {
	article.presentation2{
		background-attachment: scroll;
	}
}