/*SECTION : INSCRIPTION*/

@font-face {
    font-family: 'magnolia_scriptregular';
    src: url('magnolia_script-webfont.eot?#iefix') format('embedded-opentype'),
         url('magnolia_script-webfont.woff') format('woff'),
         url('magnolia_script-webfont.ttf')  format('truetype'),
	     url('magnolia_script-webfont.svg') format('svg');
        }

/*@font-face {
    font-family: 'love_is_complicated_again';
    src: url('love_is_complicated_again-webfont.woff2') format('woff2'),
    url('love_is_complicated_again-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    }*/

@font-face {
    font-family: 'short_stackregular';
    src: url('shortstack-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('shortstack-regular-webfont.woff') format('woff'),
         url('shortstack-regular-webfont.ttf')  format('truetype'),
	     url('shortstack-regular-webfont.svg') format('svg');
        }

@font-face {
    font-family: 'questrialregular';
    src: url('questrial-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('questrial-regular-webfont.woff') format('woff'),
         url('questrial-regular-webfont.ttf')  format('truetype'),
	     url('questrial-regular-webfont.svg') format('svg');
        }

@font-face {
	font-family: 'MyFontFamily';
	src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
	     url('myfont-webfont.woff') format('woff'), 
	     url('myfont-webfont.ttf')  format('truetype'),
	     url('myfont-webfont.svg#svgFontName') format('svg');
	}

* {
    box-sizing:border-box;
    *behavior: url(/scripts/boxsizing.htc);
}

body {
    overflow:hidden;
    padding:0;
    margin:0;
}


nav ul
{
    font-family: 'questrialregular';
    list-style-type: none;
    display: flex;
    justify-content: flex-end;
}

nav li
{
    font-family: 'questrialregular';
    margin-right: 15px;
    padding: 6px;
}

nav a
{
    font-family: 'questrialregular';
    font-size: 1.3em;
    color: #888389;
    padding-bottom: 3px;
    text-decoration: none;
}

nav a:hover
{
    font-family: 'questrialregular';
    color: #888389;
}

#deconnexion
{
    background : #ffffff;
    font-family: 'questrialregular';
    color:#888389;
    font-size: 1.1em;
    font-weight: normal;
    border: 2px #B3CCFF solid;
    border-radius: 100px;
    width: 180px;
    padding: 4px;
    text-align: center;
}

/*#wrapper
{
    background-image : url("taches_couleur_bleu_2_inscription_mars_2021.png");
    background-repeat : no-repeat;
    display : block;
    width: 900px;
    margin: auto;
}*/

#wrapper
{
    display : block;
    width: 900px;
    margin: auto;
    padding-left : 3%;
    padding-right : 2%;
    padding-top : 3%;
    position:  relative;
}

.wrapper-background {
    position: absolute;
    background-image : url("taches_couleur_bleu_2_inscription_mars_2022.png");
    background-repeat : repeat;
    width: 100%;
    height: 100%;
    z-index: -1;
    left: 0;
}

#block-incription {
    display:flex;
    align-content: center;
}

#inscription
{
    /*padding-top : 10px;*/    
    /*display : inline-block;*/
    font-family: 'magnolia_scriptregular';
    color: #B3CCFF;
    /*font-size: 3.8em;*/
    font-size: 5em;
    font-weight :normal;
    text-align: center;
    
    /*left : 15px;*/
    margin-bottom : 0;
    margin-top:25px;
    line-height: 1em;
 }

 #inscription_cadeau
{
    /*padding-top : 10px;*/    
    display : inline-block;
    font-family: 'magnolia_scriptregular';
    color: #B3CCFF;
    font-size: 3.8em;
    font-weight :normal;
    text-align: right;
    position : relative;
    /*left : 15px;*/
    margin-bottom : 0;
    margin-top:25px;
    line-height: 1em;
 }

 #inscription_cadeau_sous_titre
 {
     /*padding-top : 10px;*/    
     display : inline-block;
     font-family: 'magnolia_scriptregular';
     color: #B3CCFF;
     font-size: 3.2em;
     font-weight :normal;
     text-align: center;
     position : relative;
     /*left : 15px;*/
     margin-bottom : 0;
     margin-top:25px;
     line-height: 1em;
  }

#formulaire
{
    width:100%;
    display:flex;
    justify-content:center;
    margin-top:25px;
    /*left : 200px;*/
}

#donnees
{
    width:40%;
    margin:auto;
}

#firstname, #name, #email, #birthdate, #pass, #message, #tel, .ins_input
{
    border: 1.5px #B3CCFF solid;
    border-radius: 4px;
    padding: 1.5px;
    margin-top : 15px;
    text-align: left;
    width : 330px;
    height : 40px;
    position : relative;
    justify-content:center;
    /*left : 80px;*/
}

.ins_input input {
    border: 1.5px #B3CCFF solid;
    border-radius: 4px;
    padding: 1.5px;
    margin-top : 15px;
    text-align: left;
    width : 330px;
    height : 40px;
    /*position : relative;*/
    justify-content:center;
}

.erreur {
    border: 2px solid red;
}

.champ-erreur {
    border-color: red;
}

.message-erreur {
    color: red;
    font-size: 0.8em;
    margin-top: 5px;
}


#separateur_fin_page a
{
    font-family: 'questrialregular';
    color: #ffffff;
    padding-bottom: 3px;
    text-decoration: none; 
}

#separateur_fin_page a:hover
{
    font-family: 'questrialregular';
    color: #ffffff;
}

.btn-custom-suivant
{
    background :  #B3CCFF;
    font-family: 'questrialregular';
    color : #ffffff;
    font-size: 1.2em;
    font-weight: normal;
    border: none;
    border-radius: 100px;
    width: 220px;
    height : 35px;*
    padding: 6px;
    position: relative;
    left: 15%;
    margin-top : 3%;
    margin-bottom:14%;
}


#inscription_cadeau {
    /*padding-top : 10px;*/
    display: inline-block;
    font-family: 'magnolia_scriptregular';
    color: #B3CCFF;
    font-size: 3.8em;
    font-weight: normal;
    text-align: right;
    position: relative;
    /*left : 15px;*/
    margin-bottom: 0;
    margin-top: 10px;
    line-height: 1em;
    width: 75%;
    margin-left: auto;
    margin-right: auto;
}

#inscription_cadeau_sous_titre {
    /*padding-top : 10px;*/
    display: inline-block;
    font-family: 'magnolia_scriptregular';
    color: #B3CCFF;
    font-size: 3.2em;
    font-weight: normal;
    text-align: center;
    position: relative;
    /*left : 15px;*/
    margin-bottom: 35px;
    margin-top: 25px;
    line-height: 1em;
    margin-left: 25%;
    margin-right: 25%;
}

.btn-custom-offrir {
    background: #ffffff;
    font-family: 'questrialregular';
    color: #B3CCFF;
    font-size: 1.1em;
    font-weight: normal;
    border: 2.25px#B3CCFF solid;
    border-radius: 100px;
    width: 250px;
    height: 35px;
    padding: 4px;
    text-align: center;
    margin-top: 0;
    margin-left: 33%;
    /*position : relative;
    left : 25%;
    top : 15%;*/
}

.btn-custom-offrir a {
    font-family: 'questrialregular';
    font-size: 1.1em;
    color: #B3CCFF;
    padding-bottom: 3px;
    text-decoration: none;
}

.btn-custom-offrir a:hover {
    font-family: 'questrialregular';
    color: #B3CCFF;
}

#inscription_pour_moi {
    /*padding-top : 10px;*/
    display: inline-block;
    font-family: 'magnolia_scriptregular';
    color: #B3CCFF;
    font-size: 3.8em;
    font-weight: normal;
    text-align: right;
    position: relative;
    /*left : 15px;*/
    margin-bottom: 0;
    margin-top: 10px;
    line-height: 1em;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

#inscription_pour_moi_sous_titre {
    /*padding-top : 10px;*/
    display: inline-block;
    font-family: 'magnolia_scriptregular';
    color: #B3CCFF;
    font-size: 3.2em;
    font-weight: normal;
    text-align: center;
    position: relative;
    /*left : 15px;*/
    margin-bottom: 35px;
    margin-top: 25px;
    line-height: 1em;
    margin-left: 25%;
    margin-right: 25%;
}

.btn-custom-commencer {
    background: #ffffff;
    font-family: 'questrialregular';
    color: #B3CCFF;
    font-size: 1.1em;
    font-weight: normal;
    border: 2.25px#B3CCFF solid;
    border-radius: 100px;
    width: 250px;
    height: 35px;
    padding: 4px;
    text-align: center;
    margin-top: 0;
    margin-left: 33%;
    /*position : relative;
    left : 25%;
    top : 15%;*/
}

.btn-custom-commencer a {
    font-family: 'questrialregular';
    font-size: 1.1em;
    color: #B3CCFF;
    padding-bottom: 3px;
    text-decoration: none;
}

.btn-custom-commencer a:hover {
    font-family: 'questrialregular';
    color: #B3CCFF;
}

#choix
{
    font-family: 'magnolia_scriptregular';
    color: #B3CCFF;
    font-size: 3em;
    font-weight :normal;
    text-align: center;
    position : relative;
    /*right : 215px;*/
    margin-top : 20px;
    margin-bottom : 5px;
}

#forfait {
    max-width: 1200px;
    margin: 10px auto 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

#forfait a
{
    text-decoration: none;
}

/*#forfait a:focus
{
    background: #d2d0d3;
    width:27%;
    margin-right: 25px;
  }*/


.tarif {
    font-family: 'questrialregular';
    color : #B3CCFF;
    border-radius: 6px;
    font-size: 1.1em;
    font-weight: 600;
    width: 280px;
    border: 3px solid #B3CCFF;
    font-family: 'questrialregular';
    text-align: center;
    /*position : relative;*/
    right: 210px;
}

/*#tarif-global
{
    font-family: 'questrialregular';    
    color : #5485e6;
    border-radius : 6px;
    font-size: 1.1em;
    font-weight :600;
    width:200px;
    height:200px;
    border: 3px solid #5485e6;
    font-family: 'montserrat';
    margin-right : 25px;
    text-align: center; 
}*/

strong
{
    font-family: 'questrialregular';
    color: #B3CCFF;
    font-size: 2.5em;
    font-weight :600;
    position : relative;
    padding-top : 3px;
    text-align: center;    
}

#description
{
    font-family: 'questrialregular';
    color: #B3CCFF;
    font-size: 1em;
    font-weight :600;
    position : relative;
    padding-top : 3px;
    text-align: center;     
}

#payables, #desabonnement
{
    font-family: 'questrialregular';
    color: #B3CCFF;
    font-size: 1em;
    font-weight :600;
    position : relative;
    padding-top : 3px;
    text-align: center;     
}

#abonnement
{
    font-family: 'magnolia_scriptregular';
    color: #B3CCFF;
    font-size: 2em;
    line-height:50px;
    font-weight :bolder;
    position : relative;
    padding-top : 3px;
    text-align: center;
    margin-bottom : 6px;
}


#formule
{
    margin-top : 20px;
}

#warning
{
    font-family: 'questrialregular';
    font-size:10px;
    color:#888389;
    margin-bottom: 0;
    margin-top: 6%;
    width : 80%;
    text-align:center;
    position:relative;
    /*left:300px;*/
    margin-left:auto;
    margin-right:auto;
}

#retour_suivant
{
width:100%;
display:flex;
justify-content:center;
}

.btn-custom-retour
{
    background : #B3CCFF;
    font-family: 'questrialregular';
    color:#ffffff;
    font-size: 1em;
    font-weight: normal;
    border: none;
    border-radius: 100px;
    width: 150px;
    height : 35px;
    padding: 6px;
    margin-bottom:5%;
    
    /*left: 670px;*/
    margin-top : 3%;
}

.btn-custom-retour a
{
    font-family: 'questrialregular';
    font-size: 1.3em;
    color: #ffffff;
    padding-bottom: 3px;
    text-decoration: none;
}

.btn-custom-retour a:hover
{
    font-family: 'questrialregular';
    color: #ffffff;
}

/*.btn-custom-accueil
{
    background : #B3CCFF;
    font-family: 'questrialregular';
    color:#ffffff;
    font-size: 0.9em;
    font-weight: normal;
    border: none;
    border-radius: 100px;
    width: 150px;
    height : 35px;
    padding: 6px;
    position: relative;
    left : 100px;
/*left: 670px;
    margin-top : 35px;
}*/



/*.btn-custom-suivant
{
    background : #B3CCFF;
    font-family: 'questrialregular';
    color:#ffffff;
    font-size: 1em;
    font-weight: normal;
    border: none;
    border-radius: 100px;
    width: 150px;
    height : 35px;
    padding: 6px;
    position: relative;
    left: 120px;
    margin-top : 65px;
}

.btn-custom-suivant a
{
    font-family: 'questrialregular';
    font-size: 1.3em;
    color: #ffffff;
    padding-bottom: 3px;
    text-decoration: none;
}

.btn-custom-suivant a:hover
{
    font-family: 'questrialregular';
    color: #ffffff;
}*/

@media screen and (max-width: 1024px)
{
    body
    {
        min-width:270px;
        margin:0;
    }

    nav
    {
        width: auto;
        text-align: left;
    }
    
    nav ul
    {
        flex-direction: row;
    }

    nav li
    {
        padding-left: 4px;
    }
    
    nav a
    {
        font-size: 1.1em;
    }
    
    nav a:hover
    {
        border-bottom: 0;
    }
    
    #wrapper
    {
        clear:both;
        width: 90%;
        margin: auto;
        margin-left:auto;
        margin-right:auto;
        flex-direction: column;
        padding-bottom:6%;
        /*background-color:#ff6961;*/
    }

    #forfait {
        width: 100%;
        margin-top: 5%;
        margin-bottom: 2%;
        display: flex;
        /*position : absolute;*/
        margin: auto;
    }

    #forfait>a {
        text-decoration: none;
    }

    .tarif {
        font-family: 'questrialregular';
        color: #B3CCFF;
        border-radius: 6px;
        font-size: 1em;
        font-weight: bold;
        width: 340px;
        height: 340px;
        border: 3px solid #B3CCFF;
        font-family: 'questrialregular';
        margin-right: 10px;
        text-align: center;
        /*position : relative;*/
    }

    .btn-custom-retour
{
    background : #B3CCFF;
    font-family: 'questrialregular';
    color:#ffffff;
    font-size: 1.6em;
    font-weight: bold;
    border: none;
    border-radius: 100px;
    width: 200px;
    height : 40px;
    padding: 6px;
    /*position: relative;*/
    /*left: 300px;*/
}


}