:root {
	--principale:#3C526A;
	--secondaire:#90C339;
	--table-th:#3C526A;
	--table-tr-even:#F4F4F4;
	--table-tr-odd:#E4E4E4;
	--table-tr-hover:#D4D4D4;
	--bg:#F6F9FC;
	--btn:#01112F;
	--btn-hover:white;
	--red:#BB162B;
	--green:#4CAF50;
	--blue:#1E88E5;
	--yellow:#FFEB3B;
	--pink:#E91E63;
	--violet:#9C27B0;
	--orange:#FF9800;
	--focus:#2154F5;
	--trainer:#2154F5;
	--school:#36C1CB;
	--input-border:#D1D5DB;
	--input-color:#0A2540;
	--input-bg:#FDFDFD;
	--input-selected:#0A2540;
	--text:#0A2540;
	--pro-blue:#2154f5;
	--pro-dark-blue:#0f2a52
}
*{-webkit-tap-highlight-color:transparent;scrollbar-width:none}
*::-webkit-scrollbar{display:none}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus{
  background-color:var(--input-bg) !important;
  -webkit-box-shadow:0 0 0px 1000px var(--input-bg) inset !important;
  box-shadow:0 0 0px 1000px var(--input-bg) inset !important;
  -webkit-text-fill-color:var(--input-color) !important;
  color:var(--input-color) !important;
}
html{height:100%;scroll-behavior:smooth}
body, html{touch-action: pan-y}
body{margin:0px;font-family:Poppins,sans-serif;font-weight:normal;font-size:16px;height:100%;overflow-x:hidden;user-select:none;overflow-x:hidden;line-height:1.6;background:white;color:var(--text)}
body.overflow{overflow:hidden}
br{clear:both}
h1,h2,h3{clear:both;padding:0px;margin:0px}
h1 span{text-transform:uppercase;font-size:35px;font-size:800}
a,input,select,textarea{font-family:inherit}
a{color:white}
input[type="text"],input[type="password"],input[type="email"],input[type="url"],input[type="search"],input[type="tel"],input[type="number"],input[type="range"]{-webkit-appearance:none;outline:none}
table{width:100%;margin-bottom:10px}
th{background:var(--table-th);color:white;border:1px solid white;text-align:center;padding:4px;padding-top:6px;padding-bottom:6px;font-weight:bold}
th:first-child{font-style:normal;width:20px}
th:last-child{width:105px}
tr{background:var(--table-tr-even)}
td{padding:4px;padding-top:8px;padding-bottom:8px;line-height:22px;color:black}
td:last-child{text-align:right}
tr:nth-child(odd){background:var(--table-tr-odd)}
tr:hover{background:var(--table-tr-hover)}
.exit{position:absolute;background:url(../img/arrow-back-white.png) no-repeat left;background-size:contain;width:50px;height:50px;top:10px;left:10px;cursor:pointer;z-index:2}
.alignCenter{text-align:center}
.largeur{position:relative;max-width:1210px;padding-left:15px;padding-right:15px;margin:auto}
.content{position:relative;max-width:980px;padding-left:30px;padding-right:30px;margin:auto;}
.bg-title{display:inline-block;font-weight:600;line-height:1;color:black;text-decoration:none;transition:all 0.5s ease;margin:auto;cursor:pointer;background:#333333;/*background:linear-gradient(160deg,#333333 0%,#333333 30%,#444444 70%,#444444 100%);*/border-radius:10px;padding:10px;padding-top:5px;padding-bottom:5px}
.bg-title-li{position:relative;padding-right:25px}
.bg-title-li:after{position:absolute;content:"";top:0px;left:0px;bottom:0px;right:10px;background:url(../img/li-btn.png) no-repeat right;background-size:5px}

.block-info{display:flex;padding-top:50px;padding-bottom:50px;align-items:center;justify-content:center;text-align:center}
.block-info h2{text-transform:uppercase;text-align:center;font-size:40px;margin-bottom:40px}
.block-info img{width:100%;height:auto;margin-top:10px}
.block-info .title{font-size:18px;font-weight:bold;line-height:20px;height:40px;margin-top:5px}
.block-info .text{font-size:14px;font-weight:200;line-height:20px}
.question{position:relative;padding-right:22px}
.question:after{position:absolute;content:'';top:0px;right:0px;bottom:0px;width:30px;background:url(../img/notice.png) no-repeat right;background-size:contain}
#evenements{padding-top:50px;text-align:center}
.block-customers .title{font-size:20px;font-weight:200;line-height:25px;height:50px;margin-top:5px}
.uppercase{text-transform:uppercase}
.box{text-transform:uppercase;font-style:italic;margin:10px;margin-top:25px;padding:10px;border-radius:12px;border:1px solid #f2f2f2;box-shadow:3px 2px 3px rgba(0,0,0,0.5)}
.box .input-material.colors{padding-top:20px}
.box .color,.box .style{padding-bottom:72px}
.box .color{background:url(../img/picker-icon.png) no-repeat center left,url(../img/picker-icon.png) no-repeat center right}
.box .style{background:url(../img/type-icon.png) no-repeat center left,url(../img/type-icon-2.png) no-repeat center right}
.description{font-style:italic;font-size:20px;text-align:center}
.description.low{font-size:12px}
.relative{position:relative}
.relative .text{max-width:480px;margin-top:220px}
.block-create .create {position:relative;padding-bottom:10%;background:black}
.block-create .create::before{position:absolute;background:url(../img/phone-create.png) no-repeat center;background-size:contain;width:40%;top:-150px;bottom:-30px;content:""}
.block-create .create .yourQr{background:url(../img/your-qr.jpg) no-repeat center;background-size:cover}
.block-create .create .yourQr h3{color:black;text-align:right;font-size:50px;padding-top:10%;padding-bottom:10%;padding-right:20px;padding-left:40%}
.block-generate {background:black;padding-top:5%;padding-bottom:5%;color:#444B62}
.block-generate .qr-style{height:250px;margin-top:25px;background:url(../img/qr-style.png) no-repeat top center;background-size:contain}
.block-generate #generate-qrcode {margin-top:20px}
.block-generate #generate-qrcode img{display:block;margin:0 auto 0}
.block-generate .button{cursor:pointer;border:1px solid var(--principale);border-radius:25px;padding-top:15px;padding-bottom:15px;background:black;color:var(--principale);margin:0px auto 0px;margin-top:10px;width:80%;text-align:center}
.block-generate .button.button-wifi{background:black url(../img/wifi-button.png) no-repeat 20px center;background-size:25px 25px}
.block-generate .button.button-wifi:hover{background:var(--principale) url(../img/wifi-button-hover.png) no-repeat 20px center;background-size:25px 25px}
.block-generate .button.button-wifi.active{background:var(--principale) url(../img/wifi-button-hover.png) no-repeat 20px center;background-size:25px 25px}
.block-generate .button.button-text-link{background:black url(../img/link-button.png) no-repeat 20px center;background-size:25px 25px}
.block-generate .button.button-text-link:hover{background:var(--principale) url(../img/link-button-hover.png) no-repeat 20px center;background-size:25px 25px}
.block-generate .button.button-text-link.active{background:var(--principale) url(../img/link-button-hover.png) no-repeat 20px center;background-size:25px 25px}
.block-generate .button.button-pdf{background:black url(../img/pdf-button.png) no-repeat 20px center;background-size:25px 25px}
.block-generate .button.button-pdf:hover{background:var(--principale) url(../img/pdf-button-hover.png) no-repeat 20px center;background-size:25px 25px}
.block-generate .button.button-pdf.active{background:var(--principale) url(../img/pdf-button-hover.png) no-repeat 20px center;background-size:25px 25px}
.block-generate .button:hover{border:1px solid var(--principale);color:black;background:var(--principale)}
.block-generate .button.active{border:1px solid var(--principale);color:black;background:var(--principale)}
#popin-step0 .btn{margin-bottom:30px}
#popin-step0 .btn:after{content:">";font-size:24px;padding-left:5px}
#popin-step1 .btn{padding:10px 40px;font-size:24px;line-height:1;letter-spacing:1px;color:#F4F4F4;text-transform:uppercase;background:blue;border:1px solid #D3D2D2;margin-top:30px}
#popin-step1 .btn:after{content:">";font-size:24px;padding-left:5px;color:#62B08D}
#popin-step2 .btn{margin-top:20px}
#popin-step2 .btn:after{content:">";font-size:24px;padding-left:5px}
#backto-step0,#backto-step1,#backto-step2,#backto-step3{text-align:left;padding-left:10px;padding-bottom:10px;margin-top:10px;cursor:pointer}
#backto-step0:before,#backto-step1:before,#backto-step2:before,#backto-step3:before{content:"<";position:absolute;margin-left:-10px;font-size:10px;font-weight:300;line-height:24px}
#popin-step1 .btn:hover{border:1px solid #FCB664;background:#FCB664}
#popin-step1 .btn:hover:after{color:white}
#popin-step4 .text{padding-bottom:150px}
#popin-step3 .btn{margin-top:20px}
.bg-click{display:none;position:fixed;z-index:10001;top:0px;left:0px;bottom:0px;right:0px;background-color:rgba(0,0,0,0.1);cursor:pointer;text-decoration:none}
#bg-click{display:none;position:fixed;background:rgba(0,0,0,0.8);width:100%;height:100%;z-index:10000}
#popin-lost-password-valide.popin-li.mini{background:#FAFAFA url(../img/cadenas.png) center top 40px no-repeat;padding-top:60px}
#popin-inscription-valide.popin-li.mini{background:#FAFAFA url(../img/mail.png) center top 40px no-repeat;padding-top:60px}
.popin-header{font-weight:bold;text-align:left;background:#184C3E;border-top-left-radius:5px;border-top-right-radius:5px;padding:30px;padding-top:20px;padding-bottom:20px}
#popin-step0 .popin-header .lg-12{font-weight:500;font-size:21px;background:url(../img/h2.png) no-repeat left;padding-left:60px}
.popin-header .step{float:left;width:25%;position:relative;padding-top:10px;padding-bottom:30px}
.popin-header .step:before{content:' ';position:absolute;bottom:0;width:100%;height:2px;top:20px;left:-50%;box-sizing:border-box}
.popin-header .step:after{position:absolute;width:40px;height:40px;left:50%;left:calc(50% - 20px);top:0;z-index:1002;border-radius:50%;box-sizing:border-box;text-align:center;line-height:40px;margin:auto}
.popin-header .step2:before{background:linear-gradient(to right, #3da88d, #62b08d)}
.popin-header .step3:before{background:linear-gradient(to right, #62b08d, #9abc8d)}
.popin-header .step4:before{background:linear-gradient(to right, #9abc8d, #d6c88c)}
.popin-header .step.disabled:before{background:linear-gradient(to right, #D3D2D2, #D3D2D2)}
.popin-header .step1:after{content:"1";background:#3DA88D}
.popin-header .step2:after{content:"2";background:#62B08D}
.popin-header .step3:after{content:"3";background:#9ABC8D}
.popin-header .step4:after{content:"4";background:#D6C88C}
.popin-header .step.disabled:after{background:#D3D2D2}
.popin-container .error{display:none;color:red;font-weight:bold;padding:10px}
.popin-container .success{display:none;color:green;font-weight:bold;padding:10px}
.popin-li .error{display:none;color:var(--red);font-weight:bold;padding:10px}
.popin-li .success{display:none;color:var(--green);font-weight:bold;padding:10px}
.open-popin-login,.open-popin-lost-password,.open-popin-inscription,.open-popin-prestation{cursor:pointer}
.popin-li{display:none;position:fixed;left:0;right:0;top:0;bottom:0;background:var(--bg);z-index:10002;box-sizing:border-box;text-align:center}
.popin-li.mini{max-height:350px}
#popin-prestation{text-align:left}
#popin-inscription{text-align:center;padding-top:0px}
.popin-li a{text-decoration:none}
.popin-li a.open-popin-lost-password{display:block;text-align:right;margin-top:10px;font-size:18px}
.popin-li p{font-size:12px;margin-top:0px}
.popin-li .close-popin,.popin-li .close-popin-prestation{position:absolute;left:35px;background-image:url(../img/close-popin.png);margin:auto;width:25px;height:25px;margin-top:30px}
.popin-li .popin-content{margin:auto;overflow:auto;height:99%}
.popin-li .popin-bg{background:#FAFAFA;padding-top:20px;padding-bottom:20px;margin:20px;border-radius:10px}
.popin-li .popin-step-bg{padding-left:40px;padding-right:40px}
#popin-step3 .popin-step-bg{max-width:350px;margin:auto}
.popin-li .popin-content .popin-content-largeur{width:75%;max-width:500px;margin:auto}
.popin-li .popin-content .label-infos{font-size:12px;text-transform:uppercase;margin-top:10px}
.popin-li .popin-content .label-questions{text-align:left;font-size:14px}
.popin-li .popin-content .radio-questions{text-align:center}
.popin-li .popin-content .radioContainer{display:inline-block;line-height:20px;margin:10px;margin-bottom:20px;text-transform:uppercase;font-weight:300;color:#4BA778;font-size:13px}
.popin-li .popin-content input[type="radio"]{display:none}
.popin-li .popin-content .checkmark{float:left;width:18px;height:18px;margin-right:8px;border:1px solid #377765;border-radius:50%;cursor:pointer}
.popin-li .popin-content .checkmark:hover{border:1px solid #F4F4F4}
.popin-li .popin-content input[type="radio"]:checked ~ .checkmark{border:1px solid #F4F4F4;background:url(../img/radio-on.png) no-repeat center}
#validate-success{display:none;background:black;border-radius:5px;text-align:center;color:green;line-height:30px;padding-top:10px;padding-bottom:10px;margin-top:20px}
#validate-error{display:none;background:black;border-radius:5px;text-align:center;color:red;line-height:30px;padding-top:10px;padding-bottom:10px;margin-top:20px}
.popin-li .popin-btn{display:block;border:1px solid var(--principale);color:black;background-color:var(--principale);cursor:pointer;width:100%;box-sizing:border-box;line-height:50px;font-size:15px;padding:0px;border-radius:5px;text-decoration:none;margin-top:10px;font-weight:500;margin-bottom:30px}
.popin-li .popin-btn:hover{background-color:var(--principale);border:1px solid var(--principale);color:black}
#recharge .errorInput{border:2px solid red !important}
.popin-li .errorInput{border:2px solid red !important}
#popin-contact .errorInput{border:1px solid red !important}
#user-connected .errorInput{border:1.5px solid red !important}
.popin-li h3{font-size:30px;margin:auto;margin-top:20px;margin-bottom:10px;font-weight:500;color:white}
#popin-step1 h3,#popin-step2 h3,#popin-step3 h3,#popin-step4 h3{font-size:38px}
.popin-li .ou{text-align:center;overflow:hidden;margin-top:10px;margin-bottom:10px;font-weight:normal}
.popin-li .ou:before,.popin-li .ou:after{display:inline-block;content:'';width:25%;border-top:2px solid var(--principale);padding-bottom:4px}
.popin-li .ou:before{margin-left:0px;margin-right:10px}
.popin-li .ou:after{margin-right:0px;margin-left:10px}
.popin-li .filter-item{margin-top:10px;margin-bottom:10px}
.popin-fb{background:#3B5998 url(../img/btn-fb.png) no-repeat left 5px center;background-size:32px 32px;display:block;width:100%;min-width:150px;cursor:pointer;color:#FFFFFF;box-sizing:border-box;border-radius:5px;padding:15px 7px;padding-left:36px;font-weight:bold;font-size:12px;border:1px solid #3B5998;margin:auto;margin-top:20px}
.popin-fb:hover{background-color:#4F6AA3;border:1px solid #4F6AA3}
.popin-gm{background:url(../img/btn-gmail.png) no-repeat left 5px center;background-size:32px 32px;display:block;width:100%;min-width:150px;cursor:pointer;color:var(--principale);box-sizing:border-box;border-radius:5px;padding:15px 10px;padding-left:40px;font-weight:bold;font-size:12px;border:1px solid var(--principale);margin:auto;margin-top:20px}
.popin-gm:hover{background-color:var(--principale);border:1px solid var(--principale);color:black}
#popin-step0,#popin-step1,#popin-step2,#popin-step3,#popin-step4{position:fixed;padding:0px;width:56%;left:23%;top:10%;max-height:85%;overflow-y:auto}
#popin-details{box-sizing:border-box;display:none;position:fixed;width:50%;left:25%;top:5%;max-height:90%;overflow-y:auto;color:var(--principale);background:#F4F4F4;padding:25px;padding-top:0px;padding-bottom:40px;border:5px solid #007236;border-radius:5px}
#popin-details ul{list-style:none;line-height:27px;margin-top:20px;margin-left:20px;padding:0px;font-size:17px;text-align:justify}
#popin-details ul li{background:url(../img/thick.png) no-repeat top left;padding-left:40px;min-height:27px;margin-top:10px}
#popin-details strong{display:block;text-align:center;padding-top:20px;padding-bottom:30px}
#menu-right-hover .icon-instagram,#menu-right-hover .icon-whatsapp,#menu-right-hover .icon-mail,#menu-right-hover .icon-facebook{background:url(../img/icon-social.png) no-repeat;width:23px;height:22px;float:left;margin-left:5px}
#menu-right-hover .icon-instagram{margin-left:0px}
#menu-right-hover .icon-whatsapp{background-position:-23px 0px}
#menu-right-hover .icon-mail{background-position:-46px 0px}
#menu-right-hover .icon-facebook{background-position:-69px 0px}
header{position:absolute;background:rgba(255,255,255,0.8);backdrop-filter:blur(12px);top:0px;left:0px;right:0px;padding-top:8px;padding-bottom:8px;z-index:10000;box-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05)}
header.home{position:sticky}
header #menu .close-menu-mobile{display:none;background:url(../img/close-mobile.png) no-repeat center;background-size:contain;position:absolute;top:20px;right:20px;width:32px;height:32px;cursor:pointer}
header #menu.active-mobile .close-menu-mobile{display:block}
header{position:relative;width:100%;font-size:14px;box-sizing:border-box}
header .largeur{height:100%}
header .logo{display:block;position:relative;background:url(../img/logo.png) no-repeat center;background-size:contain;width:60px;height:60px;margin:auto;margin-top:15px}
.popin-li .logo{display:block;margin:auto;margin-top:20px;background:url(../img/logo.png) no-repeat top;background-size:contain;width:100px;height:100px}
header .text{text-align:center;padding:10px;padding-top:50px;padding-bottom:40px;box-sizing:border-box}

header #menu{position:absolute;top:0px;right:0px;color:white;z-index:2;text-align:left;box-sizing:border-box;font-weight:15px}
header #menu #menu-container{margin-top:20px;line-height:30px}
header #menu .logo-mobile{display:none}
header #menu a.link,header #menu a.anchor,header #menu .menu-hover{display:inline-block;color:white;text-decoration:none;padding-left:10px;padding-right:10px;cursor:pointer}
header #menu a.anchor:first-child,header #menu .menu-hover:first-child{margin-left:0px}
header #menu-right{position:absolute;top:0px;right:0px;background:url(../img/menu-right-all.png) no-repeat top right;background-size:contain;width:100%;height:110px;z-index:2}
#homepage header #menu-right{background-image:url(../img/menu-right.png);width:65%;height:200px}


.bt_click{display:inline-block;margin-left:5px;margin-right:5px;background:var(--btn);color:white;padding:8px;padding-left:25px;padding-right:25px;margin-top:25px;line-height:25px;border-radius:8px}
.bt_click:hover{background:var(--btn-hover);color:black}
#hero-section{position:relative;padding-top:180px;padding-bottom:70px;background:var(--bg)}
#hero-section .content{text-align:center}
#hero-section h1{font-size:45px;font-weight:900}
#hero-section h2{font-size:45px;font-weight:900;background:linear-gradient(to right, var(--trainer), var(--school));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent}
#hero-section p{max-width:720px;margin:auto;margin-top:20px;font-size:20px}
#hero-section .hero-stats{margin-top:20px}
#hero-section .hero-stats strong{display:block;margin-top:30px}
#hero-section .hero-stats small{display:block}
#comment-ca-marche{padding-top:50px;text-align:center}
#comment-ca-marche h4{font-size:26px;margin-top:40px;margin-bottom:20px}
#comment-ca-marche p{max-width:720px;margin:auto;margin-top:20px;font-size:18px}
#comment-ca-marche .steps{text-align:left}
#comment-ca-marche .steps h2{}
#comment-ca-marche .steps h2 span{color:var(--trainer)}
#comment-ca-marche #how-school.steps h2 span{color:var(--school)}
#comment-ca-marche .step{display:block}
#comment-ca-marche .step-icon{width:40px;height:40px;border-radius:50%;background:var(--bg);color:var(--trainer);font-weight:700;font-size:1.2rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
#comment-ca-marche #how-school .step-icon{color:var(--school)}
#comment-ca-marche .step-content h3{margin:0;font-size:1.1rem;font-weight:600}
#comment-ca-marche .step-content p{margin:0.25rem 0 0;font-size:0.95rem;line-height:1.5;color:#444}
#why-us{background:var(--bg);padding-top:40px;padding-bottom:40px}
#why-us h4{font-size:26px;text-align:center}
#why-us p{text-align:center}
#why-us .feature-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));margin-bottom:5rem}
#why-us .feature-grid p{text-align:left}
#why-us .feature-card{background:white;padding:1.5rem;border-radius:1rem;box-shadow:0 1px 3px rgba(0,0,0,0.1);transition:box-shadow 0.3s ease}
#why-us .feature-card:hover{box-shadow:0 5px 15px rgba(0,0,0,0.15)}
#why-us .feature-icon{width:3rem;height:3rem;border-radius:50%;background-color:#dbedff;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;color:var(--pro-blue)}
#why-us .feature-card h3{margin:0 0 0.5rem 0;font-size:1.125rem;font-weight:bold;color:var(--pro-dark-blue)}
#testimonial{background:var(--bg);padding-bottom:40px}
#testimonial .testimonial-slider{max-width:800px;margin:0 auto;position:relative;overflow:hidden}
#testimonial .testimonial-track{display:flex;transition:transform 0.5s ease-in-out}
#testimonial .testimonial-card{flex:0 0 100%;padding:1rem;box-sizing:border-box;text-align:center}
#testimonial .testimonial-card img{width:5rem;height:5rem;border-radius:50%;margin:0 auto 1rem}
#testimonial .testimonial-card p{margin:0.5rem 0}
#testimonial .testimonial-buttons{display:flex;justify-content:center;margin-top:1.5rem;gap:0.5rem}
#testimonial .testimonial-buttons button{width:0.75rem;height:0.75rem;border-radius:50%;border:none;background-color:#d1d5db;cursor:pointer}
#testimonial .testimonial-buttons button.active{background-color:var(--pro-blue)}

#pricing{padding:80px 20px;text-align:center}
#pricing h4{font-size:26px;text-align:center}
#pricing p{text-align:center}
#pricing .pricing-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:2rem;max-width:1200px;margin:0 auto}
#pricing .card{border:1px solid #e5e7eb;border-radius:1rem;padding:2rem;display:flex;flex-direction:column;transition:transform 0.3s, box-shadow 0.3s, border-color 0.3s;max-width:400px;margin:auto}
#pricing .card.popular{border-color:#2154f5;box-shadow:0 10px 25px rgba(33, 84, 245, 0.2);transform:scale(1.05)}
#pricing .popular-badge{display:inline-block;background-color:#2154f5;color:#fff;font-size:0.7rem;font-weight:bold;text-transform:uppercase;padding:0.25rem 0.75rem;border-radius:9999px;margin-bottom:1rem}
#pricing .card h3{font-size:1.25rem;font-weight:bold;color:#0b1e51;margin-bottom:0.5rem}
#pricing .price{margin-top:1rem;font-size:2rem;font-weight:800;color:#0b1e51}
#pricing .period{font-size:1rem;color:#6b7280;margin-left:0.25rem}
#pricing .features{margin-top:2rem;flex-grow:1;display:flex;flex-direction:column;gap:1rem;list-style:none;padding:0}
#pricing .feature-item{display:flex;align-items:flex-start;gap:0.75rem;font-size:0.95rem;color:#6b7280}
#pricing .check-icon{width:20px;height:20px;color:rgb(54, 193, 203);flex-shrink:0}
#pricing .cta-button{margin-top:2rem;padding:0.75rem 1rem;border-radius:0.5rem;font-weight:600;text-decoration:none;display:block;transition:background 0.3s, color 0.3s}
#pricing .cta-button.popular{background-color:#2154f5;color:#fff}
#pricing .cta-button.popular:hover{background-color:#1b44d6}
#pricing .cta-button.default{background-color:#dbeafe;color:#2154f5}
#pricing .cta-button.default:hover{background-color:#bfdbfe}
#final-cta-section{padding:5rem 0}
#final-cta-section .cta-box{background:linear-gradient(to right, var(--trainer), var(--school));border-radius:1rem;box-shadow:0 10px 15px rgba(0,0,0,0.1);color:white;padding:3rem;text-align:center}
#final-cta-section .cta-box p{margin-top:1rem;font-size:1.125rem;max-width:42rem;margin-left:auto;margin-right:auto;opacity:0.9}
#final-cta-section .cta-buttons{margin-top:2.5rem;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem}
#final-cta-section .cta-buttons button{padding:1rem 2rem;font-size:1.125rem;font-weight:600;border:0px;border-radius:0.5rem;cursor:pointer;transition:all 0.3s ease;box-shadow:0 4px 6px rgba(0,0,0,0.1);width:100%;max-width:300px}
#final-cta-section .cta-buttons button:hover{transform:scale(1.05)}
#final-cta-section .intervenant-btn{color:var(--trainer);background-color:white}
#final-cta-section .ecole-btn{color:white;background:var(--trainer)}
#faq h4{font-size:26px;text-align:center}
#faq p{text-align:center}
#faq .accordion-item{border-bottom:1px solid #e5e7eb;padding:1rem 0}
#faq .accordion-header{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:none;cursor:pointer;text-align:left;padding:0}
#faq .accordion-header h4{font-size:1.125rem;font-weight:600;display:flex;align-items:center;gap:0.5rem}
#faq .accordion-icon{width:1.5rem;height:1.5rem;transition:transform 0.3s;color:#2154f5}
#faq .accordion-content{overflow:hidden;max-height:0;transition:max-height 0.3s ease;margin-top:0.5rem;padding-left:2rem;padding-right:2rem;color:#6b7280}
#faq .accordion-content p{text-align:left}
#faq .accordion-content.open{max-height:1000px}
#faq .faq-title{margin-top:40px;margin-bottom:1rem}
#contact-us{text-align:center;padding-top:40px;padding-bottom:40px}
#contact-us .contact-button{margin-top:1.5rem;padding:0.75rem 2rem;font-weight:600;border-radius:0.5rem;color:#fff;background:linear-gradient(to right, #2154f5, #36c1cb);border:none;cursor:pointer;box-shadow:0 5px 15px rgba(0,0,0,0.1);transition:opacity 0.2s}
#contact-us .contact-button:hover{opacity:0.9}

.click-notice{cursor:pointer}
#btn-profil{position:absolute;top:15px;right:10px;background:url(../img/profil.png) no-repeat center;background-size:contain;height:30px;width:30px;cursor:pointer;transition:.3s}
#btn-profil.connected{background-image:url(../img/profil-hover.png);width:25px}
#breadcrumb{background:black;color:#34816E;font-size:12px;padding-top:80px;padding-bottom:10px;margin-bottom:10px}
#breadcrumb a{text-decoration:none;color:#143E28}
#breadcrumb a span{text-decoration:none;color:#143E28}
#breadcrumb .last{text-decoration:none;color:#34816E}
#presentation{background:url(../img/bg-who.png) no-repeat top right;background-size:38%;padding-top:85px;padding-bottom:100px}
#presentation h3{font-weight:600;font-size:30px}
#presentation .btn{width:235px;height:49px;line-height:49px;padding-left:20px;font-weight:bold;font-size:15px;box-sizing:border-box;margin-top:50px;border-radius:50px}
#presentation .btn:after{position:absolute;content:"";top:0px;left:0px;bottom:0px;right:10px;background:url(../img/li-btn.png) no-repeat right;background-size:8px}
#presentation .btn.btn-offre{margin-left:20px}
#contact{background:url(../img/bg-contact.png) no-repeat bottom right;background-size:500px;padding-bottom:120px}
#contact h3{font-size:38px;font-weight:bold;margin-bottom:20px}
#contact .label{display:inline-block}
#contact .text{display:inline-block}
#begin{background:var(--principale) url(../img/scan.png) no-repeat center;background-size:auto 60%;height:64px;width:80px;margin-top:20px;border:0px;box-sizing:border-box}
#begin:hover{background-color:var(--bg);border:1px solid white}
#customers{padding-top:20px}
.customer{display:block;width:auto;margin-top:50px;line-height:30px;/*background:url(../img/rubber-bracelets.png) no-repeat top;background-size:auto 180px;*/box-shadow:0 2px 10px #FFFFFF88}
.customer .title small{display:block;font-weight:400;font-size:15px;line-height:20px}
.customer .largeur{position:relative;height:100%}
.customer .title{position:relative;padding-top:20px;text-align:center;font-weight:500;font-size:18px;background:none no-repeat left;background-size:contain;font-size:30px}
/*.customer .title:before{position:absolute;content:'';top:0px;right:0px;left:0px;height:170px;background:url(../img/bracelet-en-vinyle.jpg) no-repeat center;background-size:contain}*/
.customer .balance{line-height:25px;text-align:center;font-weight:500;font-size:16px;padding-top:10px;padding-bottom:10px}
.customer .balance span{color:var(--principale);line-height:50px;text-align:center;font-weight:bold;font-size:50px}
.customer-details{position:relative;padding:10px;padding-left:15px;padding-right:15px;max-width:500px;border-radius:5px;text-align:left;color:white;margin-top:20px;margin-bottom:20px;box-shadow:0px 0px 10px 5px #00000022;line-height:35px}
.customer-details .title{font-weight:500;font-size:25px;padding-top:10px;padding-bottom:10px}
.customer-details .title small{display:block;font-weight:400;font-size:15px;line-height:20px}
.customer-details .balance{position:absolute;top:10px;right:15px;line-height:20px;text-align:right;font-weight:400;font-size:16px}
.customer-details .balance span{display:block;color:var(--principale);line-height:35px;text-align:center;font-weight:bold;font-size:35px}
.flexbox{display:flex;text-align:center}
.flexbox .flex-btn{position:relative;display:inline-block;width:100%;background:var(--bg) none no-repeat center;cursor:pointer;box-sizing:border-box;border-top:1px solid #FFFFFF88}
.flexbox .flex-btn:hover{background-color:var(--principale)}
.flexbox .flex-btn.recharge{background-color:var(--principale)}
.flexbox .flex-btn.recharge:hover{background-color:var(--bg)}
.flexbox .flex-btn.transactions{border-left:1px solid #FFFFFF88;border-right:1px solid #FFFFFF88}
.flexbox .flex-btn:before{position:absolute;content:"";top:0px;right:0px;left:0px;height:50px;background:none no-repeat center;background-size:auto 70%}
.flexbox .flex-btn.recharge:before{background-image:url(../img/credit-card.png)}
.flexbox .flex-btn.transactions:before{background-image:url(../img/transactions.png)}
.flexbox .flex-btn.history:before{background-image:url(../img/history.png)}
.flexbox .flex-btn h3{font-weight:300;color:white;padding-top:60px;padding-bottom:10px;font-size:14px;font-weight:500;line-height:20px}
.step{display:none}
.step#step1{display:block}
.tiles{position:relative;display:block;background:black;margin-top:10px;padding:10px;border-radius:2px;text-align:center;box-sizing:border-box;text-decoration:none;}
.tiles .title{font-weight:700;height:50px;line-height:25px}
.tiles .number{font-size:28px;font-weight:bold}
.tiles:before{position:absolute;content:'';top:15px;left:0px;right:0px;width:64px;height:64px;margin:auto;background:none no-repeat center;background-size:70%;border-radius:50%}
.tiles span{display:block}
footer{background:var(--text);color:white;font-size:15px;font-weight:300;text-align:center;line-height:40px;padding-top:30px;padding-bottom:10px;box-shadow:0 4px 20px #FFFFFF88}
footer .logo{display:block;position:relative;background:url(../img/logo.png) no-repeat center;background-size:contain;max-width:204px;height:60px;margin:auto}
footer .links{text-transform:uppercase;padding-top:15px;margin-bottom:15px}
footer .links a{padding-left:5px;padding-right:5px;color:#e5e7eb;text-decoration:none}
footer .links a:hover{color:white}
footer #copyright{text-align:center;font-size:13px}
footer #link-terms{display:block;text-align:right;font-size:12px;color:black;text-decoration:none}
#qrcodes{padding-top:95px}
#list{text-align:center}
#list .card-item{display:inline-block;width:100%;max-width:250px;position:relative;margin-top:15px;padding-top:15px;padding-top:15px;background:var(--principale);border:2px solid black;border-radius:20px;box-shadow:0px 0px 8px 0px rgba(0,0,0,0.6);margin-left:5px;margin-right:5px}
#information{display:inline-block;background:url(../img/information.png) no-repeat center;background-size:contain;width:36px;height:40px;margin-left:12px}
#home{display:inline-block;background:url(../img/home-white.png) no-repeat center;background-size:contain;width:36px;height:40px;margin-left:12px}
#settings{display:inline-block;background:url(../img/profile-white.png) no-repeat center;background-size:contain;width:36px;height:40px;margin-left:12px}
#logout{display:inline-block;background:url(../img/logout.png) no-repeat center;background-size:contain;width:36px;height:40px;margin-left:15px}
#footer-logged{position:fixed;bottom:0px;left:0px;right:0px;background:var(--bg);box-shadow:0 4px 20px #FFFFFF88;padding:0px;box-sizing:border-box;text-align:right;display:flex;justify-content:space-between;align-items:center;text-align:center;color:white}
.order span{position:absolute;top:-4px;right:-4px;color:black;background:var(--red);padding:4px;padding-left:6px;padding-right:6px;line-height:1;font-weight:500;font-size:13px;border-radius:50%;z-index:100}
.qr .img{display:block;width:50%;margin:auto;text-align:center}
.qr .img img{display:inline-block;width:80%;height:auto;border-radius:50%}
.qr .text{margin-top:15px;text-align:center;font-size:13px;font-weight:500;color:black;line-height:15px}
.qr .text div:first-child{height:30px;overflow:hidden}
.qr .text div:last-child{font-weight:300;font-size:12px}
.pagination-container{text-align:center;height:30px;padding-left:10px;padding-right:10px;font-size:14px;border-top:3px solid var(--principale)}
.paginNum{display:inline-block;border:1px solid var(--principale);color:var(--principale);background:black;padding:2px;padding-left:5px;padding-right:5px;border-radius:3px;margin-top:10px;cursor:pointer;font-weight:500}
.paginNum.active,.paginNum:hover{font-weight:bold;border:1px solid var(--principale);color:black;background:var(--principale)}
.paginNum:hover{background:var(--secondaire)}
.no-results{background:url(../img/no-result.png) no-repeat top;background-size:200px;padding-top:230px;text-align:center;font-size:25px;font-weight:500}
.no-results.show-card{background-image:url(../img/id-card.png)}
.no-results.printing{background-image:url(../img/printing.png)}
#no-result{background:black;padding-top:80px;padding-bottom:50px;text-align:center}
#no-result h2,#no-result h2{background:url(../img/no-result.png) no-repeat top;background-size:160px;padding-top:180px;font-size:35px;font-weight:500}
.add-banner{line-height:60px;margin-top:20px;background:var(--principale);color:black;text-align:center;padding:20px;font-size:50px;font-weight:bold;box-sizing:border-box;cursor:pointer}
.add-banner-bg{margin-top:40px;height:500px;width:100%;background:url(../img/add-banner.jpg) no-repeat;background-size:cover}
.addclick{cursor:pointer}
.footer-flex{position:relative;flex:1}
.footer-btn{padding-top:56px;padding-bottom:10px;cursor:pointer;background:var(--btn)}
.footer-btn:hover{background:var(--btn-hover)}
.footer-btn div{padding-top:5px}
.footer-flex.ajout .footer-btn{background:var(--principale)}
.footer-flex.ajout .footer-btn:hover{background:var(--secondaire)}
.footer-flex:nth-child(2) .footer-btn{background:var(--btn-hover)}
.footer-flex:nth-child(2) .footer-btn:hover{background:var(--btn)}
.footer-btn:before{position:absolute;content:"";top:10px;left:0px;right:0px;height:46px;background:none no-repeat bottom;background-size:46px}
.footer-btn.order:before{background-image:url(../img/design.png)}
.footer-btn.design:before{background-image:url(../img/visiting-card.png)}
.footer-btn.addclick:before{background-image:url(../img/shopping-cart.png)}
.design-btn{display:inline-block;width:32px;padding-top:32px;background:var(--principale) url(../img/visiting-card.png) no-repeat center;background-size:70%;border-radius:50%;cursor:pointer}
.order-detail{display:inline-block;width:46px;height:46px;background:var(--principale) url(../img/edit-basket.png) no-repeat center;background-size:contain;border-radius:50%;cursor:pointer}
.design_card{display:inline-block;width:46px;height:46px;background:var(--principale) url(../img/edit-design.png) no-repeat center;background-size:contain;border-radius:50%;cursor:pointer}
.add.add-new-user{background-image:url(../img/new-user.png)}
.add.add-product{background-image:url(../img/cart.png)}
.edit,.delete,.more,.download,.print,.play,.pause,.color-picker,.file-btn,.link-btn,.word-btn,.editSite,.qr-code{display:inline-block;width:24px;height:24px;background:url(../img/edit.png) no-repeat center;cursor:pointer}
.edit{background-size:contain;border-radius:50% !important;border:2px solid black;width:32px !important}
.qr-code{background:url(../img/qr-code.png) no-repeat center;background-size:contain;border-radius:50% !important;border:2px solid black;width:32px !important}
.play{background:url(../img/play.png) no-repeat center;background-size:contain;border-radius:50% !important;border:2px solid black;width:32px !important}
.pause{background:url(../img/pause.png) no-repeat center;background-size:contain;border-radius:50% !important;border:2px solid black;width:32px !important}
.editSite{background:url(../img/edit-site.png) no-repeat center;background-size:contain;border-radius:50% !important;border:2px solid black;width:32px !important}
.delete{background:url(../img/delete.png) no-repeat center;background-size:20px}
.more{background:url(../img/more.png) no-repeat center}
.download{background:url(../img/download.png) no-repeat center;background-size:20px}
.print{background:url(../img/print.png) no-repeat center}
.color-picker{background:url(../img/color-picker.png) no-repeat center;background-size:20px}
.file-btn{background:url(../img/link.png) no-repeat center}
.link-btn{background:url(../img/word.png) no-repeat center}
.file-btn{position:absolute;top:15px;right:15px;width:24px;height:24px;background-color:black;border-radius:50%;background-size:12px;box-shadow:0px 0px 8px 0px rgba(0,0,0,0.6)}
.link-btn{position:absolute;top:15px;right:15px;width:24px;height:24px;background-color:black;border-radius:50%;background-size:12px;box-shadow:0px 0px 8px 0px rgba(0,0,0,0.6)}
.word-btn{position:absolute;top:15px;right:15px;width:24px;height:24px;background-color:black;border-radius:50%;background-size:12px;box-shadow:0px 0px 8px 0px rgba(0,0,0,0.6)}
.flex-container{margin:15px;text-align:center}
.flex-container > div,.flex-container > a{display:inline-block;border-radius:5px;height:32px;cursor:pointer}

.input-material{position:relative;box-sizing:border-box;margin-top:15px}
.input-material input,.input-material textarea{display:block;border:1px solid var(--input-border);background:var(--input-bg);box-shadow:0 1px 2px rgba(0,0,0,0.05);font-family:inherit;font-size:14px;color:var(--input-color);width:100%;height:37px;padding:5px;box-sizing:border-box;border-radius:5px}
.input-material input.date{background:url(../img/date.png) no-repeat right;background-position:right 10px center;background-size:auto 60%}
.input-material input.time{background:url(../img/date.png) no-repeat right;background-position:right 10px center;background-size:auto 60%}
.input-material input.datetime{background:url(../img/date.png) no-repeat right;background-position:right 10px center;background-size:auto 60%}
.input-material textarea{line-height:18px;height:auto;resize:none;padding:7px 5px;outline:none;appearance:none;-webkit-appearance:none;-moz-appearance:none}
.input-material label{position:absolute;left:5px;top:5px;line-height:30px;font-size:13px;color:var(--input-color);transition:0.2s ease all;-moz-transition:0.2s ease all;-webkit-transition:0.2s ease all}
.input-material input:focus ~ label,.input-material textarea:focus ~ label{background:var(--input-bg);top:-7px;line-height:9px;font-size:9px;font-weight:normal;padding:2px}
.input-material input:focus,.input-material textarea:focus{border-color:var(--focus)}
.input-material input:valid ~ label,.input-material textarea:valid ~ label{background:var(--input-bg);top:-7px;line-height:9px;font-size:9px;font-weight:normal;padding:2px}
.input-material input:disabled,.input-material textarea:disabled{background:#ECECEC}
.input-material input:disabled ~ label,.input-material textarea:disabled ~ label{background:var(--input-bg);top:-7px;line-height:9px;font-size:9px;font-weight:normal;padding:2px}
.input-material label.required:after{position:absolute;content:" *";color:red;font-weight:bold;background:var(--input-bg);height:9px;top:0px;margin-left:2px;padding-right:2px}

.input-material input::placeholder,.input-material textarea::placeholder{color: transparent;transition:color 0.2s ease}
.input-material input:focus::placeholder,.input-material textarea:focus::placeholder{color:#AAA}
.show-material{position:relative;border-radius:2px;box-sizing:border-box;margin-top:10px}
.show-material div{display:block;outline:none;border:1px solid var(--principale);font-family:inherit;font-size:13px;font-weight:bold;color:var(--principale);width:100%;min-height:47px;padding:5px;padding-top:15px;line-height:25px;box-sizing:border-box}
.show-material div.date{background:url(../img/date.png) no-repeat right;background-position:right 10px center;background-size:auto 60%}
.show-material label{position:absolute;left:5px;top:5px;line-height:9px;font-size:9px;font-weight:normal;color:#8A8A8A;transition:0.2s ease all;-moz-transition:0.2s ease all;-webkit-transition:0.2s ease all}

.custom-select{position:relative;text-align:left;color:var(--input-color);height:37px;font-size:14px;padding-right:25px;border-radius:2px;border:1px solid var(--input-border);box-sizing:border-box;margin-bottom:10px;background:var(--input-bg) url(../img/select.png) no-repeat right;background-position:right 10px center;cursor:pointer;margin-top:10px}
.custom-select select{display:none}
.custom-select label{position:absolute;left:5px;top:5px;line-height:10px;font-size:10px;font-weight:normal;color:#444B62}
.custom-select label.required:after{position:absolute;content:"*";color:red;font-weight:bold}
.select-selected{line-height:27px;padding:5px;black-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.select-items{position:absolute;background:var(--input-bg);color:var(--input-color);content:"";top:100%;left:-0.5px;right:-1px;z-index:7001;max-height:200px;overflow-y:auto;border:1px solid var(--input-border);border-top:0px;border-bottom-left-radius:2px;border-bottom-right-radius:2px}
.select-items div{position:relative;padding-left:5px;padding-right:5px;line-height:36px;cursor:pointer}
.select-items div.select-status{padding-right:40px}
.select-items div.select-status:after{position:absolute;content:"";top:3px;right:5px;width:30px;height:30px;border-radius:50%;background-repeat:no-repeat;background-position:center}
.select-items div:hover{background:#F4F4F4;color:black}
.select-hide{display:none}
.select-items div.round-button{position:relative;padding-left:25px}
.select-items div.round-button:after{position:absolute;content:"";width:8px;height:8px;top:14px;left:10px;border-radius:50%}
.select-items div.round-button.status-0:after,.custom-select.round-button.status-0:after{background:#444B62}
.select-items div.round-button.status-1:after,.custom-select.round-button.status-1:after{background:#3CC401}
.select-items div.round-button.status-2:after,.custom-select.round-button.status-2:after{background:#ED1B1B}
.select-items div.round-button.status-3:after,.custom-select.round-button.status-3:after{background:#FF9500}
.select-items div.round-button.product-status-0:after,.custom-select.round-button.product-status-0:after{background:#444B62}
.select-items div.round-button.product-status-1:after,.custom-select.round-button.product-status-1:after{background:#ED1B1B}
.select-items div.round-button.product-status-2:after,.custom-select.round-button.product-status-2:after{background:#FF9500}
ol{padding:0px}
.show-material{position:relative;border-radius:2px;box-sizing:border-box;margin-top:10px}
.show-material div{display:block;outline:none;border:1px solid #ECECEC;background:var(--bg);font-family:inherit;font-size:14px;font-weight:bold;color:var(--principale);width:100%;height:45px;padding:5px;padding-top:15px;line-height:25px;box-sizing:border-box}
.show-material div.date{background:url(../img/date.png) no-repeat right;background-position:right 10px center}
.show-material label{position:absolute;left:5px;top:5px;line-height:10px;font-size:10px;font-weight:normal;color:#8A8A8A;transition:0.2s ease all;-moz-transition:0.2s ease all;-webkit-transition:0.2s ease all}
.my-select-2{position:relative}
.my-select-2 label{position:absolute;left:5px;top:5px;line-height:10px;font-size:10px;font-weight:normal;color:#8A8A8A}
.my-select-2 label.required:after{position:absolute;content:"*";color:red;font-weight:bold}
.custom-select label{position:absolute;left:5px;top:5px;line-height:10px;font-size:10px;font-weight:normal;color:#8A8A8A}
.custom-select label.required:after{position:absolute;content:"*";color:red;font-weight:bold}
#popin,#popin2,#popin3,#popin4{display:none;position:fixed;left:0px;right:0px;top:/*106*/0px;bottom:0px;background:black;z-index:10002;box-shadow:8px 8px 20px rgba(0,0,0,0.6);box-sizing:border-box;text-align:center;padding-bottom:30px;overflow:auto}
#popin h1,#popin2 h1,#popin3 h1,#popin4 h1{margin-top:10px;line-height:50px}
#popin p,#popin2 p,#popin3 p,#popin4 p{margin-top:10px;line-height:50px;font-size:20px}
#popin .close,#popin2 .close,#popin3 .close,#popin4 .close{position:absolute;cursor:pointer;top:-16px;right:-16px;width:32px;height:32px;background:url(../img/croix.png) no-repeat bottom;background-size:100%}
#popin .close:hover,#popin2 .close:hover,#popin3 .close:hover,#popin4 .close:hover{background-position:top}
#popin .content,#popin2 .content,#popin3 .content,#popin4 .content{background:black;overflow:auto}
#popin .block-generate,#popin2 .block-generate,#popin3 .block-generate,#popin4 .block-generate{padding:0px}
#card_title{position:relative;display:block;margin:auto;max-width:210px;line-height:30px;font-size:13px;color:var(--principale);background:black;text-decoration:none;border-radius:20px;padding:15px;padding-top:80px;padding-bottom:15px;box-shadow:2px 2px 8px 0px rgba(0,0,0,0.1);text-align:center;margin-top:30px}
#card_title:before{position:absolute;content:"";top:15px;left:15px;right:15px;height:50px;background:url(../img/logo.png) no-repeat center;background-size:contain}
#card_no_title{position:relative;display:block;margin:auto;max-width:210px;height:30px;font-size:13px;color:var(--principale);background:black;text-decoration:none;border-radius:20px;padding:15px;padding-top:80px;padding-bottom:15px;box-shadow:2px 2px 8px 0px rgba(0,0,0,0.1);text-align:center;margin-top:30px}
#card_no_title:before{position:absolute;content:"";top:15px;left:15px;right:15px;bottom:15px;background:url(../img/logo.png) no-repeat center;background-size:contain}
.btn{display:inline-block;position:relative;cursor:pointer;border-radius:5px;background:var(--btn);border:1px solid #F4F4F4;margin:auto;margin-top:10px;text-align:center;line-height:25px;padding:8px;padding-left:20px;padding-right:20px}
.btn:hover{background-color:var(--btn-hover);color:black}
.btn:before{position:absolute;content:'';top:7px;left:7px;right:7px;bottom:7px}
.btn-phone,.btn-save,.btn-upload,.btn-upload-image{padding-left:50px}
.btn-save{background-color:var(--btn-hover)}
.btn-save:hover{background-color:var(--btn)}
.btn-save:before{background:url(../img/save.png) no-repeat left;background-size:contain}
.btn-upload:before{background:url(../img/upload.png) no-repeat left;background-size:contain}
.btn-upload-image:before{background:url(../img/upload-image.png) no-repeat left;background-size:contain}
.btn-phone:before{background:url(../img/call.png) no-repeat left;background-size:contain}
.btn span{display:block;padding:10px;padding-left:3px;line-height:30px;font-weight:500}
.btn-close{cursor:pointer;border:1px solid var(--btn);border-radius:25px;padding-top:15px;padding-bottom:15px;background:var(--btn);color:black;margin:0px auto 0px;margin-top:10px;width:80%;text-align:center}
.btn-close:hover{background:#981F1F;}
.btn_cta{display:inline-block;cursor:pointer;border-radius:5px;background:var(--btn-hover);color:black;margin:auto;margin-top:10px;line-height:25px;padding:25px;padding-top:8px;padding-bottom:8px;text-align:center;font-weight:bold}
.btn_cta:hover{background:var(--btn)}
.btn_portrait_mode{cursor:pointer;text-align:center}
.btn_landscape_mode{cursor:pointer;text-align:center}
.set_align,.set_font_size{display:inline-block;background:var(--btn) url(../img/align-left.png) no-repeat center;background-size:60%;width:40px;height:40px;cursor:pointer}
.set_align:hover,.set_font_size:hover{background-color:var(--btn-hover)}
.set_align.active{background-color:var(--btn-hover)}
.colorPickNoBg{background:#F0F0F0 url(../img/opacity.png) no-repeat center;background-size:65%;height:45px;width:45px;margin-top:10px;cursor:pointer}
.colorPickNoBg:hover{background-color:#E2E2E2}
.attention{position:relative;display:block;background:#F0F0F0;max-width:425px;margin:auto;padding:10px;padding-left:50px;text-align:left;font-weight:500;font-size:13px}
.attention:before{position:absolute;content:"";top:0px;left:7px;bottom:0px;width:36px;background:url(../img/warning.png) no-repeat left;background-size:contain}
.notice{position:relative;display:block;background:#F0F0F0;max-width:425px;margin:auto;padding:10px;padding-left:50px;text-align:left;font-weight:500;font-size:13px}
.notice:before{position:absolute;content:"";top:0px;left:7px;bottom:0px;width:36px;background:url(../img/notice-icon.png) no-repeat left;background-size:contain}
#yt-container{position:relative;width:460px;height:320px;margin:auto;display:flex;justify-content:center;align-items:center}
.yt{position:absolute;width:100%;height:100%;cursor:pointer}
.yt #yt-image{position:absolute;content:'';width:100%;height:100%;background:url(../img/video-promo.png) no-repeat right;background-size:contain}
.yt #youtubeEmbed{position:absolute;width:100%;height:100%;left:0px}
#colorpicker-form{position:relative;padding:0px;padding-left:120px;max-width:235px;margin:auto;margin-top:10px}
#colorpicker{position:absolute;left:0px;top:0px}
.farbtastic{position:relative;margin:auto}
.farbtastic *{position:absolute;cursor:crosshair}
.farbtastic,.farbtastic .wheel{width:120px;height:120px}
.farbtastic .color,.farbtastic .overlay{top:30px;left:30px;right:30px;bottom:30px}
.farbtastic .wheel{background:url(wheel.png) no-repeat;background-size:contain;width:120px;height:120px}
.farbtastic .overlay{background:url(mask.png) no-repeat;background-size:contain}
.farbtastic .marker{width:10px;height:10px;margin:-5px 0 0 -5px;overflow:hidden;background:url(marker.png) no-repeat;background-size:contain}
.show-type{display:none}
.show-type-1{display:block}
.choose-container{display:flex;justify-content:flex-start;gap:1rem}

.choose{line-height:42px;height:42px;text-align:center;margin-top:15px;position:relative;background:white;color:#AAA;border:1px solid #AAA;border-radius:10px;cursor:pointer;padding-left:20px;padding-right:20px;box-sizing:border-box}
.choose.active{border:1px solid var(--input-selected);color:var(--input-selected)}
.choose:after{display:none;position:absolute;content:"";width:20px;height:20px;background:var(--input-selected) url(../img/choose.png) no-repeat center;background-size:8px;border-radius:50%;right:-5px;top:-5px}
.choose.active:after{display:block}

.choose-multiple{line-height:42px;height:42px;text-align:center;margin-top:10px;position:relative;background:white;border:1px solid #AAA;color:#AAA;border-radius:10px;cursor:pointer;padding-left:10px;padding-right:10px;box-sizing:border-box;text-overflow:ellipsis;white-space:nowrap}
.choose-multiple:after{position:absolute;content:"";width:20px;height:20px;background:none no-repeat center;background-size:10px;border-radius:50%;right:-5px;top:-5px}
.choose-multiple.active{border:1px solid var(--input-selected)}
.choose-multiple.active:after{display:block;color:var(--input-selected);background-color:var(--input-selected);background-image:url(../img/choose.png)}

.choose-multiple.crossed{border:1px solid var(--red);color:var(--red)}
.choose-multiple.crossed.active{border:1px solid var(--green);color:var(--green)}
.choose-multiple.crossed:after{background-color:var(--red);background-image:url(../img/cross.png)}
.choose-multiple.crossed.active:after{background-color:var(--green);background-image:url(../img/choose.png)}
#drop-zone{display:block;text-align:center;height:92px;border:1px solid #ECECEC;border-radius:5px;box-sizing:border-box;clear:both;font-size:12px;font-weight:300;text-align:center;margin-top:10px}
#drop-zone #file-preview-one{float:left;background:url(../img/pdf.png) no-repeat center;width:92px;height:91px;border-right:1px solid #ECECEC;border-radius:5px;box-sizing:border-box}
#drop-zone .drag{display:block;height:92px;padding-top:60px;background:url(../img/drag.png) no-repeat top;background-position:top 20px center;box-sizing:border-box;cursor:pointer}
#drop-zone #file-preview-one ~ .drag{margin-left:92px}
#drop-zone .drag span{color:#444B62}
#drop-zone input{display:none}
#progress{height:5px}
#progress .progress-bar{background:blue;height:5px;width:0px;border-radius:3px}
#file-preview .img{float:left;position:relative;background-repeat:no-repeat;background-position:center;background-size:cover;width:48%;margin-left:1%;margin-right:1%;height:150px;border-radius:5px;margin-top:10px}
#file-preview .img.remove:after{position:absolute;z-index:2;content:"";top:0px;left:0px;width:100%;height:100%;background:rgba(255,0,0,0.5)}
#file-preview .img .remove-img{position:absolute;z-index:3;right:0px;top:0px;background:url(../img/admin/delete-img.png) no-repeat center;background-size:24px;margin:8px;width:24px;height:24px;cursor:pointer}
#file-preview-one .img{position:relative;background-repeat:no-repeat;background-position:center;background-size:cover;height:92px;border-radius:5px}
#file-preview-one .img.remove:after{position:absolute;z-index:2;content:"";top:0px;left:0px;width:100%;height:100%;background:rgba(255,0,0,0.5)}
#file-preview-one .img .remove-img{position:absolute;z-index:3;right:0px;top:0px;background:url(../img/admin/delete-img.png) no-repeat center;background-size:24px;margin:8px;width:24px;height:24px;cursor:pointer}
.add-element{width:64px;height:64px;display:inline-block;margin:2px;background:var(--principale) none no-repeat center;background-size:32px;border-radius:50%;cursor:pointer}
.add-element:hover{background-color:var(--btn)}
.add-element.cv-contact{background-image:url(../img/buttons/black/contact.png)}
.add-element.cv-website{background-image:url(../img/buttons/black/website.png)}
.add-element.cv-vcf{background-image:url(../img/buttons/black/vcf.png)}
.add-element.cv-fb{background-image:url(../img/buttons/black/fb.png)}
.add-element.cv-ig{background-image:url(../img/buttons/black/ig.png)}
.add-element.cv-favorites{background-image:url(../img/buttons/black/favorites.png)}
.add-element.cv-image{background-image:url(../img/buttons/black/image.png)}
.add-element.cv-map{background-image:url(../img/buttons/black/map.png)}
.add-element.cv-text{background-image:url(../img/buttons/black/text.png)}
.add-element.cv-video{background-image:url(../img/buttons/black/video.png)}
.add-element.cv-linkedin{background-image:url(../img/buttons/black/linkedin.png)}
.add-element.cv-tiktok{background-image:url(../img/buttons/black/tiktok.png)}
.add-element.cv-yt{background-image:url(../img/buttons/black/yt.png)}
.add-element.cv-twitter{background-image:url(../img/buttons/black/twitter.png)}
.add-element.cv-twitch{background-image:url(../img/buttons/black/twitch.png)}
.add-element.cv-pinterest{background-image:url(../img/buttons/black/pinterest.png)}
.add-element.cv-whatsapp{background-image:url(../img/buttons/black/whatsapp.png)}
.add-element.cv-behance{background-image:url(../img/buttons/black/behance.png)}
.add-element.cv-snapchat{background-image:url(../img/buttons/black/snapchat.png)}
.add-element.cv-vimeo{background-image:url(../img/buttons/black/vimeo.png)}
#popin-btns{display:none;justify-content:center;align-items:center;position:fixed;top:0px;right:0px;bottom:0px;left:0px;z-index:2;transition:.5s;background:#000000AA}
#popin-btns.active{right:650px}
#editlivesite iframe{position:absolute;border:0px;top:0px;height:100%;right:0px;width:0px;transition:.5s;z-index:4;background:white}
#editlivesite #edit-container{position:absolute;top:0px;bottom:0px;right:0px;left:0px;overflow:hidden;overflow-y:auto;padding:10px;transition:.5s}
#edit-container tr:hover{background:none}
#editlivesite #edit-card-container{position:absolute;top:0px;bottom:0px;right:0px;left:0px;overflow:hidden;overflow-y:auto;padding:10px;transition:.5s}
#editlivesite .close-iframe{position:absolute;right:0px;bottom:120px;width:45px;height:45px;z-index:3;cursor:pointer;background:var(--btn);transition:.5s}
#editlivesite.active .close-iframe{background:var(--btn-hover)}
#editlivesite .close-iframe:after{position:absolute;content:"";top:0px;left:0px;width:100%;height:100%;background:url(../img/close-iframe.png) no-repeat center;background-size:70%;transition:1s}
#editlivesite.active .close-iframe:after{transform:rotate(180deg)}
#editlivesite.active iframe{width:650px}
#editlivesite.active #edit-container{right:650px}
#editlivesite.active #edit-card-container{right:370px}
#editlivesite.edit_card.active iframe{width:370px}
#editlivesite.active .close-iframe{content:"";right:650px}
#editlivesite.edit_card.active .close-iframe{right:370px}
#editlivesite.editsite iframe{width:100%}
#editlivesite.editsite #edit-container{right:100%;overflow:hidden}
#editlivesite.editbtns iframe{width:0px;overflow:hidden}
#editlivesite.editbtns #edit-container{right:0px}
#editlivesite #choix-edition{position:fixed;bottom:0px;display:flex;left:0px;right:0px;transition:.5s}
#editlivesite.active #choix-edition{right:650px}
.color-holder{background:black;border:1px solid white;cursor:pointer;width:45px;height:45px;float:left;margin-top:10px;box-sizing:border-box}
.color-picker{display:none;width:192px;height:120px;background:#F3F3F3;padding:2px;position:absolute;top:60px;left:0px;z-index:2}
.color-picker .color-item{cursor:pointer;width:20px;height:20px;list-style-type:none;float:left;margin:2px;border:1px solid #DDD;box-sizing:border-box}
.color-picker .color-item:hover{border:1px solid #666}
.aL{text-align:left}
.aC{text-align:center}
.aR{text-align:right}
.container:before,.container:after,.row:before,.row:after,.annonce .head:before,.annonce .head:after,.annonce .content:before,.annonce .content:after{display:table;content:" "}
.clearfix:after,.container:after,.row:after,.annonce .head:after,.annonce .content:after{clear:both}
.lg-cinquieme{float:left;width:20%;position:relative;min-height:1px;padding-right:10px;padding-left:10px;box-sizing:border-box}
.xs-1,.sm-1,.md-1,.lg-1,.xs-2,.sm-2,.md-2,.lg-2,.xs-3,.sm-3,.md-3,.lg-3,.xs-4,.sm-4,.md-4,.lg-4,.xs-5,.sm-5,.md-5,.lg-5,.xs-6,.sm-6,.md-6,.lg-6,.xs-7,.sm-7,.md-7,.lg-7,.xs-8,.sm-8,.md-8,.lg-8,.xs-9,.sm-9,.md-9,.lg-9,.xs-10,.sm-10,.md-10,.lg-10,.xs-11,.sm-11,.md-11,.lg-11,.xs-12,.sm-12,.md-12,.lg-12{position:relative;min-height:1px;padding-right:10px;padding-left:10px;box-sizing:border-box}
.lg-1,.lg-2,.lg-3,.lg-4,.lg-5,.lg-6,.lg-7,.lg-8,.lg-9,.lg-10,.lg-11,.lg-12{float:left}
.lg-12{width:100%}
.lg-11{width:91.66666667%}
.lg-10{width:83.33333333%}
.lg-9{width:75%}
.lg-8{width:66.66666667%}
.lg-7{width:58.33333333%}
.lg-6{width:50%}
.lg-5{width:41.66666667%}
.lg-4{width:33.33333333%}
.lg-3{width:25%}
.lg-2{width:16.66666667%}
.lg-1{width:8.33333333%}
.lg-0{display:none}
@media screen and (max-width:1024px){
	header .largeur{height:auto}
	header.home{padding-bottom:50px;bottom:auto;height:auto;max-height:none;margin-bottom:0px}
	header.home .logo{position:relative;display:block;margin:auto}
	header.home h1{font-size:45px}
	header.home .content{width:90%}
	header.home .content p{font-size:15px}
	header .content{display:block;position:relative;top:auto;bottom:auto}
	header .video{display:flex;width:100%;text-align:center;align-items:flex-start;justify-content:center}
	header .video video{max-width:100%}
	header .text{margin:auto;width:100%;padding:10px;padding-top:40px;padding-bottom:40px;text-align:center}
	header .logo{background-position:center}
	header.logged .logo{background-position:left}
	header .text{padding-bottom:20px}
	header .video img{max-width:50%}
	header #menu-mobile{position:absolute;right:0px;width:60px;height:60px;top:0px;background:black;background:url(../img/burger.png) no-repeat center;background-size:32px;z-index:4;cursor:pointer}
	header #menu.active-mobile{display:block}
	header #menu a.anchor:first-child, header #menu .menu-hover:first-child{margin-top:100px;margin-left:20px}
	header #menu #login-container{display:none}
	header #menu a.link, header #menu a.anchor, header #menu .menu-hover{display:block;color:#505050}
	#pricing .pricing-grid{grid-template-columns:1fr}
	/*#popin,#popin2,#popin3,#popin4{top:77px}*/
	#confiance{display:none}
	#avantages{text-align:center}
	#avantages h2{font-size:18px}
	#avantages h3{font-size:25px}
	#carte-nfc-personalisee:before{top:0px;bottom:0px;left:0;right:0;margin:auto;width:90%;max-width:220px;background-position:top}
	#carte-nfc-personalisee .largeur{padding-top:220px;padding-bottom:50px}
	#presentation{background-image:none;padding-top:50px;padding-bottom:30px}
	#profil-web .largeur{padding-top:0px;padding-bottom:0px}
	#profil-web .img{align-items:center;position:relative;left:auto;right:auto}
	#profil-web .img img{position:relative;width:80%}
	#profil-web .text{padding-top:50px;text-align:center;margin:auto}
	#scan-nfc .text{text-align:center;padding-top:50px;margin:auto}
	#presentation .btn,#presentation .btn.btn-offre{display:block;width:200px;margin:0px;margin-top:20px}
	#presentation .btn.btn-offre{margin:0px;margin-top:10px}
	#contact h3{font-size:25px}
	#colorpicker-form{padding:0px;padding-top:120px}
	#colorpicker{right:0px}
	.xg-1,.xg-2,.xg-3,.xg-4,.xg-5,.xg-6,.xg-7,.xg-8,.xg-9,.xg-10,.xg-11,.xg-12{float:left}
	.xg-12{width:100%}
	.xg-11{width:91.66666667%}
	.xg-10{width:83.33333333%}
	.xg-9{width:75%}
	.xg-8{width:66.66666667%}
	.xg-7{width:58.33333333%}
	.xg-6{width:50%}
	.xg-5{width:41.66666667%}
	.xg-4{width:33.33333333%}
	.xg-3{width:25%}
	.xg-2{width:16.66666667%}
	.xg-1{width:8.33333333%}
	.xg-0{display:none}
	.block-info .img p {font-size:20px}
	.block-info .img h3{font-size:40px}
	.block-create .create .yourQr h3{font-size:30px;padding-bottom:5%;padding-right:10px}
	#editlivesite #edit-card-container{right:0px}
	#editlivesite.active #edit-card-container{right:100px}
	#editlivesite h1{text-align:center}
	#editlivesite.active iframe{width:500px}
	#editlivesite.active #edit-container{right:100px}
	#popin-btns.active{right:100px}
	#editlivesite.active .close-iframe{right:500px}
	#editlivesite.active #choix-edition{right:0px}
}
@media screen and (max-width:720px){
	body{font-size:15px}
	header.home{text-align:center}
	header.home h1{font-size:32px}
	header.home .content{width:98%}
	header.home .content p{font-size:14px}
	header #menu{background-size:contain}
	header .video img{max-width:60%}
	#final-cta-section .cta-buttons{flex-direction:column}
	#carousel-header .item div .img-container{margin-bottom:50px}
	#carousel-header .item div .img{background-position:center}
	#carousel-header .item .text{margin:auto;padding:10px;max-width:100%;text-align:center;box-sizing:border-box}
	#carousel-header .item .text h1, #carousel-header .item .text h2{font-size:25px}
	#carousel-header .item .text p{margin:auto;margin-top:20px;max-width:100%;font-size:15px}
	#carousel-header .item .slide{padding-top:120px}
	#presentation{background-size:450px;padding-top:30px;padding-bottom:580px}
	#presentation h3{font-size:25px}
	#customers .bg{height:120px}
	#contact{background-position:bottom;background-size:contain;padding-top:20px;padding-bottom:250px}
	header.home{height:auto}
	footer #copyright{text-align:center}
	footer #link-terms{text-align:center}
	.footer-btn div{font-size:13px}
	.relative .text{top:120px}
	.md-1,.md-2,.md-3,.md-4,.md-5,.md-6,.md-7,.md-8,.md-9,.md-10,.md-11,.md-12{float:left}
	.md-12{width:100%}
	.md-11{width:91.66666667%}
	.md-10{width:83.33333333%}
	.md-9{width:75%}
	.md-8{width:66.66666667%}
	.md-7{width:58.33333333%}
	.md-6{width:50%}
	.md-5{width:41.66666667%}
	.md-4{width:33.33333333%}
	.md-3{width:25%}
	.md-2{width:16.66666667%}
	.md-1{width:8.33333333%}
	.md-0{display:none}
	.block-generate .qr-style{display:none}
	.block-info .img h3{font-size:30px;padding:0px}
	.block-info .img.right{padding:5%;padding-top:60%;background-position:top;background-size:90%}
	.block-info .img{padding:5%;padding-top:60%;background-position:top;background-size:90%}
	#editlivesite.active iframe{width:80%;width:calc(100% - 90px)}
	#editlivesite.active #edit-card-container{right:0px}
	#editlivesite.active #edit-container{right:0px}
	#popin-btns.active{right:0px}
	#editlivesite.active .close-iframe{right:20%;right:calc(100% - 90px)}
}
@media screen and (max-width:480px){
	body{font-size:14px}
	header.home h1{font-size:20px}
	header .logo{height:60px}
	header.home .content p{font-size:12px}
	header .video img{max-width:80%}
	#presentation{background:none;background-size:220px;padding-bottom:10px}
	#customers .bg{height:100px}
	#contact{padding-bottom:200px}
	.footer-btn div{font-size:11px}
	.sm-1,.sm-2,.sm-3,.sm-4,.sm-5,.sm-6,.sm-7,.sm-8,.sm-9,.sm-10,.sm-11,.sm-12{float:left}
	.sm-12{width:100%}
	.sm-11{width:91.66666667%}
	.sm-10{width:83.33333333%}
	.sm-9{width:75%}
	.sm-8{width:66.66666667%}
	.sm-7{width:58.33333333%}
	.sm-6{width:50%}
	.sm-5{width:41.66666667%}
	.sm-4{width:33.33333333%}
	.sm-3{width:25%}
	.sm-2{width:16.66666667%}
	.sm-1{width:8.33333333%}
	.sm-0{display:none}
}
@media screen and (max-width:400px){
	.footer-btn div{display:none}
}
@media screen and (max-width:320px){
	body{font-size:13px}
	header .video img{max-width:95%}
	#presentation{background-size:180px}
	#customers .bg{height:120px}
	.xs-1,.xs-2,.xs-3,.xs-4,.xs-5,.xs-6,.xs-7,.xs-8,.xs-9,.xs-10,.xs-11,.xs-12{float:left}
	.xs-12{width:100%}
	.xs-11{width:91.66666667%}
	.xs-10{width:83.33333333%}
	.xs-9{width:75%}
	.xs-8{width:66.66666667%}
	.xs-7{width:58.33333333%}
	.xs-6{width:50%}
	.xs-5{width:41.66666667%}
	.xs-4{width:33.33333333%}
	.xs-3{width:25%}
	.xs-2{width:16.66666667%}
	.xs-1{width:8.33333333%}
	.xs-0{display:none}
}