/* HTML5 display-role reset for older browsers */
div {
    display: block;
}

main {
    display: flex;
    justify-content: center;
    flex-wrap: wrap-reverse;
}

/*   --------------- Colonne de gauche ------------------ */

.col-gauche {
    position: relative;
    padding: 14px 25px 5px 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 395px;
}

.avis {
    width: 100%;
    height: 300px;
    margin-bottom: 10px;
}

.video_yt {
    border-radius: 5px;
    border: solid 1px black;
    width: 100%;
    height: 250px;
    margin-bottom: 15px;
}

.flotte {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.flotte img {
    width: 100%;
    margin-top: 10px;
}
.flotte p {
    color: #3567A8;
    margin: 10px 0 15px 0;
    font-size: 16px;
    font-style: italic;
    font-family: LibreBaskerville, serif;
}
.flotte hr {
    width: 100%;
}

#slider {
    width: 100%;
    height: 150px;
    margin-top: 8px;
    display: flex;
    align-items: center;
}

#slider img {
    max-height : 150px;
    object-fit: contain;
    overflow: auto;
}

.photos {
    margin-top: 10px;
}
.photos img {
    width: 100%;
}

#lien-linkedin {
    width: 70%;
}
#logo-linkedin {
    width: 100%;
}
#logo-linkedin:hover {
    opacity: 80%;
}

#logo-2ts {
    width: 70%;
}

#link-logo{
    text-decoration: none;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}

#titre {
    font-family: Arial, serif;
    color: #196BBD;
    font-size: 30px;
    font-weight: bold;
    font-style: italic;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.8);
    margin: 15px 0;
}
#span-titre {
    color: #FF8300;
    margin-right: 2px;
}

#paragraphe {
    font-size: 18px;
    margin: 10px 0;
    font-family: "Arial Regular", serif;
}

#container-topbus {
    width: 100%;
}
#top-bus {
    margin: 15px 0;
    color: #3567A8;
    border-bottom: #FF8300 solid 2px;
    width: 65%;
    font-weight: bold;
    font-size: 18px;
}

.cliquez-ici {
    margin: 3px 0;
}
.cliquez-ici a {
    text-decoration: none;
    color: black;
}

/* ----------------------------------------------- */

.barre-vertical {
    width: 1px;
    margin: 80px 0 40px;
    background-color: #868686;
}

/* ----------------------------------------------- */


/*   --------------- Colonne de droite ------------------ */

.col-droite {
    position: relative;
    padding: 0 5px 5px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 840px;
    margin-bottom: 30px;
}

#titre-devis {
    margin: 15px 0;
    font-weight: bolder;
    font-size: 30px;
    color: #3567A8;
    font-family: "Arial Black", serif;
    text-decoration: underline #FF8300;
}

/* ----- Formulaire ----- */
.bg-clair {
    background-color: #F4F4F4;
}
.bg-sombre {
    background-color: #EAEAEA;
}
.erreur {
    color: red;
}
.reussite {
    border: 1px green solid;
    border-radius: 7px;
    font-weight: bold;
    font-size: 16px;
    padding: 9px 12px;
    margin: 15px 0;
}

.form {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    font-size: 18px;
    font-family: "Arial Regular", serif;
    margin-left: 40px;
}

.formPartieVoyage {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.formPartieVoyage div {
    padding: 15px 30px 15px 30px;
    border-bottom: 1px lightgrey solid;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}
.repas, .type, .depart-arrivee, .aller { /* -- Div à afficher -- */
    display: flex;
}
.frais-hebergement, .dispo-autocar, .retour { /* -- Div à ne pas afficher -- */
    display: none;
}

.formPartieVoyage div:hover {
    background-color: #DDDDDD;
}

.form input, .form select {
    border-radius: 5px;
    padding: 5px 0 5px 5px;
    border: 1px grey solid;
}


/* ---------- div type & nbPersonnes ------------ */
.label3-type {
    margin-right: auto;
}
#nbPersonne {
    width: 150px;
}
#label-circuit {
    margin-right: 1.5%;
}
.type.bg-clair div {
    padding: 0px;
    border-bottom: none;
    width: 20%;
}
#bouton {
    display: flex;
    flex-direction: row;
    width: 75%;
}
#bouton div {
    width: 33%;
}
#passager {
    width: auto;
}
/* ---------- div type & nbPersonnes ------------ */


/* ---------- div départ & arrivée ------------ */
.depart-arrivee input {
    width: 20%;
}
.depart-arrivee input.address {
    margin-left: 7.4%;
    margin-right: 7.4%;
}
.bg-clair label{
    width: 20%;
}
.bg-sombre label{
    width: 20%;
}
.type.bg-clair {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.aller-retour.aller.bg-sombre label {
    width: 11%;
}
.aller-retour.retour.bg-clair label {
    width: 13%;
}
/* ---------- div départ & arrivée ------------ */
#input1-aller
{
    transform: translate(11px, 0);
}

#section_radio{
    transform: translate(6px, 0);
}

/* ---------- div aller le & retour le ------------ */
.aller-retour{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.retour{
    display: none;
}

#aller_simple {
    margin-left: 0px;
}

/* ---------- div questions  ------------ */
.questions p {
    margin-right: auto;
}
.questions input {
    margin-left: 20px;
}
.questions label {
    margin-left: 7px;
}
.questions.repas.bg-sombre label{
    width: auto;
}
.questions.frais-hebergement.bg-clair label{
    width: auto;
}
.questions.dispo-autocar.bg-sombre label{
    width: auto;
}
/* ---------- div questions  ------------ */

.coordonnee-projet div {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
h3 {
    color: #3567A8;
    font-weight: normal;
    margin: 35px 0 15px 0;
}
.coordonnee-projet p {
    margin: 0 0 10px 0;
    color: #707070;
}
.coordonnee-projet select {
    margin-bottom: 10px;
    width: 200px;
}
.coordonnee-input {
    margin: 0 15px 0 0;
    width: 200px;
}
#projet-input {
    width: 80px;
    height: 80px;
    opacity: 0;
    position: absolute;
}
#projet-fakeInput {
    position:relative;
    margin-left: 10px
}

#projet-fakeInput img{
    height: 50px;
}

.coordonnee-projet .nom-entreprise {
    display: none;
}

.endForm {
    width: 100%;
    margin: 10px 0 0 0;
}
.captcha {
    width: 304px;
    height: 78px;
    border: solid black 1px;
    background-color: lightgrey;
    margin-bottom: 10px;
}

#label_rgpd{
    font-size: 13px;
    margin-top: 2vh;
}

#link-condition{
    color: #0000FF;
    text-decoration: underline;
    font-family: sans-serif;
}

#divRGPD {
    display: none;
}

#rgpd {
    margin: 2vh 1vw 0 0;
}

#submit {
    width: 80px;
    text-align: center;
    margin: 10px 0 0 0;
    color: #707070;
}
/* ----- Formulaire ----- */

/*---- Espace Commentaire ----*/
.form textarea{
    padding: 7px 7px;
    box-sizing: border-box;
    width: 100%;
    font-family: "Arial Regular", serif;
}

#erreurForm {
    display: none;
    color: red;
}
/*---- Espace Commentaire ----*/

/* ----- Sliders ------- */
#slider_thanks{
    margin-top: 45px;
    border-radius: 10px;
    width: 80%;
    box-shadow: inset 0 0 1em gray;
}

#slider_thanks img{
    max-width: 100%;
    box-shadow: inset 0 0 1em gray;
    border: 1px solid gray;
    border-radius: 10px;
}

#slider_recommandations{
    margin-top: 45px;
    border-radius: 10px;
    width: 80%;
    box-shadow: inset 0 0 1em gray;
}

#slider_recommandations img {
    max-width: 100%;
    border-radius: 10px;
    border: 1px solid gray;
    box-shadow: inset 0 0 1em gray;
}
/* ----- Sliders ------- */

/* ---- Espace sous les sliders ---- */
#souhaitez-vous{
    padding-left: 25px;
    padding-top: 10px;
    font-family: "Arial Regular", serif;
}

#souhaitez-vous li{
    margin: 15px 0 15px 0;
}

#souhaitez-vous h3{
    margin: 10px 0 12px 0;
}

strong{
    color: #3567A8;
}

#section_html
{
    width: 500px;
    margin-bottom: 20px;
}

#section_condition{
    width: 1000px;
    justify-content: initial;
    text-align: initial;
}

#section_condition :nth-child(n) :nth-child(n){
    margin-left: 20px;
}

#section_condition :nth-child(n) :nth-child(n) :nth-child(n){
    margin-left: 20px;
}

#section_condition :nth-child(n) :nth-child(n) :nth-child(n) :nth-child(n){
    margin-left: 20px;
}
#section_condition :nth-child(n) :nth-child(n) :nth-child(n) :nth-child(n) :nth-child(n){
    margin-left: 20px;
}

/* ---- Espace sous les sliders ---- */


/* ------------------ RESPONSIVE ------------------- */

/* ------ Media queries -------- */
@media all and (max-width: 1230px){
    .barre-vertical {
        display: none;
    }
}

@media all and (max-width: 820px) {
    #titre-devis {
        text-align: center;
    }

    /* --- Form --- */
    .form {
        width: 90vw;
        font-size: 14px;
        margin-left: 0;
    }

    .type {
        display: flex;
        justify-content: center;
    }
    #input1-aller
    {
        transform: translate(0, 0);
    }

    #section_radio{
        transform: translate(0, 0);
    }
    .formPartieVoyage div.depart-arrivee {
        text-align: center;
        justify-content: center;
    }
    .formPartieVoyage div.questions {
        justify-content: center;
    }
    .depart-arrivee.depart.bg-sombre label {
        width: 100%;
    }
    .depart-arrivee.arrivee.bg-clair label {
        width: 100%;
    }
    .depart-arrivee input {
        margin-top: 2vh;
    }
    .aller-retour {
        align-items: center;
    }
    .questions {
        text-align: center;
        justify-content: center;
    }
    .questions p {
        margin-left: 0;
        width: 100%;
        margin-bottom: 2vh;
    }
    .coordonnee-input {
        margin-bottom: 1vh;
    }
    .form textarea {
        width: 90vw;
    }

    /* --- Slider --- */
    #slider_thanks {
        width: 80vw;
    }
    #slider_recommandations {
        width: 80vw;
    }
    .depart-arrivee label {
        margin-left: 0px;
    }
    #nbPersonne {
        margin-left: 0px;
    }
    .depart-arrivee input {
        width: 150px;
    }
    .bg-sombre label{
        width: auto;
    }
    .formPartieVoyage div.aller-retour {
        justify-content: space-around;
    }
    .aller-retour.aller.bg-sombre label {
        width: auto;
    }
    .aller-retour.retour.bg-clair label {
        width: auto;
    }
}

@media all and (max-width: 777px) {
    .aller-retour select {
        margin-top: 10px;
    }
    .type.bg-clair {
        flex-direction: column;
    }
    #nbPersonne {
        margin-top: 2vh;
    }
    #bouton {
        width: 100%;
        align-items: center;
        justify-content: space-around;
    }
}

@media all and (max-width: 766px) {
    #nbPersonne {
        margin-top: 2vh;
    }
}

@media all and (max-width: 735px) {
    .depart-arrivee input {
        margin-left: 0px;
    }
    .depart-arrivee input.address {
        margin-left: auto;
        margin-right: auto;
    }
}

@media all and (max-width: 600px) {
    .form section{
        margin-top: 2vh;
    }
}

@media all and (max-width: 566px) {
    .depart-arrivee input.address {
        margin-left: auto;
        margin-right: 0px;
    }
}

@media all and (max-width: 535px) {
    #label-circuit {
        margin-right: 0px;
    }
    #bouton div {
        width: auto;
    }
}

@media all and (max-width: 479px) {
    .bg-clair label{
        width: auto;
    }
    .bg-sombre label{
        width: auto;
    }
}

@media all and (max-width: 399px) {
    .depart-arrivee input.address {
        margin-left: 0px;
    }
}
@media all and (max-width: 390px) {
    #titre {
        font-size: 20px;
    }
}