/* FONT */
 font-family: 'Quicksand', sans-serif;
 font-family: 'Oswald', sans-serif;
/*--------------------------------*/
 body {
     font-family: 'Quicksand', sans-serif;
     color: #262626;
     background: #fff;
     margin: 0;
     padding: 0;
}
 p {
     font-family: 'Quicksand', sans-serif;
     color: black;
     font-size: 16px;
     line-height: 20px;
     color: #2e2e2e;
}
 a {
     font-family: 'Quicksand', sans-serif;
     color: #fff;
     -webkit-transition: 0.5s;
     -o-transition: 0.5s;
     transition: 0.5s;
}
 a:link, a:visited {
     color: #fff;
     outline: none;
     text-decoration: none;
}
 a:hover, a:active, a:focus {
     color: #fff;
     outline: none;
     text-decoration: none;
}
 h1 {
     font-family: 'Oswald', sans-serif;
     color: #393939;
     font-weight: 700;
}
 h2 {
     font-family: 'Oswald', sans-serif;
     font-weight: 700;
     font-size: 40px;
}
 h3, h4, h5, h6 {
     font-family: 'Quicksand', sans-serif;
     font-weight: 600;
}
 h3 {
     font-size: 25px;
}
 ::-webkit-selection {
     color: #fff;
     background: #f16145;
}
 ::-moz-selection {
     color: #fff;
     background: #f16145;
}
 ::selection {
     color: #fff;
     background: #f16145;
}
 .btn {
     font-family: 'Quicksand', sans-serif;
     font-size: 20px;
     background-color: #ffb74c;
     border: 3px solid #ffb74c;
     color: #ffffff;
     font-weight: 600;
    
     -webkit-transition: 0.3s;
     -o-transition: 0.3s;
     transition: 0.3s;
     padding: 12px 30px;
}
 .btn:hover, .btn:active, .btn:focus {
     box-shadow: none !important;
     outline: none !important;
     color: #ffb74c;
     background-color: rgba(251, 209, 92, 0);
     border: 3px solid #ffb74c;
}
 .img {
     margin: 0;
     padding: 0;
}
 .gras {
     font-weight: 700;
}
 .fin {
     font-weight: 300;
}
 .noir {
     color: black;
}
 .lightblue {
     color: #6ea7b7;
}
 .darkblue {
     color: #17535c;
}
 .dark {
     color: #12424a !important;
}
 .hover-red {
     background-color: rgb(244, 104, 95);
     color: white !important;
     font-weight: 600;
     padding: 2px 10px;
}
 .hover-yellow {
     background-color: #fbd15c;
     color: white !important;
     font-weight: 600;
     padding: 2px 10px;
}
 .hover-orange {
     background-color: #f89e19;
     color: white !important;
     font-weight: 600;
     padding: 2px 10px;
}
 .xl {
     font-size: 26px;
     line-height: 32px;
}
 .xs {
     font-size: 13px;
     line-height: 18px;
}
 nav {
     max-height: 90px;
     position: fixed;
     z-index: 1000;
     width: 100vw;
     background-color: white;
}
/************ FAQ ************/
/* Style the element that is used to open and close the accordion class */
 p.accordion {
     background-color: #6ea7b7;
     color: #ffffff;
     cursor: pointer;
     padding: 18px;
     width: 100%;
     text-align: center;
     border: none;
     outline: none;
     transition: 0.4s;
     margin-bottom:10px;
}
/* Add a background color to the accordion if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
 p.accordion.active, p.accordion:hover {
     background-color: #ddd;
}
/* Unicode character for "plus" sign (+) */
 p.accordion:after {
     content: '\2795';
     font-size: 13px;
     color: #777;
     float: right;
     ;
}
/* Unicode character for "minus" sign (-) */
 p.accordion.active:after {
     content: "\2796";
}
/* Style the element that is used for the panel class */
 p.panel {
     padding: 0 18px;
     background-color: white;
     max-height: 0;
     overflow: hidden;
     transition: 0.4s ease-in-out;
     opacity: 0;
     margin-bottom:10px;
     width: 100% 
}
 p.panel.show {
     opacity: 1;
     max-height: 500px;
    /* Whatever you like, as long as its more than the height of the content (on all screen sizes) */
}
/************ SECTION ************/
 .container-fluid {
     padding: 0;
     margin: 0;
}
 #part1 {
     text-align: center;
     padding: 80px 0;
     background-color: #ffffff;
}
 #part1 h2, #part1 h3, #part1 p {
     color: white;
     padding-bottom: 25px;
}
 #part2 {
     padding: 80px 0;
     text-align: center;
     background-color: #f7f7f7;
}
 #part2_1 {
     padding: 80px 0;
     text-align: center;
     background-color: #f7f7f7;
}
 #part3 {
     margin: 0;
     padding: 0;
}
 .bloc-part3 {
     display: flex;
     flex-direction: column;
     flex-wrap: nowrap;
     justify-content: center;
     align-items: center;
     align-content: stretch;
}
 #part4 {
     margin: 0;
     padding: 90px 0;
     background-color: #efefef;
}
 .list {
     text-align: left;
}
 .flex {
     display: flex;
}
 .flexitude {
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: center;
     align-items: center;
}
 footer {
     background-color: #e0e0e0;
     padding: 40px 0;
     height: auto;
}
/************ HEADER ************/
 .logo {
     padding-top: 5px;
     padding-bottom: 5px;
     width: 250px;
}
 .titre-nav {
     font-size: 30px;
}
 .promo {
     position: relative;
     top: 100px;
     left: 0;
     width: 250px;
}
 .titre-formulaire {
     font-size: 20px;
     text-align: center;
     margin: 10px 0;
}
 .source {
     background-color: #6ea7b7;
     color: #fbd15c;
     padding: 10px 20px;
}
 .citation::before {
     content: '"';
     position: absolute;
     z-index: 0;
     display: inline-block;
     top: 10px;
     left: -30px;
     color: #f89e19;
     font-size: 110px;
}
 .fin-citation::after {
     content: '"';
     position: absolute;
     z-index: 0;
     display: inline-block;
     color: #f89e19;
     margin-left: 10px;
     font-size: 110px;
}
 .text-right {
     text-align: right !important;
}
 .conseils {
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: center;
     align-items: center;
     align-content: center;
     padding-left: 50px;
}
 .form-group {
     margin-bottom: 8px;
}
 .form-control {
     box-shadow: none;
     border: 1px solid rgba(0, 0, 0, 0.2);
     height: 30px;
     font-size: 13px;
     font-weight: 300;
}
 .form-control:active, .form-control:focus {
     outline: none;
     box-shadow: none;
     border-color: #f16145;
}
 .blocformulaire {
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: center;
     align-items: center;
     align-content: center;
     background: #f7f7f7;
     padding: 10px 20px 15px 20px;
     z-index: 3;
     border-radius: 4px;
     box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}
 label {
     font-weight: 500;
     color: rgb(103, 103, 103);
     font-size: 13px;
     margin: 0;
     padding: 0;
     margin-top: 3px;
}
 input[type=button], input[type=submit], input[type=reset] {
     margin: 10px 0 
}
/************ RESPONSIVE ************/
 #title_header{
    font-size: 60px;
    color: white;
     padding-top: 17vh;
}
 .titre-nav {
     color: #000000; font-size: 21px; float: right; font-family: , sans-serif;
}
 @media (max-width: 800px) {
     #title_header{
        font-size: 30px;
        color: white;
         padding-top: 20vh;
    }
    .titre-nav {
      color: #000000; font-size: 15px; float: right; font-family: , sans-serif;
}
     .blocformulaire {
         padding: 10px;
         margin: 10px 0;
    }
     .form-control {
         height: 32px;
         border: 1px solid rgba(0, 0, 0, 0.2);
    }
     .btn {
         font-size: 15px;
         padding: 10px 25px;
    }
     #part1 img {
         margin-top: 30px;
    }
     #part2 img {
         margin-top: 50px;
    }
     .flex {
         display: block;
    }
     .flexitude {
         display: flex;
         flex-direction: row;
         flex-wrap: nowrap;
         justify-content: center;
         align-items: center;
         padding-top: 30px;
    }
     .list {
         text-align: center;
    }
     .align-items-start{
         flex-direction:column!important;
    }
}
/********* UTILES *********/
/* MARGIN */
 .m-0{
    margin:0!important;
}
 .m-1{
    margin:10px!important;
}
 .m-2{
    margin:20px!important;
}
 .m-3{
    margin:30px!important;
}
 .m-4{
    margin:40px!important;
}
 .m-5{
    margin:50px!important;
}
 .mt-0{
    margin-top:0!important;
}
 .mt-1{
    margin-top:10px!important;
}
 .mt-2{
    margin-top:20px!important;
}
 .mt-3{
    margin-top:30px!important;
}
 .mt-4{
    margin-top:40px!important;
}
 .mt-5{
    margin-top:50px!important;
}
 .mb-0{
    margin-bottom:0!important;
}
 .mb-1{
    margin-bottom:10px!important;
}
 .mb-2{
    margin-bottom:20px!important;
}
 .mb-3{
    margin-bottom:30px!important;
}
 .mb-4{
    margin-bottom:40px!important;
}
 .mb-5{
    margin-bottom:50px!important;
}
 .mx-0{
    margin-right:0;
    margin-left:0;
}
 .mx-1{
    margin-right:10px;
    margin-left:10px;
}
 .mx-2{
    margin-right:20px;
    margin-left:20px;
}
 .mx-3{
    margin-right:30px;
    margin-left:30px;
}
 .mx-4{
    margin-right:40px;
    margin-left:40px;
}
 .mx-5{
    margin-right:50px;
    margin-left:50px;
}
 .my-0{
    margin-top:0;
    margin-bottom:0;
}
 .my-1{
    margin-top:10px;
    margin-bottom:10px;
}
 .my-2{
    margin-top:20px;
    margin-bottom:20px;
}
 .my-3{
    margin-top:30px;
    margin-bottom:30px;
}
 .my-4{
    margin-top:40px;
    margin-bottom:40px;
}
 .my-5{
    margin-top:50px;
    margin-bottom:50px;
}
/* PADDING */
 .p-0{
    padding:0;
}
 .p-1{
    padding:10px;
}
 .p-2{
    padding:20px;
}
 .p-3{
    padding:30px;
}
 .p-4{
    padding:40px;
}
 .p-5{
    padding:50px;
}
 .px-0{
    padding-right:0;
    padding-left:0;
}
 .px-1{
    padding-right:10px;
    padding-left:10px;
}
 .px-2{
    padding-right:20px;
    padding-left:20px;
}
 .px-3{
    padding-right:30px;
    padding-left:30px;
}
 .px-4{
    padding-right:40px;
    padding-left:40px;
}
 .px-5{
    padding-right:50px;
    padding-left:50px;
}
 .py-0{
    padding-top:0;
    padding-bottom:0;
}
 .py-1{
    padding-top:10px;
    padding-bottom:10px;
}
 .py-2{
    padding-top:20px;
    padding-bottom:20px;
}
 .py-3{
    padding-top:30px;
    padding-bottom:30px;
}
 .py-4{
    padding-top:40px;
    padding-bottom:40px;
}
 .py-5{
    padding-top:50px;
    padding-bottom:50px;
}