/* polices d'écriture */

@font-face {
    font-family: "Red Hat Display Bold";
    src: url("../font/RedHatDisplay-Bold.ttf");
}

@font-face {
    font-family: "Red Hat Display Medium";
    src: url("../font/RedHatDisplay-Medium.ttf");
}

@font-face {
    font-family: "Red Hat Display Light";
    src: url("../font/RedHatDisplay-Light.ttf");
}

@font-face {
    font-family: "Red Hat Display Regular";
    src: url("../font/RedHatDisplay-Regular.ttf");
}

/* général */

h1, h2, h3, h4, p, div, input {
    text-transform: uppercase;
}

h4 {
    font-family: 'Red Hat Display Bold', sans-serif;
    padding: 50px 0 30px;
    letter-spacing: 3px;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: row;
    text-align: center;
}

.rouge-titre {
    color: #e4342a;
}

.jaune-titre {
    color: #f8b133;
    margin-bottom: 2%;
}

.rose-titre {
    color: #d48bba;
}

.bleu-titre {
    color: #3e57b4;
}

.progress_bar {
    grid-area: 1 / 1 / 6 / 2;
}

.formulaire {
    width: 70%;
    margin: auto;
    margin-top: 3rem;
}

@media (max-width: 1900px) {
    .rose-titre {
        margin-left: 4%;
    }
}

@media (max-width: 750px) {
    .rouge-titre{
        font-size: 16px !important;
        margin-left: 8% !important;
        margin-right: 8% !important;
    }
    .jaune-titre {
        font-size: 16px !important;
        margin-left: 8% !important;
        margin-right: 8% !important;
    }
    .rose-titre {
        font-size: 16px !important;
        margin-left: 8% !important;
        margin-right: 8% !important;
    }
    .bleu-titre {
        font-size: 16px !important;
        margin-left: 8% !important;
        margin-right: 8% !important;
    }
}

/* header */

header {
    background-color: #ffffff;
    box-shadow: 0 10px .8em #e7e7e8;
    position: sticky;
    top: 0px;
    z-index: 200;
}

.head {
    display: flex;
    flex-direction: row;
    color: #1d1d1b;
    font-family: 'Red Hat Display Medium', sans-serif;
    letter-spacing: 3px;
    align-items: center;
    justify-content: center;
    padding: 10px 0 10px;
    width:100%;
}

#logo {
    position: fixed;
    left: 0;
    top: 0.5rem;
}

#perso {
    padding-top: 10px;
    margin-left: 6.1%;
}

#perso-autre-page{
    padding-top: 10px;
}

#essmall, #ensmall, #desmall{
    margin-top: 5%;
} 

#fr, #en, #de, #es{
    margin-top: 8%;
}

.dropdown-clickable_bg {
    position: absolute;
    width: 100%;
    height: 100vh;
    top:0;
    left:0;
}

.custom-sel a.selected {
    background-color: transparent;
    position: fixed;
    right: 1%;
    top: 1%;
    cursor: pointer;
    padding: 0 0.4rem;
  }
  
  .hidden {
    display: none;
  }

  #choixlang{
    position: fixed;
    right: 1%;
    top: 66.8px;
    padding-bottom: 0.6rem;
    background-color: #ffffff;
    box-shadow: 0 6px .8em #e7e7e8;
    transition: height .4s ease;
    border-bottom-left-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
  }

  #choixlang a {
    padding: 0 0.4rem;
    padding-bottom: 0.4rem;
  }

  .custom-sel a svg {
    transform: scaleX(0.85)
  }

  @media (max-width: 1900px) {
      #fr, #en, #de, #es{
        margin-top: 15%;
    }
  }

  @media (max-width: 820px) {
    #perso{
        font-size: 10px !important;
        margin-left: 0 !important;
    }
    #perso-autre-page{
        font-size: 10px !important;
        margin-left: 0 !important;
    }
    #fr, #en, #de, #es{
        width:50px;
        height:25px;
        margin-top: 7%;
    }
    #logo {
        width: 70px;
        height: 35px;
    }
    #frsmall, #ensmall, #desmall, #essmall{
        width:50px;
        height:25px;
    }
    #choixlang{
        top: 50px;
        right: 3%;
    }
    .custom-sel a.selected {
        background-color: transparent;
        position: fixed;
        right: 3%;
        top: 1%;
        cursor: pointer;
      }
  }

/* page de sélection de langues */

.lang{
    margin-top: 2%;
    margin-bottom: 3%;
}

.picklang{
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: row;
}

#lang{
    font-family: 'Red Hat Display Regular', sans-serif;
    letter-spacing: 2px;
    color: #1d1d1b;
    margin-top: 15%;
    font-size: x-large;
}

.langues{
    /* margin-right: 1.5%; */
    padding-right: 2.3%;
    padding-left: 2.3%;
    padding-top: 1.3%;
    padding-bottom: 0.7%;
    margin: auto;
}

#envoilang{
    margin-top: 4%;
    margin-bottom: 2%;
}

input[type="radio"]:checked + .langues{
    background-color: #e7e7e8;
    border-radius: 45px;
}

@media (max-width: 1900px) {
    .lang{
        margin-top: 2%;
        margin-bottom: 3%;
    }

    #envoilang{
        margin-top: 1%;
        margin-bottom: 0.5%;
    }
}

@media (max-width: 820px) {
    body{
        padding-left: 1%;
        padding-right: 1%;
    }
    .langues{
        /* margin-left: 3%; */
        padding-right: 6%;
        padding-left: 6%;
        padding-top: 3%;
        padding-bottom: 0.7%;
        margin: auto;
    } 
    input[type="radio"]:checked + .langues{
        border-radius: 32px;
    }
    .lang{
        margin-top: -2%;
        margin-bottom: 6%;
    }
    #lang{
        font-size: large;
    }  
    #flag-icons-fr, #flag-icons-gb, #flag-icons-de, #flag-icons-es{
        width: 100px;
        height: 100px;
    } 
    #envoilang{
        margin-top: 6%;
        margin-bottom: 3%;
    }
}

/* message d'erreur */

#validate-alert {
    font-family: 'Red Hat Display Medium', sans-serif;
    letter-spacing: 1px;
}

/* barre de séparation */

hr {
    border-top: 2px solid #e7e7e8;
    width: 100%;
    margin-top: 1.4rem;
    margin-bottom: 0;
}

@media (max-width: 1900px) {
}

/* checkboxes */

.cbx {
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.cbx:not(:last-child) {
    margin-right: 6px;
}

.cbx span {
    float: left;
    vertical-align: middle;
    transform: translate3d(0, 0, 0);
}

.cbx span:first-child {
    position: relative;
    width: 25px;
    height: 25px;
    border-radius: 8px;
    transform: scale(1);
    border: 2px solid #1d1d1b;
    transition: all 0.2s ease;
    box-shadow: 0 1px 1px rgba(0, 16, 75, 0.05);
}

.cbx span:first-child svg {
    position: absolute;
    top: 5px;
    left: 2px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16px;
    stroke-dashoffset: 16px;
    transition: all 0.3s ease;
    transition-delay: 0.1s;
    transform: translate3d(0, 0, 0);
}

.cbx span:last-child {
    padding-left: 8px;
    line-height: 18px;
}

.inp-cbx {
    position: absolute;
    visibility: hidden;
}

.inp-cbx:checked+.cbx span:first-child {
    background: #39a935;
    border-color: #39a935;
    animation: wave 0.4s ease;
}

.inp-cbx:checked+.cbx span:first-child svg {
    stroke-dashoffset: 0;
}

@media (max-width: 750px) {    
    .cbx span:first-child {
        position: relative;
        width: 35px;
        height: 35px;
        border-radius: 8px;
        transform: scale(1);
        border: 1px solid #1d1d1b;
        transition: all 0.2s ease;
        box-shadow: 0 1px 1px rgba(0, 16, 75, 0.05);
    }
    
    .cbx span:first-child svg {
        position: absolute;
        top: 7px;
        left: 7px;
        width: 20px;
        height: 20px;
        fill: none;
        stroke: #fff;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 16px;
        stroke-dashoffset: 16px;
        transition: all 0.3s ease;
        transition-delay: 0.1s;
        transform: translate3d(0, 0, 0);
    }
}

/* barre latérale d'étapes */

.progress_bar {
    margin-top: 12%;
}

.etape {
    font-family: 'Red Hat Display Bold', sans-serif;
    letter-spacing: 2px;
    color: #e7e7e8;
    font-size: x-large;
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: row;
    margin-bottom: 7%;
}

.etape1, .etape2, .etape3, .etape4, .etape5, .etape6 {
    border: #e7e7e8 solid 5px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    font-family: 'Red Hat Display Bold', sans-serif;
    color: #e7e7e8;
    font-size: xx-large;
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: row;
}

.between1, .between2, .between3, .between4, .between5 {
    border-left: 5px solid #e7e7e8;
    display: inline-block;
    height: 200px;
}

.progress_bar-step-wrapper {
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: relative;
}

.etape {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, calc(-100% - 0.5rem));
}
.progress_bar-step {
    position: absolute;
    left: -5vw;
    top: 50%;
    transform: translateY(-50%) translateX(-100%);
    background-color: #fff;
    border: #e7e7e8 solid 5px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    font-family: 'Red Hat Display Bold', sans-serif;
    color: #e7e7e8;
    font-size: xx-large;
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: row;
}

.progress_bar-step-title {
    width: 100%;
}

.progress_bar-step-separator {
    position: absolute;
    left: -5vw;
    top: 0;
    transform: translateX(calc(-50% - 35px));
    height: 100%;
    z-index: -1;
    border-left: 5px solid #e7e7e8;
}

.progress_bar-step-separator.bottom {
    top: 49%;
    height: 52%;
}

.progress_bar-step-separator.center {
    top: -2rem;
    height: calc(100% + 4rem);
}

.progress_bar-step-separator.top {
    top: -1.5rem;
    height: calc(50% + 1.5rem);
}

@media (max-width: 1900px) {
}

@media (max-width: 750px) {
    .progress_bar {
        display: none;
    }
}

/* étape 1, informations */

.formulaire{
    max-width: 1400px;
    margin: auto;
    margin-top: 4%;
}

#enseigne, #client, #Site, #Telephone, #mail, #adresse {
    display: flex;
    flex-direction: row;
    margin-bottom: 12px;
    width: 100%;
}

input[type=text], input[type=tel], input[type=email] {
    background-color: #e7e7e8;
    border-radius: 50px;
    width: 100%;
    padding: 3px;
    padding-left: 20px;
    margin-right: 2%;
    padding-bottom: 5px;
    font-family: 'Red Hat Display Regular', sans-serif;
    letter-spacing: 2px;
}

input:focus {
    border: solid 2px #e4342a;
    outline: none !important;
}

input::placeholder {
    color: #1d1d1b;
    font-family: 'Red Hat Display Regular', sans-serif;
    letter-spacing: 2px;
    background-color: transparent;
    font-size: small;
}

.reseau_sociaux-content,
.information-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    margin-bottom: 20px;
}

#obligatoire {
    font-family: 'Red Hat Display Regular', sans-serif;
    letter-spacing: 1px;
    color: #a5a5a5;
    font-size: smaller;
    text-transform: none;
    
    display: flex;
    width: 100%;
    text-align: right;
}

#obligatoire span {
    padding-right: calc(47px + 2%);
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.progress_bar-separator-wrapper{
    display: flex;
    flex-direction: row;
    position: relative;

}

.side-text {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.side-text {
    font-family: 'Red Hat Display Bold', sans-serif;
    letter-spacing: 1px;
    color: #a5a5a5;
    font-size: 0.75em;
    writing-mode:vertical-rl;
    transform: rotate(180deg);
    display:flex;
    align-items: center;
    justify-content: center;
    height: 294px;
    text-align: center;
    padding: 0.5rem;
    padding-top: 1.1rem;
    position: absolute;
    right: -3rem;
}

@media (max-width: 1900px) {
    #obligatoire {
        font-family: 'Red Hat Display Regular', sans-serif;
        letter-spacing: 1px;
        color: #a5a5a5;
        font-size: smaller;
        text-transform: none;
    }
}

@media (max-width: 750px) {
    #enseigne, #client, #Site, #Telephone, #mail, #adresse {
        width: 85%;
        margin: auto;
        margin-bottom: 12px;
    }

    .side-text {
        display: none;
    }

    #coveringMobile{
        display: block !important;
        font-family: 'Red Hat Display Regular', sans-serif;
        letter-spacing: 1px;
        color: #a5a5a5;
        font-size: 11px;
        padding: 0 0 30px;
        margin-left: 8%;
        margin-right: 8%;
        text-align: center;
    }

    #obligatoire {
        margin-left: 8%;
        margin-top: -15px;
        margin-bottom: 4%;
    }
}

.machine_type-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    position: relative;
    margin-bottom: 20px;
}

.machine_type-content label {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0.5rem;
    margin-top: 0.5rem;
}

#PizzaCovering {
    margin: auto;
}

#PizzaCovering .row {
    text-align: center;
    align-items: center;
    justify-content: space-between;
    display: flex;
    flex-direction: row;
    margin: 0;
}

#PizzaCovering .row .custom-radio {
    padding: 0;
    width: 100%;
    max-width: 194px;
}

#PizzaCovering .custom-control.custom-radio {
    padding: 0;
}

#PizzaCovering .row .custom-radio label {
    border-radius: 0;
    width: 90%;
    margin: 0 5%;
    margin-bottom: 0px;
    margin-bottom: 10%;
}

.choixmachine {
    border-radius: 25px;
    /* width: 170px;
    height: 50px; */
    font-family: 'Red Hat Display Bold', sans-serif;
    letter-spacing: 1.5px;
    color: #ffffff;
    cursor: pointer;
    /* vertical-align:middle; */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 1rem;
    min-width: 172px;
}

.choixmachine p {
    margin: 0;
    padding-top: 0;
}

.custom-control-input:checked + #label-julia {
    border: 3px solid #ffffff;
    outline: 3px solid #f8b133;
}

.custom-control-input:checked + #label-neo {
    border: 3px solid #ffffff;
    outline: 3px solid #f8b133;
}

.custom-control-input:checked + #label-juliadrink {
    border: 3px solid #ffffff;
    outline: 3px solid #f8b133;
}

.custom-control-input:checked + #label-diva {
    border: 3px solid #ffffff;
    outline: 3px solid #f8b133;
}

#label-julia {
    background-color: #e4342a;
    border: 3px solid #e4342a;
    border-radius: 25px;
}

#label-neo {
    background-color: #3e57b4 !important;
    border: 3px solid #3e57b4;
    border-radius: 25px;
}

#label-juliadrink {
    background-color: #f8b133 !important;
    border: 3px solid #f8b133;
    border-radius: 25px;
}

#label-diva {
    background-color: #d48bba !important;
    border: 3px solid #d48bba;
    border-radius: 25px;
}

.infos_container {
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: row;
    margin-bottom: 5%;
}

.infos {
    background-color: #e7e7e8;
    border-radius: 15px;
    width: 100%;
    margin-top: 3%;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 1%;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: row;
}

.svginfo {
    margin-right: 3%;
    margin-bottom: 14px;
}

#p1{
    margin-top: 1%;
}

.customRadioDevisPerso > span {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: initial;
}

#p1, #p2 {
    text-transform: none;
    font-family: 'Red Hat Display Regular', sans-serif;
    color: #1d1d1b;
    letter-spacing: 1px;
    font-size: small;
}
#juliadiv, #neodiv, #divadiv, #juliadrinkdiv{
    box-shadow: inset -10px 0px .8em #e7e7e8;
    border-radius: 25px;
    position: relative;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
}

#personnalise{
    width: 70%;
    display: flex;
    margin-left: auto;
    margin-right: auto;
}

#toit{
    text-align:center;
    font-family: 'Red Hat Display Regular', sans-serif;
    color: #1d1d1b;
    letter-spacing: 1px;
    font-size: 15px;
    margin-bottom: 3%;
}

#toitmone{
    margin-top: 3%;
    position: relative;
    height: 100%;
    overflow: hidden;
    padding-top: 7px;
}

#toitperso{
    font-size: 12px;
}

#perso100{
    height: 80px;
    margin-top: 3%;
    margin-bottom: 3%;
    font-size: larger;
}
.p-2{
    padding: 0 !important;
}

.custom-radio .custom-control-radio:checked + #perso100::before {
    content: '';
    width: 101%;
    height: 80px;
    position: absolute;
    border-radius: 40px;
    z-index: 1;
    box-shadow: 
	0 0 0 0px #1d1d1b,
	0 0 0 6px #ffffff,
	0 0 0 9px #f8b133,
	0 0 0 0px #000;
}

#juliadiv::-webkit-scrollbar, #divadiv::-webkit-scrollbar, #neodiv::-webkit-scrollbar, #juliadrinkdiv::-webkit-scrollbar {
    width: 5px;
}
 
#juliadiv::-webkit-scrollbar-track, #divadiv::-webkit-scrollbar-track, #neodiv::-webkit-scrollbar-track, #juliadrinkdiv::-webkit-scrollbar-track {
    background-color: #e7e7e8;
    border-radius: 10px;
}
 
#juliadiv::-webkit-scrollbar-thumb, #divadiv::-webkit-scrollbar-thumb, #neodiv::-webkit-scrollbar-thumb, #juliadrinkdiv::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #a5a5a5;
}
#palette{
    margin-right: 12px;
}

@media (max-width: 1900px) {
    #perso100{
        height: 80px;
        margin-top: 3%;
        margin-bottom: 3%;
        font-size: larger;
    }
    #toitmone{
        margin-top: 3%;
        position: relative;
        height: 100%;
        overflow: hidden;
        padding-top: 7px;
    }
}

@media (max-width: 750px) {
    #p1, #p2{
        font-size: 12px !important;
    }
    .infos{
        width: 90%;
        padding-top: 3%;
        padding-right: 6%;
        margin-left: 11%;
        margin-right: 11%;
        margin-top: -2%;
    }
    #perso100{
        height: 105px;
        width: 95%;
        margin-left: 0;
        margin-top: 3%;
        margin-bottom: 5%;
        font-size: 15px !important;
        justify-content: center;
        align-items: center;
        display: flex;
        flex-direction: row;
        padding-left: 5%;
        padding-right: 5%;
    }
    #palette{
        width: 80px;
        height: 80px;
    }
    #text100{
        margin-top: 2%;
    }
    .custom-radio .custom-control-radio:checked + #perso100::before {
        content: '';
        width: 101%;
        height: 105px;
        position: absolute;
        border-radius: 40px;
        z-index: 1;
        box-shadow: 
        0 0 0 0px #1d1d1b,
        0 0 0 6px #ffffff,
        0 0 0 9px #f8b133,
        0 0 0 0px #000;
    }
    #monetique{
        margin-bottom: 5%;
    }
    #toitmone{
        width: 100%;
        margin-left: 0 !important;
    }
    #toit{
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* étape 2, numéros sur les templates */

.custom-radio .custom-control-radio + label .numeroJulia,
.custom-radio .custom-control-radio + label .numeroJuliaCustom,
.custom-radio .custom-control-radio + label .numeroNeo,
.custom-radio .custom-control-radio + label .numeroNeoCustom,
.custom-radio .custom-control-radio + label .numeroJuliaDrink,
.custom-radio .custom-control-radio + label .numeroJuliaDrinkCustom,
.custom-radio .custom-control-radio + label .numeroDiva,
.custom-radio .custom-control-radio + label .numeroDivaCustom {
    position: absolute;
    font-family: 'Red Hat Display Light', sans-serif;
    background: #f12a2a;
    color:#ffffff;
    z-index: 100;
    border-radius: 100%;
    width: 30px;
    height: 30px;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: initial;
}

.custom-radio .custom-control-radio + label > span{
    right: 0;
    top: 0;
}

.zoomContainer .zoomWindowContainer .zoomWindow {
    background-size: contain !important;
    background-position: center !important;
}

/* étape 3, demandes spécifiques */

.textarea-graphiste {
    border: 2px solid #1d1d1b;
    border-radius: 20px;
    height: 170px;
    margin: auto;
    display: flex;
    margin-bottom: 2%;
    padding-top: 1%;
}

.textarea-graphiste::-webkit-resizer{
    display: none;
} 

textarea::placeholder {
    font-family: 'Red Hat Display Light', sans-serif;
    color: #a5a5a5;
    letter-spacing: 1px;
}

textarea:focus {
    border: solid 2px #d48bba;
    outline: none !important;
}

@media (max-width: 1900px) {
    .textarea-graphiste {
        border: 2px solid #1d1d1b;
        border-radius: 20px;
        height: 170px;
        display: flex;
        margin: auto;
        margin-bottom: 2%;
        padding-top: 1%;
    }
}

@media (max-width: 750px) {
    .textarea-graphiste {
        border: 2px solid #1d1d1b;
        border-radius: 20px;
        height: 300px;
        width: 85%;
        display: flex;
        margin: auto;
        margin-bottom: 2%;
        padding-top: 1%;
    }
}

/* étape 4, texte à ajouter */

.choixtext {
    align-items: center;
    justify-content: center;
}
.choix-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.choix-container span {
    display: flex;
    margin: 0 0.5rem;

}

.selectext {
    margin-left: 3%;
    display:none;
}

.selectextlabel{
    background-color: #e7e7e8;
    border: 2px solid #e7e7e8;
    border-radius: 25px;
    padding: 0.25rem 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.selectextlabel * {
    display: flex;
}

.selectext:checked + .selectextlabel{
    border-color:#3e57b4;
}

.selectextlabel {
    font-family: 'Red Hat Display Medium', sans-serif;
    color: #1d1d1b;
    letter-spacing: 1px;
}

#svgtexte{
    margin-right: 5px;
}

@media (max-width: 1900px) {
    .choixtext {
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 750px) {
    #span1, #span2, #span3, #span4, #span5, #span6, #span7, #span8, #span9{
        margin-left: auto;
        margin-right: auto;
        width: 85%;
    }
    .selectextlabel{
        width: 100%;
        margin-bottom: 1.5rem;
        height: 50px;
        padding: 0.5rem;
    }
    #svgtexte{
        margin-top: -2px !important;
    }
    .choixtext{
        justify-content: center;
        display: flex;
        flex-direction: column;
        width: 100%;
    }
}

/* étape 5, réseaux sociaux */

#Facebook, #Instagram, #Snapchat, #Tiktok {
    display: flex;
    flex-direction: row;
    margin-bottom: 15px;
    height: 45px;
}

#Autre{
    display: flex;
    flex-direction: row;
    margin-bottom: 15px;
    height: 45px;
}

#Autre .input{
    margin-left: calc(2% + 47px);
}

#fb, #insta, #snap, #tiktok {
    margin-right: 15px;
    margin-top: -6px;
}

#qrcodeEN {
    font-family: 'Red Hat Display Bold', sans-serif;
    letter-spacing: 1px;
    color: #a5a5a5;
    font-size: small;
    transform: rotate(270deg);
    margin-top: 6.9%;
    margin-left: 57%;
}

@media (max-width: 1900px) {
    #Facebook, #Instagram, #Snapchat, #Tiktok{
        display: flex;
        flex-direction: row;
        margin-bottom: 15px;
        height: 45px;
    }
    #Autre{
        display: flex;
        flex-direction: row;
        margin-bottom: 15px;
        height: 45px;
    }
    #qrcodeEN {
        font-family: 'Red Hat Display Bold', sans-serif;
        letter-spacing: 1px;
        color: #a5a5a5;
        font-size: small;
        transform: rotate(270deg);
        margin-top: 9%;
        margin-left: 60%;
    }
}

@media (max-width: 750px) {
    #Facebook, #Instagram, #Snapchat, #Tiktok {
        display: flex;
        flex-direction: row;
        height: 50px;
        border-radius: 0 45px 45px 0;
        padding-left: 0;
        width: 100%;
        margin: auto;
        margin-bottom: 12px;
    }
    #Facebook:focus, #Instagram:focus, #Snapchat:focus, #Tiktok:focus, #Autre:focus, .textarea-graphiste:focus, #Nom_Enseigne:focus, #Nom_du_client:focus, #Site_internet:focus, #telephone:focus, #Adresse_mail:focus, #Adresse_pizzeria:focus{
        outline: none;
        border: 2px solid #1d1d1b;
    }
    #Autre{
        border-radius: 45px;
        display: flex;
        flex-direction: row;
        height: 50px;
        width: 100%;
        margin: auto;
        margin-bottom: 12px;
    }
    #Autre .input{
        margin-left: 0;
    }
    #fb, #insta, #snap, #tiktok, .instapng{
        background-color: #e7e7e8;
        border-radius: 45px 0 0 45px;
        margin-right: 0;
        height: 50px;
        width: 65px;
        margin-top: 0px;
        padding-left: 5px;
    }
    #reseaux{
        margin-left: 8% !important;
        margin-right: 8%;
    }
    #qrcodeMobile{
        display: block !important;
    }
    #qrcode{
        display: none;
    }
}

/* partie 6, import */

.infosimport_container {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: row;
    margin-bottom: 5%;
    margin-top: -4%;
}

.import {
    background-color: #e7e7e8;
    border-radius: 15px;
    margin-top: 3%;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 1%;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: row;
    width: 90%;
    height: 100px;
}

.fileUpload {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: row;
}

#importdoc {
    margin-top: -2%;
    text-transform: none;
    font-family: 'Red Hat Display Medium', sans-serif;
    color: #ffffff;
    background-color: #f8b133;
    border-radius: 25px;
    letter-spacing: 2px;
    font-size: large;
    margin-bottom: 2%;
    padding: 4px 20px;
}

#svgimport {
    margin-right: 7px;
    margin-bottom: 5px;
}

#image-gallery, #image-galleryMobile{
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: row;
    text-align: center;
}

.close{
    cursor: pointer;
}

.file-info{
    text-transform: none;
    font-family: 'Red Hat Display Medium', sans-serif;
}

#files, #filesMobile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.file-info {
    display: inline-block;
    width: auto;
}

.prev {
    font-family: 'Red Hat Display Medium', sans-serif;
    font-size: small;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: row;
    text-align: center;
    text-transform: initial;
}

@media (max-width: 750px) {
    .import{
        width: 85%;
        padding-top: 4%;
        margin-left: 8%;
        margin-right: 8%;
    }
    #importdoc{
        font-size: 15px;
        margin-top: 2%;
        text-align: center;
    }
    #p1{
        font-size: 12px;
    }
    hr{
        width: 80%;
        margin-left: 10%;
    }
    .svginfo{
       margin-left: 1% !important;
       margin-right: 3% !important;
       margin-bottom: 4.5%;
    }
}

/* bouton d'envoi */

.BoutonEnvoi {
    margin-top: 4%;
    font-family: 'Red Hat Display Medium', sans-serif;
    font-size: x-large;
    letter-spacing: 2px;
    padding: 4px 40px;
    cursor: pointer;
    border-radius: 30px;
    background-color: #39a935;
    outline: none;
    color: white;
    border: 0px;
    transition: 0.3s;
}

.BoutonEnvoi:hover {
    background-color: #2a8227;
    outline: none;
}

.BoutonEnvoi:active {
    outline: none;
}

@media (max-width: 750px) {
    .BoutonEnvoi{
        font-size: 20px;
        margin-top: 9%;
    }
}


/* page de confirmation */

#valid{
    display: flex;
    margin: auto;
    margin-top: 3rem;
}

.confirm{
    color:#39a935;
    text-align: center;
    margin-bottom: 2%;
    padding: 2.5rem 0;
}

#divbon{
    justify-content: center;
    display: flex;
    flex-direction: row;
    margin-left: auto;
    margin-right: auto;
}

#bon{
    font-family: 'Red Hat Display Medium', sans-serif;
    letter-spacing: 1px;
    text-transform: none;
    text-align: center;
}

#bonbold{
    font-family: 'Red Hat Display Bold', sans-serif;
    letter-spacing: 1px;
    text-transform: none;
}

.envmail{
    font-family: 'Red Hat Display Medium', sans-serif;
    letter-spacing: 1px;
    justify-content: center;
    display: flex;
    flex-direction: row;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#conf{
    width:80%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4%;
    margin-top: 1%;
}

.contact{
    background-color: #e7e7e8;
    border-radius: 25px;
    width:350px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 23px;
    margin-bottom: 3%;
}

#servgraph{
    font-family: 'Red Hat Display Light', sans-serif;
    letter-spacing: 1px;
    margin-bottom: 0;
}

#mailgraph{
    text-transform: none;
    font-family: 'Red Hat Display Medium', sans-serif;
    color:#1d1d1b;
    letter-spacing: 1px;
}

@media (max-width: 1900px) {
    #conf{
        width:55%;
        margin-left: auto;
        margin-right: auto;
    }
    .envmail{
        /* margin-top: -30px; */
    }
}

@media (max-width: 750px) {
    #valid{
        margin-top: 10%;
    }
    .confirm, .envmail, #bon{
        margin-left: 6%;
        margin-right: 6%;
    }
    .confirm{
        font-size: 16px;
    }
    .envmail{
        margin-top:0;
        font-size: 14px;
    }
    #conf{
        width:80%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 8%;
        margin-top: 7%;
    }
    #divbon{
        display: none;
    }
    #divbonmobile{
        display: block !important;
        justify-content: center;
        display: flex;
        flex-direction: row;
        margin-left: auto;
        margin-right: auto;
    }
    .contact{
        padding-top: 13px;
        padding-bottom: 16px;
    }
    #bon{
        font-size: 14px !important;
    }
}

/* footer */

footer {
    font-family: 'Red Hat Display Light', sans-serif;
    letter-spacing: 2px;
}
.bottom-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.footForm{
    margin-left: 5%;
}

#copyright{
    text-transform: none;
    font-family: 'Red Hat Display Regular', sans-serif;
    letter-spacing: 2px;
}

.points {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

#jaune, #violet, #bleu {
    margin-left: 15px;
}

/* Version mobile */

@media (max-width: 750px) {
    .navigation{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    #nbpage{
        color: #a5a5a5;
        font-size: 35px;
        font-family: 'Red Hat Display Medium', sans-serif;
        padding-top: 15px;
        letter-spacing: 2px;
    }
    #gauche, #gauche1, #gauche2, #gauche3, #gauche4, #gauche5{
        margin-right: 5%;
    }
    #droite1, #droite2, #droite3, #droite4, #droite5{
        margin-left: 5%;
        transform: rotate(180deg);
    }
    .hidden{
        display: none;
    }
    .pc{
        display: none;
    }
    .mobile{
        display: block !important;
    }
}

.loader-bg {
    height: 100vh;
    width: 100vw;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.2);
    display: none;
}

.loader-bg.active {
    display: flex;
}

.loader-bg .loader {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.loader-bg .loader span {
    display: flex;
    margin-right: 1rem;
}

.loader-bg .loader .loading_circle {
    height: 1.2em;
    width: 1.2em;
    border: solid 2px rgba(0,0,0,0.5);
    border-bottom: none;
    border-right: none;
    border-radius: 50%;
    animation: 1s loader-anim infinite;
}

@keyframes loader-anim {
    from{
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

.lang_row {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    margin: 0 3rem;
    margin-bottom: 3rem;
}