@charset "UTF-8";
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

body {
  line-height: 1; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

nav ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none;
  color: inherit; }

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none; }

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0; }

input, select {
  vertical-align: middle; }

/* end of Reset Stylesheet */
@font-face {
  font-family: "Sharp Sans No2 Light";
  src: url("fonts/SharpSSNo2Light.woff"); }

@font-face {
  font-family: "Sharp Sans No2 Bold";
  src: url("fonts/SharpSSNo2Bold.woff"); }

html {
  font-size: 2.15vw;
  font-family: "Sharp Sans No2 Light"; }

body {
  line-height: 1.2; }

section {
  padding: 3rem; }

.clear {
  clear: both; }

body {
  background-color: #ebedee; }

a:hover {
  color: white;
  cursor: pointer; }

/*-----------------------------------------------HEADER		*/
header {
  background-image: linear-gradient(45deg, #0724ba, #2575fc 100%);
  background-color: #2575fc;
  position: relative;
  z-index: 10;
  color: #ebedee;
  height: 8rem; }

.header_content {
  position: absolute;
  width: 87%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); }

header svg {
  width: 6rem;
  height: auto;
  fill: #ebedee;
  right: 0; }

header p {
  letter-spacing: 0.02rem;
  left: 0; }

header svg,
header p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); }

/*-----------------------------------------------NAV		*/
nav {
  position: absolute;
  background-color: #ebedee;
  z-index: 1;
  font-family: "Sharp Sans No2 Bold";
  text-transform: uppercase;
  font-size: 0.5rem;
  letter-spacing: 0.07rem;
  width: 100vw;
  height: 1.5rem; }

.liens_nav {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 86%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: space-between;
  color: #0724ba; }

/*-----------------------------------------------SECTION		*/
section {
  padding-top: 5rem; }

section a:hover {
  color: inherit; }

/*-----------------------------------------------ARTICLE		*/
article {
  margin-bottom: 3rem;
  -webkit-transform: translate3d(0, 0, 0); }

article p {
  color: #0724ba;
  padding-right: 1%;
  white-space: nowrap;
  padding-bottom: 1rem; }

article p a {
  font-family: "Sharp Sans No2 Bold";
  font-size: 0.7rem;
  letter-spacing: 0.05rem; }

article p a:hover {
  color: white; }

article img {
  width: 25%;
  height: auto;
  position: absolute;
  top: 0;
  right: 0; }

article img.sous_h1 {
  top: 1.5rem; }

article.demi {
  width: 45%;
  float: left;
  min-height: 14rem; }

article.demi img {
  width: 100%;
  height: auto;
  position: absolute;
  top: auto;
  bottom: 0;
  right: 0; }

article.conditions {
  font-size: 0.7rem;
  text-align: left; }

article.conditions li {
  padding-left: 1rem;
  padding-bottom: 0.3rem; }

article.demi:nth-child(odd) {
  float: right; }

article.demi.conditions:nth-child(odd) {
  margin-left: 3.5rem; }

h1 {
  font-family: "Sharp Sans No2 Bold";
  text-transform: uppercase;
  font-size: 0.5rem;
  border-bottom: 0.15rem solid;
  letter-spacing: 0.07rem;
  padding-bottom: 0.3rem;
  margin-bottom: 0.7rem;
  border-color: inherit; }

.tradgen {
  color: #366D0A;
  border-color: #366D0A; }

.tradjur {
  color: #ED8F21;
  border-color: #ED8F21; }

.tradsui {
  color: #CC321B;
  border-color: #CC321B; }

.tradvet {
  color: #6E21ED;
  border-color: #6E21ED; }

.tradexp {
  color: #0724ba;
  border-color: #0724ba; }

.gen {
  color: #0724ba;
  border-color: #0724ba; }

.formulaire {
  color: #0724ba;
  border-color: #0724ba;
  height: 40rem; }

.formulaire p {
  color: #0724ba; }

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  color: #0724ba; }

li {
  padding-left: 3rem;
  padding-bottom: 1rem; }

li:before {
  content: "•";
  padding-right: 0.5rem; }

/*-----------------------------------------------LIRE PLUS		*/
.more {
  font-size: 2.5rem;
  width: 1.7rem;
  height: 1.7rem;
  position: relative;
  border: none;
  padding: none;
  left: 50%;
  transform: translateX(-50%);
  text-align: center; }

.more.hvr-grow:hover {
  color: white;
  -webkit-transform: scale(1.5);
  transform: scale(1.5); }

.suite {
  height: 0;
  overflow: hidden; }

/*-----------------------------------------------CONTACT		*/
/*--------------- blocs ----------------*/
.form_bloc {
  margin-bottom: 2rem;
  text-transform: uppercase; }

.form_bloc p {
  float: left;
  margin-top: 0.3rem;
  margin-bottom: 0;
  text-transform: none; }

/*----------- style commun ------------*/
.form_bloc p a:hover {
  color: #0724ba;
  text-decoration: underline; }

.radio,
input[type=text],
input[type=email],
input[type=number],
textarea,
.boite_erreur,
.envoyer,
.copie {
  border-radius: 0.2rem;
  border-color: #0724ba;
  border-style: solid;
  border-width: 0.05rem;
  color: #0724ba;
  font-size: 0.5rem;
  box-sizing: border-box;
  text-transform: uppercase;
  font-family: "Sharp Sans No2 Bold";
  letter-spacing: 0.05rem; }

.repartition {
  display: flex;
  justify-content: space-between; }

.boite_info_1 p,
.boite_info_2 p,
.info_desactive p {
  font-family: "Sharp Sans No2 Bold";
  letter-spacing: 0.05rem; }

/*-------------- radios ---------------*/
.radio {
  height: 0.55rem;
  float: right;
  font-size: 0.5rem;
  width: 65%;
  border-radius: 0.2rem;
  height: 1.5rem;
  position: relative;
  background-color: none;
  z-index: 2; }

.radio:hover {
  background-color: white; }

input[type="checkbox"],
input[type="radio"] {
  display: none; }

label {
  padding: 0.4rem 0.5rem;
  z-index: 2;
  cursor: pointer; }

label:hover {
  color: #0724ba; }

/*------- selecteur -------*/
.selector {
  background-color: white;
  position: absolute;
  z-index: 1;
  border-radius: 0.1rem;
  border-color: #0724ba;
  border-style: solid;
  border-width: 0.05rem;
  box-sizing: border-box;
  margin: 0.1rem;
  height: 85%; }

#selector_1 {
  width: 16.5%; }

#selector_2 {
  width: 19%;
  left: 42.5%; }

#selector_3 {
  width: 14%;
  left: 25%; }

/*---------- cases à remplir ---------*/
.case {
  float: right;
  font-size: 1rem;
  width: 65%; }

input.demi, input.large {
  height: 1.5rem;
  padding-left: 0.5rem;
  color: #0724ba;
  text-align: center;
  background: transparent; }

input.demi:focus, input.large:focus, textarea:focus {
  outline: none;
  background: white; }

input.demi:hover, input.large:hover, textarea:hover {
  background: white; }

input.demi {
  width: 40%; }

.large {
  width: 100%; }

.case > input {
  margin-bottom: 0.5rem; }

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0; }

input[type=number] {
  -moz-appearance: textfield; }

input[type=text]::-webkit-input-placeholder,
input[type=email]::-webkit-input-placeholder,
input[type=number]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #0724ba;
  opacity: 0.3; }

textarea {
  padding: 0.4rem;
  background: transparent;
  text-align: center; }

.ou {
  text-align: center;
  width: 5%;
  margin-top: 0.3rem;
  text-transform: none; }

/*---------- bouton d'envoi ---------*/
.envoyer {
  position: absolute;
  right: 0;
  width: 65%;
  height: 1.5rem;
  text-transform: uppercase;
  color: #ebedee;
  background-color: #0724ba;
  cursor: pointer; }

.envoyer:hover {
  background-color: #3AB7FF; }

.envoyer:active {
  background-color: #0724ba; }

/*--------- infos au survol --------*/
.boite_info_1 p,
.boite_info_2 p {
  font-size: 0.6rem;
  margin-top: 0;
  padding-top: 0.2rem;
  font-family: "Sharp Sans No2 Bold";
  letter-spacing: 0.05rem; }

.boite_info_1,
.boite_info_2 {
  position: absolute;
  width: 30%;
  background-color: #ebedee;
  z-index: 3;
  opacity: 0;
  height: 2rem;
  pointer-events: none; }

#info_format_texte,
#info_format_tableau,
#info_format_autre {
  opacity: 0;
  position: absolute;
  top: 0; }

/*------------- erreurs ------------*/
.desactive {
  cursor: default;
  opacity: 0.1; }

.info_desactive {
  width: 65%;
  height: 1.6rem;
  right: 0;
  position: absolute;
  z-index: 3;
  opacity: 1;
  pointer-events: none; }

.info_desactive p {
  opacity: 0;
  font-size: 0.6rem;
  padding: 0.4rem;
  font-family: "Sharp Sans No2 Bold"; }

.boite_erreur {
  margin-left: 35%;
  margin-bottom: 1rem;
  right: 0;
  width: 65%;
  border-color: #b70d0d;
  font-size: 0.5rem;
  text-align: center;
  color: #b70d0d;
  padding: 0.5rem;
  display: none; }

/*------------- envoyé ------------*/
.confirmation {
  height: 15rem; }

.copie {
  position: absolute;
  right: 0;
  top: 0;
  text-transform: none;
  padding: 0.5rem; }

/*-------------------------------------------------FOOTER		*/
.footer {
  padding-top: 2rem;
  color: #0724ba; }

/*-----------------------------------------------EN TRAVAUX		*/
.header_travaux {
  background-image: linear-gradient(45deg, #0724ba, #2575fc 100%);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  color: #ebedee;
  height: 100%;
  width: 100%; }

.header_travaux svg {
  position: relative;
  left: 50%;
  margin-top: 8rem;
  transform: translateX(-50%);
  width: 20%;
  height: auto;
  fill: #ebedee; }

.header_travaux .texte {
  text-align: center;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%; }

.header_travaux p a:hover {
  text-decoration: underline; }

/*---------------------------------------------ANIMATION		*/
.hvr-grow {
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform; }

.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1.05);
  transform: scale(1.05); }

/*---------------------------------------------RESPONSIVE		*/
@media screen and (min-width: 1200px) {
  html {
    font-size: 24px; }
  .header_content {
    width: 42rem; }
  .liens_nav {
    width: 42rem; }
  section {
    width: 42rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%); } }

@media screen and (max-width: 450px) {
  html {
    font-size: 4.5vw; }
  section {
    width: 19rem;
    padding: 3rem 1.5rem; }
  header {
    height: 12rem; }
  .header_content {
    width: 85%;
    top: 3rem;
    transform: translateX(-50%); }
  header svg {
    width: 50%;
    top: 0;
    left: 50%;
    transform: translateX(-50%); }
  header p {
    display: none; }
  article:not(.demi) p {
    white-space: normal;
    padding-right: 0.8rem; }
  article:not(.demi) p br {
    display: none; }
  article:not(.demi) img {
    display: none; }
  article.demi {
    float: left;
    width: 100%; }
  article.demi:nth-child(even) {
    float: left; }
  article.demi.conditions {
    min-height: intrinsic; }
  .cesure {
    display: none; }
  .formulaire {
    height: 37rem; }
  .radio {
    width: 100%;
    height: 1.3rem; }
  .case {
    width: 100%; }
  .form_bloc {
    margin-bottom: 0.5rem; }
  .form_bloc p {
    padding-bottom: 0.5rem; }
  .boite_info_1, .boite_info_2 {
    display: none; }
  .radio {
    font-size: 0.4rem;
    letter-spacing: 0; }
  .envoyer {
    width: 100%; }
  .info_desactive {
    width: 100%;
    margin-top: 2rem; }
  .boite_erreur {
    margin-left: 0;
    width: 100%; }
  .footer div:nth-child(2) {
    display: none; } }