@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

@font-face {
    font-family: 'Simplifica';
    src:url('fonts/SIMPLIFICA/Typeface.ttf') format('truetype'); 
    font-weight: normal;
    font-style: normal;
    font-display: swap; 
}

*{
    padding: 0px;
    margin : 0px;
    box-sizing: border-box;
}

h1{
	font-family: 'Amatic SC', handwriting;
    font-weight: 600;
    font-size: 70px !important;
    color: #A24901 !important;
    line-height: 0.9em;
    margin-left : 9vw;
    margin-top: 15vh;
}

.spe_header{
    width: 100% !important;
    height : 100vh !important;
    background-image: linear-gradient(188deg, #00a8e2 25%, #0075bf 100%) !important;
    display: grid;
    align-content: center;
    position: relative;
}

h2{
    font-family: 'Simplifica', Helvetica, Arial, Lucida, sans-serif;
    font-size: 40px;
    color: #a24901 !important;
}

.text{
    font-family: 'Mulish', Helvetica, Arial, Lucida, sans-serif;
    line-height:1.6em;
    color: #a24901;
}

.body_style{
    padding: 10vw;
    padding-top : 0px;
    width : 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.box_info{
    width : 60%;
    margin-top:4vh;
    position: relative;
}

.box_info:nth-child(odd){
    align-self: flex-start;
}

.box_info:nth-child(even){
    align-self: flex-end;
}

.text_titre{
    margin-bottom: 2vh;
}


.tabulation{
    padding-left: 2vw !important;
}

.titre_expli_sondage{
    margin-top: 10vh !important;
}

.body_exp_sondage{
    margin :10vw !important;
}

.dessin-1::after{
    content: "";
    position: absolute;
    width: 296px;
    height: 296px;
    background-image: url("../images/fleurs.png");
    background-repeat: no-repeat;
    background-size: 296px;
    right : -70%;
    bottom : 50%;
    transform: translateY(50%);


}

.dessin-2::after{
    content: "";
    position: absolute;
    width: 296px;
    height: 296px;
    background-image: url("../images/papillons-x3.png");
    background-repeat: no-repeat;
    background-size: 296px;
    left : -70%;
    bottom : 50%;
    transform: translateY(50%);
}

.dessin-3::after{
    content: "";
    position: absolute;
    width: 600px;
    height: 278px;
    background-image: url("../images/plumes-x3-1.png");
    background-repeat: no-repeat;
    background-size: 400px;
    right : -110%;
    bottom : 30%;
    transform: translateY(50%);
}


.dessin-4::after{
    content: "";
    position: absolute;
    width: 400px;
    height: 600px;
    background-image: url("../images/coquelicot-jaune.png");
    background-repeat: no-repeat;
    background-size: 200px;
    left : -60%;
    bottom : 40%;
    transform: translateY(50%);
}


.dessin-5::after{
    content: "";
    position: absolute;
    width: 400px;
    height: 600px;
    background-image: url("../images/oeufs.png");
    background-repeat: no-repeat;
    background-size: 350px;
    right : -80%;
    bottom :20%;
    transform: translateY(50%);
}

.dessin-6::after{
    content: "";
    position: absolute;
    width: 400px;
    height: 600px;
    background-image: url("../images/papillon-jaune.png");
    background-repeat: no-repeat;
    background-size: 350px;
    right : -80%;
    bottom :20%;
    transform: translateY(50%);
}

input[type = "email"]{
    appearance: none;
    border: none;
    background: #ffff;
    border :  #00A8E2 1px solid;
    border-radius: 0.5rem;
    width: 50%;
    padding: 2vh;
    outline: none;
    font-family: 'Roboto';
    caret-color: #00A8E2;
    position: relative;
}

.errormail{
    position: relative;
}

.errormail::after{
    content: "Ce mail n'existe pas veuillez le modifier.";
    color : #cc4e56;
    position : absolute;
    top : -3vh;
    font-size: 0.7rem;
    font-family: 'Mulish';

}
.button-sondage{
	margin-bottom : 5vh;
}

.button-sondage, .button_MBTI, .button_retour {

	color: #FFFFFF !important;
    border-width: 0px !important;
    border-color: rgba(210, 159, 104, 0);
    border-radius: 100px;
    font-size: 34px;
    font-family: 'Amatic SC', handwriting !important;
    font-weight: 900 !important;
    background-color: #F08135;
    padding-right: 1em !important;
    padding-left: 1em !important;
	width : fit-content;
    font-weight: 700;
    cursor: pointer;
    margin-top:5vh ;
    line-height: 1.2em !important;
}

.button_MBTI, .button_retour{
	background-color: #A9C639 !important;
}

.box_double_button{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.button-sondage:hover, .button_MBTI:hover ,.button_retour:hover{
    background-color: #00A8E2;
    color: #ffff;
}

.div_button_submit{

    background-color: #00A8E2;
    width : 3rem;
    height : 3rem;
    border-radius: 7px;
    position:relative;
    margin-left: 2vw;
    cursor: pointer;
    border : #00A8E2 2px solid;
}

.div_button_submit::after{
	
    content: "" !important;
    width : 30%;
    height : 60%;
    position : absolute;
    rotate: 45deg;
    border-bottom :  #ffff 3px solid;
    border-right :  #ffff 3px solid;
    left :0%;
    bottom :20%;
    transform: translate(50%, -50%);
}

.div_button_submit::after:hover{
	border-color: #00A8E2 !important;
}

.button_submit:hover{
	border-color: #00A8E2 !important;
    background-color: white;
}

.button_submit{
	width : 100%;
    height : 100%;
    position : relative;
    background:transparent;
	color: inherit;
	border: none;
	padding: 0;
	cursor: pointer;
	outline: inherit;
    z-index : 2;
}

.div_button_submit:has(.button_submit:hover):after{
    border-color: #00A8E2 !important;
    color : #00A8E2;
}

.button_submit:active{
    background-color: aliceblue;
}


.form_mail{
    display: flex;
    flex-direction: row;
    margin-top: 5vh;
    margin-bottom: 5vh;
}


.explications{
    margin-top: 2vh;
}

.img_logo_header{
    position:absolute;
    width : auto;
    height : auto;
    left : 50%;
    top : 35%;
    transform: translate(-50%, -50%);
}
.img-nuage{
    width : 100%;
    position: absolute;
    bottom: 0;
}

@media  screen and (max-width : 690px) {
    .box_info{
        width : 100%;
        margin-top:4vh;
        backdrop-filter: blur(1px);
        z-index : 2;
    }
    
	.dessin-1::after, .dessin-2::after, .dessin-3::after, .dessin-4::after, .dessin-5::after, .dessin-6::after{
    	display : none;
    }
}