@import url("/css/register-form.css");


/* COMMONS */
* { box-sizing: border-box; text-wrap: balance; }
@media screen and (max-width: 700px) {
    * { text-wrap: auto; }
}
body { margin: 0; padding: 0; position: relative; text-align: center; width: 100vw; height: auto; font-family: "Poppins", serif; font-weight: 400; font-style: normal; overflow-x: hidden; }
.hidden { display: none;}
hr { width: 100%; opacity: 0.3; height: 1px; }
hr.hr_vertical { width: 1px; height: auto; margin: 0; }

/* Links */
.underline { text-decoration: underline; }
a, a:hover, a:active, a:focus, a:visited {color: unset; text-decoration: unset;}
a:hover, a:active, a:focus { text-decoration: underline;}
.uppercase { text-transform: uppercase;}

/* Input & Buttons */
input, button {border: none; outline: none; border-radius: 5px; background: none; color: inherit; font: inherit; }
button:hover { opacity: .9; }
button:active, button:focus { transform: scale(.95);}
.btn { border-radius: 15px; border: #1B3450 solid 3px; color : #1B3450; padding: 15px 30px; font-size: 16px; font-family: "Poppins", serif; font-weight: 700; cursor: pointer; }
.btn.filled { color: white; background-color: #1B3450; }
#popover-register-form .btn { border: none; }

/* Alignment */
.center { text-align: center; margin-left: auto; margin-right: auto;}
.left { text-align: left; }
.right { text-align: right;}
.hidden { display: none !important; }
.flex { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
.flex.between { justify-content: space-between; }
.flex.around { justify-content: space-around; }
.flex.column { flex-direction: column; }
.w100 { width: 100%; }
.m-w450 { max-width: 450px; }
.gap { gap: 1rem; }
.gap3 { gap: 3rem; }
.m0 { margin-top: 0; margin-bottom: 0; }

@media screen and (max-width: 900px) {
    .gap3 { gap: 2rem}
}

@media screen and (max-width: 700px) {
    .gap3 { gap: 1rem}
}


/* Title & Fonts */
h1, h2, h3, h4, h5, h6, .primary-color { color: #1C2A41 }
h1 {  font-size: 44px; }
h2 { font-size: 34px; }
/* h2 { margin-left: 20vw; margin-right: 20vw;  } */
h3 { font-size: 26px; }
.f21 { font-size: 21px;}
.f14 { font-size: 14px; }
@media screen and (max-width: 700px) {
    h1 {  font-size: 36px;}
    h2 {  font-size: 28px;}
    /* h2 { margin-left: 10vw; margin-right: 10vw;  } */
    h3 { font-size: 24px; }
}

/* Padding & Margin */
.p-h1 { padding-right: 10vw; padding-left: 10vw; }
.p-h2 { padding-right: 20vw; padding-left: 20vw; }
.m-h1 { margin-right: 10vw; margin-left: 10vw; }
.m-h2 { margin-right: 20vw; margin-left: 20vw; }
.m-h05 { margin-right: 5vw; margin-left: 5vw; } 
@media screen and (max-width: 700px) {
    .p-h1 { padding-right: 5vw; padding-left: 5vw; }
    .p-h2 { padding-right: 10vw; padding-left: 10vw; }
    .m-h1 { margin-right: 5vw; margin-left: 5vw; }
    .m-h2 { margin-right: 10vw; margin-left: 10vw; }
}

/* Color */
.main-color {color: #1B3450}
.secondary-color { color: #5FA9B7; }
.black { color: black; }
.red { color: #C95854; }
.gray { color: #A8A8A8; }
.white { color: white; }


/*  */

/* HEADER */
header #slogan { line-height: 20px; justify-content: flex-end; padding: 10px 5rem; font-size: 14px; background: transparent linear-gradient(94deg, #3E8DB1 0%, #43E0C8 100%) 0% 0% no-repeat padding-box; margin: 0; width: 100%; }
header #slogan a { padding-left: 1rem; }
#top-bar { height: 120px; width: 100%; background-color: #F4F6FA; color: #1C2A41; }
@media screen and (max-width: 700px) {
    header #slogan { justify-content: center; padding: 10px 20px; }
}

/*  */


/* FOOTER */

footer { width: 100%; background-color: #000; color: white; padding: 60px 5vw 15px; box-sizing: border-box; }
footer .topfooter { padding-bottom: 30px; line-height: 30px; }
footer .topfooter > div { display: flex; flex-direction: column; min-width: 320px; width: 40vw; margin-bottom: 20px; }
footer .topfooter .left img { width: 10vw; min-width: 320px; margin-bottom: 25px; }
footer .topfooter .right .linkedin { display: block; margin-bottom: 15px; background-image: url("/img/LI-In-Bug.png"); background-size: contain; width: 36px; height: 36px; color: rgb(126, 169, 219); align-items: flex-end;  }
footer .topfooter .right { align-items: flex-end; }

@media screen and (max-width: 900px) {
    footer { padding: 40px 2vw 10px;}
}   
@media screen and (max-width: 700px) {
    footer { padding: 25px 1vw 5px; }
    footer .topfooter { padding-bottom: 10px; } 
    footer .topfooter .left, footer .topfooter .right { width: 100%; align-items: center; }
    footer .bottomfooter { text-align: center;}
}

/*  */

/*  */

/* HOME */
/* score */
#score { margin: 35px; }
#score div { align-items: baseline; }
#score span { font-size: 10px; color: rgb(112, 117, 122); }
#score-img { width: 120px; }
#score-origin { height: 32px; margin-right: 1rem; }
/* quote */
#quote { border-radius: 20px; background-color: #5FA9B7; padding: 15px 15px 5px; position: relative; overflow: hidden;}
#quote q::before, #quote q::after { background: url("/img/wecrm/quote@2x.png") center no-repeat; height: 80px; background-size: contain;  content: ' '; position: absolute; width: 150px; }
#quote q::before { top: -10px; right: -10px; }
#quote q::after {  bottom: -10px; left: -10px; }
/* article */
article { padding: 20px 0 80px; }
.articles { align-items: stretch;  margin-bottom: 10px; }
.articles .article { max-width: 400px;  margin: 20px auto; border-radius: 20px; }
.articles .article h4 {margin-bottom: 0;}
/* avantages */
#avantages .article p {flex-grow: 1; display: flex; align-items: flex-end;}
/* prices */
#tarification .article { border: 2px solid #1B3450; align-items: flex-start; max-width: 350px; padding: 20px; }
#tarification .article > p:last-of-type { flex-grow: 1; line-height: 1.2em;}
#tarification { margin-top: 35px; }
/* utilities */
#utilities { flex-direction: row-reverse;}
#utilities > div { align-items: flex-start; text-align: left; }
#utilities > div > * { max-width: 35vw; margin: 0 0 30px; }
#utilities > * { width: 40vw; height: fit-content;}
@media screen and (max-width: 900px) {
    #utilities > img, #utilities > div { width: 85vw; align-items: center; text-align: center; }
    #utilities > div > * { max-width: unset; }
}
@media screen and (max-width: 700px) {
    #utilities > div > p { text-align: left; }
}
/* faq */
#faq { margin-bottom: 75px;}
#faq details { padding: 0 50px; border-radius: 20px; margin-bottom: 25px; border: 2px solid #1B3450; position: relative; }
#faq details summary { line-height: 5rem; text-wrap: nowrap; text-overflow: ellipsis; overflow: hidden; cursor: pointer; list-style-type: none; }
#faq details summary::-webkit-details-marker { display: none; }
#faq details summary::before { content: '+'; cursor: pointer; font-family: "Poppins", serif; font-size: 36px; font-weight: 500; position: absolute; width: 50px; right: 0; top: 0;  height: 100%; display: flex; align-items: center;}
#faq details summary::after { content: ' '; cursor: pointer; width: 50px; position: absolute;height: 100%; left: 0; top: 0; }
#faq details[open] summary::before { content: '-';}

@media screen and (max-width: 700px) {
    #faq details { padding: 25px 50px; } 
    #faq details summary { line-height: 1.5rem; text-wrap: wrap; }
}

/*  */


/* LOGIN */