/* CSS Document */
.page {max-width:1200px; margin:0 auto; padding:50px 0}
.col {margin-top:40px}
form {margin-top:20px}
.page li, .champs label, fieldset {position:relative;}
fieldset {margin-bottom:30px; border:1px solid #D5D5D5; padding:20px 10px 30px 10px; font-size:16px}
fieldset:hover {background:#f4f4f4}
fieldset .ligne [type='text'] {width:calc(100% - 75px); box-sizing:border-box}
fieldset [type='text'] {width:100%; box-sizing:border-box}
fieldset p {margin-bottom:0; font-style:italic; font-size:14px; padding-top:15px}
.page label.select:hover, .page label.select:focus {cursor:pointer}
legend {font-size:16px; background:#39383c; color:#FFF; padding:5px 10px; width:100%; box-sizing: border-box}
legend span {white-space:nowrap}
legend em {color:#f5bfb5; font-style:normal}
select, [type='text'], textarea, [type="submit"], [type="submit"]:focus {font-family:'RobotoCondensed-light', Arial, Helvetica, sans-serif}
[type='text'], textarea {font-size:16px; padding:2px 10px; border:1px solid #D5D5D5}
textarea {width:100%; box-sizing:border-box}
input:focus, textarea:focus, input:focus-visible, textarea:focus-visible {background:#FFF; outline:0}
input:focus, textarea:focus {border:1px solid #39383c}
input.error, textarea.error {border:1px dotted #E68164; background:#FFF}
[type="submit"], [type="submit"]:focus {margin:30px auto; background:#e69381; color: #FFF; padding:10px; text-align:center; font-size:16px; display:block; cursor:pointer; box-shadow:none; outline:0; border:none; text-transform:uppercase}
select {font-size:16px; background:#FFF; border:1px solid #CCC; border-radius:0}
div.error, label.error, .gray {display:none}
div.error, label.error {font-size:14px; white-space:nowrap; box-shadow:0 2px 5px rgba(0,0,0,0.2)}
label.error, span.error {background-color:#E68164; color:#FFF; font-size:14px; padding:2px 10px 2px 29px; border-radius:4px}
label.error:after, span.error:after {content:"!"; background-color:#FFF; width:16px; height:16px; border-radius:50%; text-align:center; line-height:14px; position:absolute; left:8px; top:3px; color:#E68164}
label.error:before, span.error:before {content:""; background-color:#E68164; position:absolute; left:8px; top:-6px; width:16px; height:16px; transform:rotate(45deg)}
label.error, span.error {position:absolute}
label.error {top:30px; left:4px; width: inherit !important; animation:slide 0.5s both; z-index:20}
span.error {width:200px; left:50% !important; top:40px; margin-left:-100px; z-index:10; box-shadow: 0 2px 5px rgba(0,0,0,0.2); animation:slideup 0.5s both}
span.error:hover {z-index:30}


.page h1, .page h2 {color:#b52505}
.page h1 {font-family:'RobotoCondensed-Light', Arial, Helvetica, sans-serif; font-size:48px; line-height:48px; text-transform:uppercase; margin-bottom:30px}
.page-tarifs h2 {font-size:36px; line-height:36px}
.page p {font-size:16px}
.page h1, .page h2, p {text-align:center}
.slider {height:450px}
.slider img {object-fit:cover; height:100%; width:100%}
.grid {display:grid; grid-row-gap:30px; row-gap:30px} 
.gridrep {grid-row-gap:15px; row-gap:15px} 
fieldset .gridrep:nth-of-type(2) {margin-top:15px}
.enveloppe {border:1px solid #CCC; padding:15px 20px 25px 20px; width:230px; height:140px;  margin:30px auto 20px auto; border-radius:10px; position:relative; overflow:hidden; box-shadow: 0px 5px 10px rgba(0,0,0,0.2); z-index:1; animation:bounce-in-left 1.1s both}
.enveloppe:before, .enveloppe:after {content:""; position:absolute; display:block; height:200px; width:200px; border:1px solid #CCC; left:50%; margin-left:-100px; border-radius:10px; transform:rotate(45deg); z-index:0}
.enveloppe:before {top:-120px; background:#FFF; z-index:-1}
.enveloppe:after {bottom:-130px; z-index:-2}
.enveloppe h2 {text-align:center; font-size:24px; line-height:24px} 
#reponse p {text-align:center; margin-bottom:20px} 
#reponse p strong {font-size:21px} 
.ligne label:nth-of-type(1) {width:70px; display:inline-block; text-align:right; padding-right:5px}
.topic {padding-bottom:10px}
.checkbox {border:none;}
.bouton a:hover, [type='submit']:hover {background:#b52505}
.alignselect .select {padding-left:15px; display:block}
.alignselect .select input {margin-left:-15px}
.textaera label.error, .radio label.error  {top:inherit !important; left: 10px !important}
.radio label.error {bottom:-20px}
.textaera label.error {bottom:-18px}
.catouche label.error {left:4px !important}
@keyframes slide {0% {left:150px; opacity:0} 100% {left:0; opacity:1}} 
@keyframes slideup {0% {top:140px; opacity:0} 100% {left:0; opacity:1}} 
.gray * {color:gray}
.form {font-size:16px}
.bt-label {text-align:center}
.bt-label span {margin-top: 10px; display: block; font-size: 14px;text-decoration:underline; cursor:pointer}
.bt-label:hover span {color:#cb1730}
.cartouche ul {text-align:center}
.cartouche ul li:nth-of-type(3) {padding-top:15px}

.adresse fieldset {border:1px solid #D5D5D5; margin-bottom:0; padding:15px}
.adresse fieldset:hover {background:none}
.adresse dl {font-style:normal; margin:0}
.adresse legend, .adresse dt, .adresse strong {margin:0; font-family: 'RobotoCondensed-Bold', Arial, Helvetica, sans-serif; font-size:19px}
.adresse legend {font-size:24px; text-transform:uppercase; text-align:center}
.adresse dd {margin:0}
.adresse .map {width:100%; margin-top:25px; position:relative}
.adresse .map:after {content:""; display:block; padding-bottom:100%}
.adresse .map iframe {position:absolute; width:100%; height:100%}


@media screen and (max-width:359px) {
.section {padding:0 20px}
}
@media screen and (max-width:360px){ 
.page {padding:30px 15px}
}
@media screen and (min-width:360px) and (max-width:639px) {
.section {padding:0 30px}
}
@media screen and (max-width:479px){ 
.cartouche label:nth-of-type(1) {display:block}
.cartouche  span.error {top:52px}
}
@media screen and (max-width:639px){
fieldset .grid label {margin-top:15px} 
fieldset .grid label:nth-of-type(1) {margin-top:0}
}
@media screen and (min-width:640px) {
.grid {grid-template-columns:repeat(2, 1fr)} 
.ligne:nth-of-type(3) {margin-bottom:0}
}
@media screen and (min-width:640px) and (max-width:799px){ 
.section {padding:0 40px}
.grid {grid-column-gap:20px; column-gap:20px} 
}
@media screen and (min-width:640px) and (max-width:1023px){ 
.adresse fieldset > div {display:grid; grid-template-columns: 1fr 1fr; column-gap:25px}
.adresse .map {margin-top:0}
}
@media screen and (max-width:1023px){ 
	.col {display:inherit}
}
@media screen and (min-width:800px) {
.section {padding:0 50px}
}
@media screen and (min-width:1024px) {
.section {padding:0 50px}
.col2 {grid-template-columns: 2fr 1fr; grid-column-gap :30px; column-gap:30px}
}

@media screen and (max-width:1024px) {
legend {font-size:15px}
}


@-webkit-keyframes bounce-in-left{0%{-webkit-transform:translateX(-600px);transform:translateX(-600px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}38%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}55%{-webkit-transform:translateX(-68px);transform:translateX(-68px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}72%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}81%{-webkit-transform:translateX(-28px);transform:translateX(-28px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}90%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}95%{-webkit-transform:translateX(-8px);transform:translateX(-8px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes bounce-in-left{0%{-webkit-transform:translateX(-600px);transform:translateX(-600px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}38%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}55%{-webkit-transform:translateX(-68px);transform:translateX(-68px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}72%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}81%{-webkit-transform:translateX(-28px);transform:translateX(-28px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}90%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}95%{-webkit-transform:translateX(-8px);transform:translateX(-8px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}