.bg {
    background: url("../images/bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}

* {
    font-size: 12px;
    box-sizing: border-box;
}
body {
    overflow-x: hidden;
}

.card {
    width: 530px;
    overflow: hidden;
    border-radius: 33px;
    border: 1px solid rgba(0, 0, 0, 0.20);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    background: rgba(255, 255, 255, 0.22); /* 0.36 */
    flex-shrink: 0;
    backdrop-filter: blur(22.299999237060547px);
    padding: 20px;
    padding-top: 30px;
    padding-bottom: 50px;
    margin-bottom: 20px;
    /* display: flex;
    flex-wrap: wrap; */
}

.input {
    box-sizing: border-box;
    display: block;
    width: 100%;
    overflow: hidden;
    padding: 7px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.60);
    align-items: flex-start;
    gap: 10px;
    border-width: 0px;
    border-style: solid;
    border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));

    box-shadow: inset 2px 5px 10px #c2c1c1;
}

.input-control {
    display: inline-flex;
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
}

.checkbox {
    width: 17px;
    height: 17px;
    overflow: hidden;
    border: 4px solid rgba(41, 77, 109, 0.50);
    background: #DEDDDD;
    flex-shrink: 0;
    margin-right: 20px;
    margin-top: 0;
}

.boutton-de-soummission {
    width: 180px;
    height: 40px;
    /* background-image: linear-gradient(rgb(214, 202, 254), rgb(158, 129, 254)); */
    background-image: linear-gradient(#685CF8, #3C358C);
    /* background: linear-gradient(180deg, #685CF8 0%, #3C358C 100%); */
    border: none;
    border-radius: 50px;
    color: rgb(255, 255, 255);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    box-shadow: 1px 3px 0px rgb(139, 113, 255);
    transition-duration: .3s;

    /* display: flex;
    width: 407px; */
    /* height: 48px; */
    /* overflow: hidden;
    padding: 12px 19px;
    border-radius: 10px;
    box-shadow: 0px 2px 0px rgb(139, 113, 255);
    background: linear-gradient(180deg, #685CF8 0%, #3C358C 100%);
    justify-content: center;
    align-items: flex-start;
    flex-shrink: 0;
    border: none;
    padding: 10px 7px 10px 7px; */
}

.boutton-de-soummission:active {
    transform: translate(2px ,0px);
    box-shadow: 0px 1px 0px rgb(139, 113, 255);
    padding-bottom: 1px;

    /* transform: translate(0px ,0px);
    box-shadow: none; */
    /* box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); */
    /* padding-bottom: 9px; */
}

.text-white {
    width: 348px;
    flex-shrink: 0;
    color: #FFF;
    font-family: Montserrat, Verdana, Geneva, Tahoma, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.pricing {
    color: #FFF;
    text-align: right;
    font-family: Montserrat, Verdana, Geneva, Tahoma, sans-serif;
    font-size: 45px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-top: 30px;
    width: 100%;
}

.text1 {
    width: 100%;
    color: #FFF;
    font-family: Montserrat, Verdana, Geneva, Tahoma, sans-serif;
    font-size: clamp(1.5rem, 3.5vw, 4rem);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-align: center;
}

.text2 {
    display: block;
    width: 100%;
    /* height: 72px; */
    flex-shrink: 0;
    color: #FFF;
    font-family: Montserrat, Verdana, Geneva, Tahoma, sans-serif;
    font-size: clamp(1rem, 2vw, 2rem);;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    text-align: center;
}

.ellipse {
    width: 545px;
    height: 445px;
    border-radius: 545px;
    background: #282729;
    flex-shrink: 0;
    filter: blur(132.1999969482422px);
    position: absolute;
    top: 523px;
    left: -71px;
}

.container-p {
    padding-left: 30px;
    padding-right: 30px;
}

.container {
    position: relative;
    display: flex;
    align-items: flex-start;
    align-items: center;
}

@media only screen and (max-width: 890px) {
    .container {
        flex-direction: column;
        justify-content: center;
    }

    .card {
        width: 400px;
    }
    form {
        box-sizing: border-box;
        width: 400px;
        padding-right: 10px;
        padding-left: 10px;
    }
}

.image {
    border-radius: 16px;
    box-shadow: 0px 4px 22px 0px rgba(0, 0, 0, 0.20) inset, 0px 4px 12.3px 0px rgba(0, 0, 0, 0.25);
    margin-bottom: 70px;
}

.text-accord {
    -webkit-text-stroke-width: 2;
    -webkit-text-stroke-color: #545050;
    width: 742px;
    flex-shrink: 0;
    color: #FFF;
    font-family: Montserrat, Verdana, Geneva, Tahoma, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.mb-30 {
    margin-bottom: 30px;
}

.align-end {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.mb-100 {
    margin-bottom: 100px;
}

.bloc1-w {
    position: sticky;
    /* top: 0; */
    bottom: 40px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 80px;
    margin-bottom: 50px;
}

.line {
    width: 259px;
    height: 3px;
    background: #FFF;
    margin: auto;
    margin-top: 35px;
    margin-bottom: 35px;
}

.textarea {
    display: flex;
    width: 100%;
    overflow: hidden;
    padding: 15px 15px 15px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.60);
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    border-width: 0px;
    box-shadow: inset 2px 5px 10px #c2c1c1;
}

.pr-20 {
    padding-right: 20px;
}

.ml-30 {
    margin-left: 30px;
}

.input-bloc {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

.checkbox-bloc {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.btn {
    display: inline-flex;
    overflow: hidden;
    padding: 12px 10px 9px 19px;
    border-radius: 10px;
    box-shadow: 0px 4px 10.1px 0px rgba(0, 0, 0, 0.25);
    background: linear-gradient(180deg, #F8A890 0%, #B5705D 100%);
    justify-content: flex-end;
    align-items: flex-start;
    gap: 14px;
    /* font-size: 8px; */
    width: 100px;

}

.text-hp {
    width: 155px;
    color: #694b43; /* #84361E;*/
    font-family: Montserrat, Verdana, Geneva, Tahoma, sans-serif;
    font-size: 8px !important;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding: 5px 10px 5px 5px;
    display: flex;
    align-items: center;
    border: none;
    text-align: left;
}

.btn-box {
    display: flex;
    align-items: flex-end;
}


.align-center {
    align-items: center;
    width: 100%;
}

.align-w-center {
    display: flex;
    align-items: center;
    width: 100%;
}

.bloc-w {
    display: flex;
    /* width: 530px; */
}


.line2 {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.36);
    margin: auto;
    margin-top: 20px;
    margin-bottom: 10px;
}

label, button {
    cursor: pointer;
}


::placeholder {
    color: rgb(165, 164, 164);
    opacity: 1; /* Firefox */
  }

  ::-ms-input-placeholder { /* Edge 12 -18 */
    color: rgb(165, 164, 164);
  }



@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.ttf'), format('truetype');
}

.info-ms {
    color: #fff;
    /* background-color: #0129e8 #616eac; */
    background-color: #b29090;
    padding: 10px;
    font-weight: 500;
    border-radius: 15px;
    display: none;
    border: dashed;
}




/* flex-direction:row-reverse */

/* row : Les éléments sont disposés dans la même direction que le texte.
row-reverse : Les éléments sont disposés dans la direction opposée au texte.
column : Les éléments sont disposés de haut en bas.
column-reverse : Les éléments sont disposés de bas en haut. */



/* Une autre propriété que vous pouvez appliquer sur des éléments individuels est align-self.
Cette propriété accepte les mêmes valeurs que align-items, mais s'applique seulement à l'élément ciblé. */




/* Oh non! Les grenouilles sont écrasées dans une seule rangée de nénuphars. Distribuez-les en utilisant la propriété flex-wrap, qui accepte les valeurs suivantes :

nowrap : Tous les éléments sont tenus sur une seule ligne.
wrap : Les éléments s'enveloppent sur plusieurs lignes au besoin.
wrap-reverse : Les éléments s'enveloppent sur plusieurs lignes dans l'ordre inversé. */



/* Les deux propriétés flex-direction et flex-wrap sont utilisées tellement souvent ensembles que le raccourci flex-flow a été créé pour les combiner. Ce raccourci accepte les valeurs des deux propriétés séparées par un espace.

Par exemple, vous pouvez utiliser flex-flow: row wrap pour configurer les colonnes et les faire s'envelopper.

Essayez d'utiliser flex-flow pour répéter le niveau précédent. */




/* Les grenouilles sont éparpillées partout dans l'étang, mais les nénuphars sont amassés dans le haut. Vous pouvez utiliser align-content pour définir comment plusieurs lignes sont espacées de l'une à l'autre. Cette propriété prend les valeurs suivantes :

flex-start : Les lignes sont amassées dans le haut du conteneur.
flex-end: Les lignes sont amassées dans le bas du conteneur.
center : Les lignes sont amassées dans le centre vertical du conteneur.
space-between : Les lignes s'affichent avec un espace égal entre eux.
space-around : Les lignes s'affichent avec un espace égal autour d'eux.
stretch : Les lignes sont étirées pour s'adapter au conteneur.
Ceci peut être déroutant, mais align-content détermine l'espace entre les lignes, alors que align-items détermine comment les éléments dans leur ensemble sont alignées à l'intérieur du conteneur. Quand il n'y a qu'une seule ligne, align-content n'a aucun effet. */