/* GENERAL ELEMENTS */

body{
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, p, a, input, input::placeholder, label{
    font-family: 'Raleway', sans-serif;
}

h1 {
    font-weight: 600;
    font-size: 46px;
    line-height: 54px;
}

h2 {
    font-weight: 700;
    font-size: 24px;
    line-height: 36px;
}

p{
    font-weight: 500;
    font-size: 16px;
    line-height: 32px;
}

p b{
    font-size: 17px;
}

@media screen and (orientation: portrait){
    h1 {
        font-weight: 600;
        font-size: 65px;
        line-height: 78px;
    }
    
    h2 {
        font-weight: 700;
        font-size: 24px;
        line-height: 36px;
    }
    
    p{
        font-weight: 500;
        font-size: 40px;
        line-height: 50px;
    }
    p b{
        font-size: 42px;
    }
}


/* HEADER */
header {
    display: flex;
    margin-top: 30px;
    margin-bottom: 70px;
}

#logo-home {
    margin: auto;
}

#logo-home img {
    width: 86px;
    height: 86px;
}

@media screen and (orientation: portrait){
    #logo-home img {
        width: 110px;
        height: 110px;
    }
}

/* PUSH */

#push{
    width: 666px;
    text-align: center;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#push h1{
    margin: auto auto 40px auto;
}

#push p{
    margin: 0;
}

#push #img-motif-push{
    width: 90px;
    position: absolute;
    top: 13em;
    left: 15%;
    z-index: 0;
}
@media screen and (orientation: portrait){
    #push #img-motif-push{
        display: none;
    }
}

/* HERO */

#hero {
    width: 666px;
    text-align: center;
    margin: auto;
}

#hero h1{
    margin: auto auto 40px auto;
}

#hero p{
    margin: 0;
}

p.bold-text{
    font-size: 24px;
    font-weight: 700;
    line-height: 58px;
    margin-bottom: 20px;
}

#hero #img-motif{
    width: 301px;
    position: absolute;
    top: 58em;
    right: 10%;
}

.motif-confirmed{
    width: 90px;
    position: absolute;
    top: 11em;
    right: 20%;
}

.red-btn{
    color: white;
    background-color: #C00D0D;
    border-radius: 100px;
    text-decoration: none;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    padding: 8px 16px;
    border: none;
    font-weight: 700;
}
.red-btn.big{
    font-size: 26px;
    line-height: 39px;
    padding: 17px 31px;
    width: fit-content;
    margin: 40px auto 168px auto;
}

#hero .yt{
    display: flex;
    width: 900px;
    height: 489px;
    margin-left: -112px;
    margin-top: 80px;
    margin-bottom: 80px;
}
#hero .yt iframe{
    border-radius: 40px;
    z-index: 1;
}

@media screen and (orientation: portrait){
    .red-btn{
        font-size: 48px;
        padding: 22px 34px;
        white-space: break-spaces;
    }
    .red-btn.big{
        font-size: 60px;
        padding: 39px 71px;
    }
     p.bold-text{
        margin-bottom: 80px;
        font-size: 46px;
        line-height: 58px;
    }
    #promo-show{
        font-size: 30px;
    }
    #hero #img-motif{
        display: none;
    }
}

/* PRESENTATION */

#img-modif{
    width: 205px;
    position: absolute;
    top: 87em;
    left: calc(45% - (1131px / 2));
}

#presentation {
    max-width: 1012px;
    width: 70%;
    margin: auto;
    background: #F0F0F0;
    border-radius: 40px;
    padding-top: 110px;
    padding-left: 119px;
    padding-bottom: 30px;
    margin-top: 100px;
    margin-bottom: 90px;
    display: flex;
    justify-content: space-between;
}

#presentation .textes{
    width: 542px; 
}


#img-sourire{
    width: 417px;
    height: 452px;
    margin: auto;
    margin-right: -50px;
}

@media screen and (orientation: portrait) {
    #presentation {
        width: 80%;
        display: flex;
        flex-direction: column;
        padding: 4%;
    }
    #presentation .textes{
        width: 90%; 
        margin: auto;
    }
    #img-sourire{
        margin: auto;
        height: auto;
    }
}

/* FORMULAIRE */

#formulaire {
    width: 666px;
    text-align: center;
    margin: auto;
    margin-bottom: 60px;
}


#registration{
    border: 1px solid #DADADA;
    border-radius: 21px;
    margin-top: 60px;
}
#registration h2{
    margin-top: 47px;
    margin-bottom: 26px;
}
#registration.success h2{
    margin-top: 60px;
    margin-bottom: 0;
}
#registration.success h2:last-of-type{
    margin-top: 0;
    margin-bottom: 26px; 
}
#registration.success p{
    margin-bottom: 60px;
}


#formulaire p{
    margin-bottom: 0;
}

#img-arrow{
    position: absolute;
    width: 163px;
    right: calc(43% - 333px);
    top: 164em;
}
@media screen and (orientation: portrait){
    #img-arrow{
        display: none;
    }
    #registration{
        padding: 12px;
    }
}

p.red-surline{
    background-color: #E30613;
    font-weight: 700;
    color: #ffffffef;
    width: fit-content;
    margin: auto;
    padding: 0px 14px;
}

p i{
    font-weight: 400;;
}

input{
    width: 252px;
    padding: 14px 17px;
    border-radius: 100px;
    border: 1px solid #0B2C40;
}
input::placeholder, input::-webkit-input-placeholder, option, select{
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #0B2C40;
}
select{
    width: 288px;
    padding: 10px 17px;
    border-radius: 100px;
    border: 1px solid #0B2C40;
    -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background-image:
      linear-gradient(45deg, transparent 50%, #C00D0D 50%),
      linear-gradient(135deg, #C00D0D 50%, transparent 50%),
      linear-gradient(to right, #ccc, #ccc);
    background-position:
        calc(100% - 20px) calc(1.2em + 2px),
        calc(100% - 15px) calc(1.2em + 2px),
        calc(100% - 2.5em) 0.6em;
    background-size:
      5px 5px,
      5px 5px,
      1px 1.5em;
    background-repeat: no-repeat;
}

form {
    display: flex;
    flex-direction: column;
}

.form-group{
    margin: auto;
    margin-bottom: 20px;
    display: flex;
}
.form-group div:first-of-type{
    margin-right: 5px;
}
.form-group div:last-of-type{
    margin-left: 5px;
}
.form-group-checkboxes{
    text-align: left;
    margin-left: 46px;
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}
[type="checkbox"]{
    width: auto;
}
.form-group-checkboxes label:first-of-type{
    margin: 15px 0;
}

.form-group-checkboxes p, label{
    color: #0B2C40;
    font-weight: 500;
    font-size: 10px;
    line-height: 15px;
}

.conditions{
    margin-top: 20px;
}
.conditions, .conditions a{
    font-size: 10px;
    font-style: italic;
    line-height: 16px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.6);
}

button#form_save{
    margin-top: 10px;
    margin-bottom: 61px;
    cursor: pointer;
}
.form-group-errors{
    display: flex;
}
.form-group-errors div{
    width: 50%;
}
.form-group-errors ul, .form-group ul{
    margin: auto;
    list-style-type: none;
    font-family: 'Raleway', sans-serif;
    color: #E30613;
    padding: 0;
    font-size: 12px;
}
.form-group ul{
    margin-top: 10px;
}
.widget-error input{
    border-color: #E30613;
}

@media screen and (orientation: portrait){
    #formulaire {
        width: 80%;
    }
    .form-group{
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .form-group input{
        width: 80%;
        height: 80px;
        margin: auto;
        padding: 14px 35px;
        font-size: 30px;
    }
    .form-group select{
        width: 90%;
        height: 110px;
        margin: auto;
        padding: 14px 35px;
        font-size: 30px;
    }
    .form-group input::placeholder{
        font-size: 30px;
    }
    .form-group input:first-of-type{
        margin-bottom: 22px;
    }
    .form-group-checkboxes p, .form-group-checkboxes label{
        font-size: 30px;
        line-height: 32px;
    }
    .form-group-checkboxes input[type=checkbox] {
        /*transform: scale(2);*/
        margin-right: 20px;
    }
    button#form_save{
        padding: 50px 43px;
    }
    .form-group-errors ul{
        font-size: 24px;
    }
    .form-group ul{
        margin-bottom: 10px;
        font-size: 24px;
    }
    .form-group div:first-of-type ul{
        margin-bottom: 30px;
    }
    .conditions p, .conditions a{
        font-size: 14px;
    }
    select{
        background-position: calc(100% - 45px) calc(1.2em + 14px), calc(100% - 33px) calc(1.2em + 14px), calc(100% - 2.5em) 1em;
        background-size: 12px 12px, 12px 12px, 2px 1.5em;
    }
}

/* CODE PROMO */

#code-promo{ 
    background: #F0F0F0;
    border-radius: 10px;
    padding: 12px;
    margin-left: 10px;
    font-weight: bold;
}

#promote-shop {
    display: flex;
    margin: auto;
    justify-content: space-around;
    margin: 100px 12% 100px 6%;
}

#promote-shop .textes{
    width: 550px;
    margin: auto 0;
}
#promote-shop #img-sourire{
    margin: 0;
    margin-right: -50px;
}

@media screen and (orientation: portrait){
    #promote-shop {
        flex-direction: column;
        margin: 10%;
    }
    #promote-shop .textes{
        width: 80%;
        margin: 20px auto;
        display: flex;
        flex-direction: column;
    }
    #promote-shop .textes a.red-btn{
        width: 260px;
        margin: 0 auto;
        padding: 34px;
    }
}

/* PROMO BAND HOME */

#promo-band{
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #C00D0D;
    z-index: 1000;
    display: flex;
    justify-content: center;
}
#promo-band a{
    color: white;
    font-weight: 700;
    font-size: 18px;
    margin: 20px 10px 20px 0;
    padding-bottom: 2px;
    text-decoration: none;
    border-bottom: solid 1px;
}
@media screen and (orientation: portrait){
    #promo-band{
        padding-bottom: 10px;
        padding-top: 10px;
    }
    #promo-band a{
        font-size: 40px;
        padding-bottom: 10px;
        padding-top: 10px;
    }
    #promo-band img {
        width: 30px;
        padding-left: 10px;
    }
}


/* FOOTER */

footer {
    height: 114px;
    border-top: 1px solid rgba(0, 0, 0, 0.25);
    display: flex;
    justify-content: space-between;
}

#logo-footer {
    margin: auto 38px;
}

#logo-footer img {
    width: 53px;
    height: 53px;
}

#footer-links{
    display: flex;
    justify-content: space-between;
    width: 508px;
}

#footer-links a{
    color: rgba(0, 0, 0, 0.6);
    text-decoration: none;
    margin: auto;
}

#footer-socials {
    margin: auto 38px;
    width: 127px;
    display: flex;
    justify-content: space-between;
}

.footer-social.linkedin {
    width: 26px;
}
.footer-social.facebook {
    width: 15px;
}
.footer-social.instagram {
    width: 26px;
}

.grecaptcha-badge{
    position: absolute!important;
    top: 177rem!important;
}

@media screen and (orientation: portrait){
    #logo-footer img {
        width: 80px;
        height: 80px;
    }
    #footer-links a{
        font-size: 22px;
    }
    .grecaptcha-badge{
        top: -10rem!important;
    }
}