/**
 * Generic
 */

/*
    font-family: 'Noto Sans Display', sans-serif;

    font-family: 'Nunito', sans-serif;
*/

:root {
	--jaune: #FFCF00;
	--vert: #5F7800;
	--t: all 0.25s ease-in-out;
}

html {
  height: 100%;
  font-size: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  line-height: 1.4;
}
html, body {
  font-family: 'Nunito', sans-serif;
  color: black;
  font-size: 16px;
}
body {
  background: #F5F5F5;
}
body * {
  box-sizing: border-box;
}
p {
  position: relative;
  margin-top: 0;
}

a {color: inherit; text-decoration: none; transition: var(--t); border: 0;}
a:hover, a:active, a:focus {text-decoration: none;}
img, svg {display: block; max-width: 100%; height: auto;}
h1 {font-family: 'Noto Sans Display', sans-serif; color: var(--vert); font-size: 1.75rem; padding-bottom: 0.5rem; margin: 1rem 0; border-bottom: 2px solid var(--vert); line-height: 1.2; font-weight: 500;}
h2 {font-weight: 900; font-size: 1.75rem; margin: 1rem 0; text-transform: uppercase; line-height: 1.1;}
h3 {font-weight: 900; text-transform: uppercase; color: var(--jaune); font-size: 1.25rem; margin: 0;}
.jcs-container {max-width: 1150px; width: 100%; margin: 0 auto; padding: 0 15px;}
.jcs-wrapper {background: black; color: white; padding: 0.75rem;}
.btn {display: inline-block; padding: 0.25em 0.5em; border: 1px solid var(--jaune); border-radius: 10px; line-height: 1; cursor: pointer; transition: var(--t);}
.btn.btn-yellow {border-radius: 15px; padding: 1rem; background: var(--jaune); color: black; font-weight: 900; font-size: 1.75rem; position: relative; z-index: 2; text-transform: uppercase;}
.btn.btn-yellow:hover {color: white; background: black;}
.btn.btn-black {font-size: 1.1875rem; font-weight: 700;}
.btn.btn-black:hover {color: black; background: var(--jaune);}
.btn.btn-small {color: black; background: var(--jaune);}
.btn.btn-small:hover {color: white; background: black;}
.btn.btn-video {background: var(--jaune); padding: 0.5rem 1rem 0.35rem 3rem; position: relative; text-transform: uppercase; font-weight: 900; font-size: 1rem; text-align: left;}
.btn.btn-video:hover {background: white; color: var(--jaune);}
.btn.btn-video:after {content: ""; width: 32px; height: 38px; position: absolute; left: 0.5rem; top: 50%; transform: translateY(-50%); background: url(../../images/video.svg) no-repeat center; background-size: 100%;}

.error{border: 2px solid red !important;}
.required_adress{display:none;color:red;font-size:12px;}
	
/**
 * Index
 */
.jcs-header {text-align: center; position: relative;}
.jcs-header:before {content: ""; width: 100%; height: 1px; background: var(--jaune); position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.jcs-header-logo {display: inline-block; padding: 0 1rem; background: black; position: relative; z-index: 2; width: 150px;}
.jcs-subtitle {text-align: center; position: relative; z-index: 2;}
.jcs-subtitle span {color: var(--jaune);}
.jcs-bc-wrapper {display: flex; flex-wrap: wrap; text-align: center;}
.jcs-bc-1 {width: 100%; z-index: 2; position: relative;margin-bottom: 25px !important;}
.jcs-bc-1-content {position: relative;}
.jcs-bc-1-content:before {content: ""; width: 100%; height: 1px; background: var(--jaune); position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.jcs-bc-2 {width: 50%; margin-top: -3rem; z-index: 1; position: relative; overflow: hidden; display: flex; justify-content: flex-end; flex-direction: column;}
.jcs-bc-2 img {margin: 0 auto;}
.jcs-bc-3 {width: 50%; z-index: 1; position: relative; margin-top: -1rem;}
.jcs-bc-3 img {margin: 0 auto;}
.jcs-bc-4 {text-align: center; width: 100%; margin-top: 0.5rem;}
.jcs-mentions-wrapper p {margin: 0.25rem 0 0; text-align: right; font-size: 0.6rem; font-weight: 700;}
.jcs-bc-2-image {margin-bottom: 0.1rem;}
.jcs-bc-image.jcs-bc-3-image {padding: 0 2rem;}


/**
 * Pop up
 */
.close-pop-up svg {transition: var(--t); stroke: white;}
.close-pop-up:hover svg {stroke: var(--jaune);}
.pop-up-wrapper {position: fixed; left: 0; top: 0; z-index: 200; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.67); display: none;}


.pop-up-lots--top {top: -295px;}
.pop-up-lots--bottom {top: 287px;}

.pop-up-content {max-width: 1120px; background: black; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-height: 100vh; overflow: auto; width: 90%; color: white; padding: 0.75rem; border: 5px solid white; border-radius: 18px;}
.jcs-two-col {display: flex; flex-wrap: wrap;}
.jcs-two-col > div {width: 100%; text-align: center;}
.jcs-two-col-img img {margin: 0 auto;}
.pop-up-content .jcs-header-logo {width: 135px;}
.close-pop-up {position: absolute; top: 0; right: 0;}
.pop-up-content h2 {text-align: center; font-size: 1.75rem; margin-bottom: 0;}
.pop-up-content p {line-height: 1.2;}


/**
 * Form
 */
.jcs-form-top {display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--jaune); margin-bottom: 2rem;}
.jcs-form-top-col-1 {width: 100%; display: flex; justify-content: center; flex-direction: column;}
.jcs-form-top-col-2 {width: 60%; display: flex; justify-content: center; flex-direction: column;}
.jcs-form-top-col-3 {width: 40%; display: flex; justify-content: center; flex-direction: column;}
.jcs-form-top-col-3 img {width: 150%; max-width: 150%; margin-left: -25%;}
.jcs-form-wrapper-top {text-align: center; font-weight: 700; font-size: 1.1875rem;}
.jcs-form-wrapper-top .required-field-label {font-size: 1rem;}
.form-col-wrapper {display: flex; flex-wrap: wrap; font-family: 'Noto Sans Display', sans-serif;}
.form-col-left {width: 100%;}
.form-col-right {width: 100%;}
.form-col-wrapper .form-field label {width: 80px; font-size: 0.75rem; padding-right: 0.5rem; display: inline-flex; line-height: 1.2; justify-content: center; flex-direction: column;}
.form-field {display: flex; flex-wrap: wrap; margin-bottom: 0.95rem;}
.form-field-input {width: calc(100% - 80px);}
.form-field-input input {width: 100%; border: 0; background: white; padding: 0.25rem; height: 37px;}
.field-address-num-wrapper {display: flex; flex-wrap: wrap;}
.form-field-numero {width: 45%;}
.form-field-voie {width: 55%;}
.form-col-wrapper .form-field-voie label {text-align: right; width: 60px;}
.form-col-wrapper .form-field-voie .form-field-input {width: calc(100% - 60px);}
.field-address-cp-wrapper {display: flex; flex-wrap: wrap;}
.form-field-cp {width: 45%;}
.form-field-commune {width: 55%;}
.form-col-wrapper .form-field-commune label {text-align: right;}
.form-col-wrapper .form-field-ha label {width: 60%!important;}
.form-col-wrapper .form-field-ha .form-field-input {width: 40%;}
input[type="checkbox"] {display: none}
input[type="checkbox"] + label {position: relative; padding-left: 2.5rem; margin-bottom: 0.75rem; font-size: 0.75rem; display: block;}
input[type="checkbox"] + label:before {content: ""; width: 28px; height: 22px; position: absolute; left: 0; top: 50%; background: url(../../images/checkbox.svg) no-repeat 3px 1px; transform: translateY(-50%);}
input[type="checkbox"]:checked + label:before {content: ""; width: 28px; height: 22px; position: absolute; left: 0; top: 50%; background: url(../../images/checkbox-ok.svg) no-repeat 0 0; transform: translateY(-50%);}
.jcs-form-submit-wrapper {text-align: center; margin: 2rem 0; position: relative; font-family: 'Nunito', sans-serif;}
.jcs-form-submit-wrapper:before {content: ""; width: 100%; height: 1px; background: var(--jaune); position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.jcs-form-submit-wrapper > *, .lk-video-wrapper > * {position: relative; z-index: 1;}
.jcs-form-mentions {text-align: center;}
.jcs-form-mentions p {font-size: 0.75rem}
.jcs-form-mentions-buttons {display: flex; justify-content: center; flex-wrap: wrap; margin: 1rem 0 0.5rem;}
.jcs-form-mentions-buttons > div {margin: 0 0.5rem 1rem;}
.pop-up-error .pop-up-content {max-width: 600px;}
.pop-up-content .message-error h2 {font-size: 1.25rem; text-align: center; margin: 1rem 0;}
.lk-video-wrapper {text-align: center; margin: 1.5rem 0 1rem;position: relative;}
.lk-video-wrapper:before {content: ""; width: 100%; height: 1px; background: var(--jaune); position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.jcs-form-top h2 {font-size: 1.25rem;}

/**
 * Remerciements
 */
.jcs-rm-wrapper {max-width: 600px; margin: 0 auto; display: flex; flex-wrap: wrap;}
.jcs-rm-top-col-1 {width: 50%; display: flex; justify-content: center; flex-direction: column;}
.jcs-rm-top-col-2 {width: 50%; display: flex; justify-content: center; flex-direction: column; padding: 0 1.5rem;} 
.jcs-rm-top-col-3 h3 {color: white; text-transform: none; font-size: 1.375rem; text-align: center; line-height: 1.2;}
.jcs-rm-top-col-3 h3 span {color: var(--jaune);}
.jcs-rm-small-p {text-align: center; font-size: 0.9375rem; margin: 1.25rem 0 0;}
.lk-video-wrapper.lk-video-wrapper-rm {margin-bottom: 1.5rem;}
.jcs-rm-subtitle h2 {font-size: 1.5rem;}
.jcs-rm-top-col-2 img {width: 140%; max-width: 140%; margin-left: -20%;}


@media screen and (min-width: 400px) {
	.jcs-form-top-col-1 {width: 50%; padding: 0 0.75rem 0 0;}
	.jcs-form-top-col-2 {width: 30%;}
	.jcs-form-top-col-3 {width: 20%;}	
}	


@media screen and (min-width: 500px) {
	.form-field-numero {width: 35%;}
	.form-field-voie {width: 65%;}
	.form-field-cp {width: 42%;}
	.form-field-commune {width: 58%;}	
}	


@media screen and (min-width: 680px) {
	h1 {font-weight: 400; font-size: 3.125rem;}
	h2 {font-size: 2.5rem;}
	.jcs-bc-1 {width: 33.333%; order: 2; display: flex; justify-content: center; flex-direction: column; z-index: 0;}
	.jcs-bc-2 {width: 33.333%; order: 1; margin-top: 0; z-index: 3;}
	.jcs-bc-3 {width: 33.333%; order: 3; margin-top: 0; z-index: 3;}
	.jcs-bc-4 {order: 4; margin-top: -1.65rem; z-index: 2;}
	.jcs-bc-wrapper {margin-top: -1.5rem;}
	.jcs-header-logo {width: auto;}
	.btn.btn-yellow {font-size: 2.25rem;}
	.jcs-two-col > div {width: 50%; padding: 0 1rem;}
	.pop-up-content .jcs-header-logo {width: 188px;}
	.pop-up-content h2 {font-size: 2.5rem; margin-bottom: 1rem;}
	.pop-up-content p {line-height: inherit;}
	.jcs-form-top-col-1 h2 {font-size: 2.25rem;}
	.jcs-form-wrapper-top {font-size: 1.5rem;}
	.jcs-form-mentions {padding: 0 5rem;}
	.jcs-form-mentions-buttons > div {margin: 0 1rem;}
	.pop-up-content .message-error h2 {font-size: 1.75rem; margin: 2rem 0;}
	.btn.btn-video {font-size: 1.25rem; padding: 0.5rem 1rem 0.35rem 3.5rem;}
	.btn.btn-video:after {width: 38px;}
	.jcs-rm-subtitle h2 {margin: 2rem 3rem 1rem;}
	.jcs-rm-subtitle h2 {font-size: 2.5rem;}
	.jcs-rm-top-col-3 h3 {font-size: 2.125rem; padding: 0 2.5rem;}
}	

@media screen and (min-width: 880px) {
	.form-col-left {width: 50%; padding: 0 1rem;}
	.form-col-right {width: 50%; padding: 0 1rem;}
	.jcs-form-top h2 {font-size: 1.75rem;}
	.jcs-form-top-col-2 {width: 25%; display: flex;}
	.jcs-form-top-col-3 {width: 25%; display: flex;}
	.jcs-form-top-col-3 img, .jcs-rm-top-col-2 img {width: auto; max-width: 100%; margin-left: 0;}	
}

@media screen and (min-width: 1024px) {
	.form-col-left {padding: 0 4rem;}
	.form-col-right {padding: 0 4rem;}
	.form-col-wrapper .form-field label {width: 84px; font-size: 0.8125rem; padding-right: 1rem;}	
	.form-field-input {width: calc(100% - 84px);}
	.form-col-wrapper .form-field-voie .form-field-input {width: calc(100% - 84px);}
}