/* 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: #F4EA44;
    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: #F4EA44 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 #F4EA44;
}

/* ----- 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 0;
    border-bottom: 1px lightgrey solid;
    align-items: center;
    flex-wrap: wrap;
}

.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;
}

.formPartieVoyage input[type=text],
#nbPassengers {
    width: 168px;
}


/* ---------- div type & nbPersonnes ------------ */
.radio-type {
    margin-left: 20px;
    margin-right: 5px;
}

.label3-type {
    margin-right: auto;
}

.labelForm {
    width: 25%;
}

/* ---------- div type & nbPersonnes ------------ */


/* ---------- div départ & arrivée ------------ */
.depart-arrivee label {
    margin-left: 25px;
    margin-right: auto;
    width: 15%;
}

.depart-arrivee input {
    margin-left: 10px;
}

/* ---------- 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-around
}

.retour {
    display: none;
}

/* ---------- div questions  ------------ */
.questions p {
    margin-left: 25px;
    margin-right: auto;
}

.questions input {
    margin-left: 20px;
}

.questions label {
    margin-left: 7px;
}

/* ---------- 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;
        /*text-align: center;*/
    }

    .type input {
        margin-left: 20px;
    }

    #input1-aller {
        transform: translate(0, 0);
    }

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

    .radio-type {
        margin-left: 2vw;
        margin-right: 1vw;
    }

    #nbPassengers {
        margin-top: 2vh;
    }

    .depart-arrivee {
        text-align: center;
        justify-content: center;
    }

    .depart-arrivee label {
        width: 100%;
    }

    .depart-arrivee input {
        margin-top: 2vh;
    }

    .aller-retour {
        justify-content: center;
        align-items: center;
    }

    .aller-retour label {
        margin-right: 25px;
    }

    #input1-aller,
    #input1-retour {
        margin-right: 25px;
    }

    .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;
    }
}

@media all and (max-width: 777px) {
    .aller-retour select {
        margin-top: 10px;
    }
}

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

@media all and (max-width: 400px) {
    #link-logo p {
        font-size: 1.3em;
    }
}