:root {
    --lgrey: #F4F4F4;
    --grey: #F2F2F2;
    --bgrey: #777777;
    --red: #FF0000;
    --black: black;
    --white: white;
}

@font-face {
    font-family: 'Avenir Next';
    src: url('../fonts/AvenirNext-Bold.eot');
    src: url('../fonts/AvenirNext-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AvenirNext-Bold.woff2') format('woff2'),
        url('../fonts/AvenirNext-Bold.woff') format('woff'),
        url('../fonts/AvenirNext-Bold.ttf') format('truetype'),
        url('../fonts/AvenirNext-Bold.svg#AvenirNext-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir Next';
    src: url('../fonts/AvenirNext-DemiBold.eot');
    src: url('../fonts/AvenirNext-DemiBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AvenirNext-DemiBold.woff2') format('woff2'),
        url('../fonts/AvenirNext-DemiBold.woff') format('woff'),
        url('../fonts/AvenirNext-DemiBold.ttf') format('truetype'),
        url('vAvenirNext-DemiBold.svg#AvenirNext-DemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir Next';
    src: url('../fonts/AvenirNext-Regular.eot');
    src: url('../fonts/AvenirNext-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AvenirNext-Regular.woff2') format('woff2'),
        url('../fonts/AvenirNext-Regular.woff') format('woff'),
        url('../fonts/AvenirNext-Regular.ttf') format('truetype'),
        url('../fonts/AvenirNext-Regular.svg#AvenirNext-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Avenir Next';
    src: url('../fonts/AvenirNext-Medium.eot');
    src: url('../fonts/AvenirNext-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AvenirNext-Medium.woff2') format('woff2'),
        url('../fonts/AvenirNext-Medium.woff') format('woff'),
        url('../fonts/AvenirNext-Medium.ttf') format('truetype'),
        url('../fonts/AvenirNext-Medium.svg#AvenirNext-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
}

@font-face {
		font-family: 'Acumin Pro';
		font-style: normal;
		font-weight: normal;
		src: url('../fonts/Acumin-pro.woff') format('woff');
}

@font-face {
		font-family: 'Acumin Pro';
		font-style: normal;
		font-weight: bold;
		src: url('../fonts/Acumin-pro-bold.woff') format('woff');
}


body { 
	
	font-family: 'acumin', sans-serif;
	font-size: 16px;
	background:#ccc url('../img/background.jpg') no-repeat;
	background-size:cover !important;
	background-position:center !important;
}

.columns { display:flex; }
.columns > .column { flex:1; }

span.red { color:var(--red); }

main { background:rgba(0,0,0,0.7); }
main.columns { padding:2vw 3vw 2vw 4vw; /* min-height:calc(100vh - 80px); */ }
main.columns > .column { position:relative; }
main.columns > .column:first-child { color:var(--white); font-family:'Avenir Next', sans-serif; }
main.columns > .column:first-child .guide-pinel { position:absolute; right:-7vw; top:20%; width:40vw; height:38vw; background:transparent url('../img/guide.png') no-repeat; background-size:contain !important; z-index:3; pointer-events:none; }
main.columns > .column:last-child { max-width:35vw; }

.logo-eiffage { max-width:12vw; margin-bottom:5vw; }
p.intro { margin-bottom:2vw; font-size:1.6vw; line-height:1.3em; }
ul.avantages { list-style-type:none; padding:0; margin:0 0 0 3vw; }
ul.avantages li { position:relative; display:block; margin-bottom:1.5vw; padding-left:2.7vw; }
ul.avantages li:before { content:" "; position:absolute; left:0px; top:0px; width:2vw; height:2vw; background:transparent url('../img/puce.svg') no-repeat; background-size:contain !important; }
ul.avantages li strong { font-weight:600; }
h1 { font-weight:bold; margin-bottom:3vw; }
h1 strong { color:var(--red); font-weight:600; }
h1 sup { font-size:40%; font-weight:normal; top:-1em; }
p.avertissement { max-width:70%; font-size:1.6vw; line-height:1.3em; }

#formulaire { position:relative; background:#fff; padding:3vw 5vw; font-family:'Acumin Pro', sans-serif; min-height:600px; }
#formulaire h2 { font-size:2vw; font-weight:bold; color:var(--red); margin:0; text-align:center; }
#formulaire h3 { font-size:0.9vw; font-weight:bold; color:var(--black); margin-bottom:1vw; text-align:center; }

#formulaire .form-row { display:flex; }
#formulaire .form-row > .form-group { flex:1; }
#formulaire .form-row > .form-group:first-child { margin-right:0.6vw; }
#formulaire .form-row > .form-group#lieu { margin-right:0; }
.form-group { position:relative; margin-bottom:0.5vw; }
.form-control { height:32px; line-height:32px; border-radius:0; border:none; border-bottom:solid 1px #777777; padding:0; margin-bottom:0; font-size:0.9vw; outline:none !important; box-shadow:none !important; }
.form-control::placeholder { color:#aaa; font-size:1vw; }
#formulaire textarea.form-control { border:solid 1px #777777; padding:0.5vw; height:auto; line-height:1.2em; resize:none; }
#formulaire textarea.form-control::placeholder { font-style:italic; }
.form-group .control-label { display:block; width:100%; text-align:center; font-size:0.9vw; font-weight:bold; margin-bottom:0.5vw; }
.form-group#infos_projet { margin-top:1vw; }
.form-group#programme_reference { margin-top:1vw; }
.form-group#optin1 { margin-top:1vw; }
.form-group#optin1 .control { text-align:center; }
input[type="radio"] { display:none; }
input[type="radio"] + label { position:relative; padding-left:22px; margin-right:10px; font-size:0.9vw; }
.form-group#optin1 .control input[type="radio"] + label:last-child { margin-right:0; }
input[type="radio"] + label:before { content:" "; position:absolute; left:0px; top:0px; width:16px; height:16px; border-radius:10px; border:solid 1px #777; }
input[type="radio"]:checked + label:after { content:" "; position:absolute; left:3px; top:3px; width:10px; height:10px; border-radius:5px; background:var(--red); }

/* .form-group#prenom .control-label,
.form-group#nom .control-label,
.form-group#email .control-label,
.form-group#telephone .control-label,
.form-group#lieu .control-label */
.form-group.label-over .control-label { position:absolute; left:0px; top:0px; width:100%; height:32px; line-height:32px; color:#aaa; font-weight:normal; text-align:left; pointer-events:none; transition:all 0.3s ease; opacity:1; }
.form-group.label-over.active .control-label { transform:translateY(-60%); opacity:0 !important; }

#formulaire .mentions { font-size:0.6vw; line-height:1em; color:#777; margin-bottom:15px; text-align:center; }
#formulaire .mentions a { text-decoration:underline; color:#777 !important; }
#formulaire .btn-valider { display:inline-block; height:2.6vw; line-height:2.6vw; background:var(--red); text-align:center; padding:0 5vw; border-radius:0; border:none !important; font-size:0.8vw; font-weight:bold; color:#fff; text-decoration:none; margin-bottom:1vw; }
.form-group.error .form-control { border-bottom:solid 1px var(--red); }
.form-group.error .control-label { color:var(--red); }

footer {  background:#EAEAEA; height:80px; line-height:80px; padding:0 3vw; }
footer > div { display:inline-block; height:80px; line-height:80px; vertical-align:middle; margin-right:2vw; }
footer .btn-mentions { display:inline-block; height:40px; line-height:40px; padding:0 20px; border:solid 1px #777; color:#777; font-size:0.9vw; font-weight:bold; text-decoration:none !important; vertical-align:middle; }
footer > div.mentions-legales { display:block; font-size:10px; color:#666; line-height:1.2em; text-align:left; padding-top:30px; padding-bottom:40px; height:auto; }
footer > div.mentions-legales p { text-align:justify; margin-bottom:1vw; }
footer > div.mentions-legales a { color:#666 !important; text-decoration:underline; }
footer img.telephone { max-height:44px; }

.restons-en-contact { display:inline-block; vertical-align:middle; line-height:1em; }
.restons-en-contact p { padding:0; margin:0 0 0.1vw 0; font-size:0.9vw; font-weight:bold; color:var(--black); }
ul.social { list-style-type:none; display:block; width:100%; padding:0; margin:0; }
ul.social > li { /* flex:1; height:2vw; line-height:2vw; */ display:inline-block; margin-right:8px; }
ul.social > li:last-child { margin-right:0; }
ul.social > li > a { /* display:inline-block; vertical-align:bottom; */ }
ul.social > li > a { display:block; width:1.3vw; height:1.3vw; background-repeat:no-repeat !important; background-size:contain !important; background-position:bottom center !important; }
ul.social > li > a.facebook { background:transparent url('../img/icon-facebook.svg') no-repeat; }
ul.social > li > a.twitter { background:transparent url('../img/icon-twitter.svg') no-repeat; }
ul.social > li > a.linkedin { background:transparent url('../img/icon-linkedin.svg') no-repeat; }
ul.social > li > a.youtube { background:transparent url('../img/icon-youtube.svg') no-repeat; }

#mentions-legales.modal .modal-dialog { width:1000px; max-width:100%; height:500px; max-height:100%; position:absolute; left:0px; top:0px; right:0px; bottom:0px; margin:auto; }
#mentions-legales.modal .modal-dialog .modal-content { width:100%; height:100%; display:flex; }
#mentions-legales.modal .modal-dialog .modal-content > .modal-header { flex:1; max-height:60px; }
#mentions-legales.modal .modal-dialog .modal-content > .modal-body { flex:1; overflow-y:auto; }
#mentions-legales.modal .modal-dialog .modal-content > .modal-body p { font-size:14px; margin-bottom:15px; }
#mentions-legales.modal .modal-dialog .modal-content > .modal-footer { flex:1; max-height:60px; }

#confirmation { position:absolute; left:0px; top:0px; right:0px; bottom:0px; z-index:3; padding:40px; background:#fff; text-align:center; }
#confirmation > .content { width:100%; height:100%; display:flex; flex-direction:column; }
#confirmation > .content > .content-section { flex:1; }
#confirmation > .content > .content-section:first-child { border-bottom:solid 1px #ccc; }
#confirmation > .content > .content-section:first-child p { margin-top:20%; }
#confirmation > .content > .content-section:first-child { padding-bottom:40px; }
#confirmation > .content > .content-section:last-child { padding-top:40px; }
.btn-red { display:inline-block; height:2.6vw; line-height:2.6vw; background:var(--red); text-align:center; padding:0 5vw; border-radius:0; border:none !important; font-size:0.8vw; font-weight:bold; color:#fff !important; text-decoration:none !important; margin-bottom:1vw; }
.btn-black { display:inline-block; height:2.6vw; line-height:2.6vw; background:var(--black); text-align:center; padding:0 5vw; border-radius:0; border:none !important; font-size:0.8vw; font-weight:bold; color:#fff !important; text-decoration:none !important; margin-bottom:1vw; }
#confirmation .btn-red, #confirmation .btn-black { margin-bottom:0; }

.ui-autocomplete .ui-menu-item { font-size:14px; }

@media (min-width: 769px) {
	
		.mobile { display:none !important; }
	
}

@media (max-width: 768px) {

		.desktop { display:none !important; }
		
		body { background:#000 url('../img/background-mobile.png') no-repeat; background-position:top center !important; background-size:100% auto !important; }
		
		main { background:rgba(0,0,0,0.2); }
		main.columns { flex-direction:column; padding:8vw 5vw 10vw 5vw; overflow:hidden; }
		main.columns > .column {  }
		main.columns > .column:first-child .guide-pinel { top:40vw; right:-20vw; width:76vw; height:75vw; }
		main.columns > .column:last-child { max-width:none; }
		
		.logo-eiffage { max-width:40vw; min-width:40vw; display:block; margin:0 auto 15vw auto; }
		p.intro { font-size:4.7vw; margin-bottom:11vw; }
		ul.avantages { margin:0 0 14vw 0; max-width:60vw; }
		ul.avantages > li { padding-left:9vw; line-height:1.3em; margin-bottom:5vw; font-size:3.8vw; }
		ul.avantages > li:before { width:6vw; height:6vw; top:-1vw; }
		h1 { font-size:7.8vw; line-height:1.2em; margin-bottom:15vw; }
		p.avertissement { max-width:none; font-size:4.7vw; line-height:1.2em; margin-bottom:10vw; }
		
		#formulaire { padding:10vw 8vw; }
		#formulaire h2 { font-size:8vw; line-height:1em; margin-bottom:2vw; }
		#formulaire h3 { font-size:4vw; margin-bottom:4vw; }
		#formulaire .form-group { flex:none !important; display:block; width:100%; margin:0 0 2vw 0 !important; }
		#formulaire .form-control { font-size:4vw; height:8vw; line-height:8vw; }
		#formulaire textarea.form-control { height:auto; line-height:1.3em; padding:6px; font-size:3.4vw; }
		#formulaire textarea.form-control::placeholder { font-size:3.4vw; }
		#formulaire .control-label { font-size:4vw; line-height:1.3em; margin-bottom:2vw; }
		#formulaire .form-group#infos_projet { margin:5vw 0 5vw 0 !important; }
		#formulaire .form-group#programme_reference { margin:0 0 5vw 0 !important; }
		#formulaire .mentions { font-size:2.8vw; line-height:1.3em; margin-bottom:5vw; }
		#formulaire .btn-valider { height:12vw; line-height:12vw; width:80%; font-size:4vw; margin-bottom:5vw; }
		#formulaire .form-group#optin1 .control-label { margin-bottom:3vw; }
		input[type="radio"] + label { font-size:4vw; line-height:1em; padding-left:24px; }
		.form-group.label-over .control-label { height:8vw; line-height:8vw !important; }
		
		footer { height:auto; line-height:1em; padding:10vw 5vw; }
		footer > div { display:block; text-align:center; padding:0; height:auto; line-height:1em; margin:0 0 10vw 0 !important; }
		footer > div.mentions-legales { font-size:2.8vw; color:#666; line-height:1.2em; text-align:left; }
		footer > div.mentions-legales p { text-align:justify; }
		.restons-en-contact p { font-size:20px; margin-bottom:15px; }
		.restons-en-contact ul.social > li { margin:0 2.5vw; }
		.restons-en-contact ul.social > li > a { width:8vw; height:8vw; }
		footer img.telephone { max-width:90%; max-height:none; }
		
		#confirmation { padding:5vw; }
		#confirmation .content { display:block; }
		#confirmation .content > .content-section { display:block; padding:10vw 0 !important; }
		#confirmation > .content > .content-section:first-child p { margin-top:0; }
		.btn-red { height:12vw; line-height:12vw; width:80%; font-size:4vw; margin-bottom:5vw; }
		.btn-black { height:12vw; line-height:12vw; width:80%; font-size:4vw; margin-bottom:5vw; }
		#confirmation .btn-red, #confirmation .btn-black { margin-bottom:0; }
		
		#cta-mobile { position:fixed; left:0; bottom:0; right:0; height:12vw; line-height:12vw; text-align:center; background:var(--red); color:var(--white); font-weight:600; font-size:4.3vw; transition:all 0.4s ease; transform:translateY(100%); z-index:11; }
		body.cta-mobile #cta-mobile { transform:translateY(0); }
		
}