:root{
    
    --Font-H1-Font-height : 68px;
    --Font-H1-Line-height: 92px;
    --Font-H1-Font-name : 'Zodiak Black';

    
    --Font-H2-Font-height : 64px;
    --Font-H2-Line-height: 72px;
    --Font-H2-Font-name : 'Zodiak Bold';

    
    --Font-H3-Font-height : 48px;
    --Font-H3-Line-height: 56px;
    --Font-H3-Font-name : 'Zodiak Italic';

    --Font-Body-Font-height:20px;
    --Font-Body-Line-height:40px;
    --Font-Body-Font-name: 'Satoshi Variable';

    --Font-Bouton-Font-height: 24px;
    --Font-Bouton-Line-height: 40px;
    --Font-Bouton-Font-name: 'Satoshi Variable';

    --Spaces-gap-L: 145px;
    --Spaces-gap-M: 64px;
    --Spaces-gap-S: 40px;
    --Spaces-gap-XS: 28px;
    --Spaces-gap-2XS: 16px;
    
    --Spaces-padding-horizontal-L: 320px;
    --Spaces-padding-horizontal-M: 280px;
    --Spaces-padding-horizontal-BOUTON: 32px;
    
    --Spaces-padding-vertical-L: 220px;
    --Spaces-padding-vertical-BOUTON: 20px;

    --visuel-ornement-height-L: 128px;
    --visuel-ornement-height-M: 72px;

    --visuel-logo-width-L: 900px;

}

@media(max-width:1512px){
    :root{
        --Font-H1-Font-height : 62px;
        --Font-H1-Line-height: 84px;
        --Font-H1-Font-name : 'Zodiak Black';
    
        
        --Font-H2-Font-height : 56px;
        --Font-H2-Line-height: 68px;
        --Font-H2-Font-name : 'Zodiak Bold';
    
        
        --Font-H3-Font-height : 40px;
        --Font-H3-Line-height: 48px;
        --Font-H3-Font-name : 'Zodiak Italic';
    
        --Font-Body-Font-height:20px;
        --Font-Body-Line-height:40px;
        --Font-Body-Font-name: 'Satoshi Variable';
    
        --Font-Bouton-Font-height: 18px;
        --Font-Bouton-Line-height: 32px;
        --Font-Bouton-Font-name: 'Satoshi Variable';
    
        --Spaces-gap-L: 96px;
        --Spaces-gap-M: 60px;
        --Spaces-gap-S: 40px;
        --Spaces-gap-XS: 28px;
        --Spaces-gap-2XS: 16px;
        
        --Spaces-padding-horizontal-L: 300px;
        --Spaces-padding-horizontal-M: 230px;
        --Spaces-padding-horizontal-BOUTON: 24px;
        
        --Spaces-padding-vertical-L: 200px;
        --Spaces-padding-vertical-BOUTON: 20px;
    
        --visuel-ornement-height-L: 104px;
        --visuel-ornement-height-M: 64px;
    
        --visuel-logo-width-L: 800px;
        
    }
}


@media(max-width:1150px){
    :root{
        --Font-H1-Font-height : 52px;
        --Font-H1-Line-height: 72px;
        --Font-H1-Font-name : 'Zodiak Black';
    
        
        --Font-H2-Font-height : 32px;
        --Font-H2-Line-height: 64px;
        --Font-H2-Font-name : 'Zodiak Bold';
    
        
        --Font-H3-Font-height : 36px;
        --Font-H3-Line-height: 44px;
        --Font-H3-Font-name : 'Zodiak Italic';
    
        --Font-Body-Font-height:20px;
        --Font-Body-Line-height:40px;
        --Font-Body-Font-name: 'Satoshi Variable';
    
        --Font-Bouton-Font-height: 18px;
        --Font-Bouton-Line-height: 24px;
        --Font-Bouton-Font-name: 'Satoshi Variable';
    
        --Spaces-gap-L: 80px;
        --Spaces-gap-M: 52px;
        --Spaces-gap-S: 40px;
        --Spaces-gap-XS: 28px;
        --Spaces-gap-2XS: 16px;
        
        --Spaces-padding-horizontal-L: 120px;
        --Spaces-padding-horizontal-M: 120px;
        --Spaces-padding-horizontal-BOUTON: 20px;
        
        --Spaces-padding-vertical-L: 88px;
        --Spaces-padding-vertical-BOUTON: 20px;
    
        --visuel-ornement-height-L: 88px;
        --visuel-ornement-height-M: 56px;
    
        --visuel-logo-width-L: 650px;
        
    }


}

@media(max-width:699px){
    :root{
        --Font-H1-Font-height : 32px;
        --Font-H1-Line-height: 48px;
        --Font-H1-Font-name : 'Zodiak Black';
    
        
        --Font-H2-Font-height : 24px;
        --Font-H2-Line-height: 56px;
        --Font-H2-Font-name : 'Zodiak Bold';
    
        
        --Font-H3-Font-height : 32px;
        --Font-H3-Line-height: 40px;
        --Font-H3-Font-name : 'Zodiak Italic';
    
        --Font-Body-Font-height:18px;
        --Font-Body-Line-height:36px;
        --Font-Body-Font-name: 'Satoshi Variable';
    
        --Font-Bouton-Font-height: 16px;
        --Font-Bouton-Line-height: 24px;
        --Font-Bouton-Font-name: 'Satoshi Variable';
    
        --Spaces-gap-L: 72px;
        --Spaces-gap-M: 32px;
        --Spaces-gap-S: 32px;
        --Spaces-gap-XS: 24px;
        --Spaces-gap-2XS: 16px;
        
        --Spaces-padding-horizontal-L: 50px;
        --Spaces-padding-horizontal-M: 50px;
        --Spaces-padding-horizontal-BOUTON: 20px;
        
        --Spaces-padding-vertical-L: 80px;
        --Spaces-padding-vertical-BOUTON: 20px;
    
        --visuel-ornement-height-L: 72px;
        --visuel-ornement-height-M: 80px;
    
        --visuel-logo-width-L: 280px;
        
    }
}

@media(max-width:320px){
    :root{
        --Spaces-padding-horizontal-L: 30px;
    }
}

@font-face {
    font-family: "Zodiak Black";
    src: url("./font/Zodiak-Black.otf") format("opentype");

}

@font-face {
    font-family: "Zodiak Bold";
    src: url("./font/Zodiak-Bold.otf") format("opentype");

}

@font-face {
    font-family: "Zodiak Italic";
    src: url("./font/Zodiak-Italic.otf") format("opentype");

}

@font-face {
    font-family: "DIN Condensed";
    src: url("./font/D-DIN.otf") format("opentype");

}


@font-face {
    font-family: "Satoshi Variable";
    src: url("./font/Satoshi-Variable.ttf") format("truetype");

}



body{
    width:100%;
    margin:0;
}


ul{
   padding:0;
}

main{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width:100%;
}


#welcome{
    display: flex;
    padding: 55px var(--Spaces-padding-horizontal-M, 230px) var(--Spaces-padding-vertical-L, 200px) var(--Spaces-padding-horizontal-M, 230px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--Spaces-gap-L, 96px);
    align-self: stretch;
    background: #E7ECFF;


}


#welcomeContent{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--Spaces-gap-M);
    align-self: stretch;
}




#welcomeContent img{
    width: var(--visuel-logo-width-L, 800px);
height: 241.778px;
}

h1{
    color: #2A1985;

    /* H1 */
    font-family: var(--Font-H1-Font-name, "Zodiak Black");
    font-size: var(--Font-H1-Font-height, 62px);
    font-style: normal;
    font-weight: 900;
    line-height: var(--Font-H1-Line-height, 84px); /* 135.484% */
    letter-spacing: 3.1px;
}

@media(max-width:1360px){
    h1{
        font-size : 57px;
    }
}

@media(max-width:1024px){
    h1{
        font-size: var(--Font-H1-Font-height, 62px);
    }
}


@media(max-width:699px){
    h1{
        text-align:center;
    }
}

h2{

    /* H2 */
    font-family: var(--Font-H2-Font-name, Zodiak);
    font-size: var(--Font-H2-Font-height, 56px);
    font-style: normal;
    font-weight: 540;
    line-height: var(--Font-H2-Line-height, 68px); /* 121.429% */
    letter-spacing: 2.8px;
    width:100%;
}


@media(max-width:1024px){
     h2{
        align-self: flex-start;
    }
}

@media(max-width:500px){
    h2{
        white-space:unset;
    }
}

h3{

    /* H3 */
    font-family: var(--Font-H3-Font-name, Zodiak);
    font-size: var(--Font-H3-Font-height, 40px);
    font-weight: 400;
    line-height: var(--Font-H3-Line-height, 48px); /* 120% */
    letter-spacing: 2px;
}

h1, h2, h3, p, li, ul{
    margin:0;
}

.buttons{
    display: flex;
justify-content: center;
align-items: flex-start;
align-content: flex-start;
gap: 40px var(--Spaces-gap-M, 60px);
align-self: stretch;
flex-wrap: wrap;
}

@media(max-width:834px){
    .buttons{
        justify-content: center;
        align-content: flex-start;
        gap: 40px var(--Spaces-gap-M, 40px);
        align-self: stretch;
        flex-wrap: wrap;
    }
}

a, button{
    display: flex;
    width: 460px;
    height: 64px;
    padding: 0;
    justify-content: center;
    align-items: center;
    gap: var(--Spaces-gap-XS, 28px);

     /* Bouton */

    font-family: "Satoshi Variable";
    font-size: var(--Font-Bouton-Font-height, 18px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Font-Bouton-Line-height, 32px); /* 177.778% */
    letter-spacing: 1.8px;
    text-transform: uppercase;
    text-decoration: none;
}

@media(min-width:1512px){
    a, button{
        width:595px;
    }
}




.buttons a, .buttons button{
    border-radius: 50px;
    background: #FFF9ED;
    box-shadow: -8px 8px 0px 0px #2A1985;
    border: 2px solid #2A1985;
    color: #2A1985;
}

@media(max-width:640px){
    .buttons a, .buttons button{
        width:400px;
    }
}

@media(max-width:500px){
    .buttons a, .buttons button{
        height:auto;
        padding: var(--Spaces-padding-vertical-BOUTON) var(--Spaces-padding-horizontal-BOUTON, 32px);
    }
}



.buttons a:hover, .buttons button:hover{
    box-shadow: -4px 4px 0px 0px #2A1985;

    transform: translate(-4px,4px);
}

.buttons a:focus, .buttons button:focus{
    box-shadow: -4px 4px 0px 0px #2A1985;
    background-color: #E1E7F5;
    transform: translate(-4px,4px);
}

#languagesContainer{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

#languages{
    display: flex;
    align-items: flex-start;
    gap: 27px;
}

.language{
    display: flex;
    height: 64px;
    width:210px;
    justify-content: center;
    align-items: center;
    gap: var(--Spaces-gap-XS, 28px);


    border-radius: 50px;
    border: 2px solid #2A1985;
    background: #FFF9ED;
    box-shadow: -6px 6px 0px 0px #2A1985;
}

@media(max-width:550px){
    #languages{
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
}

 .active{
    cursor:default;
}

.language img{
    display: flex;
width: 33px;
height: 33px;
justify-content: center;
align-items: center;
gap: 5.467px;
}

.language:hover{
    border-radius: 50px;
    border: 2px solid #2A1985;
    background: #FFF9ED;
    box-shadow: -3px 3px 0px 0px #2A1985;
    transform: translate(-3px,3px);
}

.active {
    background: #E1E7F5;
}

.active:hover{
    border-radius: 50px;
    border: 2px solid #2A1985;
    box-shadow: -6px 6px 0px 0px #2A1985;
    background: #E1E7F5;
    transform: none;
}

.language p{
    color: #2A1985;

    /* Bouton */
    font-family: var(--Font-Bouton-Font-name, "satoshi variable");
    font-size: var(--Font-Bouton-Font-height, 18px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Font-Bouton-Line-height, 32px); /* 177.778% */
    letter-spacing: 1.8px;
    text-transform: uppercase;
}


#presentationSection{
    background: #E1E7F5;
}



.presentationPara{
    display: flex;
    align-items: center;
    gap: var(--Spaces-gap-M, 80px);
    align-self: stretch;
}

@media(max-width:810px){
    .presentationPara{
        flex-direction: column;
        justify-content: center;
    }
}

.presentationPara img{
    width: 131.695px;
    height: var(--visuel-ornement-height-L, 128px);
    aspect-ratio: 131.69/128.00;
}

.presentationText{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--Spaces-gap-S, 40px);
}

.presentationText p, .presentationText ul{
    color: #2A1985;
    font-family: "DotGothic16";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px; /* 200% */
    letter-spacing: 2px;
}

.blueButtons a{
    border-radius: 50px;
    border: 2px solid #2A1985;
    background: #E1E7F5;
    box-shadow: -8px 8px 0px 0px #2A1985;
    
}

.blueButtons a:focus{
    background-color: #FFF9ED;
}




#proposalSection{
    background: #FFF9ED;
}




#proposal img{
    width: 142.656px;
    height: var(--visuel-logo-height-M, 140px);
}




#quoteSection{
    max-width: 100%;
    background: #E1E7F5;
}


#quoteForm h2, #quoteForm h3,#quoteForm p{
    color: #2A1985;
}



.formPart{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Spaces-gap-S, 40px);
    align-self: stretch;
}

.formGroup{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Spaces-gap-XS, 28px);
    align-self: stretch;
}

label{
    color: #2A1985;

    /* Body */
    font-family: var(--Font-Body-Font-name, DotGothic16);
    font-size: var(--Font-Body-Font-height, 20px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Font-Body-Line-height, 40px); /* 200% */
    letter-spacing: 2px;
}

input{
    border-radius: 16px;
    border: 4px solid #2A1985;
    background: #FFF9ED;
    height: 64px;
align-self: stretch;
padding-left: 10px;

color: #2A1985;

/* Body */
font-family: var(--Font-Body-Font-name, DotGothic16);
font-size: var(--Font-Body-Font-height, 20px);
font-style: normal;
font-weight: 400;
line-height: var(--Font-Body-Line-height, 40px); /* 200% */
letter-spacing: 2px;
}

textarea{
    border-radius: 16px;
    border: 4px solid #2A1985;
    background: #FFF9ED;
    align-self: stretch;
    padding-left: 10px;

    color: #2A1985;

    /* Body */
    font-family: var(--Font-Body-Font-name, DotGothic16);
    font-size: var(--Font-Body-Font-height, 20px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Font-Body-Line-height, 40px); /* 200% */
    letter-spacing: 2px;
}




#quoteSection img{
    width: 69.079px;
    height: var(--visuel-ornement-height-M, 64px);

}


footer{
    display: flex;
    height: 102px;
    justify-content: center;
    align-items: center;
    gap: 96px;
    align-self: stretch;
    background-color: #2A1985;
}

@media(max-width:1024px){
    footer{
        display: flex;
        padding: 20px 0px;
        flex-direction: column;
        height: auto;
        gap:unset;
    }
}




footer a{
    color: #FFF;
    font-family: "DIN Condensed";
    font-size: 18px;
    font-weight: 700;
    line-height: 48px; /* 200% */
    letter-spacing: 1.2px;
    text-decoration: none;
    white-space: normal;
    margin:0;
    width:auto;
    height: auto;
    display:block;
    text-transform: none;
}


@media(max-width:699px){
    footer a{
        text-align: center; 
        font-size: 16px;
        line-height: 28px; /* 155.556% */
        letter-spacing: 0.9px;
    }
}

footer a:hover{
    text-decoration: underline;
}

.visually-hidden {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
  }

.success{
    display: flex;
    padding: 24px 32px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 16px;
    border: 4px solid #2C10BB;
    font-family: 'DotGothic16';
}

.error-global{
    display: flex;
    padding: 24px 32px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 16px;
    border: 4px solid #F93434;
    background: #FCF2F2;
    font-family: 'DotGothic16';
}

.err{
    color: #F93434;

    /* Body */
    font-family: var(--Font-Body-Font-name, DotGothic16);
    font-size: var(--Font-Body-Font-height, 20px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Font-Body-Line-height, 40px); /* 200% */
    letter-spacing: 2px;
}

strong{
    text-decoration: underline;
    font-weight: normal;
}

#lpprSection{
    background: #FFF9ED;
   
}

.bigSection{
    width:100%;
}

@media(max-width:430px){
    .bigSection{
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.section{
    display: flex;
    padding: var(--Spaces-padding-vertical-L, 220px) var(--Spaces-padding-horizontal-L, 320px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--Spaces-gap-L, 145px);
    align-self: stretch;
    max-width: 100%;
}

@media(max-width: 1420px){
    .section{
        padding: var(--Spaces-padding-vertical-L, 220px) 200px;
    }
}

@media(max-width:1150px){
    .section{
         padding: var(--Spaces-padding-vertical-L, 220px) var(--Spaces-padding-horizontal-L, 320px);
    
    }
}

@media(max-width:430px){
    .section{
        padding:var(--Spaces-padding-vertical-L, 220px) 0;
        width:85%;
        align-self: center;
    }
}

.section a, .section button{
    width:350px;
}


 p, ul, h1, h2, h3{
    color:#2A1985;
 }

.checkBoxItem{
    display: flex;
    align-items: center;
    justify-content: center;
    gap:10px;
    position: relative;
}


.checkBoxItem input {
    opacity: 0;
    width: 25px;
    height: 25px;
    margin: 0;
    cursor: pointer;
}

.checkmark {
    width: 25px;
    height: 25px;
    border: 4px solid #2A1985;
    background: #FFF9ED;
    position: absolute;
    left: 0;
    pointer-events: none;
}

.checkBoxItem input:checked ~ .checkmark {
  background-color: #2A1985;
}

/* Croix quand cochée */
.checkBoxItem input:checked + .checkmark::after {
    position: absolute;
    background-color: #2A1985;
    font-size: 24px;
    font-weight: bold;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
}

.checkBoxItem label {
    cursor: pointer;
    margin-left: 35px;
}