.sticky-nav .header-button a {
    display: inline-block;
    color: #fff;
    padding: 10px 28px;
    border: 1px solid#fff;
    text-transform: capitalize;
    transition: 0.5s;
    font-size: 15px;
    position: relative;
    z-index: 1;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 5px;
    font-weight: 400;
}
.sticky-nav.nav-menu .header_tbn {
    position: relative;
    top: 4px;
    left: 60px;
}
/*<!-- ============================================================== -->
<!-- Start header-top Css -->
<!-- ============================================================== -->*/
.header-top {
    background: #2871FF;
    padding: 9px 0;
}
.header-left-text p {
    font-size: 14px;
    font-weight: 400;
    font-family: 'Cabin';
    margin: 0;
    color: #fff;
}
.header-icon-list {
    text-align: right;
}
.header-icon-list ul li {
    display: inline-block;
    list-style: none;
    margin-right: 10px;
    color: #fff;
}
.header-icon-list ul li a {
    font-size: 14px;
    display: inline-block;
    color: #fff;
    line-height: 26px;
}
/*<!-- ============================================================== -->
<!-- Start  main-header Css -->
<!-- ============================================================== -->*/
.main-header {
    position: relative;
    z-index: 99;
    padding: 0  50px 15px;
}
.nav-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.heder-menu ul li {
    display: inline-block;
    margin-right: 5px;
}
.heder-menu {
    display: inline-block;
    position: relative;
    right: -95px;
}
.heder-menu ul {
    display: block;
}
.heder-menu ul li a {
    display: inline-block;
    text-transform: capitalize;
    padding: 30px 20px 18px;
    transition: .5s;
    position: relative;
    font-size: 16px;
    line-height: 40px;
    color: #333F4F;
    font-weight: 500;
    font-family: "Cabin";
}
.heder-menu ul li a:hover {
    color: #2871FE;
}
.heder-menu ul li a:hover .icon::before {
    color: #2871FE;
}
.heder-menu ul li.icon {
    position: relative;
}
.heder-menu ul li.icon::before {
    content: "\f107";
    font-family: FontAwesome;
    font-size: 15px;
    opacity: 1;
    top: 37px;
    right: 5px;
    left: inherit;
    position: absolute;
    color: #8E9BAE;
}
.sticky-nav .heder-menu ul li.icon::before {
    color: #2871FE;
}
.header-button {
    margin-top: 15px;
    margin-left: 20px;
}
.header-button a {
    display: inline-block;
    color: #fff;
    font-weight: 400;
    padding: 10px 28px;
    text-transform: capitalize;
    transition: 0.5s;
    font-size: 16px;
    position: relative;
    z-index: 1;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 5px;
    background: #2871FE;
}
.header-button a:hover {
    color: #fff;
    background: linear-gradient(to left, #533efe, #740fd6);
}
.header_tbn {
    position: relative;
    top: 4px;
    left: 15px;
}
.header_tbn a {
    display: inline-block;
    font-size: 16px;
    line-height: 40px;
    color: #010e22;
    font-weight: 400;
    font-family: "Cabin";
    text-transform: capitalize;
}
.header_tbn a i {
    display: inline-block;
    font-size: 16px;
    color: #2771FF;
    font-weight: 800;
    margin-right: 5px;
}
/* sub-menu */
.heder-menu ul .sub-menu {
    top: 120px;
    height: auto;
    width: 200px;
    background: #fff;
    transition: .5s;
    visibility: hidden;
    display: block;
    padding: 15px 0px 12px;
    border-radius: 5px;
    position: absolute;
    box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 20%);
    opacity: 0;
}
.sub-menu ul {
    overflow: hidden;
    display: inherit;
}
.sub-menu ul li {
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: inherit;
    border-top: 1px solid #DEE1E6;
}
.heder-menu ul .sub-menu ul li a {
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    color: #616161!important;
    padding: 5px 7px 5px 25px;
    transition: .5s;
}
.heder-menu ul .sub-menu ul li:hover {
    background: #2771FF;
}
.heder-menu ul .sub-menu ul li:hover a {
    color: #fff!important;
}
.heder-menu ul li:hover .sub-menu {
    top:75px;
    visibility: visible !important;
    opacity: 1;
}
/*<!-- ============================================================== -->
<!-- Start  slider-area Css -->
<!-- ============================================================== -->*/
.slider-area {
    background: url(assets/images/hero-bg_3.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 800px;
    position: relative;
} 
.slider-content {
    padding: 0 0 40px;
    text-align: center;
}
.slider-title h1 {
    font-size: 60px;
    line-height: 75px;
    color: #010e22;
    font-weight: 700;
    font-family: "Cabin";
}
.slider-discription p {
    font-size: 16px;
    line-height: 28px;
    color: #616161;
    font-weight: 300;
    font-family: "Inter";
    width: 55%;
    text-align: center;
    margin: 0 auto 0;
}
.slider-button {
    margin-top: 53px;
    display: inline-block;
}
.slider-button a {
    font-size: 16px;
    color: #fff;
    padding: 22px 63px 22px 41px;
    background: #2871ff;
    border-radius: 5px;
    text-align: center;
    transition: .5s;
}
.slider-button a:hover {
    color: #fff;
    background: linear-gradient(to left, #533efe, #740fd6);
}
.slider-button a span {
    opacity: 0.302;
    font-size: 17px;
    line-height: 28px;
    color: #ffffff;
    font-weight: 500;
    font-family: "Cabin";
    position: relative;
    left: 30px;
    transition: .5s;
}
.slider-button a span::before {
    position: absolute;
    content: "";
    top: 10px;
    left: -25px;
    height: 2px;
    width: 17px;
    background: #ffffff;
    opacity: 1;
    transition: .5s;
}
.slider-area .hape-img {
    position: absolute;
    left: 5%;
    bottom: -52%;
}
.slider-area .hape-img-two {
    position: absolute;
    right: 11%;
    top: 106%;
}
/*<!-- ============================================================== -->
<!-- Start  section-title  Css -->
<!-- ============================================================== -->*/
.section-title {
    text-align: center;
    margin-bottom: 50px;
}
.main-title h1 {
    font-size: 42px;
    line-height: 56px;
    color: #010e22;
    font-weight: 700;
    font-family: "Cabin";
    text-align: center;
    margin: 0;
}
 .sub-title h5 {
    font-size: 18px;
    line-height: 26px;
    color: #2871ff;
    font-weight: 400;
    font-family: "Cabin";
}
.sub-title p {
    font-size: 16px;
    line-height: 28px;
    color: #616161;
    font-weight: 400;
    font-family: "Inter";
    margin: 20px 0 0;
}
/*<!-- ============================================================== -->
<!-- Start  breadcumb-area   Css -->
<!-- ============================================================== -->*/
.breadcumb-area {
    background: url(assets/images/hero-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 125px 0 110px;
}
.breacumb-content {
    text-align: center;
}
.breadcumb-title h1 {
    font-size: 56px;
    line-height: 75px;
    color: #010e22;
    font-weight: 700;
    font-family: "Cabin";
    text-align: center;
    text-transform: capitalize;
    margin-bottom: -10px;
}
.breadcumb-content-text a {
    display: inline-block;
    font-size: 16px;
    line-height: 75px;
    color: #2871ff;
    font-weight: 400;
    font-family: "Cabin";
    text-transform: capitalize;
    margin-left: -30px;
}
.breadcumb-content-text a span {
    font-size: 16px;
    line-height: 75px;
    color: #616161;
    font-weight: 400;
    font-family: "Cabin";
    position: relative;
    left: 35px;
}
.breadcumb-content-text a span::before {
    position: absolute;
    content: "";
    top: 11px;
    left: -28px;
    height: 1px;
    width: 17px;
    background: #2F71FF;
}
/*<!-- ============================================================== -->
<!-- Start  .service-area  Css -->
<!-- ============================================================== -->*/
.service-area {
    padding: 100px 0 100px;
}
.service-area .section-title {
    text-align: center;
    margin-bottom: 55px;
}
.service-area .single-service-box {
    padding: 50px 30px 45px;
    box-shadow: 0px 0px 40px 0px rgb(0 0 0 / 20%);
    border-radius: 5px;
    margin-bottom: 30px;
    transition: 0.5s;
    background: #fff;
}
.service-area .single-service-box:hover {
    margin-top: -10px;
}
.service-area .service-icon-img {
    text-align: center;
}
.service-area .service-title h3 {
    font-size: 22px;
    line-height: 50px;
    color: #010e22;
    font-weight: 600;
    font-family: "Cabin";
    text-align: center;
    margin: 27px 0 10px;
}
.service-area .service-discription p {
    font-size: 16px;
    line-height: 28px;
    color: #616161;
    font-weight: 400;
    font-family: "Inter";
    text-align: center;
    margin: 0;
}
 .service-area.style-two {
    background: #f7faff;
}
.service-area.style-two .single-service-box {
    padding: 40px 30px 35px;
}
.service-area.style-two .service-title h3 {
    font-size: 20px;
    margin-bottom: 5px;
}
.service-area.style-two .service-discription p {
    font-size: 15px;
    line-height: 25px;
}

.service-area.style_one .row.marg {
    margin-top: 50px;
}
.service-area.style_one .single-service-box.upper {
    position: relative;
    top: -50px;
}
.service-area.style_one .single-service-box {
    box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 15%);
    transition: .5s;
}
.service-area.style_one .single-service-box:hover {
    box-shadow: 0px 0px 40px 0px rgb(0 0 0 / 20%);
}
/*<!-- ============================================================== -->
<!-- Start  our-cards-section  Css -->
<!-- ============================================================== -->*/
.our-cards-section {
    padding: 100px 0 100px;
}
.our-cards-section .sub-title h5 {
    font-size: 18px;
    line-height: 26px;
    color: #2871ff;
    font-weight: 400;
    font-family: "Cabin";
    text-align: left;
}
.our-cards-section .row.bor-top {
    margin-top: 50px;
}
.single_cards .section-title {
    margin-bottom: 20px;
}
.our-cards-section .single_cards .main-title h1 {
    text-align: left;
}
.our-cards-section .cards-discription p {
    font-size: 16px;
    line-height: 28px;
    color: #616161;
    font-weight: 400;
    font-family: "Inter";
    margin: 0;
}
.our-cards-section .card-button {
    margin-top: 35px;
}
.our-cards-section .card-button a {
    display: inline-block;
    font-size: 17px;
    line-height: 28px;
    color: #010e22;
    font-weight: 500;
    font-family: "Cabin";
    text-transform: capitalize;
    border: 1px solid #010E22;
    padding: 14px 35px;
    border-radius: 5px;
    transition: 0.5s;
}
.our-cards-section .card-button a:hover {
    color: #fff;
    border: 1px solid #2771FF;
    background: #2771FF;
}
.our-cards-section .card-button a i {
    display: inline-block;
    margin-left: 5px;
}
.our-cards-section .single_cards .cards-thumb {
    position: relative;
    left: 115px;
}
.our-cards-section .single_cards .card-animation {
    position: absolute;
    bottom: 0;
    left: 45px;
}
.our-cards-section .single_cards .card-left-img {
    position: absolute;
    bottom: 100px;
    right: -23px;
}
.our-cards-section .single_cards .card-right-img {
    position: absolute;
    top: 90px;
    left: 50px;
}
/*<!-- ============================================================== -->
<!-- Start  .counter-area  Css -->
<!-- ============================================================== -->*/
.transaction-report {
    padding: 0px 0 100px;
}
.single-transaction .section-title {
    text-align: left;
    margin-bottom: 20px;
}
.single-transaction .main-title h1 {
    text-align: left;
}
.single-transaction .transaction-tmb {
    margin-left: -60px;
}
.single-transaction .transaction-tmb img {
    width: 100%;
}
.transaction-report .transaction-button {
    margin-top: 35px;
}
.transaction-report .transaction-button a {
    display: inline-block;
    font-size: 17px;
    line-height: 28px;
    color: #010e22;
    font-weight: 500;
    font-family: "Cabin";
    text-transform: capitalize;
    border: 1px solid #010E22;
    padding: 14px 35px;
    border-radius: 5px;
    transition: 0.5s;
}
.transaction-report .transaction-button a:hover {
    color: #fff;
    border: 1px solid #2771FF;
    background: #2771FF;
}
.transaction-report .transaction-button a i {
    display: inline-block;
    margin-left: 5px;
}
/*<!-- ============================================================== -->
<!-- Start  fintech-location-area  Css -->
<!-- ============================================================== -->*/
.fintech-location-area {
    padding: 100px 0 100px;
    background: url(assets/images/location-bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 750px;
    overflow: hidden;
}
.fintech-location-area .main-title h1 {
    margin: 0 0 17px;
}
.fintech-location-area .sub-title p {
    font-size: 16px;
    line-height: 28px;
    color: #616161;
    font-weight: 400;
    font-family: "Inter";
    margin: 0 auto 0;
    text-align: center;
    width: 50%;
}
.fintech-location-area .single-location {
    position: relative;
    z-index: 1;
}
.fintech-location-area .location-thumb {
    position: relative;
    height: 64px;
    width: 64px;
    border-radius: 100%;
    margin: auto;
    transition: .3s;
    right: 0;
    text-align: center;
}
.fintech-location-area .location-thumb-1 {
    position: absolute;
    top: 150px;
    right: 75px;
}
.fintech-location-area .location-thumb-2 {
    position: absolute;
    top: 150px;
    left: 75px;
}
.fintech-location-area .icon-box {
    text-align: left;
}
.fintech-location-area .location-thumb-3 {
    position: absolute;
    top: 300px;
    left: 19px;
    right: 0;
    text-align: center;
}
.fintech-location-area .contact-title h2 {
    font-size: 20px;
    margin: 0 0 20px;
    font-family: 'Cabin', sans-serif;
    line-height: 1.2;
    color: #1d2124;
    position: relative;
    z-index: 1;
    text-align: left;
}
.fintech-location-area .contact-title h2::before {
    position: absolute;
    content: "";
    height: 35px;
    width: 35px;
    line-height: 36px;
    top: -50px;
    left: 0;
    background: #fff;
    transform: rotate(45deg);
    z-index: -1;
}
.fintech-location-area .contact-icon {
    float: left;
    margin-right: 5px;
}
.fintech-location-area .contact-icon i {
    color: #6425E8;
    font-size: 24px;
    display: inline-block;
    font-weight: 600;
    margin-right: 13px;
    position: relative;
    top: 9px;
}
.fintech-location-area .icon-title h2 {
    font-size: 16px;
    font-weight: 400;
    color: #646464;
    display: inline-block;
    margin: 0 0 16px;
    line-height: 27px;
    text-align: left;
}
.fintech-location-area .contacts-boxs {
    padding: 34px 16px 18px 31px;
    box-shadow: 0 20px 50px rgb(229 229 229 / 80%);
    border-radius: 5px;
    background: #fff;
    position: absolute;
    top: 60px;
    visibility: hidden;
    width: 320px;
    transition: .3s;
    z-index: 1;
    opacity: 0;
    border-radius: 7px;
}
.fintech-location-area .location-thumb:hover .contacts-boxs {
    top: 50px;
    opacity: 1;
    visibility: visible;
}
.fintech-location-area .location-thumb-1:hover .contacts-boxs {
    top: 50px;
    opacity: 1;
    visibility: visible;
}
.fintech-location-area .location-thumb-2:hover .contacts-boxs {
    top: 50px;
    opacity: 1;
    visibility: visible;
}
.fintech-location-area .location-thumb-3:hover .contacts-boxs {
    top: 50px;
    opacity: 1;
    visibility: visible;
}
/*<!-- ============================================================== -->
<!-- Start  .counter-area  Css -->
<!-- ============================================================== -->*/
.counter-area {
    padding: 95px 0 95px;
}
.single-counter-box {
    padding: 55px 0px 30px 35px;
    transition: 0.5s;
}
.single-counter-box:hover {
    box-shadow: 0 2px 30px #0003;
}
.counter-title h1 {
    font-size: 28px;
    line-height: 0;
    color: #010e22;
    font-weight: 700;
    font-family: "Cabin";
    margin: 0 0 27px;
}
.counter-title h4 {
    font-size: 16px;
    line-height: 26px;
    color: #616161;
    font-weight: 300;
    font-family: 'Inter';
}
.connter-thumb {
    float: left;
    margin: -11px 15px 0 0;
}
/*<!-- ============================================================== -->
<!-- Start  fintech-about-section  Css -->
<!-- ============================================================== -->*/
.fintech-about-section {
    padding: 100px 0 100px;
}
.fintech-about-section .about_thumb {
    position: relative;
}
.fintech-about-section .about_tmb {
    position: absolute;
    top: 50px;
    left: 87px;
}
.fintech-about-section .about_thumb img {
    width: 100%;
}
.fintech-about-section .section-title {
    text-align: left;
    margin-bottom: 20px;
}
.fintech-about-section .main-title h1 {
    text-align: left;
}
.fintech-about-section .about-discription p {
    font-size: 16px;
    line-height: 28px;
    color: #616161;
    font-weight: 300;
    font-family: "Inter";
    text-align: left;
    margin: 0;
}
.fintech-about-section .about-buttin {
    margin-top: 30px;
}
.fintech-about-section .about-buttin a {
    display: inline-block;
    font-size: 17px;
    line-height: 28px;
    color: #010e22;
    font-weight: 500;
    font-family: "Cabin";
    text-transform: capitalize;
    border: 1px solid #010E22;
    padding: 14px 35px;
    border-radius: 5px;
    transition: 0.5s;
}
.fintech-about-section .about-buttin a:hover {
    color: #fff;
    border: 1px solid #2771FF;
    background: #2771FF;
}
.fintech-about-section .about-buttin a i {
    display: inline-block;
    margin-left: 5px;
}
/*<!-- ============================================================== -->
<!-- Start  fintech-brand-section  Css -->
<!-- ============================================================== -->*/
.fintech-brand-section {
    background: #F7FAFF;
    padding: 100px 0 40px;
}
.fintech-brand-section .main-title h1 {
    font-size: 24px;
    line-height: 50px;
    color: #010e22;
    font-weight: 600;
    font-family: "Cabin";
    text-align: center;
    margin: 0;
}
.fintech-brand-section .single-brand {
    margin-bottom: 60px;
}









/*<!-- ============================================================== -->
<!-- Start  team-area  Css -->
<!-- ============================================================== -->*/
.team-area {
    padding: 100px 0 70px;
    border-bottom: 1px solid #ECECEC;
}
.single-team {
    transition: .5s;
    margin-bottom: 30px;
}
.team-area .team-content {
    text-align: center;
    padding: 28px 0 0;
    border: 1px solid #ECECEC;
    transition: .5s;
}.team-area .team-content {
    text-align: center;
    padding: 28px 0 0;
    border: 1px solid #ECECEC;
    transition: .5s;
}
.team-area .team-thumb img {
    width: 100%;
}
.team-area .team-title h3 {
    font-size: 20px;
    color: #010e22;
    font-weight: 600;
    margin: 0 0 5px;
    line-height: 25px;
}
.team-area .team-text p {
    font-size: 15px;
    color: #616161;
    font-weight: 400;
    margin: 0;
    transition: .5s;
}
.team-icon ul {
    
}
.team-icon ul li {
    list-style: none;
    display: inline-block;
    margin-right: 5px;
}
.team-icon ul li a {
    display: inline-block;
    font-size: 15px;
    color: #818489;
    opacity: 0;
    transition: .5s;
    position: relative;
    top: -10px;
}
.single-team:hover .team-content{
    border: 1px solid #fff;
}
.single-team:hover .team-text p{
    opacity: 0;
}
.single-team:hover .team-icon ul li a{
    opacity: 1;
    top: -25px;
}
/*<!-- ============================================================== -->
<!-- Start  ceo-quote  Css -->
<!-- ============================================================== -->*/
.ceo-quote {
    padding: 100px 0 100px;
}
.row.back {
    background: url(assets/images/quote-bg.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 10px;
    padding: 55px 0 55px;
    text-align: center;
}
.quote-content {
    text-align: center;
}
.quote-text p {
    font-size: 22px;
    line-height: 34px;
    color: #ffffff;
    font-weight: 500;
    font-family: "Cabin";
    text-align: center;
    width: 80%;
    margin: 0 auto 35px;
}
.quote-thumb {
    display: inline-block;
    position: relative;
    right: 15px;
    top: -15px;
}
.quote-title {
    display: inline-block;
    text-align: left;
}
.quote-title h3 {
    font-size: 20px;
    line-height: 28px;
    color: #ffffff;
    font-weight: 600;
    font-family: "Cabin";
    margin: 0;
}
.quote-title span {
    font-size: 15px;
    line-height: 28px;
    color: #ffffff;
    font-weight: 400;
    font-family: "Inter";
}
/*<!-- ============================================================== -->
<!-- Start  team-intro  Css -->
<!-- ============================================================== -->*/
.team-intro-area {
    padding: 90px 0 90px;
}
.team-intro-area .section-title {
    margin-bottom: 20px;
}
.team-intro-area .team-intro-thumb img {
    width: 100%;
}
.team-intro-area .main-title h1 {
    text-align: left;
}
.team-intro-area .sub-title p {
    text-align: left;
}
.intro-icon ul li {
    list-style: none;
    display: block;
    font-size: 16px;
    line-height: 26px;
    color: #616161;
    font-weight: 300;
    font-family: "Inter";
}
.intro-icon ul li i {
    display: inline-block;
    font-size: 30px;
    color: #3779FF;
    position: relative;
    top: 6px;
}
/*<!-- ============================================================== -->
<!-- Start  .brand-area  Css -->
<!-- ============================================================== -->*/
.brand-area {
    padding: 100px 0 100px;
    background: #f7faff;
}
.brand-area .main-title h1 {
    font-size: 24px;
    font-weight: 600;
}
.brand-thumb {
    text-align: center;
}
.brand-area.style-two {
    padding: 75px 0 100px;
    background: none;
}
/*<!-- ============================================================== -->
<!-- Start  about-area  Css -->
<!-- ============================================================== -->*/
.about-area {
    padding: 120px 0 0;
}
.about-area .row.bottom {
    border-bottom: 1px solid #E9EBEC;
    padding-bottom: 16px;
}
.about-area .section-title {
    text-align: left;
    margin-bottom: 25px;
}
.about-area .main-title h1 {
    text-align: left;
}
.about-thumb {
    position: relative;
    top: -30px;
}
.about-title h3 {
    font-size: 18px;
    line-height: 45px;
    color: #010e22;
    font-weight: 500;
    font-family: "Cabin";
    margin: 0;
}
.about-icon {
    display: inline-block;
    margin: 0 6px 0 0px;
    position: relative;
    top: 7px;
}
.about-icon i {
    display: inline-block;
    color: #2D75FF;
    font-size: 30px;
    font-weight: 600;
}
.about-title {
    display: inline-block;
}
.about-discription p {
    font-size: 16px;
    line-height: 28px;
    color: #616161;
    font-weight: 400;
    font-family: "Inter";
    margin: 0 0 10px 37px;
}
/*<!-- ============================================================== -->
<!-- Start  mission-area  Css -->
<!-- ============================================================== -->*/
.mission-area {
    padding: 90px 0 90px;
}
.mission-area .section-title {
    text-align: left;
    margin-bottom: 26px;
}
.mission-area .main-title h1 {
    text-align: left;
}
.mission-icon {
    float: left;
    margin: 8px 20px 0 0;
}
.mission-icon i {
    display: inline-block;
    font-size: 18px;
    height: 20px;
    width: 20px;
    line-height: 21px;
    text-align: center;
    background: #2871FE;
    color: #fff;
    border-radius: 50%;
}
.mission-discription p {
    opacity: 0.800;
    font-size: 16px;
    line-height: 26px;
    color: #010e22;
    font-weight: 400;
    font-family: "Cabin";
    overflow: hidden;
    width: 70%;
}
.mission-button {
    position: relative;
    top: 35px;
}
.mission-button a {
    font-size: 17px;
    line-height: 28px;
    color: #ffffff;
    font-weight: 500;
    font-family: "Cabin";
    background: #2892FF;
    padding: 19px 41px;
    border-radius: 5px;
    transition: .5s;
}
.mission-button a:hover {
    color: #fff;
    background: linear-gradient(to left, #533efe, #740fd6);
}
.mission-button a i {
    display: inline-block;
    margin-left: 5px;
    transition: .5s;
}
.missions-content .mission-icon {
    float: left;
    margin: 0px 20px 0 0;
}
.missions-content .mission-icon i {
    display: inline-block;
    font-size: 27px;
    background: none;
    color: #2871FE;
}
.missions-content .mission-discription p {
    font-size: 16px;
    line-height: 24px;
    color: #010e22;
    opacity: 1;
}
.missions-persent {
    margin: 40px 25px 0 0;
    padding: 40px 0 0;
    border-top: 1px solid #E6E6E8;
}
.mission-bottom {
    display: inline-block;
}
.mission-number h2 {
    font-size: 42px;
    line-height: 28px;
    color: #010e22;
    font-weight: 700;
    font-family: "Cabin";
}
.mission-bottom.upper {
    display: inline-block;
    margin-right: 50px;
}
.mission-bottom .mission-text p {
    font-size: 16px;
    line-height: 28px;
    color: #616161;
    font-weight: 400;
    font-family: "Inter";
    margin: 0;
}
.mission-area.style-two .mission-thumb {
    position: relative;
    left: -40px;
}
.mission-area.style-two .mission-thumb img {
    width: 100%;
}
.mission-area.style-two .mission-discrip {
    margin-top: 28px;
    padding: 25px 0 0;
    border-top: 1px solid #E9EBEC;
}
.mission-area.style-two .mission-discrip p {
    font-size: 15px;
    line-height: 24px;
    color: #010e22;
    font-weight: 400;
    font-family: "Inter";
}
/*<!-- ============================================================== -->
<!-- Start  pricing-area  Css -->
<!-- ============================================================== -->*/
.pricing-area {
    padding: 100px 0 80px;
}
.single-tab {
    text-align: center;
}
.pricing-area .tab-title {
    display: inline-block;
    margin: 0 0 0 15px;
}
.pricing-area .tab-title h4 {
    font-size: 16px;
    line-height: 28px;
    color: #2871ff;
    font-weight: 400;
    font-family: "Cabin";
    text-align: center;
    margin: 0;
    padding: 7px 30px;
    border: 1px solid #E5E8ED;
    border-radius: 5px;
    transition: .5s;
}
.pricing-area .tab-title h3 {
    font-size: 16px;
    line-height: 28px;
    color: #010e22;
    font-weight: 400;
    font-family: "Cabin";
    text-align: center;
    margin: 0;
    padding: 7px 30px;
    border: 1px solid #E5E8ED;
    border-radius: 5px;
    transition: .5s;
}
.pricing-area .tab-title h4:hover {
    background: #58B0FF;
    color: #fff;
}
.pricing-area .tab-title h3:hover {
    background: #58B0FF;
    color: #fff;
}
.pricing-area .row.come {
    margin-top: 70px;
}
.pricing-area .single-pricing {
    padding: 30px 30px 35px 40px;
    box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 15%);
    background: #fff;
    transition: .5s;
    margin-bottom: 30px;
}
.pricing-area .pricing-title h3 {
    font-size: 24px;
    line-height: 28px;
    color: #010e22;
    font-weight: 600;
    font-family: "Cabin";
    margin-bottom: 15px;
}
.pricing-area .pricing-title h3 span {
    font-size: 13px;
    line-height: 28px;
    color: #2871ff;
    font-weight: 400;
    background: #EFF6FF;
    padding: 5px 10px;
    border-radius: 3px;
    opacity: 0;
    margin-left: 10px;
    transition: .5s;
}
.pricing-area .pricing-text p {
    font-size: 16px;
    line-height: 24px;
    color: #616161;
    font-weight: 400;
    font-family: "Inter";
    margin: 0 0 25px;
}
.pricing-area .pricing-dolar p {
    font-size: 18px;
    line-height: 28px;
    color: #010e22;
    font-weight: 700;
    font-family: "Cabin";
    margin: 30px 0 20px;
}
.pricing-area .pricing-dolar p span {
    font-size: 36px;
    line-height: 28px;
    color: #010e22;
    font-weight: 700;
    font-family: "Cabin";
    transition: .5s;
}
.pricing-area .pricing-icon-list ul li {
    list-style: none;
    display: block;
    margin-bottom: 10px;
    font-size: 16px;
}
.pricing-area .pricing-icon-list ul li i {
    display: inline-block;
    height: 20px;
    width: 20px;
    line-height: 20px;
    color: #fff;
    border-radius: 50%;
    background: #2A6FFE;
    text-align: center;
    margin-right: 10px;
}
.pricing-area .pricing-button {
    text-align: center;
    margin-top: 35px;
}
.pricing-area .pricing-button a {
    display: inline-block;
    background: #333;
    color: #fff;
    padding: 13px 85px;
    border-radius: 5px;
    transition: .5s;
    font-size: 16px;
}
.pricing-area .pricing-button a:hover {
    background: #2871FE;
    color: #fff;
}
.pricing-area .pricing-button.upper a {
    background: #2871FE;
    color: #fff;
}
.single-pricing.style-two {
    position: relative;
    top: -30px;
}
.pricing-area .single-pricing.style-two .pricing-title h3 span {
    opacity: 1;
}
.pricing-area .single-pricing:hover .pricing-title h3 span {
    opacity: 1;
}
/*<!-- ============================================================== -->
<!-- Start portfolio-area  Css -->
<!-- ============================================================== -->*/
.portfolio-area {
    padding: 90px 0 90px;
    background: #f7f7f7;
}
.single-portfolio {
    margin-bottom: 30px;
    transition: .5s;
}
.portfolio-thumb img {
    width: 100%;
}
.portfolio-content {
    position: absolute;
    bottom: 0px;
    background: #fff;
    padding: 17px 100px 17px 30px;
    opacity: 0;
    transition: .5s;
    left: 78px;
}
.single-portfolio:hover .portfolio-content {
    opacity: 1;
}
.portfolio-thumb {
    position: relative;
}
.portfolio-content .wrapper h3 {
    font-size: 18px;
    color: #010E22;
    text-transform: capitalize;
}
.portfolio-content .wrapper h6 {
    font-size: 16px;
    color: #010E22;
    text-transform: capitalize;
    margin: 0;
}


/*<!-- ============================================================== -->
<!-- Start map-area   Css -->
<!-- ============================================================== -->*/
.row.name {
    overflow: hidden;
}
/*<!-- ============================================================== -->
<!-- Start  company-info-section   Css -->
<!-- ============================================================== -->*/
.company-info-section {
    padding: 90px 0 90px;
}
.company-icon-box {
    background: url(assets/images/contact-bg.png);
    padding: 57px 0px 30px 65px;
    background-size: cover;
    background-repeat: no-repeat;
}
.company-icon-box .company-content {
    margin-top: 40px;
}
.company-icon-box .company-title {
    padding: 13px 0;
}
.company-icon-box .company-titles p {
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
    font-weight: 400;
    font-family: "Inter";
}
.company-icon-box .company-titles h3 {
    font-size: 28px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    color: #FFFFFF;
}
.company-icons i {
    font-size: 25px;
    color: #fff;
    text-align: center;
    display: inline-block;
    float: left;
    margin: 15px 22px 0 0;
    height: 50px;
    width: 50px;
    line-height: 50px;
    background: #548DFF;
    border-radius: 5px;
}
.company-title h2 {
    color: #FFFFFF;
    margin: 0px 0px 5px 0px;
    font-weight: 600;
    font-size: 20px;
    font-family: 'Inter', sans-serif;
}
.company-title p {
    font-size: 15px;
    color: #FFFFFF;
    margin: 0;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
    overflow: hidden;
}
.company-text p {
    font-size: 15px;
    font-weight: 400;
    text-align: left;
    font-family: 'Inter', sans-serif;
    color: #FFFFFF;
    line-height: 1.5;
}
.company-info-section .main-titles h3 {
    font-size: 36px;
    line-height: 48px;
    color: #010e22;
    font-weight: 700;
    font-family: "Cabin";
}
.company-info-section .main-titles p {
    font-size: 15px;
    font-weight: 400;
    color: #6e7673;
    text-align: left;
    font-family: 'Inter', sans-serif;
    margin: 0 0 35px;
}
.company-info-section .form_box {
    margin-bottom: 15px;
}
.company-info-section .form_box input {
    width: 100%;
    height: 54px;
    padding-left: 20px;
    background: #F1F7F1;
    border-radius: 3px;
    transition: .5s;
    border: 1px solid #F6F4EC;
}
.company-info-section .form_box textarea {
    width: 100%;
    padding-left: 20px;
    padding-top: 15px;
    border: 1px solid #F6F4EC;
    height: 120px;
    outline: 0;
    transition: .5s;
    background: #F1F7F1;
}
.company-info-section .form_box input:focus{
    box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
    border-color: #80bdff;
    outline: 0;
}
.company-info-section .form_box textarea:focus{
    box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
    border-color: #80bdff;
}
.company-info-section input::placeholder {
    color: #94A9A8;
}
.company-info-section textarea#massage::placeholder {
    color: #94A9A8;
}
.company-info-section .form-button {
    text-align: left;
    margin-top: 25px;
}
.company-info-section .form-button button {
    padding: 13px 35px;
    display: inline-block;
    background: #2871FE;
    color: #fff;
    text-transform: capitalize;
    border-radius: 3px;
    transition: .5s;
    border: navajowhite;
}
.company-info-section .form-button button:hover {
    background: #5A49F8;
    color: #fff;
}
.company-icon-list {
    margin-top: 100px;
}
.company-icon-list ul li {
    list-style: none;
    display: inline-block;
    margin-right: 10px;
}
.company-icon-list ul li.follow-text {
    font-size: 16px;
    line-height: 25px;
    color: #ffffff;
    font-weight: 500;
    font-family: "Cabin";
    text-transform: uppercase;
    margin-right: 15px;
}
.company-icon-list ul li a i {
    display: inline-block;
    font-size: 15px;
    color: #fff;
}
.company-logo {
    position: relative;
    top: -10px;
    left: -30px;
}

/*<!-- ============================================================== -->
<!-- Start  archive-area  Css -->
<!-- ============================================================== -->*/
.archive-area {
    background: #f7faff;
    padding: 90px 0 90px;
}
.single-archive {
    margin-bottom: 30px;
}
.archive-thumb {
    float: left;
    margin: 25px 20px 10px 0;
}
.archive-title h3 {
    font-size: 22px;
    line-height: 56px;
    color: #010e22;
    font-weight: 600;
    font-family: "Cabin";
    margin: 0;
}
.archive-title p {
    font-size: 15px;
    line-height: 26px;
    color: #616161;
    font-weight: 300;
    font-family: "Inter";
    margin: 0;
    overflow: hidden;
}
/*<!-- ============================================================== -->
<!-- Start  process-area  Css -->
<!-- ============================================================== -->*/
.process-area {
    padding: 70px 0 70px;
    border-bottom: 1px solid #E9EBEC;
}
.single-process {
    margin-bottom: 30px;
    position: relative;
}
.single-process::before {
    position: absolute;
    content: "";
    top: 30px;
    left: 165px;
    height: 1px;
    width: 80%;
    border: 1px dashed #A9C7FD;
}
.single-process.upper::before {
    border: inherit;
}
.process-thumb {
    text-align: center;
}
.process-title h3 {
    font-size: 20px;
    line-height: 28px;
    color: #010e22;
    font-weight: 600;
    font-family: "Cabin";
    text-align: center;
    margin: 30px 0 18px;
}
.process-title p {
    font-size: 15px;
    line-height: 26px;
    color: #616161;
    font-weight: 400;
    font-family: "Inter";
    text-align: center;
    margin: 0;
}
/*<!-- ============================================================== -->
<!-- Start  managing-area  Css -->
<!-- ============================================================== -->*/
.managing-area {
    padding: 70px 0 90px;
}
.managing-thumb {
    position: relative;
    left: -30px;
}
.managing-thumb img {
    width: 100%;
}
.managing-discription p {
    font-size: 18px;
    line-height: 34px;
    color: #010e22;
    font-weight: 400;
    font-family: "Inter";
}
.company-logo {
    text-align: right;
}
.managing-director {
    position: relative;
    top: 45px;
}
.managing-director h3 {
    font-size: 18px;
    margin: 0 0 5px;
    line-height: 25px;
}
/*<!-- ============================================================== -->
<!-- Start  call-do-action-area  Css -->
<!-- ============================================================== -->*/
.call-do-action {
    padding: 70px 0 113px;
}
.call-do-button {
    text-align: center;
}
.call-do-action .sub-title p {
    font-size: 16px;
    line-height: 28px;
    margin: 20px auto 0;
    text-align: center;
    width: 50%;
}
.call-do-button a {
    font-size: 17px;
    color: #010e22;
    font-weight: 500;
    padding: 18px 38px;
    border: 1px solid #333;
    border-radius: 5px;
    transition: .5s;
}
.call-do-button a:hover {
    border: 1px solid #2871FE;
    background: #2871FE ;
    color: #fff;
}
.call-do-button a i {
    display: inline-block;
    margin-left: 5px;
}

/*<!-- ============================================================== -->
<!-- Start  faq-area  Css -->
<!-- ============================================================== -->*/
.faq-area {
    padding: 85px 0px 80px 0px;
    background: #f7faff;
}
.faq-area .section-title {
    text-align: center;
    margin-bottom: 20px;
}
.single-faq-box .sub-title p {
    margin: 15px 0 0;
}
.faq-area .section-title h5 {
    margin-left: 60px;
}
.faq-area .accordion {
    max-width: 100%;
    margin: 33px 0 auto 0px;
    border-top: 1px solid #d9e5e8;
    list-style: none;
}
.faq-area .accordion li {
    background: #FFFFFF;
    position: relative;
    margin-bottom: 15px;
}
.faq-area .accordion a {
    width: 100%;
    border: none;
    outline: 0;
    position: relative;
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
    line-height: 3;
    font-size: 18px;
    text-indent: 40px;
    user-select: none;
    color: #1d2124;
    font-family: 'Cabin';
    box-shadow: 0px 10px 60px 0px rgb(0 0 0 / 10%);
    margin-bottom: 20px;
    padding: 8px 0;
    display: inline-block;
}
.faq-area .accordion a:hover {
    text-decoration: underline;
    color: #2871FE;
}
.faq-area .accordion li a.active {
    background: #fff;
    color: #1d2124;
    padding: 6px 0;
    border-radius: 5px;
    font-size: 18px;
    transition: .5s;
    text-decoration: none;
}
.faq-area .accordion li a.active:hover{
    color: #5a49f8;
}
.faq-area .accordion a.active::before{
    display: none;
}
.faq-area .accordion p {
    display: none;
    padding: 10px 25px 30px;
    color: #646464;
    font-size: 15px;
}
.accordion li a::after {
    content: "\f067";
    font-family: "Font Awesome 5 Free";
    position: absolute;
    right: 20px;
    top: 7px;
}
.accordion  li a.active::after {
    content: "\f068";
}
.faq-button a {
    padding: 13px 35px;
    background: linear-gradient(to right,#533dfd,#730fd5);
    color: #fff;
    transition: .5s;
    font-weight: 600;
    text-transform: capitalize;
    border-radius: 8px;
    display: inline-block;
    margin: 0 10px;
    font-size: 18px;
}
.faq-button a:hover {
    background: linear-gradient(to right,#730fd5,#533dfd);
}



/*<!-- ============================================================== -->
<!-- Start  feature-area  Css -->
<!-- ============================================================== -->*/
.feature-area {
    padding: 100px 0 100px;
    background: #f7faff;
}
.feature-area .main-title h1 {
    text-align: left;
}
.feature-area .section-title {
    margin-bottom: 35px;
}
.feature-area .sub-title {
    text-align: left;
}
.feature-button a {
    font-size: 17px;
    line-height: 28px;
    color: #333;
    font-weight: 500;
    font-family: "Cabin";
    padding: 19px 41px;
    border-radius: 5px;
    transition: .5s;
    border: 1px solid #333;
    display: inline-block;
    text-transform: capitalize;
}
.feature-button a:hover{
    color: #fff;
    border: 1px solid #2871FE;
    background: #2871FE ;
}
.feature-button a i {
    display: inline-block;
    margin-left: 5px;
}
.feature-thumb {
    left: 50px;
    position: relative;
}












/*<!-- ============================================================== -->
<!-- Start  about-area  Css -->
<!-- ============================================================== -->*/
.why-choose-us {
    padding: 130px 0 0px;
}
.why-choose-us .section-title {
    text-align: left;
    margin-bottom: 25px;
}
.why-choose-us .main-title h1 {
    text-align: left;
}
.choose-us-thumb {
    position: relative;
    top: -64px;
}
.choose-us-title h3 {
    font-size: 18px;
    line-height: 45px;
    color: #010e22;
    font-weight: 500;
    font-family: "Cabin";
    margin: 0;
}
.choose-us-icon {
    display: inline-block;
    margin: 0 6px 0 0px;
    position: relative;
    top: 7px;
}
.choose-us-icon i {
    display: inline-block;
    color: #2D75FF;
    font-size: 30px;
    font-weight: 600;
}
.choose-us-title {
    display: inline-block;
}
.choose-us-discription p {
    font-size: 16px;
    line-height: 28px;
    color: #616161;
    font-weight: 400;
    font-family: "Inter";
    margin: 0 0 10px 37px;
}
/*<!-- ============================================================== -->
<!-- Start  testimonial-area  Css -->
<!-- ============================================================== -->*/
.testimonial-area {
    padding: 100px 0 90px;
    background: #f7faff;
}
.testimonial-area .main-title h1 {
    text-align: left;
}
.testimonial-area .single-testimonial {
    background: #fff;
    padding: 37px 20px 37px;
    position: relative;
    border-radius: 5px;
}
.testimonial-area .testi-discription p {
    font-size: 16px;
    line-height: 28px;
    color: #616161;
    font-weight: 400;
    font-family: "Inter";
    font-style: italic;
    margin: 0 0 33px;
}
.testimonial-area .testi-thumb {
    float: left;
    margin-right: 15px;
}
.testimonial-area .client-name h3 {
    font-size: 18px;
    line-height: 28px;
    color: #010e22;
    font-weight: 600;
    font-family: "Cabin";
    margin: 0;
}
.testimonial-area .shape-img {
    position: absolute;
    bottom: 50px;
    right: 40px;
}
.testimonial-area .client-name span {
    font-size: 15px;
    line-height: 24px;
    color: #616161;
    font-weight: 400;
    font-family: "Inter";
}
.testimonial-area .owl-nav {
    position: absolute;
    top: -90px;
    right: 20px;
}
.testimonial-area .owl-nav .owl-prev {
    font-size: 20px;
    margin-left: -70px;
    height: 50px;
    width: 50px;
    line-height: 50px;
    border: 1px solid #E5E9EC;
    border-radius: 50%;
    text-align: center;
    transition: .5s;
}
.testimonial-area .owl-nav .owl-next {
    margin-top: -51px;
    font-size: 20px;
    height: 50px;
    width: 50px;
    line-height: 50px;
    border: 1px solid #E5E9EC;
    border-radius: 50%;
    text-align: center;
    transition: .5s;
}
.testimonial-area .owl-nav .owl-prev:hover {
    border: 1px solid #2772FF;
    color: #fff;
    background:#2772FF ;
}
.testimonial-area .owl-nav .owl-next:hover {
    border: 1px solid #2772FF;
    color: #fff;
    background:#2772FF ;
}
/*<!-- ============================================================== -->
<!-- Start  subscribe-areaa  Css -->
<!-- ============================================================== -->*/
.subscribe-area {
    padding: 100px 0 30px;
}
.subscribe-area .row.bottoms {
    border-bottom: 1px solid #E9EBEC;
    padding-bottom: 100px;
}
.subscribe-area .sub-title p {
    width: 55%;
    text-align: center;
    margin: 20px auto 0; 
}
.subscribe-area .form_box {
    text-align: center;
    position: relative;
}
.subscribe-area .form_box input {
    width: 55%;
    height: 54px;
    padding-left: 20px;
    border-radius: 3px;
    transition: .5s;
    border: 1px solid #E9EBEC;
}
.subscribe-area input::placeholder {
    color: #7D7D7D;
}
.subscribe-area .form_box input:focus {
    border-color: #DEE1E6;
    outline: 0;
}
.subscribe-area .form-button button {
    padding: 13px 35px;
    display: inline-block;
    background: #2871FE;
    color: #fff;
    text-transform: capitalize;
    border-radius: 3px;
    transition: .5s;
    border: navajowhite;
}
.subscribe-area .form-button button:hover {
    color: #fff;
    background: linear-gradient(to left, #533efe, #740fd6);
}
.subscribe-area .form-button {
    position: absolute;
    top: -25px;
    right: 20%;
}
.subscribe-area.upper {
    padding: 90px 0 0px;
}
.subscribe-area.upper .row.bg {
    padding: 70px 0 65px;
    background: url(assets/images/bg1.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 10px;
}
.subscribe-area.upper .row.bg .main-title h1 {
    color: #fff;
}
 .subscribe-area.upper .row.bg .form_box input {
    width: 50%;
    height: 70px;
    padding-left: 20px;
    border-radius: 3px;
    transition: .5s;
    border: 1px solid #E9EBEC;
}
 .subscribe-area.upper .row.bg .form-button button {
    padding: 12px 30px;
    display: inline-block;
    background: #2871FE;
    color: #fff;
    text-transform: capitalize;
    border-radius: 3px;
    transition: .5s;
    border: navajowhite;
}
.subscribe-area.upper .row.bg .form-button {
    position: absolute;
    top: -16px;
    right: 27%;
}
/*<!-- ============================================================== -->
<!-- Start  blog-area  Css -->
<!-- ============================================================== -->*/
.login-section {
    padding: 50px 0 90px;
}
.login-title h1 {
    font-size: 42px;
    font-weight: 500;
    line-height: 60px;
    color: #010e22;
    text-transform: capitalize;
    font-family: 'Cabin';
    margin: 0 0 15px;
    text-align: left;
}
.login-disaription p {
    font-size: 20px;
    line-height: 28px;
    color: #616161;
    font-weight: 400;
    font-family: "Inter";
    margin: 0;
}
.single_login {
    box-shadow: 0px 0px 40px 0px rgb(0 0 0 / 20%);
    padding: 40px 47px 0px;
}
.login-title h3 {
    font-size: 30px;
    color: #010E22;
    font-weight: 500;
}
.login-text {
    margin-bottom: 50px;
}
.login-section .form_box input {
    width: 100%;
    height: 54px;
    padding-left: 40px;
    background: #fff;
    border-radius: 3px;
    transition: .5s;
    border: 1px solid #A8A8A8;
}
.login-section .form_box span {
    position: relative;
    top: -40px;
    left: 15px;
}
.login-section .form_box span i {
    display: inline-block;
    color: #2771FF;
    font-size: 20px;
}
.login-section .form_box {
    margin-bottom: 0;
}
.login-section .form_box p {
    position: absolute;
    top: 7px;
    right: 20px;
}
.login-section .form-button {
    text-align: center;
    margin-top: 0;
}
.login-section .form-button button {
    padding: 14px 190px;
    margin-bottom: 50px;
}
.bottom-text {
    border-top: 1px solid #A8A8A8;
    padding: 15px 0;
}
.login_bottom .bottom-text h5{
    font-size: 16px;
    font-weight: 500;
}
.login_bottom .bottom-text h5 a {
    display: inline-block;
    font-size: 15px;
    color: #2771FF;
}
.login-section.upper .form-button button {
    padding: 14px 150px;
    margin-bottom: 20px;
}
.login-section.upper .bottom-text {
    border-top: none;
    padding: 0 0 10px;
    text-align: center;
}
.login-section.upper .login-title {
    text-align: center;
}
.login-section.upper .login-text p {
    font-size: 16px;
    text-align: center;
    margin: 0;
}
.login-section .login-text p {
    font-size: 16px;
    margin: 0;
}



/*<!-- ============================================================== -->
<!-- Start  blog-area  Css -->
<!-- ============================================================== -->*/
.blog-area {
    padding: 50px 0 70px;
}
.blog-area .section-title {
    text-align: left;
    margin-bottom: 15px;
}
.blog-area .main-title h1 {
    text-align: left;
}
.blog-button a {
    display: inline-block;
    color: #010e22;
    font-size: 16px;
    font-weight: 500;
    font-family: 'Cabin';
}
.blog-button a i {
    display: inline-block;
    color: #4887FF;
    font-size: 16px;
    font-weight: 800;
    margin-left: 5px;
}
.single-blog {
    padding: 0 0 25px;
    box-shadow: 0px 0px 21px 0px rgb(0 0 0 / 20%);
    transition: .5s;
    margin-bottom: 30px;
}
.single-blog:hover {
    box-shadow: 0px 0px 40px 0px rgb(0 0 0 / 20%);
}
.blog-thumb img {
    width: 100%;
}
.blog-title h2 a{
    display: inline-block;
    font-size: 20px;
    line-height: 30px;
    color: #010e22;
    font-weight: 500;
    font-family: "Cabin";
    margin: 23px 34px 0;
    transition: .5s;
}
.blog-title h2 a:hover{
    color: #5739FA;
}
.blog-area .row.details {
    margin-top: 20px;
}
/*<!-- ============================================================== -->
<!-- Start  footer-area  Css -->
<!-- ============================================================== -->*/
.footer-area {
    padding: 110px 0 0px;
}
.footer-discription p {
    color: #010E22;
    font-size: 15px;
    line-height: 30px;
    font-weight: 300;
    margin: 34px 0 0;
    font-family: 'Inter', sans-serif;
}
.footer-title h3 {
    font-size: 24px;
    line-height: 26px;
    color: #1d2124;
    margin-bottom: 35px;
}
.footer-content ul li {
    list-style: none;
    display: block;
    margin: 0 0 12px;
}
.footer-content ul li a {
    display: inline-block;
    font-size: 16px;
    color: #010E22;
    transition: .5s;
    font-family: "Cabin", Sans-serif;
}
.footer-content ul li a:hover{
    color: #2972FF;
}
.copy-right-area {
    padding: 20px 0 12px;
    background: #2871FF;
    margin-top: 70px;
}
.copyright-title h3 {
    font-size: 16px;
    line-height: 26px;
    color: #fff;
    font-weight: 400;
    font-family: 'Inter';
}
.copyright-title h3 span {
    color: #1B51BD;
}

/*<!-- ============================================================== -->
<!-- Start bg-bar  Css -->
<!-- ============================================================== -->*/
.sideber-search-box {
    margin-bottom: 40px;
    padding: 2px 30px 8px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e6e6e6;
    box-shadow: 0 0 5px rgb(0 0 0 / 10%);
}
.sideber-box {
    margin-bottom: 40px;
    padding: 35px 30px 35px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e6e6e6;
    box-shadow: 0 0 5px rgb(0 0 0 / 10%);
}
.bg-bar {
    position: relative;
    z-index: 1;
}
.bg-bar::before {
    position: absolute;
    left: 0;
    bottom: 20px;
    width: 88px;
    height: 3px;
    background: #aec6ef;
    content: "";
}
.bg-bar::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 18px;
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background: #5a49f8;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: MOVE-BG;
    animation-name: MOVE-BG;
}
@-webkit-keyframes MOVE-BG {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(88px);
            transform: translateX(88px);
  }
}
.resent-post-single-box {
    border-bottom: 1px solid #E8E8E8;
    padding-bottom: 50px;
    margin-bottom: 16px;
}
.blog-thub img {
    width: 100%;
}
.resent-thunb img {
    border-radius: 5px;
    width: 28%;
    float: left;
    margin-right: 12px;
    height: 70px;
}
.resent-title {
    position: relative;
    top: 14px;
}
.resent-title a h3 {
    color: #1d2124;
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
    margin-bottom: 0;
}
.resent-title a span {
    color: #616161;
}
.resent-post-single-box.two {
    border: none;
    margin: 0;
    padding: 0 0 20px;
}
.catagories-body ul li{
    list-style: none;
    margin-bottom: 10px;
    border-bottom: 1px solid #E8E8E8;
    transition: .5s;
    padding-bottom: 10px;
}
.catagories-body ul li a {
    color: #616161;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    transition: .5s;
}
.catagories-body ul li a:hover {
    color: #5A49F8;
}
.sidebar-search {
    margin-bottom: 30px;
}


.tag-body ul {
    list-style: none;
}
.tag-body ul li {
    display: inline-block;
    margin: 0 10px 9px 0;
}
.tag-body ul li a {
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    color: #616161;
    text-transform: capitalize;
    border: 1px solid #e6e6e6;
    border-radius: 5px;
    padding: 5px 14px;
    background: #fff;
    transition: .5s;
}
.tag-body ul li a:hover {
    color: #fff;
    background: #2771FF;
}
.form-control {
    top: 31px;
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: 28px 10px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #949494;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    position: relative;
}
.sideber-search-box button a {
    position: absolute;
    right: 60px;
    top: 50px;
    display: inline-block;
    color: #616161;
    font-size: 18px;
}
.paginationss-title {
    padding-top: 40px;
    text-align: left;
    border-top: 1px solid #e6e6e6;
    margin-top: 0;
    width: 90%;
    position: relative;
    left: 31px;
    margin-bottom: 30px;
}
.paginationss-title ul {
    display: inline-block;
}
.paginationss-title ul li {
    list-style: none;
    display: inline-block;
    margin-right: 10px;
}
.paginationss-title ul li a i {
    border: 1px solid #e6e6e6;
    color: #565872;
    display: inline-block;
    font-size: 15px;
    height: 40px;
    line-height: 41px;
    margin: 0 0 0 0;
    text-align: center;
    width: 40px;
    border-radius: 5px;
}
.paginationss-title ul li a i:hover {
    background: #5F4FF8;
    border-color: #5F4FF8;
    color: #fff;
}
.contact-title h3 {
    font-size: 24px;
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 35px;
    color: #1d2124;
    font-family: 'Poppins', sans-serif;
    position: relative;
}
.sideber-title h3 {
    color: #232323;
    display: block;
    font-size: 21px;
    margin-bottom: 28px;
    padding-bottom: 0;
    position: relative;
    text-transform: capitalize;
}
 .form_box {
    margin-bottom: 15px;
}
.form_box input {
    width: 100%;
    height: 54px;
    padding-left: 20px;
    background: #fff;
    border-radius: 3px;
    transition: .5s;
    border: 1px solid #EEECFE;
}
.form_box textarea {
    width: 100%;
    padding-left: 20px;
    padding-top: 15px;
    border: 1px solid #EEECFE;
    height: 150px;
    outline: 0;
    transition: .5s;
    background: #fff;
    margin-top: 7px;
}
 .form_box input:focus{
    box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
    border-color: #80bdff;
    outline: 0;
}
 .form_box textarea:focus{
    box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
    border-color: #80bdff;
}
 input::placeholder {
    color: #94A9A8;
}
 textarea#massage::placeholder {
    color: #94A9A8;
}
.form-button {
    text-align: left;
    margin-top: 20px;
}
.form-button button {
    display: inline-block;
    color: #fff;
    font-weight: 400;
    padding: 14px 35px;
    text-transform: capitalize;
    transition: 0.5s;
    font-size: 18px;
    position: relative;
    z-index: 1;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 5px;
    background: #2771FF;
    border: none;
}
.form-button button:hover {
    color: #fff;
    background: linear-gradient(to left, #533efe, #740fd6);
}

.blog-area.style-one .blog-title span {
    font-size: 15px;
    color: #2871ff;
    line-height: 24px;
    font-weight: 400;
    font-family: 'Cabin';
    background: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    position: relative;
    top: -15px;
    left: 30px;
}
.blog-area.style-one .blog-title p {
    font-size: 15px;
    position: relative;
    left: 33px;
    color: #616161;
    transition: .5s;
}
.blog-area.style-one .single-blog:hover .blog-title p{
    color: #2B72FF;
}
.blog-area.style-one .single-blog:hover .blog-title h2 a{
    color: #2B72FF;
}
.blog-area.style-one .blog-title h2 a {
    font-size: 26px;
}
.blog-number ul {
    position: relative;
    left: 10px;
}
.blog-number ul li {
    display: inline-block;
    list-style: none;
    margin-right: 5px;
}
.blog-number ul li a {
    display: inline-block;
    border: 1px solid #DEE1E6;
    height: 50px;
    width: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    transition: .5s;
    color: #000F22;
    font-weight: 600;
}
.blog-number ul li a:hover {
    border: 1px solid #2771FF;
    background: #2771FF;
    color: #fff;
}
.blog-number ul li a i{
    display: inline-block;
    color: #000F22;
    font-weight: 600;
}
.blog-number ul li a i:hover{
    color: #fff;
}
.blog-area.style-two .blog-title p {
    position: relative;
    top: 30px;
    color: #2871ff;
}
.blog-area.style-two .blog-title p span {
    color: #27293C;
    margin-left: 20px;
    position: relative;
}
.blog-area.style-two .blog-title p span::before {
    position: absolute;
    content: "";
    top: 8px;
    left: -16px;
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background: #D4D4D4;
}
.blog-area.style-two .blog-title h2 a {
    display: inline-block;
    font-size: 30px;
    line-height: 32px;
    font-weight: 500;
    font-family: "Cabin";
    margin: 30px 0 0;
    transition: .5s;
    color: #010e22;
    text-align: left;
}
.blog-area.style-two .single-blog {
    padding: 0 0 25px;
    box-shadow: inherit;
    transition: .5s;
    margin-bottom: 30px;
}
.blog-area.style-two .blog-discription p {
    font-size: 16px;
    line-height: 28px;
    color: #616161;
    font-family: 'Inter';
    font-weight: 400;
    margin: 30px  0;
}
.blog-area.style-two .blog-discription p span {
    color: #4A87FF;
}
.blog-area.style-two .blog-text {
    position: relative;
    margin-left: 35px;
}
.blog-area.style-two .blog-text::before {
    position: absolute;
    top: 0;
    left: -30px;
    content: "";
    height: 100%;
    width: 3px;
    background: #2871FE;
}
.blog-area.style-two .blog-text p {
    font-size: 18px;
    line-height: 30px;
    color: #010e22;
    font-weight: 400;
    font-style: italic;
    font-family: "Cabin";
    margin: 0;
}
.blog-area.style-two .blog-text span {
    font-size: 15px;
    color: #2672FF;
}
.blog-area.style-two .blogs-titles {
    margin-top: 15px;
}
.blog-area.style-two .blogs-titles h2  {
    display: inline-block;
    font-size: 36px;
    line-height: 45px;
    font-weight: 700;
    font-family: "Cabin";
    margin: 30px 0 0;
    transition: .5s;
    color: #010e22;
    text-align: left;
}
.blog-area.style-two .blog-icon-list ul li {
    display: block;
    list-style: none;
    font-size: 16px;
    color: #616161;
    margin: 5px 0 0;
}
.blog-area.style-two .blog-icon-list ul li i {
    display: inline-block;
    margin-right: 10px;
    font-size: 20px;
    line-height: 28px;
    color: #296CF1;
    font-weight: 800;
}
.blog-area.style-two .blog-tab ul {
    margin-top: 35px;
    padding-bottom: 40px;
    border-bottom: 1px solid #DEE1E6;
}
.blog-area.style-two .blog-tab ul li {
    display: inline-block;
    list-style: none;
    margin-right: 10px;
}
.blog-area.style-two .blog-tab ul li a{
    display: inline-block;
    list-style: none;
    margin-right: 10px;
    padding: 5px 15px;
    border: 1px solid #DEE1E6;
    border-radius: 5px;
    transition: .5s;
}
.blog-area.style-two .blog-tab ul li a:hover {
    border: 1px solid #2771FF;
    color: #fff;
    background: #2771FF;
}


/* bounce-animate */
.bounce-animate {
  animation-name: float-bob;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -moz-animation-name: float-bob;
  -moz-animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob;
  -ms-animation-duration: 2s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob;
  -o-animation-duration: 2s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear; }
.bounce-animate2 {
  animation-name: float-bob2;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -moz-animation-name: float-bob2;
  -moz-animation-duration: 3s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob2;
  -ms-animation-duration: 3s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob2;
  -o-animation-duration: 3s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear; }
.bounce-animate3 {
  animation-name: float-bob3;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -moz-animation-name: float-bob3;
  -moz-animation-duration: 4s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob3;
  -ms-animation-duration: 4s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob3;
  -o-animation-duration: 4s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear; }
.bounce-animate4 {
  animation-name: float-bob4;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -moz-animation-name: float-bob4;
  -moz-animation-duration: 5s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob4;
  -ms-animation-duration: 5s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob4;
  -o-animation-duration: 5s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear; }
 .bounce-animate5 {
  animation-name: float-bob5;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -moz-animation-name: float-bob5;
  -moz-animation-duration: 6s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob5;
  -ms-animation-duration: 6s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob5;
  -o-animation-duration: 6s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear; }
@-webkit-keyframes float-bob {
  0% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px); }
  50% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px); }
  100% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px); } }
@-webkit-keyframes float-bob2 {
  0% {
    -webkit-transform: translateY(-60px);
    transform: translateY(-60px); }
  50% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px); }
  100% {
    -webkit-transform: translateY(-60px);
    transform: translateY(-60px); } }
@-webkit-keyframes float-bob3 {
  0% {
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px); }
  50% {
    -webkit-transform: translateY(-25px);
    transform: translateY(-25px); }
  100% {
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px); } }
@-webkit-keyframes float-bob4 {
  0% {
    -webkit-transform: translateY(-70px);
    transform: translateY(-70px); }
  50% {
    -webkit-transform: translateY(-35px);
    transform: translateY(-35px); }
  100% {
    -webkit-transform: translateY(-70px);
    transform: translateY(-70px); } }
@-webkit-keyframes float-bob5 {
  0% {
    -webkit-transform: translateY(-75px);
    transform: translateY(-75px); }
  50% {
    -webkit-transform: translateY(-35px);
    transform: translateY(-35px); }
  100% {
    -webkit-transform: translateY(-75px);
    transform: translateY(-75px); } }
@-webkit-keyframes movebounce {
  0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  50% {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
/* bounce-animate */    
@-webkit-keyframes movebounce {
  0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  50% {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}

@keyframes movebounce {
  0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  50% {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}

@-webkit-keyframes moveleftbounce {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  50% {
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}

@keyframes moveleftbounce {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  50% {
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}
/* rotateme*/
.rotateme {
  -webkit-animation-name: rotateme;
          animation-name: rotateme;
  -webkit-animation-duration: 20s;
          animation-duration: 20s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@keyframes rotateme {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@-webkit-keyframes rotateme {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes rotate3d {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}

/*** 
====================================================================
  Search Popup
====================================================================
***/

.search-popup{
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100%;
  z-index: 99999;
  margin-top: -540px;
  transform: translateY(-100%);
  background-color: rgba(0,0,0,0.90);
    -webkit-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -moz-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -o-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    transition: all 1500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */
    -webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */
}

.search-popup{
  width: 100%;
}
.search-active .search-popup{
  transform: translateY(0%);
  margin-top: 0;
}
.search-box-btn.search-box-outer {
    display: inline-block;
    position: absolute;
    right: -20px;
    top: 35px;
}
.search-box-btn.search-box-outer i {
    display: inline-block;
    text-align: center;
    font-size: 18px;
    cursor: pointer;
    color: #fff;
    margin-top: 0px;
}
.sticky-nav .search-box-btn.search-box-outer i {
    color: #fff;
    position: relative;
    left: 40px;
}
.search-popup .close-search {
    position: absolute;
    left: 0;
    right: 0;
    top: 75%;
    margin: 0 auto;
    margin-top: -200px;
    border-radius: 50%;
    text-align: center;
    background-color: #5A49F8;
    width: 70px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
    border-bottom: 3px solid #ffffff;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    opacity: 0;
    visibility: hidden;
    height: 70px;
    line-height: 70px;
    text-align: center;
}

.search-popup .close-search i {
    position: relative;
    height: 70px;
    width: 70px;
    font-size: 30px;
    line-height: 70px;
    color: #fff;
    display: inline;
    text-align: center;
}

.search-active .search-popup .close-search{
  visibility: visible;
  opacity: 1;
  top: 50%;
  -webkit-transition-delay: 1500ms;
  -moz-transition-delay: 1500ms;
  -ms-transition-delay: 1500ms;
  -o-transition-delay: 1500ms;
  transition-delay: 1500ms;
}

.search-popup form{
  position: absolute;
  max-width: 700px;
  top: 50%;
  left: 15px;
  right: 15px;
  margin:-35px auto 0;
  transform: scaleX(0);
  transform-origin: center;
  background-color: #111111;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}

.search-active .search-popup form{
  transform: scaleX(1);
  -webkit-transition-delay: 1200ms;
  -moz-transition-delay: 1200ms;
  -ms-transition-delay: 1200ms;
  -o-transition-delay: 1200ms;
  transition-delay: 1200ms;
}

.search-popup .form-group{
  position:relative;
  margin:0px; 
  overflow: hidden;
}
.search-popup .close-search.style-two{
  position: absolute;
  right: 25px;
  left: auto;
  color:#ffffff;
  width:auto;
  height:auto;
  top:25px;
  margin:0px;
  border:none;
  background:none !important;
  box-shadow:none !important;
  -webkit-transition:all 500ms ease;
  -moz-transition:all 500ms ease;
  -ms-transition:all 500ms ease;
  -o-transition:all 500ms ease;
  transition:all 500ms ease;
}

.search-popup .close-search.style-two i {
    font-size: 20px;
    color: #fff;
}
.search-popup .form-group input[type="text"],
.search-popup .form-group input[type="search"]{
  position:relative;
  display:block;
  font-size:18px;
  line-height: 50px;
  color:#000000;
  height:70px;
  width:100%;
  padding: 10px 30px;
  background-color: #ffffff;
  -webkit-transition:all 500ms ease;
  -moz-transition:all 500ms ease;
  -ms-transition:all 500ms ease;
  -o-transition:all 500ms ease;
  transition:all 500ms ease;
  font-weight:500;
  text-transform:capitalize;
}
.search-popup .form-group input[type="submit"], .search-popup .form-group button {
    position: absolute;
    right: 30px;
    top: 0px;
    height: 70px;
    line-height: 70px;
    background: transparent;
    text-align: center;
    font-size: 24px;
    color: #000000;
    padding: 0;
    cursor: pointer;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    border: none;
}

.search-popup .form-group input[type="submit"]:hover,
.search-popup .form-group button:hover{
  color: #000000;
}

.search-popup input::placeholder,
.search-popup textarea::placeholder{
  color:#000000;
}

/*===========================scroll strat===========================  
 ===========================************===========================  */ 
.scroll-area {
  position: relative;
  z-index: 999;
}
.scroll-area .go-top {
  position: fixed;
  cursor: pointer;
  top: 0;
  right: 30px;
  color: #ffffff;
  background-image: -moz-linear-gradient(0deg, #d1651a 0%, #c1282a 100%);
  background-image: -webkit-linear-gradient(0deg, #d1651a 0%, #c1282a 100%);
  background-image: -ms-linear-gradient(0deg, #d1651a 0%, #c1282a 100%);
  z-index: 9999;
  width: 45px;
  text-align: center;
  height: 45px;
  line-height: 42px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.9s ease-out 0s;
  -moz-transition: all 0.9s ease-out 0s;
  -ms-transition: all 0.9s ease-out 0s;
  -o-transition: all 0.9s ease-out 0s;
  transition: all 0.9s ease-out 0s;
  border-radius: 10px;
}
.scroll-area .go-top i {
  position: absolute;
  top: 50%;
  left: -4px;
  right: 0;
  margin: 0 auto;
  font-size: 15px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s;
}
.scroll-area .go-top i:last-child {
  opacity: 0;
  visibility: hidden;
  top: 60%;
}
.scroll-area .go-top::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    animation: zoomBig 3.25s linear infinite;
    -webkit-animation-delay: 0.75s;
    animation-delay: 0.75s;
}
.scroll-area .go-top:focus, .scroll-area .go-top:hover {
  color: #fff;
}
.scroll-area .go-top:focus::before, .scroll-area .go-top:hover::before {
  opacity: 1;
  visibility: visible;
}
.scroll-area .go-top:focus i:first-child, .scroll-area .go-top:hover i:first-child {
  opacity: 0;
  top: 0;
  visibility: hidden;
}
.scroll-area .go-top:focus i:last-child, .scroll-area .go-top:hover i:last-child {
  opacity: 1;
  visibility: visible;
  top: 50%;
}
.scroll-area .go-top.active {
  top: 95%;
  -webkit-transform: translateY(-98%);
  -moz-transform: translateY(-98%);
  -ms-transform: translateY(-98%);
  -o-transform: translateY(-98%);
  transform: translateY(-98%);
  opacity: 1;
  visibility: visible;
  border-radius: 0;
  right: 50px;
  border-radius: 100%;
}
.top-wrap {
  position: relative;
}
.top-wrap .go-top-button {
    display: inline-block;
    width: 60px;
    height: 59px;
    line-height: 60px;
    text-align: center;
    color: #fff;
    top: 3px;
    z-index: 1;
    background-image: -moz-linear-gradient(0deg, #d1651a 0%, #c1282a 100%);
    background: #2771FF;
    background-image: -ms-linear-gradient(0deg, #d1651a 0%, #c1282a 100%);
}
.top-wrap .go-top-button i {
  font-size: 20px;
  font-weight: 700;
  padding-left: 4px;
  color: #fff;
}
.top-wrap .go-top-button::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    animation: zoomBig 3.25s linear infinite;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
@keyframes zoomBig {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 1;
    border-width: 3px;
  }
  40% {
    opacity: 0.5;
    border-width: 2px;
  }
  65% {
    border-width: 1px;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    border-width: 1px;
  }
}
/*<!-- ============================================================== -->
<!-- Start  sticky-nav  Css -->
<!-- ============================================================== -->*/
.sticky-nav {
    left: 0;
    margin: auto;
    top: 0;
    width: 100%;
    position: fixed !important;
    box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.07);
    -webkit-animation: 300ms running fadeInDown;
    animation: 500ms running fadeInUp;
    -webkit-box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
    transition: 0.5s !important;
    background: #fff!important;
    z-index: 9999 !important;
    animation-name: slideInDown;
    padding: 0 40px 7px;
}
.sticky-nav li.icon {
    color: #fff;
}
.sticky-nav.nav-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sticky-nav .heder-menu {
    display: inline-block;
    position: relative;
    left: 10%;
}
a.main_sticky {
    display: none;
}

.sticky-nav .header-menu ul li a{
    color: #fff!important;
}
.sticky-nav a.main_sticky {
    display: inline-block !important;
}
.sticky-nav .header-logo a {
    display: none;
}
.sticky-nav ul.sub-menu li a {
    display: inline-block;
    margin: 6px 0px 6px 21px;
    color: #6e7673 !important;
    transition: .5s;
}
.sticky-nav .header-con i {
    color: #fff;
}
.header-menu ul .sub-menu li {
    display: block;
    margin-right: 0;
    transition: .5s;
}
 ul.sub-menu li:hover{
    background: #87C03D;
}
 ul.sub-menu li a:hover{
    color: #fff !important;
}
.sticky-nav ul.sub-menu li:hover{
    background: #87C03D;
}
.sticky-nav ul.sub-menu li a:hover{
    color: #fff !important;
}



/*Loader*/

.loader-wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    transition: 0.8s 1s ease;
    z-index: 666;
}
.loader {
  position: relative;
  display: block;
  z-index: 201;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  border-radius: 50%;
  transition: all 1s 1s ease;
  border: 3px solid transparent;
  border-top-color: #F2CD00;
  -webkit-animation: spin 1.5s linear infinite;
  -moz-animation: spin 1.5s linear infinite;
  -o-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}
.loader:before {
  position: absolute;
  content: '';
  top: 6px;
  left: 6px;
  right: 6px;
  bottom: 6px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-left-color: #010E22;
  -webkit-animation: spin 2s linear infinite;
  -moz-animation: spin 2s linear infinite;
  -o-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
.loader:after {
  position: absolute;
  content: '';
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-right-color: #fff;
  -webkit-animation: spin 2.5s linear infinite;
  -moz-animation: spin 2.5s linear infinite;
  -o-animation: spin 2.5s linear infinite;
  animation: spin 2.5s linear infinite;
}
/* Here comes the Magic */

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.loader-wrapper .loder-section {
    position: fixed;
    top: 0;
    width: 52%;
    height: 100%;
    background: #2771FF;
    z-index: 2;
}
.loader-wrapper .loder-section.left-section {
  left: 0;
  transition: 1s 1.4s ease;
}
.loader-wrapper .loder-section.right-section {
  right: 0;
  transition: 1s 1.4s ease;
}

/* When page loaded */
.loaded .loder-section.left-section {
  left: -100%;
}
.loaded .loder-section.right-section {
  right: -100%;
}
.loaded .loader-wrapper {
  visibility: hidden;
}
.loaded .loader {
  top: -100%;
  opacity: 0;
}










/* =====================================================================
   VISIOacte — feuilles fusionnées dans style.css
   (ex assets/css/{nav,footer,hero-about,section-dossier,section-cockpit,section-historique}-visioacte.css)
   ===================================================================== */


/* ================= nav-visioacte ================= */
/* ================= VISIOacte Navbar (style façon VISIOpaie) ================= */
.main-header{
	height:94px;
	display:flex;
	align-items:center;
	padding:0 50px;
	box-sizing:border-box;
	transition:height .25s ease, padding .25s ease, background .25s ease, box-shadow .25s ease;
}
.main-header .container-fluid{ width:100%; padding:0; }
.main-header .row,
.main-header .col-lg-12{ height:100%; }
.nav-menu{
	justify-content:flex-start !important;
	align-items:center;
	height:100%;
	gap:0;
}
.header-logo{
	flex-shrink:0;
	display:flex;
	align-items:center;
	height:100%;
}
.header-logo img,
.main_sticky img{
	height:42px !important;
	max-height:42px !important;
	width:auto !important;
	object-fit:contain;
}
.heder-menu{
	flex:1 !important;
	right:auto !important;
	display:flex !important;
	justify-content:center;
	align-items:center;
}
.heder-menu ul{
	display:flex !important;
	align-items:center;
	flex-wrap:nowrap;
	margin:0;
	padding:0;
	list-style:none;
}
.heder-menu ul li{
	display:inline-flex !important;
	margin-right:0 !important;
}
.heder-menu ul li a{
	padding:8px 16px !important;
	line-height:1 !important;
	font-size:15px !important;
	min-height:44px;
	display:inline-flex !important;
	align-items:center;
	position:relative;
}
.heder-menu ul li a::after{
	content:'';
	position:absolute;
	bottom:4px;
	left:16px;
	right:16px;
	height:2px;
	background:#2871FE;
	border-radius:1px;
	transform:scaleX(0);
	transform-origin:left;
	transition:transform .22s cubic-bezier(.4,0,.2,1);
	pointer-events:none;
}
.heder-menu ul li a:hover::after{ transform:scaleX(1); }
.header_tbn{
	position:static !important;
	top:auto !important;
	left:auto !important;
	flex-shrink:0;
	margin-right:4px;
}
.header_tbn a{
	display:inline-flex !important;
	align-items:center;
	gap:6px;
	min-height:44px;
	font-size:15px;
	line-height:1 !important;
}
.header_tbn a i{ font-size:15px; }
.header-button{
	margin-top:0 !important;
	margin-left:10px;
	flex-shrink:0;
}
.header-button a{
	border-radius:8px !important;
	font-weight:600;
	text-transform:none !important;
	letter-spacing:.2px;
	padding:10px 22px !important;
	font-size:15px !important;
	margin-top:0 !important;
	min-height:44px;
	display:inline-flex !important;
	align-items:center;
	background:#2871FE !important;
	transition:background .2s ease, transform .18s ease, box-shadow .18s ease !important;
}
.header-button a:hover{
	background:#1c5ce0 !important;
	transform:translateY(-1px);
	box-shadow:0 6px 16px rgba(40,113,254,.28) !important;
	color:#fff !important;
}
.sticky-nav{
	backdrop-filter:blur(14px) !important;
	-webkit-backdrop-filter:blur(14px) !important;
	background:rgba(255,255,255,.96) !important;
	box-shadow:0 1px 0 rgba(0,0,0,.08), 0 4px 24px rgba(0,0,0,.05) !important;
	height:78px !important;
	padding:0 40px !important;
}
.sticky-nav .nav-menu{ height:78px; }
.sticky-nav .header-logo{ height:78px; }
.sticky-nav .header-logo img,
.sticky-nav .main_sticky img{ height:36px !important; }
.sticky-nav .heder-menu ul li a{ padding:8px 14px !important; }
.sticky-nav .heder-menu{ left:0 !important; }

@media (max-width:1280px){
	.main-header{ padding:0 30px; }
	.heder-menu ul li a{ padding:8px 12px !important; font-size:14px !important; }
}
@media (max-width:1100px){
	.heder-menu ul li a{ padding:8px 10px !important; font-size:13.5px !important; }
	.header_tbn a{ font-size:14px; }
	.header-button a{ padding:10px 16px !important; }
}
@media (max-width:991px){
	.main-header{ height:88px !important; padding:0 20px; }
}


/* ================= footer-visioacte ================= */
/* =====================================================================
   VISIOacte — CTA de démonstration + Footer (rendu façon maquette)
   ===================================================================== */

.va-footer *,
.va-cta *{
	box-sizing:border-box;
}

/* ---------- Bandeau CTA (fond clair) ---------- */
.va-cta{
	background:#eef2f8;
	padding:34px 0 40px;
}
.va-cta .va-container{
	max-width:1480px;
	margin:0 auto;
	padding:0 24px;
}
.va-cta-box{
	background:#ffffff;
	border:1px solid #e6ebf3;
	border-radius:16px;
	padding:24px 38px;
	display:flex;
	align-items:center;
	gap:30px;
	box-shadow:0 14px 36px rgba(16,38,73,.08);
}
.va-cta-intro{
	display:flex;
	align-items:center;
	gap:18px;
	flex:0 0 auto;
	max-width:375px;
}
.va-cta-cal{
	width:64px;
	height:64px;
	flex:0 0 64px;
	border-radius:16px;
	background:#e7f0ff;
	display:flex;
	align-items:center;
	justify-content:center;
}
.va-cta-cal img{ width:30px;height:30px; }
.va-cta-intro h3{
	margin:0 0 6px;
	font-size:19px;
	line-height:1.25;
	font-weight:700;
	color:#1c2b3f;
	white-space:nowrap;
}
.va-cta-intro h3 b{ color:#2871FE;font-weight:700; }
.va-cta-intro p{
	margin:0;
	font-size:13.5px;
	line-height:1.5;
	color:#5b6b80;
}
.va-cta-sep{
	width:1px;
	align-self:stretch;
	background:#e1e7f0;
	margin:4px 0;
}
.va-cta-features{
	display:flex;
	gap:20px;
	flex:1 1 auto;
	justify-content:center;
}
.va-cta-feat{
	text-align:center;
	max-width:165px;
}
.va-cta-feat strong{ white-space:nowrap; }
.va-cta-feat .va-ic{
	width:46px;
	height:46px;
	margin:0 auto 10px;
	border-radius:50%;
	border:1.5px solid #cfe0ff;
	display:flex;
	align-items:center;
	justify-content:center;
}
.va-cta-feat .va-ic img{ width:20px;height:20px; }
.va-cta-feat strong{
	display:block;
	font-size:14px;
	font-weight:700;
	color:#1c2b3f;
	margin-bottom:3px;
}
.va-cta-feat span{
	display:block;
	font-size:12px;
	line-height:1.45;
	color:#6b7a8f;
}
.va-cta-btn{
	flex:0 0 auto;
}
.va-cta-btn a{
	display:inline-flex;
	align-items:center;
	gap:10px;
	background:#2871FE;
	color:#fff;
	font-weight:600;
	font-size:15px;
	padding:16px 26px;
	border-radius:10px;
	white-space:nowrap;
	transition:background .2s ease, transform .18s ease, box-shadow .18s ease;
}
.va-cta-btn a img{ width:16px;height:16px; }
.va-cta-btn a:hover{
	background:#1c5ce0;
	color:#fff;
	transform:translateY(-1px);
	box-shadow:0 10px 24px rgba(40,113,254,.32);
}

/* ---------- Footer sombre ---------- */
.va-footer{
	background:linear-gradient(180deg,#0a1c33 0%,#081627 100%);
	color:#aebcce;
	padding:56px 0 0;
	font-family:"Cabin","Titillium Web",Arial,sans-serif;
}
.va-footer .va-container{
	max-width:1480px;
	margin:0 auto;
	padding:0 24px;
}
.va-footer-grid{
	display:grid;
	grid-template-columns:1.55fr .82fr .82fr .92fr .98fr 1.08fr 1fr;
	gap:0;
	padding-bottom:44px;
	border-bottom:1px solid rgba(255,255,255,.08);
}
.va-footer-grid > *{ padding:0 20px; }
.va-footer-grid > .va-f-brand{ padding-left:0; }
.va-f-col,
.va-f-eco{
	border-left:1px solid rgba(255,255,255,.07);
}

/* Colonne marque */
.va-f-brand-logo img{ height:46px;width:auto;margin-bottom:20px; }
.va-f-brand-txt{
	font-size:14px;
	line-height:1.7;
	color:#9fb0c4;
	margin:0 0 24px;
}
.va-f-brand-rule{
	width:46px;height:3px;border-radius:2px;
	background:#2871FE;
	margin-bottom:22px;
}
.va-f-point{
	display:flex;
	gap:14px;
	margin-bottom:20px;
}
.va-f-point .va-ic{
	width:40px;height:40px;flex:0 0 40px;
	border-radius:50%;
	border:1.5px solid rgba(120,160,230,.35);
	display:flex;align-items:center;justify-content:center;
}
.va-f-point .va-ic img{ width:18px;height:18px; }
.va-f-point strong{
	display:block;
	color:#fff;
	font-size:14.5px;
	font-weight:700;
	margin-bottom:4px;
}
.va-f-point span{
	display:block;
	font-size:12.5px;
	line-height:1.55;
	color:#8a9bb1;
}

/* Colonnes de liens */
.va-f-col h4{
	color:#5c9bff;
	font-size:12px;
	font-weight:700;
	letter-spacing:.1em;
	text-transform:uppercase;
	margin:6px 0 20px;
	padding-bottom:12px;
	position:relative;
	white-space:nowrap;
}
.va-f-col h4::after{
	content:'';
	position:absolute;
	left:0;bottom:0;
	width:26px;height:2px;
	background:#2871FE;
	border-radius:1px;
}
.va-f-col ul{
	list-style:none;
	margin:0;padding:0;
}
.va-f-col ul li{
	margin-bottom:13px;
}
.va-f-col ul li a{
	display:inline-flex;
	align-items:baseline;
	gap:8px;
	color:#a7b6c9;
	font-size:13px;
	line-height:1.4;
	transition:color .18s ease, transform .18s ease;
}
.va-f-col ul li a::before{
	content:'\203A';
	color:#4b6a92;
	font-size:15px;
	line-height:1;
	transition:color .18s ease;
}
.va-f-col ul li a:hover{
	color:#fff;
	transform:translateX(2px);
}
.va-f-col ul li a:hover::before{ color:#2871FE; }

/* Colonne écosystème */
.va-f-eco h4{
	color:#5c9bff;
	font-size:12px;
	font-weight:700;
	letter-spacing:.1em;
	text-transform:uppercase;
	margin:6px 0 8px;
	white-space:nowrap;
}
.va-f-eco > p{
	font-size:12.5px;
	line-height:1.5;
	color:#8a9bb1;
	margin:0 0 18px;
}
.va-eco-card{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	background:#fff;
	border:1px solid #e6ebf3;
	border-radius:12px;
	padding:12px 15px;
	margin-bottom:12px;
	transition:transform .18s ease, box-shadow .18s ease;
}
.va-eco-card:hover{
	transform:translateY(-2px);
	box-shadow:0 12px 24px rgba(0,0,0,.28);
}
.va-eco-brand{ line-height:1.15; }
.va-eco-name{
	display:block;
	font-size:16px;
	font-weight:800;
	color:#0f1b2d;
	letter-spacing:-.2px;
}
.va-eco-name i{ font-style:normal; }
.va-eco-name .c-blue{ color:#2871FE; }
.va-eco-name .c-purple{ color:#7A5CFF; }
.va-eco-name .c-green{ color:#22B07D; }
.va-eco-name .c-orange{ color:#F26A3A; }
.va-eco-tag{
	display:block;
	font-size:11.5px;
	color:#6b7a8f;
	margin-top:2px;
}
.va-eco-card > img{
	width:16px;height:16px;flex:0 0 16px;
	opacity:.5;
}

/* Colonne aide */
.va-f-help{
	border:1px solid rgba(255,255,255,.14);
	border-radius:16px;
	padding:22px 20px;
	align-self:start;
	margin-left:14px;
}
.va-f-help-head{
	display:flex;
	align-items:center;
	gap:12px;
	margin-bottom:14px;
}
.va-f-help-head .va-ic{
	width:42px;height:42px;flex:0 0 42px;
	border-radius:50%;
	background:#123056;
	display:flex;align-items:center;justify-content:center;
}
.va-f-help-head .va-ic img{ width:20px;height:20px; }
.va-f-help-head strong{
	color:#fff;
	font-size:15px;
	font-weight:700;
	white-space:nowrap;
}
.va-f-help p{
	font-size:12.5px;
	line-height:1.6;
	color:#8a9bb1;
	margin:0 0 14px;
}
.va-f-help-link{
	display:inline-flex;
	align-items:center;
	gap:7px;
	color:#5c9bff;
	font-weight:600;
	font-size:13.5px;
}
.va-f-help-link img{ width:13px;height:13px; }
.va-f-help-link:hover{ color:#fff; }
.va-f-help-rule{
	height:1px;
	background:rgba(255,255,255,.12);
	margin:18px 0 16px;
}
.va-f-help h5{
	color:#c7d3e2;
	font-size:13px;
	font-weight:600;
	margin:0 0 12px;
}
.va-f-social{
	display:flex;
	gap:10px;
}
.va-f-social a{
	width:38px;height:38px;
	border-radius:50%;
	border:1px solid rgba(255,255,255,.18);
	display:flex;align-items:center;justify-content:center;
	transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.va-f-social a img{ width:16px;height:16px; }
.va-f-social a:hover{
	background:#2871FE;
	border-color:#2871FE;
	transform:translateY(-2px);
}

/* ---------- Barre du bas ---------- */
.va-footer-bottom{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:20px;
	flex-wrap:wrap;
	padding:20px 0 26px;
	font-size:12.5px;
	color:#7e8fa5;
}
.va-fb-left{
	display:flex;
	align-items:center;
	gap:9px;
}
.va-fb-left img{ width:16px;height:16px;opacity:.7; }
.va-fb-center{ color:#93a3b8; }
.va-fb-links{
	display:flex;
	align-items:center;
	gap:14px;
	flex-wrap:wrap;
}
.va-fb-links a{
	color:#8fa0b6;
	transition:color .18s ease;
}
.va-fb-links a:hover{ color:#fff; }
.va-fb-links span{ color:#41546c; }

/* ---------- Responsive ---------- */
@media (max-width:1240px){
	.va-footer-grid{
		grid-template-columns:repeat(4,1fr);
	}
	.va-f-brand{ grid-column:span 4; }
	.va-f-eco{ grid-column:span 2; }
	.va-f-help{ grid-column:span 2;align-self:start; }
}
@media (max-width:900px){
	.va-cta-box{ flex-direction:column;align-items:stretch;gap:24px; }
	.va-cta-intro{ max-width:none; }
	.va-cta-sep{ display:none; }
	.va-cta-features{ flex-wrap:wrap;gap:22px; }
	.va-cta-feat{ flex:1 1 40%; }
	.va-cta-btn a{ width:100%;justify-content:center; }
}
@media (max-width:700px){
	.va-footer-grid{ grid-template-columns:1fr 1fr; }
	.va-f-brand,
	.va-f-eco,
	.va-f-help{ grid-column:1 / -1; }
	.va-footer-bottom{ justify-content:center;text-align:center; }
}
@media (max-width:480px){
	.va-footer-grid{ grid-template-columns:1fr; }
	.va-cta-feat{ flex:1 1 100%; }
}


/* ================= hero-about-visioacte ================= */
/* =====================================================================
   VISIOacte — Hero "À propos" (façon maquette : plateforme complète)
   ===================================================================== */
.va-abhero *{ box-sizing:border-box; }

.va-abhero{
	position:relative;
	isolation:isolate;
	overflow:hidden;
	padding:64px 0 70px;
	background:
		radial-gradient(1100px 620px at 88% -8%, rgba(40,113,254,.14) 0%, rgba(40,113,254,0) 60%),
		radial-gradient(900px 600px at -6% 108%, rgba(40,113,254,.10) 0%, rgba(40,113,254,0) 55%),
		linear-gradient(115deg,#eef3fb 0%,#f5f8fd 46%,#fdfefe 100%);
	border-bottom:1px solid #e6ecf5;
}
/* trame quadrillée fine (style "blueprint") */
.va-abhero::before{
	content:'';
	position:absolute;
	inset:0;
	z-index:-1;
	background-image:
		linear-gradient(rgba(40,80,150,.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(40,80,150,.06) 1px, transparent 1px);
	background-size:52px 52px;
	-webkit-mask-image:linear-gradient(to bottom right, #000 0%, rgba(0,0,0,.35) 45%, transparent 78%);
	mask-image:linear-gradient(to bottom right, #000 0%, rgba(0,0,0,.35) 45%, transparent 78%);
	pointer-events:none;
}
/* nuage de points décoratif (haut-droite) */
.va-abhero::after{
	content:'';
	position:absolute;
	top:-150px;
	right:-160px;
	width:620px;height:620px;
	z-index:-1;
	background-image:radial-gradient(circle,#2871FE 1.3px,transparent 1.6px);
	background-size:18px 18px;
	-webkit-mask-image:radial-gradient(circle at center,#000 0%,transparent 66%);
	mask-image:radial-gradient(circle at center,#000 0%,transparent 66%);
	opacity:.22;
	pointer-events:none;
}
.va-abhero-inner{
	position:relative;
	z-index:1;
	max-width:1500px;
	margin:0 auto;
	padding:0 26px;
	display:grid;
	grid-template-columns:minmax(0,32%) minmax(0,68%);
	gap:26px;
	align-items:center;
}

/* ---------------- Colonne gauche ---------------- */
.va-abhero-left{
	align-self:start;
	padding-top:14px;
}
.va-abhero-right{ align-self:center; }
.va-abhero-title{
	margin:0 0 22px;
	font-family:"Cabin","Titillium Web",Arial,sans-serif;
	font-size:34px;
	line-height:1.22;
	font-weight:800;
	letter-spacing:-.4px;
	color:#0f2340;
}
.va-abhero-title .blue{ color:#2871FE; }

.va-abhero-rule{
	display:block;
	width:56px;height:3px;
	background:#2871FE;
	border-radius:2px;
	margin-bottom:34px;
}

.va-abhero-feats{
	list-style:none;
	margin:0;padding:0;
}
.va-abhero-feats li{
	display:flex;
	gap:18px;
	padding:14px 0;
}
.va-abhero-feats li + li{
	border-top:1px solid #e3e9f2;
}
.va-abhero-feats .ic{
	width:48px;height:48px;flex:0 0 48px;
	border-radius:50%;
	border:1.6px solid #cfe0ff;
	display:flex;align-items:center;justify-content:center;
}
.va-abhero-feats .ic img{ width:22px;height:22px; }
.va-abhero-feats strong{
	display:block;
	font-size:16px;
	font-weight:700;
	color:#14243d;
	margin-bottom:4px;
}
.va-abhero-feats p{
	margin:0;
	font-size:13.5px;
	line-height:1.5;
	color:#5c6b80;
	max-width:360px;
}

/* ---------------- Colonne droite (capture) ---------------- */
.va-abhero-right{
	position:relative;
	margin-right:-16px;
}
.va-abhero-shot{
	display:block;
	width:104%;
	max-width:none;
	margin-left:-3%;
	height:auto;
	/* la capture est fournie sur fond sombre : lighten efface le fond gris/sombre */
	mix-blend-mode:lighten;
}

/* ---------------- Responsive ---------------- */
@media (max-width:1180px){
	.va-abhero-title{ font-size:34px; }
}
@media (max-width:980px){
	.va-abhero-inner{
		grid-template-columns:1fr;
		gap:36px;
	}
	.va-abhero-right{ order:2; max-width:680px; margin:0 auto; }
	.va-abhero-left{ order:1; }
	.va-abhero-feats p{ max-width:none; }
}
@media (max-width:560px){
	.va-abhero{ padding:44px 0 48px; }
	.va-abhero-title{ font-size:27px; }
	.va-abhero-feats li{ gap:14px; }
	.va-abhero-feats .ic{ width:42px;height:42px;flex:0 0 42px; }
	.va-abhero-feats strong{ font-size:15px; }
}


/* ================= section-dossier-visioacte ================= */
/* =====================================================================
   VISIOacte — Section "Un dossier. Toutes les informations." (façon maquette)
   ===================================================================== */
.vda *{ box-sizing:border-box; }
.vda a{ text-decoration:none; }

.vda{
	position:relative;
	overflow:hidden;
	background:
		radial-gradient(900px 520px at 6% -10%, rgba(40,113,254,.10) 0%, rgba(40,113,254,0) 60%),
		linear-gradient(180deg,#eef3fb 0%,#f5f8fd 60%,#ffffff 100%);
	padding:66px 0 74px;
	border-bottom:1px solid #e6ecf5;
	font-family:"Cabin","Titillium Web",Arial,sans-serif;
}
.vda-inner{
	max-width:1520px;
	margin:0 auto;
	padding:0 26px;
	display:grid;
	grid-template-columns:minmax(0,25%) minmax(0,75%);
	gap:30px;
	align-items:start;
}

/* ---------------- Colonne gauche ---------------- */
.vda-left{ padding-top:6px; }
.vda-title{
	margin:0 0 18px;
	font-size:33px;
	line-height:1.24;
	font-weight:800;
	letter-spacing:-.4px;
	color:#0f2340;
}
.vda-title .blue{ color:#2871FE; }
.vda-rule{
	display:block;
	width:54px;height:3px;
	background:#2871FE;
	border-radius:2px;
	margin-bottom:22px;
}
.vda-lead{
	margin:0 0 26px;
	font-size:14.5px;
	line-height:1.62;
	color:#53627a;
}
.vda-lead a{ color:#2871FE; font-weight:600; }

.vda-feat{
	display:flex;
	gap:14px;
	background:#fff;
	border:1px solid #e7edf5;
	border-radius:12px;
	padding:14px 16px;
	margin-bottom:12px;
	box-shadow:0 6px 18px rgba(16,38,73,.04);
}
.vda-feat .ic{
	width:42px;height:42px;flex:0 0 42px;
	border-radius:50%;
	border:1.5px solid #cfe0ff;
	display:flex;align-items:center;justify-content:center;
}
.vda-feat .ic img{ width:19px;height:19px; }
.vda-feat strong{
	display:block;
	font-size:14px;
	font-weight:700;
	color:#16263f;
	margin-bottom:3px;
}
.vda-feat p{
	margin:0;
	font-size:12px;
	line-height:1.5;
	color:#697892;
}

.vda-cta{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	width:100%;
	margin-top:6px;
	background:#2871FE;
	color:#fff;
	font-weight:600;
	font-size:15px;
	padding:16px 20px;
	border-radius:12px;
	transition:background .2s ease, transform .18s ease, box-shadow .18s ease;
}
.vda-cta:hover{
	color:#fff;
	background:#1c5ce0;
	transform:translateY(-1px);
	box-shadow:0 12px 26px rgba(40,113,254,.3);
}
.vda-cta .plus{
	width:26px;height:26px;flex:0 0 26px;
	border-radius:50%;
	background:#fff;
	display:flex;align-items:center;justify-content:center;
}
.vda-cta .plus img{ width:12px;height:12px; }

/* ======================================================================
   Colonne droite : maquette d'application
   ====================================================================== */
.vda-app{
	background:#fff;
	border:1px solid #e9eef5;
	border-radius:18px;
	box-shadow:0 40px 90px rgba(16,38,73,.16), 0 8px 24px rgba(16,38,73,.06);
	overflow:hidden;
	font-size:13px;
	color:#1c2b45;
}

/* -- Barre supérieure -- */
.vda-top{
	display:flex;
	align-items:center;
	gap:18px;
	padding:16px 22px;
	border-bottom:1px solid #edf1f7;
}
.vda-logo{
	flex:0 0 auto;
	display:inline-flex;align-items:center;
}
.vda-logo img{
	height:34px;
	width:auto;
	display:block;
}
.vda-search{
	flex:1 1 auto;
	max-width:540px;
	margin-left:9%;
	position:relative;
}
.vda-search input{
	width:100%;
	height:42px;
	border:1px solid #e4e9f1;
	border-radius:10px;
	background:#fbfcfe;
	padding:0 40px 0 16px;
	font-size:13px;
	color:#3a4a62;
	font-family:inherit;
}
.vda-search .mag{
	position:absolute;right:14px;top:50%;
	transform:translateY(-50%);
	width:16px;height:16px;opacity:.5;
}
.vda-top-actions{
	margin-left:auto;
	display:flex;align-items:center;gap:14px;
	flex:0 0 auto;
}
.vda-ico-btn{
	width:38px;height:38px;
	border:1px solid #e4e9f1;
	border-radius:10px;
	display:flex;align-items:center;justify-content:center;
	position:relative;
	background:#fff;
}
.vda-ico-btn img{ width:17px;height:17px;opacity:.75; }
.vda-ico-btn.pri{ border-color:#cfe0ff;background:#f2f7ff; }
.vda-ico-btn.pri img{ opacity:1; }
.vda-dot{
	position:absolute;top:7px;right:7px;
	width:7px;height:7px;border-radius:50%;
	background:#e5484d;border:1.5px solid #fff;
}
.vda-avatar{
	width:38px;height:38px;border-radius:50%;
	background:linear-gradient(135deg,#2871FE,#5a94ff);
	display:flex;align-items:center;justify-content:center;
	overflow:hidden;flex:0 0 auto;
}
.vda-avatar img{ width:22px;height:22px; }

/* -- Corps : sidebar + main -- */
.vda-body{ display:flex; align-items:stretch; }
.vda-side{
	flex:0 0 236px;
	border-right:1px solid #edf1f7;
	padding:18px 16px;
	background:#fcfdff;
}
.vda-nav{ list-style:none;margin:0;padding:0; }
.vda-nav li{ margin-bottom:4px; }
.vda-nav a{
	display:flex;align-items:center;gap:12px;
	padding:11px 12px;
	border-radius:9px;
	color:#5a6a82;
	font-size:13px;
	font-weight:600;
	transition:background .15s ease,color .15s ease;
}
.vda-nav a img{ width:17px;height:17px;opacity:.6; }
.vda-nav a:hover{ background:#f1f5fb;color:#2b3a54; }
.vda-nav li.on a{ background:#e9f1ff;color:#2871FE; }
.vda-nav li.on a img{ opacity:1; }

.vda-short{
	margin-top:18px;
	border:1px solid #e9eef6;
	border-radius:12px;
	padding:14px;
}
.vda-short h5{
	margin:0 0 10px;
	font-size:11px;
	font-weight:700;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:#8a99ae;
}
.vda-short a{
	display:flex;align-items:center;gap:10px;
	padding:8px 4px;
	font-size:12.5px;
	color:#4a5a74;
	font-weight:500;
}
.vda-short a img{ width:15px;height:15px;opacity:.6; }
.vda-short a:hover{ color:#2871FE; }

.vda-main{
	flex:1 1 auto;
	min-width:0;
	padding:20px 24px 26px;
	background:#fff;
}

/* -- En-tête du dossier -- */
.vda-back{
	display:inline-flex;align-items:center;gap:6px;
	font-size:12.5px;font-weight:600;color:#2871FE;
	margin-bottom:12px;
}
.vda-back img{ width:12px;height:12px; }
.vda-head{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:20px;
	padding-bottom:16px;
	border-bottom:1px solid #edf1f7;
}
.vda-head h3{
	margin:0 0 8px;
	font-size:22px;
	font-weight:800;
	letter-spacing:.2px;
	color:#14233d;
}
.vda-meta{
	display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;
	font-size:12px;color:#6a7890;
}
.vda-meta span{ display:inline-flex;align-items:center;gap:6px; }
.vda-meta img{ width:13px;height:13px;opacity:.55; }
.vda-badge{
	display:inline-flex;align-items:center;
	padding:3px 10px;border-radius:20px;
	font-size:11px;font-weight:700;
}
.vda-badge.ok{ background:#e5f7ed;color:#1c9d5d; }
.vda-badge.run{ background:#fdece4;color:#e0663a; }
.vda-badge.wait{ background:#e9f1ff;color:#2871FE; }
.vda-head-actions{ display:flex;align-items:center;gap:10px;flex:0 0 auto; }
.vda-btn{
	display:inline-flex;align-items:center;gap:8px;
	background:#2871FE;color:#fff;
	font-size:12.5px;font-weight:600;
	padding:10px 16px;border-radius:9px;
	white-space:nowrap;
}
.vda-btn img{ width:11px;height:11px; }
.vda-kebab{
	width:34px;height:34px;
	border:1px solid #e4e9f1;border-radius:9px;
	display:flex;align-items:center;justify-content:center;
	color:#9aa6b6;font-size:17px;font-weight:700;line-height:1;
}
.vda-kebab img{ width:15px;height:15px;opacity:.6; }

/* -- Onglets -- */
.vda-tabs{
	display:flex;align-items:center;gap:26px;
	border-bottom:1px solid #edf1f7;
	margin-bottom:20px;
	overflow-x:auto;
}
.vda-tabs a{
	padding:14px 2px;
	font-size:13px;font-weight:600;
	color:#77849a;
	white-space:nowrap;
	position:relative;
}
.vda-tabs a.on{ color:#2871FE; }
.vda-tabs a.on::after{
	content:'';position:absolute;left:0;right:0;bottom:-1px;
	height:2px;background:#2871FE;border-radius:2px;
}

/* -- Grille de cartes -- */
.vda-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:16px;
}
.vda-card{
	border:1px solid #e9eef6;
	border-radius:14px;
	padding:16px 16px 14px;
	background:#fff;
	min-width:0;
}
.vda-card.wide{ grid-column:span 2; }
.vda-card-h{
	display:flex;align-items:center;gap:8px;
	margin-bottom:14px;
	font-size:13.5px;font-weight:700;color:#1b2a44;
}
.vda-card-h img{ width:15px;height:15px;opacity:.7; }
.vda-more{
	display:inline-flex;align-items:center;gap:6px;
	margin-top:14px;
	font-size:12px;font-weight:600;color:#2871FE;
}
.vda-more img{ width:12px;height:12px; }

/* Informations clés */
.vda-kv{ display:flex;flex-direction:column;gap:11px; }
.vda-kv > div{
	display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
	font-size:12px;
}
.vda-kv dt{ color:#7a889e; }
.vda-kv dd{ margin:0;color:#20304a;font-weight:600;text-align:right;max-width:60%; }

/* Associés */
.vda-people{ display:flex;flex-direction:column;gap:12px; }
.vda-person{ display:flex;align-items:center;gap:11px; }
.vda-person .vda-pic{
	width:34px;height:34px;border-radius:50%;flex:0 0 34px;
	display:inline-flex;align-items:center;justify-content:center;
	font-size:12px;font-weight:700;color:#fff !important;
	line-height:1;letter-spacing:.5px;
	text-align:center;
}
.vda-person > div{ flex:1 1 auto;min-width:0; }
.vda-person > div b{ display:block;font-size:12.5px;color:#1e2d47;font-weight:700; }
.vda-person > div span{ display:block;font-size:11px;color:#8493a8; }
.vda-person .vda-pct{ display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#31405b;flex:0 0 auto; }
.vda-person .vda-pct img{ width:13px;height:13px; }

/* Documents */
.vda-docs{ display:flex;flex-direction:column;gap:11px; }
.vda-doc{ display:flex;align-items:center;gap:11px;font-size:12px; }
.vda-doc span.vda-ext{
	width:30px;height:30px;flex:0 0 30px;border-radius:7px;
	display:flex;align-items:center;justify-content:center;
	font-size:8.5px;font-weight:800;color:#fff;letter-spacing:.02em;
}
.vda-ext.pdf{ background:#e5484d; }
.vda-ext.doc{ background:#2b6cb0; }
.vda-ext.xls{ background:#1e9e5a; }
.vda-doc b{ flex:1 1 auto;font-weight:600;color:#25344d;min-width:0;line-height:1.35; }
.vda-doc > span:last-child{ color:#8996ab;flex:0 0 auto;white-space:nowrap; }

/* Actes du dossier (table) */
.vda-table-wrap{ overflow-x:auto; }
.vda-table{ width:100%;border-collapse:collapse;font-size:10.5px;table-layout:fixed; }
.vda-table col.c-act{ width:29%; }
.vda-table col.c-type{ width:17%; }
.vda-table col.c-sta{ width:14%; }
.vda-table col.c-date{ width:14%; }
.vda-table col.c-last{ width:22%; }
.vda-table col.c-kb{ width:4%; }
.vda-table th{
	text-align:left;font-weight:700;color:#8593a8;
	font-size:9.5px;padding:0 7px 8px;
	border-bottom:1px solid #edf1f7;
	white-space:nowrap;
}
.vda-table td{
	padding:9px 7px;
	border-bottom:1px solid #f1f4f9;
	color:#45556e;
	vertical-align:top;
	line-height:1.35;
}
.vda-table td.act,
.vda-table td.dt{ white-space:nowrap; }
.vda-table tr:last-child td{ border-bottom:0; }
.vda-table td.act{ color:#2871FE;font-weight:600;white-space:normal; }
.vda-table .vda-badge{ font-size:9px;padding:2px 6px; }
.vda-table td.kb{ text-align:center;color:#c2cbd8;font-weight:700; }

/* Historique (timeline) */
.vda-time{ list-style:none;margin:0;padding:0; position:relative; }
.vda-time::before{
	content:'';position:absolute;left:5px;top:6px;bottom:14px;
	width:1.5px;background:#e6ecf4;
}
.vda-time li{
	position:relative;
	padding:0 0 15px 22px;
	font-size:12px;
}
.vda-time li::before{
	content:'';position:absolute;left:1px;top:3px;
	width:9px;height:9px;border-radius:50%;
	background:#2871FE;box-shadow:0 0 0 3px #e6efff;
}
.vda-time li:last-child{ padding-bottom:0; }
.vda-time b{ display:block;color:#2b3a54;font-weight:600;line-height:1.4; }
.vda-time span{ display:block;color:#93a1b5;font-size:11px;margin-top:2px; }

/* ---------------- Responsive ---------------- */
@media (max-width:1400px){
	.vda-title{ font-size:29px; }
}
@media (max-width:1180px){
	.vda-inner{ grid-template-columns:1fr; gap:34px; }
	.vda-left{ max-width:640px; }
	.vda-app{ font-size:12.5px; }
}
@media (max-width:920px){
	.vda-body{ flex-direction:column; }
	.vda-side{ flex-basis:auto;border-right:0;border-bottom:1px solid #edf1f7; }
	.vda-nav{ display:flex;flex-wrap:wrap;gap:4px; }
	.vda-short{ display:none; }
	.vda-grid{ grid-template-columns:repeat(2,1fr); }
	.vda-card.wide{ grid-column:span 2; }
}
@media (max-width:720px){
	.vda{ padding:46px 0 52px; }
	.vda-title{ font-size:25px; }
	.vda-head{ flex-direction:column; }
	.vda-grid{ grid-template-columns:1fr; }
	.vda-card.wide{ grid-column:span 1; }
	.vda-table-wrap{ overflow-x:auto; }
	.vda-top{ flex-wrap:wrap; }
	.vda-search{ order:3;max-width:none;flex-basis:100%; }
}


/* ================= section-cockpit-visioacte ================= */
/* =====================================================================
   VISIOacte — Section "Cockpit de production" (façon maquette)
   ===================================================================== */
.vco *{ box-sizing:border-box; }
.vco a{ text-decoration:none; }

.vco{
	position:relative;
	overflow:hidden;
	background:
		radial-gradient(900px 520px at 96% -10%, rgba(40,113,254,.10) 0%, rgba(40,113,254,0) 60%),
		linear-gradient(180deg,#ffffff 0%,#f4f8fd 40%,#eef3fb 100%);
	padding:70px 0 78px;
	font-family:"Cabin","Titillium Web",Arial,sans-serif;
}
.vco-inner{
	max-width:1520px;
	margin:0 auto;
	padding:0 26px;
	display:grid;
	grid-template-columns:minmax(0,25%) minmax(0,75%);
	gap:30px;
	align-items:start;
}

/* ---------------- Colonne gauche ---------------- */
.vco-left{ padding-top:4px; }
.vco-title{
	margin:0 0 18px;
	font-size:33px;line-height:1.24;font-weight:800;
	letter-spacing:-.4px;color:#0f2340;
}
.vco-title .blue{ color:#2871FE; }
.vco-rule{
	display:block;width:54px;height:3px;
	background:#2871FE;border-radius:2px;margin-bottom:22px;
}
.vco-lead{
	margin:0 0 26px;
	font-size:14.5px;line-height:1.62;color:#53627a;
}

.vco-feat{ display:flex;gap:14px;margin-bottom:20px; }
.vco-feat .ic{
	width:44px;height:44px;flex:0 0 44px;border-radius:50%;
	border:1.5px solid #cfe0ff;
	display:flex;align-items:center;justify-content:center;
}
.vco-feat .ic img{ width:20px;height:20px; }
.vco-feat strong{
	display:block;font-size:14.5px;font-weight:700;
	color:#16263f;margin-bottom:3px;
}
.vco-feat p{ margin:0;font-size:12px;line-height:1.5;color:#697892; }

.vco-cta{
	display:flex;align-items:center;justify-content:space-between;gap:12px;
	width:100%;margin-top:8px;
	background:#2871FE;color:#fff;font-weight:600;font-size:15px;
	padding:16px 20px;border-radius:12px;
	transition:background .2s ease, transform .18s ease, box-shadow .18s ease;
}
.vco-cta:hover{
	color:#fff;background:#1c5ce0;transform:translateY(-1px);
	box-shadow:0 12px 26px rgba(40,113,254,.3);
}
.vco-cta .go{
	width:26px;height:26px;flex:0 0 26px;border-radius:50%;
	background:#fff;display:flex;align-items:center;justify-content:center;
}
.vco-cta .go img{ width:12px;height:12px; }

/* ======================================================================
   Colonne droite : maquette d'application
   ====================================================================== */
.vco-app{
	background:#fff;
	border:1px solid #e9eef5;
	border-radius:18px;
	box-shadow:0 40px 90px rgba(16,38,73,.16), 0 8px 24px rgba(16,38,73,.06);
	overflow:hidden;
	font-size:13px;color:#1c2b45;
}

/* -- Barre supérieure -- */
.vco-top{
	display:flex;align-items:center;gap:16px;
	padding:14px 22px;border-bottom:1px solid #edf1f7;
}
.vco-logo{ flex:0 0 auto;display:inline-flex;align-items:center; }
.vco-logo img{ height:34px;width:auto;display:block; }
.vco-search{
	flex:1 1 auto;max-width:640px;margin-left:11%;position:relative;
}
.vco-search input{
	width:100%;height:44px;border:1px solid #e4e9f1;border-radius:10px;
	background:#fbfcfe;padding:0 42px 0 18px;font-size:13px;color:#3a4a62;
	font-family:inherit;
}
.vco-search .mag{
	position:absolute;right:16px;top:50%;transform:translateY(-50%);
	width:17px;height:17px;opacity:.5;
}
.vco-top-actions{ margin-left:auto;display:flex;align-items:center;gap:14px;flex:0 0 auto; }
.vco-ico{
	width:40px;height:40px;border:1px solid #e4e9f1;border-radius:10px;
	display:flex;align-items:center;justify-content:center;position:relative;background:#fff;
}
.vco-ico img{ width:18px;height:18px;opacity:.75; }
.vco-ico.pri{ border-color:#cfe0ff;background:#f2f7ff; }
.vco-ico.pri img{ opacity:1; }
.vco-ico .cnt{
	position:absolute;top:-6px;right:-6px;
	min-width:16px;height:16px;padding:0 4px;border-radius:9px;
	background:#2871FE;color:#fff;font-size:9.5px;font-weight:700;
	display:flex;align-items:center;justify-content:center;border:2px solid #fff;
}
.vco-avatar{
	width:40px;height:40px;border-radius:50%;flex:0 0 auto;overflow:hidden;
	background:linear-gradient(135deg,#2871FE,#5a94ff);
	display:flex;align-items:center;justify-content:center;
}
.vco-avatar img{ width:100%;height:100%;object-fit:cover; }

/* -- Corps -- */
.vco-body{ display:flex;align-items:stretch; }
.vco-side{
	flex:0 0 244px;border-right:1px solid #edf1f7;padding:18px 16px;background:#fcfdff;
}
.vco-nav{ list-style:none;margin:0;padding:0; }
.vco-nav li{ margin-bottom:4px; }
.vco-nav a{
	display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:9px;
	color:#5a6a82;font-size:13px;font-weight:600;
	transition:background .15s ease,color .15s ease;
}
.vco-nav a img{ width:17px;height:17px;opacity:.55; }
.vco-nav a:hover{ background:#f1f5fb;color:#2b3a54; }
.vco-nav li.on a{ background:#e9f1ff;color:#2871FE; }
.vco-nav li.on a img{ opacity:1; }

.vco-filters{
	margin-top:16px;border:1px solid #e9eef6;border-radius:12px;padding:14px;
}
.vco-filters h5{
	margin:0 0 12px;font-size:12px;font-weight:700;color:#4a5872;
}
.vco-select{
	display:flex;align-items:center;justify-content:space-between;gap:8px;
	border:1px solid #e4e9f1;border-radius:8px;
	padding:9px 11px;margin-bottom:9px;
	font-size:11.5px;color:#5c6a82;
}
.vco-select img{ width:11px;height:11px;opacity:.5; }
.vco-reset{
	display:inline-flex;align-items:center;gap:7px;
	margin-top:4px;font-size:11.5px;font-weight:600;color:#2871FE;
}
.vco-reset img{ width:12px;height:12px; }

.vco-main{ flex:1 1 auto;min-width:0;padding:20px 24px 26px;background:#fff; }

/* -- En-tête -- */
.vco-head{
	display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;
}
.vco-head h3{ margin:0;font-size:20px;font-weight:800;color:#14233d;letter-spacing:.2px; }
.vco-newbtn{
	display:inline-flex;align-items:center;gap:8px;
	background:#2871FE;color:#fff;font-size:12.5px;font-weight:600;
	padding:10px 16px;border-radius:9px;white-space:nowrap;
}
.vco-newbtn img{ width:12px;height:12px; }

/* -- KPI -- */
.vco-kpis{
	display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px;
}
.vco-kpi{
	border:1px solid #e9eef6;border-radius:14px;padding:15px 15px 13px;
	display:flex;gap:12px;align-items:flex-start;
}
.vco-kpi .kic{
	width:44px;height:44px;flex:0 0 44px;border-radius:12px;
	display:flex;align-items:center;justify-content:center;
}
.vco-kpi .kic img{ width:21px;height:21px; }
.vco-kpi .kic.blue{ background:#eaf1ff; }
.vco-kpi .kic.orange{ background:#fdf0e3; }
.vco-kpi .kic.purple{ background:#f0ecfe; }
.vco-kpi .kic.green{ background:#e6f6ee; }
.vco-kpi .kl{ min-width:0; }
.vco-kpi .kt{ display:block;font-size:11.5px;color:#77859b;line-height:1.35;margin-bottom:5px; }
.vco-kpi .kn{ display:flex;align-items:baseline;gap:8px;flex-wrap:wrap; }
.vco-kpi .kn b{ font-size:23px;font-weight:800;color:#16243d;letter-spacing:.2px; }
.vco-kpi .kn i{ font-style:normal;font-size:11.5px;font-weight:700; }
.vco-kpi .kn i.up{ color:#1c9d5d; }
.vco-kpi .kn i.down{ color:#e5484d; }
.vco-kpi .kv{ display:block;font-size:10.5px;color:#95a2b5;margin-top:4px; }

/* -- Panneau tableau -- */
.vco-panel{
	border:1px solid #e9eef6;border-radius:14px;padding:16px 16px 14px;margin-bottom:20px;
}
.vco-panel h4{
	margin:0 0 12px;font-size:13.5px;font-weight:700;color:#1b2a44;
}
.vco-tw{ overflow-x:auto; }
.vco-table{ width:100%;border-collapse:collapse;font-size:10.5px;table-layout:fixed; }
.vco-table col.w-co{ width:21%; }
.vco-table col.w-ty{ width:14%; }
.vco-table col.w-st{ width:15%; }
.vco-table col.w-et{ width:25%; }
.vco-table col.w-ec{ width:10%; }
.vco-table col.w-re{ width:8%; }
.vco-table col.w-ac{ width:7%; }
.vco-table th{
	text-align:left;font-weight:700;color:#8593a8;font-size:9px;
	padding:0 8px 10px;border-bottom:1px solid #edf1f7;white-space:nowrap;
}
.vco-table td{
	padding:11px 8px;border-bottom:1px solid #f2f4f9;color:#43536c;vertical-align:middle;
	line-height:1.35;
}
.vco-table td.ec{ white-space:nowrap; }
.vco-table tr:last-child td{ border-bottom:0; }
.vco-table .co{ display:flex;align-items:center;gap:9px;min-width:0; }
.vco-table .co .ci{
	width:28px;height:28px;flex:0 0 28px;border-radius:8px;background:#f1f5fb;
	display:flex;align-items:center;justify-content:center;
}
.vco-table .co .ci img{ width:14px;height:14px;opacity:.55; }
.vco-table .co > span{ min-width:0; }
.vco-table .co b{ display:block;font-size:11px;font-weight:700;color:#1f2e48;line-height:1.25; }
.vco-table .co span span,
.vco-table .co > span > span{ display:block;font-size:9.5px;color:#94a1b5;white-space:nowrap; }
.vco-tag{
	display:inline-flex;align-items:center;padding:3px 8px;border-radius:14px;
	font-size:9px;font-weight:700;line-height:1.25;
}
.vco-tag.info{ background:#e9f1ff;color:#2871FE; }
.vco-tag.ia{ background:#f0ebfe;color:#7A5CFF; }
.vco-tag.gen{ background:#fdece2;color:#e0663a; }
.vco-tag.val{ background:#fcf3dc;color:#c98a12; }
.vco-tag.sign{ background:#e6f2ff;color:#1f7ae0; }
.vco-tag.done{ background:#e6f6ee;color:#1c9d5d; }
.vco-step > span{ display:block;font-size:10px;color:#4a596f;margin-bottom:5px;white-space:normal; }
.vco-prog{
	display:flex;align-items:center;gap:8px;
}
.vco-prog .bar{
	flex:1 1 auto;height:5px;border-radius:4px;background:#eef1f6;overflow:hidden;
}
.vco-prog .bar i{ display:block;height:100%;border-radius:4px; }
.vco-prog em{ font-style:normal;font-size:10px;font-weight:700;color:#63718a;flex:0 0 auto; }
.vco-resp{
	width:26px;height:26px;border-radius:50%;display:inline-flex;
	align-items:center;justify-content:center;color:#fff;font-size:9.5px;font-weight:700;
}
.vco-kb{ text-align:center;color:#c2cbd8;font-weight:700;font-size:15px; }
.vco-seeall{
	display:inline-flex;align-items:center;gap:7px;margin-top:14px;
	font-size:12px;font-weight:600;color:#2871FE;
}
.vco-seeall img{ width:12px;height:12px; }

/* -- Stats bas -- */
.vco-stats{
	display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
}
.vco-stat{
	border:1px solid #e9eef6;border-radius:14px;padding:15px;
}
.vco-stat .sh{ display:flex;align-items:flex-start;gap:10px;margin-bottom:12px; }
.vco-stat .si{
	width:34px;height:34px;flex:0 0 34px;border-radius:10px;background:#eef2f8;
	display:flex;align-items:center;justify-content:center;
}
.vco-stat .si img{ width:17px;height:17px;opacity:.65; }
.vco-stat .st{ font-size:11.5px;color:#6f7d92;line-height:1.35; }
.vco-stat .sn{ display:flex;align-items:baseline;gap:8px;flex-wrap:wrap; }
.vco-stat .sn b{ font-size:20px;font-weight:800;color:#16243d; }
.vco-stat .sn i{ font-style:normal;font-size:11px;font-weight:700; }
.vco-stat .sn i.up{ color:#1c9d5d; }
.vco-stat .sn i.down{ color:#e5484d; }
.vco-stat .sv{ display:block;font-size:10px;color:#95a2b5;margin-top:4px; }

.vco-alerts{
	border:1px solid #f5d9d9;border-radius:14px;padding:15px;background:#fef7f7;
}
.vco-alerts .ah{
	display:flex;align-items:center;justify-content:space-between;
	margin-bottom:12px;
}
.vco-alerts .ah span{
	display:inline-flex;align-items:center;gap:8px;
	font-size:12.5px;font-weight:700;color:#d64545;
}
.vco-alerts .ah span img{ width:15px;height:15px; }
.vco-alerts .ah > a{ color:#d99;font-size:14px; }
.vco-alerts ul{ list-style:none;margin:0;padding:0; }
.vco-alerts li{
	display:flex;align-items:flex-start;gap:8px;
	font-size:11px;color:#6a5656;line-height:1.4;margin-bottom:8px;
}
.vco-alerts li::before{
	content:'';width:6px;height:6px;border-radius:50%;background:#e5484d;
	flex:0 0 6px;margin-top:4px;
}
.vco-alerts li:last-child{ margin-bottom:0; }

/* ---------------- Responsive ---------------- */
@media (max-width:1400px){
	.vco-title{ font-size:29px; }
	.vco-kpi .kn b{ font-size:20px; }
}
@media (max-width:1180px){
	.vco-inner{ grid-template-columns:1fr;gap:34px; }
	.vco-left{ max-width:640px; }
}
@media (max-width:980px){
	.vco-body{ flex-direction:column; }
	.vco-side{ flex-basis:auto;border-right:0;border-bottom:1px solid #edf1f7; }
	.vco-nav{ display:flex;flex-wrap:wrap;gap:4px; }
	.vco-filters{ display:none; }
	.vco-kpis{ grid-template-columns:repeat(2,1fr); }
	.vco-stats{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:720px){
	.vco{ padding:46px 0 52px; }
	.vco-title{ font-size:25px; }
	.vco-head{ flex-direction:column;align-items:flex-start; }
	.vco-kpis,.vco-stats{ grid-template-columns:1fr; }
}


/* ================= section-historique-visioacte ================= */
/* =====================================================================
   VISIOacte — Section "Tout l'historique juridique" (façon maquette)
   ===================================================================== */
.vhi *{ box-sizing:border-box; }
.vhi a{ text-decoration:none; }

.vhi{
	position:relative;
	overflow:hidden;
	background:
		radial-gradient(900px 520px at 4% -10%, rgba(40,113,254,.10) 0%, rgba(40,113,254,0) 60%),
		linear-gradient(180deg,#eef3fb 0%,#f5f8fd 45%,#ffffff 100%);
	padding:70px 0 80px;
	border-top:1px solid #e6ecf5;
	font-family:"Cabin","Titillium Web",Arial,sans-serif;
}
.vhi-inner{
	max-width:1520px;
	margin:0 auto;
	padding:0 26px;
	display:grid;
	grid-template-columns:minmax(0,25%) minmax(0,75%);
	gap:30px;
	align-items:start;
}

/* ---------------- Colonne gauche ---------------- */
.vhi-left{ padding-top:4px; }
.vhi-title{
	margin:0 0 18px;font-size:33px;line-height:1.24;font-weight:800;
	letter-spacing:-.4px;color:#0f2340;
}
.vhi-title .blue{ color:#2871FE; }
.vhi-rule{ display:block;width:54px;height:3px;background:#2871FE;border-radius:2px;margin-bottom:22px; }
.vhi-lead{ margin:0 0 26px;font-size:14.5px;line-height:1.62;color:#53627a; }

.vhi-feat{ display:flex;gap:14px;margin-bottom:20px; }
.vhi-feat .ic{
	width:44px;height:44px;flex:0 0 44px;border-radius:50%;
	border:1.5px solid #cfe0ff;display:flex;align-items:center;justify-content:center;
}
.vhi-feat .ic img{ width:20px;height:20px; }
.vhi-feat strong{ display:block;font-size:14.5px;font-weight:700;color:#16263f;margin-bottom:3px; }
.vhi-feat p{ margin:0;font-size:12px;line-height:1.5;color:#697892; }

.vhi-note{
	display:flex;gap:12px;align-items:flex-start;
	margin-top:8px;background:#2871FE;color:#fff;
	padding:16px 18px;border-radius:12px;
}
.vhi-note img{ width:22px;height:22px;flex:0 0 22px;margin-top:1px; }
.vhi-note p{ margin:0;font-size:12px;line-height:1.55;color:#eaf1ff; }

/* ======================================================================
   Colonne droite : maquette d'application
   ====================================================================== */
.vhi-app{
	background:#fff;border:1px solid #e9eef5;border-radius:18px;
	box-shadow:0 40px 90px rgba(16,38,73,.16), 0 8px 24px rgba(16,38,73,.06);
	overflow:hidden;font-size:13px;color:#1c2b45;
}

/* -- Barre supérieure -- */
.vhi-top{ display:flex;align-items:center;gap:16px;padding:14px 22px;border-bottom:1px solid #edf1f7; }
.vhi-logo{ flex:0 0 auto;display:inline-flex;align-items:center; }
.vhi-logo img{ height:34px;width:auto;display:block; }
.vhi-search{ flex:1 1 auto;max-width:640px;margin-left:9%;position:relative; }
.vhi-search input{
	width:100%;height:44px;border:1px solid #e4e9f1;border-radius:10px;background:#fbfcfe;
	padding:0 42px 0 18px;font-size:13px;color:#3a4a62;font-family:inherit;
}
.vhi-search .mag{ position:absolute;right:16px;top:50%;transform:translateY(-50%);width:17px;height:17px;opacity:.5; }
.vhi-top-actions{ margin-left:auto;display:flex;align-items:center;gap:14px;flex:0 0 auto; }
.vhi-ico{
	width:40px;height:40px;border:1px solid #e4e9f1;border-radius:10px;
	display:flex;align-items:center;justify-content:center;position:relative;background:#fff;
}
.vhi-ico img{ width:18px;height:18px;opacity:.75; }
.vhi-ico.pri{ border-color:#cfe0ff;background:#f2f7ff; }
.vhi-ico.pri img{ opacity:1; }
.vhi-ico .cnt{
	position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;
	background:#e5484d;color:#fff;font-size:9.5px;font-weight:700;
	display:flex;align-items:center;justify-content:center;border:2px solid #fff;
}
.vhi-avatar{
	width:40px;height:40px;border-radius:50%;flex:0 0 auto;overflow:hidden;
	background:linear-gradient(135deg,#2871FE,#5a94ff);display:flex;align-items:center;justify-content:center;
}
.vhi-avatar img{ width:100%;height:100%;object-fit:cover; }

/* -- Corps -- */
.vhi-body{ display:flex;align-items:stretch; }
.vhi-side{ flex:0 0 244px;border-right:1px solid #edf1f7;padding:18px 16px;background:#fcfdff; }
.vhi-nav{ list-style:none;margin:0;padding:0; }
.vhi-nav li{ margin-bottom:4px; }
.vhi-nav a{
	display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:9px;
	color:#5a6a82;font-size:13px;font-weight:600;transition:background .15s ease,color .15s ease;
}
.vhi-nav a img{ width:17px;height:17px;opacity:.55; }
.vhi-nav a:hover{ background:#f1f5fb;color:#2b3a54; }
.vhi-nav li.on a{ background:#e9f1ff;color:#2871FE; }
.vhi-nav li.on a img{ opacity:1; }

.vhi-box{ margin-top:16px;border:1px solid #e9eef6;border-radius:12px;padding:14px; }
.vhi-box h5{
	margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.06em;
	text-transform:uppercase;color:#8a99ae;
}
.vhi-box .qa{ display:flex;align-items:center;gap:10px;padding:8px 2px;font-size:12px;color:#4a5a74;font-weight:500; }
.vhi-box .qa img{ width:15px;height:15px;opacity:.55; }
.vhi-box .qa:hover{ color:#2871FE; }
.vhi-store-bar{ height:6px;border-radius:4px;background:#eef1f6;overflow:hidden;margin:4px 0 8px; }
.vhi-store-bar i{ display:block;height:100%;width:68%;background:#2871FE;border-radius:4px; }
.vhi-store-row{ display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#6b7a90; }
.vhi-store-row.sec{ margin-top:12px;color:#1c9d5d;font-weight:700; }
.vhi-store-row.sec img{ width:13px;height:13px; }
.vhi-store-sub{ font-size:10px;color:#9aa7ba;margin-top:3px; }

.vhi-main{ flex:1 1 auto;min-width:0;padding:18px 22px 24px;background:#fff; }

/* -- Fil d'ariane + en-tête -- */
.vhi-crumb{ display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:11.5px;color:#8695a9;margin-bottom:12px; }
.vhi-crumb a{ color:#2871FE;font-weight:600; }
.vhi-crumb .sep{ color:#b9c4d2; }
.vhi-hd{ display:flex;align-items:flex-start;justify-content:space-between;gap:18px; }
.vhi-hd h3{ margin:0;font-size:20px;font-weight:800;color:#14233d;display:flex;align-items:center;gap:12px;flex-wrap:wrap; }
.vhi-pill{
	display:inline-flex;align-items:center;padding:4px 11px;border-radius:16px;
	font-size:10.5px;font-weight:700;background:#e5f6ed;color:#1c9d5d;
}
.vhi-hd-actions{ display:flex;align-items:center;gap:9px;flex:0 0 auto; }
.vhi-dl{
	display:inline-flex;align-items:center;gap:8px;border:1px solid #d7deea;border-radius:9px;
	padding:9px 14px;font-size:12px;font-weight:600;color:#33455f;background:#fff;white-space:nowrap;
}
.vhi-dl img{ width:13px;height:13px;opacity:.7; }
.vhi-kb{
	width:32px;height:32px;border:1px solid #e4e9f1;border-radius:9px;
	display:flex;align-items:center;justify-content:center;color:#9aa6b6;font-size:16px;font-weight:700;
}
.vhi-meta{
	display:flex;flex-wrap:wrap;align-items:center;gap:7px 18px;
	margin:12px 0 4px;font-size:11.5px;color:#6a7890;
}
.vhi-meta span{ display:inline-flex;align-items:center;gap:6px; }
.vhi-meta img{ width:13px;height:13px;opacity:.55; }

.vhi-tabs{
	display:flex;align-items:center;gap:24px;border-bottom:1px solid #edf1f7;
	margin:14px 0 18px;overflow-x:auto;
}
.vhi-tabs a{ padding:12px 2px;font-size:12.5px;font-weight:600;color:#77849a;white-space:nowrap;position:relative; }
.vhi-tabs a.on{ color:#2871FE; }
.vhi-tabs a.on::after{ content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#2871FE;border-radius:2px; }

/* -- Contenu 2 colonnes -- */
.vhi-grid{ display:grid;grid-template-columns:1.62fr 1fr;gap:16px;align-items:start; }
.vhi-card{ border:1px solid #e9eef6;border-radius:14px;padding:16px; }
.vhi-card-h{
	display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;
}
.vhi-card-h b{ font-size:13.5px;font-weight:700;color:#1b2a44; }
.vhi-card-h a{ font-size:11.5px;font-weight:600;color:#2871FE; }

/* Chronologie */
.vhi-time{ list-style:none;margin:0;padding:0;position:relative; }
.vhi-time::before{ content:'';position:absolute;left:16px;top:14px;bottom:16px;width:1.5px;background:#e7ecf4; }
.vhi-time li{ position:relative;display:flex;gap:14px;padding:0 0 18px 0; }
.vhi-time li:last-child{ padding-bottom:0; }
.vhi-tic{
	width:33px;height:33px;flex:0 0 33px;border-radius:50%;z-index:1;
	display:flex;align-items:center;justify-content:center;background:#eef2f8;
}
.vhi-tic img{ width:16px;height:16px; }
.vhi-tbody{ flex:1 1 auto;min-width:0;display:flex;justify-content:space-between;gap:12px; }
.vhi-tbody b{ display:block;font-size:12.5px;font-weight:700;color:#22314c; }
.vhi-tbody span{ display:block;font-size:11px;color:#8492a6;margin-top:2px; }
.vhi-tmeta{ text-align:right;flex:0 0 auto; }
.vhi-tmeta b{ display:block;font-size:11px;font-weight:600;color:#4a5a72; }
.vhi-tmeta span{ display:block;font-size:10px;color:#9aa7ba;margin-top:2px; }
.vhi-more{ display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-size:12px;font-weight:600;color:#2871FE; }
.vhi-more img{ width:12px;height:12px; }

/* Colonne droite : sous-cartes empilées */
.vhi-col{ display:flex;flex-direction:column;gap:16px; }

/* Versions */
.vhi-ver{ display:flex;align-items:center;gap:11px;padding:8px 0; }
.vhi-ver + .vhi-ver{ border-top:1px solid #f1f4f9; }
.vhi-vtag{
	width:30px;height:26px;flex:0 0 30px;border-radius:7px;
	display:flex;align-items:center;justify-content:center;
	font-size:10px;font-weight:800;color:#fff;
}
.vhi-vtag.v4{ background:#1c9d5d; }
.vhi-vtag.v3{ background:#e0863a; }
.vhi-vtag.v2{ background:#2871FE; }
.vhi-vtag.v1{ background:#9aa7ba; }
.vhi-ver > div{ flex:1 1 auto;min-width:0; }
.vhi-ver > div b{ display:block;font-size:11.5px;font-weight:700;color:#23324c; }
.vhi-ver > div span{ display:block;font-size:10px;color:#95a2b5;margin-top:1px; }
.vhi-vstate{
	flex:0 0 auto;font-size:9.5px;font-weight:700;padding:3px 9px;border-radius:14px;
}
.vhi-vstate.fin{ background:#e5f6ed;color:#1c9d5d; }
.vhi-vstate.vld{ background:#fdece2;color:#e0663a; }
.vhi-vstate.rel{ background:#e9f1ff;color:#2871FE; }
.vhi-vstate.dft{ background:#eef1f6;color:#7a8699; }

/* Signataires */
.vhi-sig{ display:flex;align-items:center;gap:11px;padding:9px 0; }
.vhi-sig + .vhi-sig{ border-top:1px solid #f1f4f9; }
.vhi-savatar{
	width:32px;height:32px;flex:0 0 32px;border-radius:50%;
	display:flex;align-items:center;justify-content:center;color:#fff;font-size:10.5px;font-weight:700;
}
.vhi-sig > div{ flex:1 1 auto;min-width:0; }
.vhi-sig > div b{ display:block;font-size:11.5px;font-weight:700;color:#23324c; }
.vhi-sig > div span{ display:block;font-size:10px;color:#95a2b5; }
.vhi-sig .vhi-sdate{ text-align:right;flex:0 0 auto;font-size:9.5px;color:#7f8da3;line-height:1.4; }
.vhi-schk{
	width:18px;height:18px;flex:0 0 18px;border-radius:50%;background:#1c9d5d;
	display:flex;align-items:center;justify-content:center;margin-left:2px;
}
.vhi-schk img{ width:9px;height:9px; }

/* Formalités */
.vhi-form{ display:flex;align-items:flex-start;gap:11px;padding:9px 0; }
.vhi-form + .vhi-form{ border-top:1px solid #f1f4f9; }
.vhi-form > img{ width:16px;height:16px;flex:0 0 16px;margin-top:1px; }
.vhi-form > div{ flex:1 1 auto;min-width:0; }
.vhi-form > div b{ display:block;font-size:11px;font-weight:600;color:#2f3f58;line-height:1.4; }
.vhi-form > div span{ display:block;font-size:10px;color:#95a2b5;margin-top:2px; }
.vhi-fstate{
	flex:0 0 auto;font-size:9.5px;font-weight:700;padding:3px 9px;border-radius:14px;
	background:#e5f6ed;color:#1c9d5d;
}

/* Bandeau bas : 2 encarts */
.vhi-assure{ display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px; }
.vhi-ass{
	display:flex;gap:14px;align-items:flex-start;
	border:1px solid #e9eef6;border-radius:14px;padding:16px;background:#fbfcff;
}
.vhi-ass > img{ width:24px;height:24px;flex:0 0 24px;margin-top:2px; }
.vhi-ass strong{ display:block;font-size:12.5px;font-weight:700;color:#2871FE;margin-bottom:4px; }
.vhi-ass p{ margin:0;font-size:11px;line-height:1.5;color:#697892; }
.vhi-ass .flag{
	margin-left:auto;flex:0 0 58px;width:58px;height:58px;border-radius:50%;
	border:2px solid #dfe7f2;display:flex;flex-direction:column;align-items:center;justify-content:center;
	text-align:center;font-size:6px;font-weight:800;color:#4a5a72;line-height:1.1;letter-spacing:.02em;
	background:#fff;
}
.vhi-ass .flag .fr{
	width:26px;height:17px;margin-top:2px;border-radius:2px;overflow:hidden;display:flex;
}
.vhi-ass .flag .fr i{ flex:1; }
.vhi-ass .flag .fr i:nth-child(1){ background:#2b3aa0; }
.vhi-ass .flag .fr i:nth-child(2){ background:#fff; }
.vhi-ass .flag .fr i:nth-child(3){ background:#e5484d; }

/* ---------------- Responsive ---------------- */
@media (max-width:1400px){ .vhi-title{ font-size:29px; } }
@media (max-width:1180px){
	.vhi-inner{ grid-template-columns:1fr;gap:34px; }
	.vhi-left{ max-width:640px; }
}
@media (max-width:1000px){
	.vhi-grid{ grid-template-columns:1fr; }
}
@media (max-width:980px){
	.vhi-body{ flex-direction:column; }
	.vhi-side{ flex-basis:auto;border-right:0;border-bottom:1px solid #edf1f7; }
	.vhi-nav{ display:flex;flex-wrap:wrap;gap:4px; }
	.vhi-box{ display:none; }
	.vhi-assure{ grid-template-columns:1fr; }
}
@media (max-width:720px){
	.vhi{ padding:46px 0 52px; }
	.vhi-title{ font-size:25px; }
	.vhi-hd{ flex-direction:column; }
	.vhi-tbody{ flex-direction:column; }
	.vhi-tmeta{ text-align:left; }
}


/* =====================================================================
   VISIOacte — Couche PREMIUM
   Typo raffinée · ombres multi-couches · dégradés mesh · micro-interactions
   (surcharge, chargée en dernier)
   ===================================================================== */

.va-abhero, .vda, .vco, .vhi, .va-cta, .va-footer,
.main-header, .mobile-menu-area{
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	text-rendering:optimizeLegibility;
}

/* Police d'affichage premium (Manrope) pour titres & chiffres clés */
.va-abhero-title, .vda-title, .vco-title, .vhi-title,
.va-cta-intro h3, .vco-head h3, .vhi-hd h3,
.vda-head h3, .vda-card-h, .vco-panel h4, .vhi-card-h b,
.vco-kpi .kn b, .vco-stat .sn b, .vhi-hd h3,
.va-footer .va-eco-name{
	font-family:"Manrope","Cabin","Titillium Web",Arial,sans-serif;
	letter-spacing:-.021em;
}
.va-abhero-title, .vda-title, .vco-title, .vhi-title{ font-weight:800; }

/* ---------- Fonds de sections : mesh gradient ---------- */
.va-abhero{
	background:
		radial-gradient(1200px 720px at 92% -14%, rgba(40,113,254,.17), transparent 60%),
		radial-gradient(920px 640px at -8% 112%, rgba(122,92,255,.11), transparent 55%),
		linear-gradient(158deg,#edf2fc 0%,#f6f9fd 44%,#ffffff 100%);
}
.vda, .vhi{
	background:
		radial-gradient(1040px 640px at 3% -12%, rgba(40,113,254,.13), transparent 58%),
		radial-gradient(780px 540px at 104% 42%, rgba(122,92,255,.08), transparent 55%),
		linear-gradient(180deg,#edf2fb 0%,#f5f8fd 46%,#ffffff 100%);
}
.vco{
	background:
		radial-gradient(1040px 620px at 99% -12%, rgba(40,113,254,.14), transparent 58%),
		radial-gradient(760px 520px at -6% 108%, rgba(122,92,255,.07), transparent 55%),
		linear-gradient(180deg,#ffffff 0%,#f4f8fd 38%,#edf2fb 100%);
}

/* ---------- Espacement / respiration ---------- */
.va-abhero{ padding:78px 0 86px; }
.vda, .vco, .vhi{ padding:88px 0 92px; }
@media (max-width:720px){
	.va-abhero{ padding:52px 0 56px; }
	.vda, .vco, .vhi{ padding:52px 0 56px; }
}

/* ---------- Maquettes d'app : chrome premium ---------- */
.vda-app, .vco-app, .vhi-app{
	border:1px solid rgba(26,55,102,.10);
	border-radius:22px;
	box-shadow:
		0 1px 0 rgba(255,255,255,.9) inset,
		0 2px 6px rgba(16,38,73,.05),
		0 20px 46px -14px rgba(16,38,73,.18),
		0 64px 130px -30px rgba(30,64,140,.24);
}
.vda-top, .vco-top, .vhi-top{
	background:linear-gradient(180deg,#ffffff,#fbfcfe);
	border-bottom:1px solid rgba(26,55,102,.07);
}

/* ---------- Cartes internes ---------- */
.vda-card, .vco-kpi, .vco-panel, .vco-stat, .vhi-card,
.vhi-ass, .vhi-box, .vco-filters{
	border-color:rgba(26,55,102,.09);
	box-shadow:0 1px 2px rgba(16,38,73,.04), 0 10px 24px -14px rgba(16,38,73,.14);
}

/* ---------- Filets accent : dégradé lumineux ---------- */
.va-abhero-rule, .vda-rule, .vco-rule, .vhi-rule, .va-f-brand-rule{
	background:linear-gradient(90deg,#2871FE,#7A5CFF) !important;
	box-shadow:0 3px 12px rgba(40,113,254,.38);
}

/* ---------- Boutons premium ---------- */
.va-btn-primary, .vda-cta, .vco-cta, .vco-newbtn, .vda-btn,
.va-cta-btn a, .header-button a, .vda-more, .vco-seeall,
.vfl-btn-primary, .vad-cta, .vad-result-cta{
	transition:transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s ease, background .2s ease !important;
}
.va-btn-primary, .vda-cta, .vco-cta, .vco-newbtn, .vda-btn, .va-cta-btn a,
.header-button a, .vfl-btn-primary, .vad-cta, .vad-result-cta{
	background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0)) !important;
	background-color:#2871FE !important;
	box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 12px 26px -8px rgba(40,113,254,.5) !important;
}
.va-btn-primary:hover, .vda-cta:hover, .vco-cta:hover, .vco-newbtn:hover,
.vda-btn:hover, .va-cta-btn a:hover, .header-button a:hover,
.vfl-btn-primary:hover, .vad-cta:hover, .vad-result-cta:hover{
	transform:translateY(-2px);
	box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 18px 34px -8px rgba(40,113,254,.58) !important;
}
.va-btn-ghost{ transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; }
.va-btn-ghost:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(40,113,254,.3); }

/* ---------- Cartes / lignes : micro-interactions ---------- */
.vda-feat, .vco-feat, .vhi-feat, .va-abhero-feats li, .va-eco-card,
.va-cta-feat, .va-f-help{
	transition:transform .24s cubic-bezier(.4,0,.2,1), box-shadow .24s ease, border-color .24s ease;
}
.vda-feat:hover, .vco-feat:hover, .vhi-feat:hover{
	transform:translateY(-3px);
	box-shadow:0 16px 32px -16px rgba(16,38,73,.22);
	border-color:rgba(40,113,254,.28);
}
.va-eco-card:hover{ border-color:rgba(40,113,254,.3); }
.vco-table tbody tr, .vda-table tbody tr, .vhi-ver, .vhi-sig{
	transition:background .16s ease;
}
.vco-table tbody tr:hover, .vda-table tbody tr:hover{ background:#f6f9fe; }

/* ---------- Badges : anneau subtil ---------- */
.vhi-pill, .vda-badge, .vco-tag, .vhi-vstate, .vhi-fstate, .va-cta-cal{
	box-shadow:inset 0 0 0 1px rgba(16,38,73,.06);
}
.vhi-pill, .vda-badge.ok, .vco-tag.done, .vhi-vstate.fin, .vhi-fstate{
	box-shadow:inset 0 0 0 1px rgba(28,157,93,.22);
}

/* ---------- Barre de navigation : verre premium ---------- */
.sticky-nav{
	backdrop-filter:blur(16px) saturate(1.4) !important;
	-webkit-backdrop-filter:blur(16px) saturate(1.4) !important;
	background:rgba(255,255,255,.82) !important;
	box-shadow:0 1px 0 rgba(16,38,73,.06), 0 16px 40px -16px rgba(16,38,73,.18) !important;
}
.heder-menu ul li a{ transition:color .18s ease; }
.heder-menu ul li a::after{ background:linear-gradient(90deg,#2871FE,#7A5CFF) !important; }

/* ---------- Encart CTA & note ---------- */
.va-cta-box{
	border-color:rgba(26,55,102,.08);
	box-shadow:0 1px 0 #fff inset, 0 34px 66px -26px rgba(16,38,73,.2);
}
.va-abhero .vhi-note, .vhi-note{
	background:linear-gradient(135deg,#2871FE,#3f5ff0 55%,#5a4be0);
	box-shadow:0 14px 34px -12px rgba(40,113,254,.5);
}

/* ---------- Footer premium ---------- */
.va-footer{
	background:
		radial-gradient(900px 340px at 88% -10%, rgba(40,113,254,.18), transparent 60%),
		linear-gradient(180deg,#0b1e39 0%,#081627 58%,#060f1c 100%);
}
.va-footer::after{
	content:'';position:absolute;left:0;right:0;top:0;height:1px;
	background:linear-gradient(90deg,transparent,rgba(90,148,255,.55),transparent);
}
.va-footer{ position:relative; }
.va-eco-card{ box-shadow:0 1px 2px rgba(0,0,0,.16), 0 12px 26px -14px rgba(0,0,0,.4); }

/* ---------- Divers ---------- */
html{ scroll-behavior:smooth; }
.va-abhero-shot{ filter:drop-shadow(0 40px 60px rgba(16,38,73,.22)) !important; }
.va-footer a, .va-cta a, .va-abhero a, .vda a, .vco a, .vhi a{ text-decoration:none; }


/* =====================================================================
   VISIOacte — Responsive (about.html + sections .va-*, .vda, .vco, .vhi)
   ===================================================================== */

/* Garde anti-débordement horizontal */
html, body{ overflow-x:hidden; max-width:100%; }
.va-abhero, .vda, .vco, .vhi, .va-cta, .va-footer{ overflow-x:clip; }
.va-abhero-inner, .vda-inner, .vco-inner, .vhi-inner{ max-width:100%; }

/* Les conteneurs d'app ne débordent jamais leur colonne */
.vda-app, .vco-app, .vhi-app{ max-width:100%; min-width:0; overflow:hidden; }
.vda-main, .vco-main, .vhi-main,
.vda-card, .vco-kpi, .vco-panel, .vco-stat, .vhi-card,
.vda-table-wrap, .vco-tw{ min-width:0; max-width:100%; }
.vda-table-wrap, .vco-tw{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* --- Menu mobile (meanmenu) : marque VISIOacte --- */
.mean-container .mean-bar::before{
	content:"VISIOacte" !important;
	font-family:"Manrope","Cabin",sans-serif !important;
	letter-spacing:-.02em;
	font-size:19px !important;
}
.mean-container .mean-bar{ background:#2871FE !important; }
.mean-container .mean-nav{ background:#2871FE; }

/* --- Navbar : resserrage avant bascule mobile (992px, gérée par responsive.css) --- */
@media (max-width:1240px){
	.main-header{ padding:0 22px !important; }
	.header-button a{ padding:10px 15px !important; font-size:13.5px !important; }
}
@media (max-width:1150px){
	.header_tbn{ display:none !important; }
	.heder-menu ul li a{ padding:8px 8px !important; font-size:12.5px !important; }
	.header-logo img, .main_sticky img{ height:36px !important; }
}

/* --- Hero : bascule 1 colonne plus tôt --- */
@media (max-width:1100px){
	.va-abhero-inner{ grid-template-columns:minmax(0,1fr) !important; gap:34px !important; }
	.va-abhero-left{ order:1; }
	.va-abhero-right{ order:2; margin:0 auto !important; max-width:700px; width:100%; }
	.va-abhero-shot{ width:100% !important; margin-left:0 !important; }
	.vco-search, .vhi-search{ margin-left:auto !important; }
}

/* --- Sections : forcer minmax(0,1fr) là où le CSS de base met 1fr --- */
@media (max-width:1180px){
	.vda-inner, .vco-inner, .vhi-inner{ grid-template-columns:minmax(0,1fr) !important; }
}
@media (max-width:1024px){
	.va-abhero-inner{ grid-template-columns:minmax(0,1fr) !important; }
}
@media (max-width:1000px){
	.vhi-grid{ grid-template-columns:minmax(0,1fr) !important; }
}

/* --- Empiler sidebar + main des 3 maquettes de façon homogène --- */
@media (max-width:900px){
	.vda-body, .vco-body, .vhi-body{ flex-direction:column; }
	.vda-side, .vco-side, .vhi-side{
		flex:0 0 auto; border-right:0; border-bottom:1px solid #edf1f7; max-width:100%;
	}
	.vda-nav, .vco-nav, .vhi-nav{ display:flex; flex-wrap:wrap; gap:4px; }
	.vda-nav li, .vco-nav li, .vhi-nav li{ flex:0 0 auto; }
	.vco-filters, .vhi-box, .vda-short{ display:none; }
}

/* --- Petit écran : maquettes compactes, en-têtes empilés, tables scrollables --- */
@media (max-width:640px){
	.vda-app, .vco-app, .vhi-app{ font-size:12px; border-radius:16px; }
	.vda-top, .vco-top, .vhi-top{ flex-wrap:wrap; gap:10px; padding:12px 14px; }
	.vda-search, .vco-search, .vhi-search{
		order:3; flex:1 1 100%; max-width:none; margin-left:0 !important;
	}
	.vda-main, .vco-main, .vhi-main{ padding:16px 13px 20px; }

	.vda-head, .vco-head{ flex-direction:column; align-items:flex-start; gap:12px; }
	.vhi-hd{ flex-direction:column; align-items:flex-start; gap:10px; }

	.vda-grid, .vhi-grid{ grid-template-columns:minmax(0,1fr) !important; }
	.vda-card.wide{ grid-column:auto !important; }
	.vco-kpis, .vco-stats{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; }
	.vhi-assure{ grid-template-columns:minmax(0,1fr) !important; }

	.vco-table{ min-width:560px; }
	.vda-table{ min-width:500px; }

	.vhi-tbody{ flex-direction:column; gap:1px; }
	.vhi-tmeta, .vhi-sdate{ text-align:left; }
}

@media (max-width:430px){
	.vco-kpis, .vco-stats{ grid-template-columns:minmax(0,1fr) !important; }
	.va-abhero-feats{ grid-template-columns:minmax(0,1fr) !important; }
	.vco-tag{ white-space:normal; }
}

/* --- Titres : tailles réduites sur mobile --- */
@media (max-width:560px){
	.va-abhero-title{ font-size:25px !important; }
	.vda-title, .vco-title, .vhi-title{ font-size:23px !important; }
	.va-cta-intro h3{ font-size:17px !important; white-space:normal !important; }
	.va-abhero-lead, .vda-lead, .vco-lead, .vhi-lead{ font-size:13.5px; }
	.vhi-hd h3{ font-size:17px; }
}

/* --- CTA : empilement propre --- */
@media (max-width:820px){
	.va-cta-box{ flex-direction:column; align-items:stretch; gap:18px; }
	.va-cta-sep{ display:none; }
	.va-cta-intro{ max-width:none; }
	.va-cta-features{ flex-wrap:wrap; gap:16px; justify-content:flex-start; }
	.va-cta-feat{ flex:1 1 40%; text-align:left; max-width:none; }
	.va-cta-btn a{ width:100%; justify-content:center; }
}

/* --- Footer : bas de page empilé --- */
@media (max-width:600px){
	.va-footer .va-container{ padding:0 18px; }
	.va-footer-bottom{ flex-direction:column; gap:12px; text-align:center; }
	.va-fb-links{ justify-content:center; row-gap:6px; }
	.va-fb-left{ justify-content:center; }
}

/* =====================================================================
   VISIOacte — Hero "Agents IA" (blog.html)
   Colonne texte + diagramme radial : sphère IA centrale entourée
   des 5 cartes d'agents spécialisés.
   ===================================================================== */

.va-aihero{
	position:relative;
	isolation:isolate;
	overflow-x:clip;
	padding:74px 0 84px;
	background:
		radial-gradient(1100px 620px at 90% -10%, rgba(40,113,254,.14) 0%, rgba(40,113,254,0) 60%),
		radial-gradient(900px 600px at -6% 108%, rgba(122,92,255,.10) 0%, rgba(122,92,255,0) 55%),
		linear-gradient(115deg,#eef3fb 0%,#f5f8fd 46%,#fdfefe 100%);
	border-bottom:1px solid #e6ecf5;
	font-family:"Cabin","Titillium Web",Arial,sans-serif;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}
.va-aihero *{ box-sizing:border-box; }
.va-aihero a{ text-decoration:none; }
/* trame quadrillée fine (style "blueprint") */
.va-aihero::before{
	content:'';
	position:absolute;
	inset:0;
	z-index:-1;
	background-image:
		linear-gradient(rgba(40,80,150,.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(40,80,150,.06) 1px, transparent 1px);
	background-size:52px 52px;
	-webkit-mask-image:linear-gradient(to bottom right, #000 0%, rgba(0,0,0,.35) 45%, transparent 78%);
	mask-image:linear-gradient(to bottom right, #000 0%, rgba(0,0,0,.35) 45%, transparent 78%);
	pointer-events:none;
}
.va-aihero-inner{
	position:relative;
	z-index:1;
	max-width:1500px;
	margin:0 auto;
	padding:0 26px;
	display:grid;
	grid-template-columns:minmax(0,23%) minmax(0,77%);
	gap:20px;
	align-items:center;
}

/* ---------------- Colonne gauche ---------------- */
.va-aihero-left{ align-self:center; }
.va-aihero-title{
	margin:0 0 20px;
	font-size:32px;
	line-height:1.22;
	font-weight:800;
	letter-spacing:-.4px;
	color:#0f2340;
	font-family:"Manrope","Cabin","Titillium Web",Arial,sans-serif;
}
.va-aihero-title .blue{ color:#2871FE; }
.va-aihero-rule{
	display:block;
	width:56px;height:3px;
	background:linear-gradient(90deg,#2871FE,#7A5CFF);
	border-radius:2px;
	margin-bottom:20px;
	box-shadow:0 3px 12px rgba(40,113,254,.38);
}
.va-aihero-lead{
	margin:0 0 26px;
	font-size:14.5px;
	line-height:1.6;
	color:#4a5872;
	max-width:400px;
}
.va-aihero-feats{
	list-style:none;
	margin:0 0 30px;padding:0;
}
.va-aihero-feats li{
	display:flex;
	gap:16px;
	padding:12px 0;
}
.va-aihero-feats li + li{ border-top:1px solid #e3e9f2; }
.va-aihero-feats .ic{
	width:40px;height:40px;flex:0 0 40px;
	border-radius:50%;
	border:1.6px solid #cfe0ff;
	background:#fff;
	display:flex;align-items:center;justify-content:center;
}
.va-aihero-feats .ic img{ width:19px;height:19px; }
.va-aihero-feats strong{
	display:block;
	font-size:15px;
	font-weight:700;
	color:#14243d;
	margin-bottom:3px;
}
.va-aihero-feats p{
	margin:0;
	font-size:13px;
	line-height:1.5;
	color:#5c6b80;
}
.va-aihero-cta{
	display:inline-flex;
	align-items:center;
	gap:10px;
	padding:14px 26px;
	background:#fff;
	border:1.6px solid #2871FE;
	color:#2871FE;
	font-weight:700;
	font-size:14.5px;
	border-radius:12px;
	box-shadow:0 1px 2px rgba(16,38,73,.05), 0 14px 28px -16px rgba(40,113,254,.35);
	transition:transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s ease, background .2s ease, color .2s ease;
}
.va-aihero-cta img{ width:15px;height:15px; }
.va-aihero-cta:hover{
	background:#2871FE;
	color:#fff;
	transform:translateY(-2px);
	box-shadow:0 18px 34px -12px rgba(40,113,254,.55);
}
.va-aihero-cta:hover img{ filter:brightness(0) invert(1); }

/* ---------------- Colonne droite : diagramme radial ---------------- */
.va-aihero-right{ position:relative; margin-top:48px; }
.va-aihero-diagram{
	position:relative;
	width:100%;
	max-width:860px;
	margin:0 auto;
	aspect-ratio:1120/1020;
}
.va-aihero-diagram::before{
	content:'';
	position:absolute;
	left:50%;top:50%;
	width:66%;height:66%;
	transform:translate(-50%,-50%);
	z-index:0;
	background:
		radial-gradient(circle, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 20%),
		radial-gradient(circle, rgba(64,140,255,.30) 0%, rgba(64,140,255,0) 46%),
		radial-gradient(circle, rgba(122,92,255,.16) 15%, rgba(122,92,255,0) 64%);
	pointer-events:none;
}
/* Ombre de contact au sol, sous le socle — ancre la sphère dans la scène */
.va-aihero-diagram::after{
	content:'';
	position:absolute;
	left:50%;top:65.5%;
	width:23%;height:5.5%;
	transform:translate(-50%,-50%);
	z-index:1;
	background:radial-gradient(ellipse at center, rgba(6,16,38,.42) 0%, rgba(6,16,38,.20) 42%, rgba(6,16,38,0) 75%);
	filter:blur(5px);
	pointer-events:none;
}
.va-aihero-links{
	position:absolute;
	inset:0;
	width:100%;height:100%;
	z-index:1;
	pointer-events:none;
}
.va-aihero-links-halo line{ stroke-width:1.3; opacity:.55; }
.va-aihero-links-g line{
	stroke-width:.32;
	animation:va-aihero-link-pulse 3.6s ease-in-out infinite;
}
.va-aihero-links-g line:nth-child(2){ animation-delay:.5s; }
.va-aihero-links-g line:nth-child(3){ animation-delay:1s; }
.va-aihero-links-g line:nth-child(4){ animation-delay:1.5s; }
.va-aihero-links-g line:nth-child(5){ animation-delay:2s; }
@keyframes va-aihero-link-pulse{
	0%,100%{ opacity:.65; }
	50%{ opacity:1; }
}
@media (prefers-reduced-motion:reduce){
	.va-aihero-links-g line{ animation:none; opacity:.85; }
}

.va-aihero-core{
	position:absolute;
	left:50%;top:52%;
	width:41%;
	transform:translate(-50%,-50%);
	z-index:2;
	pointer-events:none;
	filter:
		drop-shadow(0 0 8px rgba(255,255,255,.55))
		drop-shadow(0 0 26px rgba(255,255,255,.35))
		drop-shadow(0 40px 60px rgba(10,30,70,.22))
		saturate(1.06) brightness(1.02);
}

.va-aihero-card{
	position:absolute;
	transform:translate(-50%,-50%);
	z-index:3;
	width:clamp(168px,22.5%,236px);
	height:clamp(202px,27%,240px);
	display:flex;
	flex-direction:column;
	align-items:center;
	background:#fff;
	border:1px solid rgba(26,55,102,.08);
	border-radius:18px;
	box-shadow:0 1px 2px rgba(16,38,73,.05), 0 20px 36px -18px rgba(16,38,73,.22);
	padding:30px 14px 16px;
	text-align:center;
	transition:transform .24s cubic-bezier(.4,0,.2,1), box-shadow .24s ease, border-color .24s ease;
}
.va-aihero-card:hover{
	transform:translate(-50%,-50%) translateY(-4px);
	box-shadow:0 26px 44px -18px rgba(16,38,73,.3);
	border-color:rgba(40,113,254,.28);
}
.va-aihero-card .ic{
	position:absolute;
	left:50%;top:0;
	transform:translate(-50%,-50%);
	width:52px;height:52px;
	border-radius:50%;
	border:4px solid #fff;
	display:flex;align-items:center;justify-content:center;
	box-shadow:0 8px 16px -6px rgba(16,38,73,.28);
}
.va-aihero-card .ic img{ width:23px;height:23px; }
.va-aihero-card strong{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:2.3em;
	font-family:"Manrope","Cabin","Titillium Web",Arial,sans-serif;
	font-size:14.5px;
	line-height:1.15;
	font-weight:800;
	color:#0f2340;
	letter-spacing:-.01em;
	margin-bottom:6px;
}
.va-aihero-card p{
	margin:0 0 12px;
	font-size:11.5px;
	line-height:1.45;
	color:#66748c;
	flex:1;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:3;
	overflow:hidden;
}
.va-aihero-card .tag{
	display:inline-block;
	flex:0 0 auto;
	font-size:10.5px;
	font-weight:700;
	padding:5px 12px;
	border-radius:999px;
}

/* Teintes par domaine */
.ic.c-green, .tag.c-green{ background:#e6f7ec; color:#16a34a; }
.ic.c-blue, .tag.c-blue{ background:#e9f1ff; color:#2871FE; }
.ic.c-purple, .tag.c-purple{ background:#efeaff; color:#7a5cff; }
.ic.c-orange, .tag.c-orange{ background:#fff1e2; color:#e8863c; }
.ic.c-teal, .tag.c-teal{ background:#e3f7f0; color:#0f9d78; }

/* Positions des cartes autour de la sphère */
.pos-social{ left:16%; top:21%; }
.pos-societes{ left:50%; top:6%; }
.pos-affaires{ left:84%; top:21%; }
.pos-formalites{ left:12%; top:68%; }
.pos-controle{ left:88%; top:68%; }

.va-aihero-caption{
	position:absolute;
	left:50%;top:99%;
	transform:translate(-50%,-50%);
	width:72%;
	z-index:2;
	margin:0;
	text-align:center;
	font-size:13px;
	line-height:1.55;
	color:#4a5872;
}
.va-aihero-caption b{ color:#0f2340; }

/* ---------------- Responsive ---------------- */
@media (max-width:1280px){
	.va-aihero-inner{ grid-template-columns:1fr; gap:52px; }
	.va-aihero-left{ max-width:640px; margin:0 auto; text-align:left; }
	.va-aihero-lead{ max-width:none; }
	.va-aihero-right{ order:2; }
	.va-aihero-diagram{ max-width:720px; }
}
@media (max-width:720px){
	.va-aihero{ padding:48px 0 40px; }
	.va-aihero-title{ font-size:26px; }
	.va-aihero-diagram{
		position:static;
		width:100%; max-width:340px;
		aspect-ratio:auto;
		margin:0 auto;
		display:flex;
		flex-direction:column;
		align-items:stretch;
		gap:14px;
	}
	.va-aihero-diagram::before, .va-aihero-diagram::after{ display:none; }
	.va-aihero-links{ display:none; }
	.va-aihero-core{
		position:static;
		transform:none;
		width:150px;
		align-self:center;
	}
	.va-aihero-card{
		position:relative;
		left:auto !important;
		top:auto !important;
		transform:none !important;
		width:100%;
		height:auto;
		margin-top:20px;
	}
	.va-aihero-card:hover{ transform:translateY(-4px) !important; }
	.va-aihero-card strong{ min-height:0; }
	.va-aihero-card p{
		-webkit-line-clamp:unset;
		display:block;
		overflow:visible;
	}
	.va-aihero-caption{
		position:static;
		transform:none;
		width:auto;
		order:99;
	}
}

/* =====================================================================
   VISIOacte — Section "Plusieurs agents. Un seul acte." (blog.html)
   Timeline de production collaborative + panneaux de suivi.
   ===================================================================== */

.vfl{
	position:relative;
	padding:76px 0 84px;
	background:linear-gradient(180deg,#ffffff 0%,#f6f9fd 100%);
	border-top:1px solid #e6ecf5;
	font-family:"Cabin","Titillium Web",Arial,sans-serif;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}
.vfl *{ box-sizing:border-box; }
.vfl a{ text-decoration:none; }
.vfl-inner{
	max-width:1560px;
	margin:0 auto;
	padding:0 26px;
	display:grid;
	grid-template-columns:minmax(0,23%) minmax(0,77%);
	gap:36px;
	align-items:start;
}

/* ---------------- Colonne gauche ---------------- */
.vfl-badge{
	display:inline-flex;align-items:center;justify-content:center;
	width:34px;height:34px;
	border-radius:50%;
	background:#2871FE;
	color:#fff;font-weight:800;font-size:13px;
	margin-bottom:20px;
	box-shadow:0 10px 20px -8px rgba(40,113,254,.5);
}
.vfl-title{
	margin:0 0 18px;
	font-family:"Manrope","Cabin","Titillium Web",Arial,sans-serif;
	font-size:29px;
	line-height:1.22;
	font-weight:800;
	letter-spacing:-.02em;
	color:#0f2340;
}
.vfl-title .blue{ color:#2871FE; }
.vfl-rule{
	display:block;
	width:56px;height:3px;
	background:linear-gradient(90deg,#2871FE,#7A5CFF);
	border-radius:2px;
	margin-bottom:22px;
	box-shadow:0 3px 12px rgba(40,113,254,.35);
}
.vfl-lead{
	margin:0 0 26px;
	font-size:14px;
	line-height:1.6;
	color:#4a5872;
}
.vfl-feats{ list-style:none; margin:0 0 22px; padding:0; }
.vfl-feats li{ display:flex; gap:14px; padding:11px 0; }
.vfl-feats li + li{ border-top:1px solid #e3e9f2; }
.vfl-feats .ic{
	width:38px;height:38px;flex:0 0 38px;
	border-radius:50%;
	border:1.6px solid #cfe0ff;
	background:#fff;
	display:flex;align-items:center;justify-content:center;
}
.vfl-feats .ic img{ width:18px;height:18px; }
.vfl-feats strong{ display:block; font-size:14px; font-weight:700; color:#14243d; margin-bottom:3px; }
.vfl-feats p{ margin:0; font-size:12.5px; line-height:1.5; color:#5c6b80; }

.vfl-note{
	display:flex; gap:12px; align-items:flex-start;
	background:#eaf1ff;
	border-radius:14px;
	padding:16px 18px;
}
.vfl-note .ic{
	width:30px;height:30px;flex:0 0 30px;
	border-radius:50%;
	background:#fff;
	display:flex;align-items:center;justify-content:center;
}
.vfl-note .ic img{ width:16px;height:16px; }
.vfl-note p{ margin:0; font-size:13px; font-weight:700; line-height:1.45; color:#123a8a; }

/* ---------------- Panneau applicatif ---------------- */
.vfl-panel{
	background:#fff;
	border:1px solid rgba(26,55,102,.08);
	border-radius:22px;
	box-shadow:0 1px 2px rgba(16,38,73,.04), 0 30px 60px -30px rgba(16,38,73,.22);
	padding:28px 30px 32px;
}
.vfl-panel-head{
	display:flex;align-items:center;justify-content:space-between;
	gap:16px;
	padding-bottom:20px;margin-bottom:26px;
	border-bottom:1px solid #edf1f7;
	font-size:15.5px;font-weight:700;color:#0f2340;
}
.vfl-panel-head a{ color:#2871FE; }
.vfl-dossier{
	display:flex;align-items:center;gap:8px;flex:0 0 auto;
	font-size:12.5px;font-weight:700;color:#3a4a63;
	background:#f5f7fb;border:1px solid #e6ecf5;
	border-radius:999px;padding:8px 14px;
	white-space:nowrap;
}
.vfl-dossier img{ width:15px;height:15px; }
.vfl-dossier .chev{ width:11px;height:11px;opacity:.55; }

/* ---------------- Timeline des 5 agents ---------------- */
.vfl-steps{
	display:grid;
	grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;
	align-items:stretch;
	margin-bottom:36px;
}
.vfl-step{
	display:flex;flex-direction:column;align-items:center;
	text-align:center;
	padding:0 8px;
}
.vfl-step-num{
	display:flex;align-items:center;justify-content:center;
	width:26px;height:26px;
	border-radius:50%;
	margin:0 auto 12px;
	color:#fff;font-size:12px;font-weight:800;
	font-family:"Manrope","Cabin",sans-serif;
}
.vfl-step-ic{
	display:flex;align-items:center;justify-content:center;
	width:56px;height:56px;
	border-radius:50%;
	margin:0 auto 14px;
}
.vfl-step-ic img{ width:24px;height:24px; }
.vfl-step strong{
	display:flex;align-items:center;justify-content:center;
	min-height:2.3em;
	font-family:"Manrope","Cabin",sans-serif;
	font-size:14px;font-weight:800;color:#0f2340;
	letter-spacing:-.01em;
	margin-bottom:4px;
}
.vfl-step-sub{ display:block; font-size:11.5px; font-weight:700; margin-bottom:10px; }
.vfl-step p{
	margin:0 0 14px;
	font-size:11.5px;line-height:1.5;color:#66748c;
	min-height:4.6em;
}
.vfl-pill{
	display:inline-flex;align-items:center;gap:5px;
	font-size:10.5px;font-weight:700;
	padding:5px 11px;border-radius:999px;
	margin-top:auto;
}
.vfl-pill img{ width:11px;height:11px; }
.vfl-dots{ display:inline-flex; gap:2px; margin-left:1px; }
.vfl-dots i{
	width:3px;height:3px;border-radius:50%;
	background:currentColor;display:inline-block;
	animation:vfl-dot-blink 1.2s ease-in-out infinite;
}
.vfl-dots i:nth-child(2){ animation-delay:.2s; }
.vfl-dots i:nth-child(3){ animation-delay:.4s; }
@keyframes vfl-dot-blink{ 0%,80%,100%{ opacity:.25; } 40%{ opacity:1; } }

.vfl-arrow{
	align-self:flex-start;
	display:flex;align-items:center;justify-content:center;
	padding-top:58px;
}
.vfl-arrow img{ width:16px;height:16px;opacity:.55; }

/* Teintes par étape */
.vfl-step-num.c-green{ background:#16a34a; }
.vfl-step-num.c-blue{ background:#2871FE; }
.vfl-step-num.c-orange{ background:#e8863c; }
.vfl-step-num.c-purple{ background:#7a5cff; }
.vfl-step-num.c-gray{ background:#aab4c4; }

.vfl-step-ic.c-green{ background:#e6f7ec; }
.vfl-step-ic.c-blue{ background:#e9f1ff; }
.vfl-step-ic.c-orange{ background:#fff1e2; }
.vfl-step-ic.c-purple{ background:#efeaff; }

.vfl-step-sub.c-green{ color:#16a34a; }
.vfl-step-sub.c-blue{ color:#2871FE; }
.vfl-step-sub.c-orange{ color:#e8863c; }
.vfl-step-sub.c-purple{ color:#7a5cff; }

.vfl-pill.c-green{ background:#e6f7ec; color:#16a34a; }
.vfl-pill.c-blue{ background:#e9f1ff; color:#2871FE; }
.vfl-pill.c-orange{ background:#fff1e2; color:#e8863c; }
.vfl-pill.c-purple{ background:#efeaff; color:#7a5cff; }
.vfl-pill.c-gray{ background:#f1f3f7; color:#7a869c; }

/* ---------------- Grille 3 colonnes ---------------- */
.vfl-grid{
	display:grid;
	grid-template-columns:1fr 1.3fr 1fr;
	gap:22px;
	align-items:stretch;
}
.vfl-sources, .vfl-preview, .vfl-alerts, .vfl-progress-card{
	border:1px solid #e9edf4;
	border-radius:16px;
	padding:20px;
	background:#fbfcfe;
}
.vfl-sources, .vfl-preview{
	display:flex;
	flex-direction:column;
	height:100%;
}
.vfl-more-btn{ margin-top:auto; }
.vfl-alerts{ display:flex; flex-direction:column; }
.vfl-sources h4, .vfl-preview-head h4, .vfl-alerts h4, .vfl-progress-card h4{
	margin:0 0 16px;
	font-family:"Manrope","Cabin",sans-serif;
	font-size:14.5px;font-weight:800;color:#0f2340;
}

/* Informations utilisées */
.vfl-source-item{ display:flex; align-items:center; gap:12px; padding:10px 0; }
.vfl-source-item + .vfl-source-item{ border-top:1px solid #edf1f7; }
.vfl-source-item .ic{
	width:36px;height:36px;flex:0 0 36px;
	border-radius:10px;
	background:#eaf1ff;
	display:flex;align-items:center;justify-content:center;
}
.vfl-source-item .ic img{ width:17px;height:17px; }
.vfl-source-item div{ flex:1; min-width:0; }
.vfl-source-item strong{ display:block; font-size:12.5px;font-weight:700;color:#14243d; }
.vfl-source-item p{ margin:2px 0 0; font-size:11.5px; color:#66748c; }
.vfl-source-item .ok{ width:14px;height:14px;flex:0 0 14px; }
.vfl-more-btn{
	display:flex;align-items:center;justify-content:center;gap:8px;
	margin-top:16px;
	padding:11px;
	border:1.4px solid #2871FE;border-radius:10px;
	color:#2871FE;font-weight:700;font-size:12.5px;
	transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.vfl-more-btn img{ width:12px;height:12px; }
.vfl-more-btn:hover{ background:#2871FE; color:#fff; transform:translateY(-2px); }
.vfl-more-btn:hover img{ filter:brightness(0) invert(1); }

/* Aperçu du projet d'acte */
.vfl-preview{ display:flex; flex-direction:column; }
.vfl-preview-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.vfl-preview-head h4{ margin:0; }
.vfl-tag{
	background:#fff1e2;color:#e8863c;
	font-size:10.5px;font-weight:700;
	padding:5px 11px;border-radius:999px;white-space:nowrap;
}
.vfl-doc{
	background:#fff;border:1px solid #e9edf4;border-radius:12px;
	padding:20px 22px;
	font-size:11.5px;line-height:1.6;color:#3a4a63;
	flex:1;
	margin-bottom:16px;
}
.vfl-doc-title{
	text-align:center;font-weight:800;color:#0f2340;font-size:12.5px;
	margin:0 0 14px;letter-spacing:.02em;
}
.vfl-doc p{ margin:0 0 10px; }
.vfl-doc-more{ text-align:center;color:#a7b1c2;margin:0; }
.vfl-actions{ display:flex; flex-direction:row; gap:8px; }
.vfl-btn-ghost{
	flex:1;
	display:flex;align-items:center;justify-content:center;gap:6px;
	padding:10px 8px;border:1.4px solid #d9e2f0;border-radius:10px;
	font-size:11.5px;font-weight:700;color:#3a4a63;background:#fff;
	white-space:nowrap;
	transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.vfl-btn-ghost img{ width:14px;height:14px;flex:0 0 auto; }
.vfl-btn-ghost:hover{ transform:translateY(-2px); border-color:#2871FE; box-shadow:0 12px 24px -14px rgba(40,113,254,.3); }
.vfl-btn-primary{
	flex:1;
	display:flex;align-items:center;justify-content:center;gap:6px;
	padding:11px 8px;border-radius:10px;
	font-size:11.5px;font-weight:700;color:#fff;
	white-space:nowrap;
	background:#2871FE;
	box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 12px 26px -8px rgba(40,113,254,.5);
	transition:transform .2s ease, box-shadow .2s ease;
}
.vfl-btn-primary img{ width:13px;height:13px; }
.vfl-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 18px 34px -8px rgba(40,113,254,.58); }

/* Colonne latérale : alertes + avancement */
.vfl-side{ display:flex; flex-direction:column; gap:20px; height:100%; }
.vfl-side .vfl-alerts{ flex:1; }
.vfl-side .vfl-progress-card{ flex:0 0 auto; }
.vfl-alerts h4{ display:flex; align-items:center; gap:8px; }
.vfl-alert-count{
	display:inline-flex;align-items:center;justify-content:center;
	width:19px;height:19px;border-radius:50%;
	background:#efeaff;color:#7a5cff;font-size:10.5px;font-weight:800;
}
.vfl-alert-item{ display:flex; gap:12px; padding:12px 0; }
.vfl-alert-item + .vfl-alert-item{ border-top:1px solid #edf1f7; }
.vfl-alert-item .ic{
	width:32px;height:32px;flex:0 0 32px;
	border-radius:9px;
	display:flex;align-items:center;justify-content:center;
}
.vfl-alert-item .ic img{ width:15px;height:15px; }
.vfl-alert-item strong{ display:block; font-size:12.5px;font-weight:700;color:#14243d;margin-bottom:3px; }
.vfl-alert-item p{ margin:0 0 6px; font-size:11px;line-height:1.5;color:#66748c; }
.vfl-alert-item a{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; }
.vfl-alert-item a img{ width:10px;height:10px; }
.vfl-alert-item:nth-of-type(1) a{ color:#7a5cff; }
.vfl-alert-item:nth-of-type(2) a{ color:#e8863c; }

.vfl-progress-track{
	position:relative;
	display:flex;align-items:center;justify-content:space-between;
	margin:18px 4px 10px;
}
.vfl-progress-track::before{
	content:'';position:absolute;left:0;right:0;top:50%;height:2px;
	background:#e3e9f2;
	transform:translateY(-50%);
	z-index:0;
}
.vfl-progress-track::after{
	content:'';position:absolute;left:0;top:50%;height:2px;width:50%;
	background:linear-gradient(90deg,#16a34a 0%,#16a34a 55%,#e8863c 100%);
	transform:translateY(-50%);
	z-index:0;
}
.vfl-progress-track .dot{
	position:relative;z-index:1;
	width:26px;height:26px;
	border-radius:50%;
	display:flex;align-items:center;justify-content:center;
	font-size:11px;font-weight:800;
	background:#fff;border:2px solid #e3e9f2;color:#9aa6ba;
}
.vfl-progress-track .dot img{ width:12px;height:12px; }
.vfl-progress-track .dot.done{ background:#16a34a;border-color:#16a34a; }
.vfl-progress-track .dot.current{ background:#e8863c;border-color:#e8863c;color:#fff; }
.vfl-progress-caption{ margin:0; text-align:center; font-size:11.5px;font-weight:700;color:#5c6b80; }

/* ---------------- Bandeau conformité ---------------- */
.vfl-banner{
	margin-top:22px;
	background:#eaf1ff;
	border-radius:18px;
	padding:22px 28px;
	display:flex;align-items:center;gap:24px;
}
.vfl-banner-left{ display:flex; align-items:flex-start; gap:14px; flex:1; min-width:0; }
.vfl-banner-left .ic, .vfl-banner-right .ic{
	width:34px;height:34px;flex:0 0 34px;
	border-radius:50%;
	background:#fff;
	display:flex;align-items:center;justify-content:center;
}
.vfl-banner-left .ic img, .vfl-banner-right .ic img{ width:16px;height:16px; }
.vfl-banner-left p{ margin:0; font-size:13px;font-weight:700;line-height:1.5;color:#123a8a; }
.vfl-banner-sep{ width:1px; align-self:stretch; background:rgba(40,113,254,.18); }
.vfl-banner-right{ display:flex; align-items:center; gap:12px; flex:0 0 auto; max-width:360px; }
.vfl-banner-right strong{ display:block; font-size:12.5px;font-weight:800;color:#0f2340;margin-bottom:2px; }
.vfl-banner-right p{ margin:0; font-size:11px;line-height:1.45;color:#4a5872; }
.vfl-flag{ width:26px;height:26px;flex:0 0 auto;border-radius:50%;box-shadow:0 0 0 2px #fff, 0 2px 6px rgba(16,38,73,.18); }

/* ---------------- Responsive ---------------- */
@media (max-width:1280px){
	.vfl-inner{ grid-template-columns:1fr; gap:44px; }
	.vfl-left{ max-width:640px; margin:0 auto; }
}
@media (max-width:1100px){
	.vfl-grid{ grid-template-columns:1fr; }
}
@media (max-width:980px){
	.vfl{ padding:52px 0 56px; }
	.vfl-steps{ grid-template-columns:repeat(3,1fr); row-gap:30px; }
	.vfl-arrow{ display:none; }
}
@media (max-width:640px){
	.vfl-title{ font-size:24px; }
	.vfl-panel{ padding:22px 16px 26px; }
	.vfl-panel-head{ flex-direction:column; align-items:flex-start; gap:10px; }
	.vfl-steps{ grid-template-columns:1fr 1fr; }
	.vfl-banner{ flex-direction:column; align-items:stretch; }
	.vfl-banner-sep{ display:none; }
	.vfl-banner-right{ max-width:none; }
}
@media (max-width:480px){
	.vfl-actions{ flex-direction:column; }
	.vfl-btn-ghost, .vfl-btn-primary{ white-space:normal; }
}
@media (max-width:430px){
	.vfl-steps{ grid-template-columns:1fr; }
}

/* =====================================================================
   VISIOacte — Section "Ils travaillent avec votre dossier" (blog.html)
   Agents disposés autour du dossier centralisé + résultat.
   ===================================================================== */

.vad{
	position:relative;
	padding:76px 0 84px;
	background:linear-gradient(180deg,#f6f9fd 0%,#ffffff 100%);
	border-top:1px solid #e6ecf5;
	font-family:"Cabin","Titillium Web",Arial,sans-serif;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}
.vad *{ box-sizing:border-box; }
.vad a{ text-decoration:none; }
.vad-inner{
	max-width:1560px;
	margin:0 auto;
	padding:0 26px;
	display:grid;
	grid-template-columns:minmax(0,23%) minmax(0,77%);
	gap:36px;
	align-items:start;
}

/* ---------------- Colonne gauche ---------------- */
.vad-badge{
	display:inline-flex;align-items:center;justify-content:center;
	width:34px;height:34px;border-radius:50%;
	background:#2871FE;color:#fff;font-weight:800;font-size:13px;
	margin-bottom:20px;
	box-shadow:0 10px 20px -8px rgba(40,113,254,.5);
}
.vad-title{
	margin:0 0 18px;
	font-family:"Manrope","Cabin","Titillium Web",Arial,sans-serif;
	font-size:29px;line-height:1.22;font-weight:800;letter-spacing:-.02em;color:#0f2340;
}
.vad-title .blue{ color:#2871FE; }
.vad-rule{
	display:block;width:56px;height:3px;
	background:linear-gradient(90deg,#2871FE,#7A5CFF);
	border-radius:2px;margin-bottom:22px;
	box-shadow:0 3px 12px rgba(40,113,254,.35);
}
.vad-lead{ margin:0 0 26px; font-size:14px; line-height:1.6; color:#4a5872; }
.vad-feats{ list-style:none; margin:0 0 26px; padding:0; }
.vad-feats li{ display:flex; gap:14px; padding:11px 0; }
.vad-feats li + li{ border-top:1px solid #e3e9f2; }
.vad-feats .ic{
	width:38px;height:38px;flex:0 0 38px;border-radius:50%;
	border:1.6px solid #cfe0ff;background:#fff;
	display:flex;align-items:center;justify-content:center;
}
.vad-feats .ic img{ width:18px;height:18px; }
.vad-feats strong{ display:block; font-size:14px;font-weight:700;color:#14243d;margin-bottom:3px; }
.vad-feats p{ margin:0; font-size:12.5px;line-height:1.5;color:#5c6b80; }

.vad-cta{
	display:flex;align-items:center;justify-content:center;gap:10px;
	width:100%;
	padding:15px 26px;
	border-radius:12px;
	background:#2871FE;color:#fff;
	font-size:14.5px;font-weight:700;
	box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 14px 28px -10px rgba(40,113,254,.5);
	transition:transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s ease;
}
.vad-cta img{ width:15px;height:15px; }
.vad-cta:hover{ transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 20px 36px -10px rgba(40,113,254,.58); }

/* ---------------- Panneau ---------------- */
.vad-panel{
	background:#fff;
	border:1px solid rgba(26,55,102,.08);
	border-radius:22px;
	box-shadow:0 1px 2px rgba(16,38,73,.04), 0 30px 60px -30px rgba(16,38,73,.22);
	padding:28px 30px 32px;
}
.vad-panel-head{
	display:flex;align-items:center;justify-content:space-between;gap:16px;
	padding-bottom:20px;margin-bottom:28px;
	border-bottom:1px solid #edf1f7;
}
.vad-panel-head h3{
	margin:0;
	font-family:"Manrope","Cabin",sans-serif;
	font-size:19px;font-weight:800;color:#0f2340;letter-spacing:-.01em;
}
.vad-panel-head h3 .blue{ color:#2871FE; }

/* ---------------- Flow : agents / dossier / résultat ---------------- */
.vad-flow{
	display:grid;
	grid-template-columns:190px 44px minmax(300px,1fr) 44px 190px 40px 258px;
	align-items:stretch;
}

.vad-agents{ grid-column:1; display:flex; flex-direction:column; justify-content:space-between; gap:18px; }
.vad-agents.vad-agents-right{ grid-column:5; }

.vad-agent{
	border:1px solid #e9edf4;border-radius:16px;background:#fbfcfe;
	padding:18px 18px 16px;
	box-shadow:0 1px 2px rgba(16,38,73,.04), 0 12px 24px -18px rgba(16,38,73,.16);
}
.vad-agent-ic{
	width:44px;height:44px;border-radius:50%;
	display:flex;align-items:center;justify-content:center;
	margin-bottom:12px;
}
.vad-agent-ic img{ width:20px;height:20px; }
.vad-agent strong{
	display:block;font-family:"Manrope","Cabin",sans-serif;
	font-size:14.5px;font-weight:800;color:#0f2340;margin-bottom:6px;
}
.vad-agent > p{ margin:0 0 12px; font-size:11.5px;line-height:1.5;color:#66748c; }
.vad-agent-tag{
	display:inline-block;font-size:10px;font-weight:700;
	padding:4px 10px;border-radius:999px;margin-bottom:12px;
}
.vad-checklist{ list-style:none; margin:0 0 14px; padding:0; }
.vad-checklist li{
	position:relative;padding-left:20px;
	font-size:11.5px;color:#3a4a63;margin-bottom:6px;line-height:1.3;
}
.vad-checklist li::before{
	content:'\2713';position:absolute;left:0;top:0;
	color:#16a34a;font-weight:800;font-size:11px;
}
.vad-agent-status{
	display:flex;align-items:center;gap:7px;
	font-size:11px;font-weight:700;color:#5c6b80;
	padding-top:10px;border-top:1px solid #edf1f7;
}
.vad-agent-status .dot{ width:7px;height:7px;border-radius:50%; }

/* Teintes par agent */
.vad-agent-ic.c-green{ background:#e6f7ec; } .vad-agent-tag.c-green{ background:#e6f7ec;color:#16a34a; } .vad-agent-status .dot.c-green{ background:#16a34a; }
.vad-agent-ic.c-blue{ background:#e9f1ff; } .vad-agent-tag.c-blue{ background:#e9f1ff;color:#2871FE; } .vad-agent-status .dot.c-blue{ background:#2871FE; }
.vad-agent-ic.c-purple{ background:#efeaff; } .vad-agent-tag.c-purple{ background:#efeaff;color:#7a5cff; } .vad-agent-status .dot.c-purple{ background:#7a5cff; }
.vad-agent-ic.c-orange{ background:#fff1e2; } .vad-agent-tag.c-orange{ background:#fff1e2;color:#e8863c; } .vad-agent-status .dot.c-orange{ background:#e8863c; }

/* Connecteurs courbes */
.vad-connector{ position:relative; }
.vad-connector.left{ grid-column:2; }
.vad-connector.right{ grid-column:4; }
.vad-connector svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.vad-connector path{ fill:none; stroke:#c7dbff; stroke-width:1.6; stroke-linecap:round; }

/* Dossier centralisé */
.vad-doc{
	grid-column:3;
	border:1px solid #e9edf4;border-radius:18px;background:#fff;
	padding:22px 24px;
	box-shadow:0 1px 2px rgba(16,38,73,.04), 0 20px 40px -22px rgba(16,38,73,.2);
}
.vad-doc-head{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.vad-doc-head img{ width:19px;height:19px; }
.vad-doc-head h4{
	margin:0;font-family:"Manrope","Cabin",sans-serif;
	font-size:15px;font-weight:800;color:#0f2340;
}
.vad-doc-sub{
	display:flex;align-items:center;justify-content:space-between;gap:12px;
	padding-bottom:14px;margin-bottom:6px;border-bottom:1px solid #edf1f7;
}
.vad-doc-sub strong{ display:block; font-size:16px;font-weight:800;color:#0f2340; }
.vad-doc-sub span{ display:block; font-size:11px;color:#8a97ab;margin-top:3px; }
.vad-status.ok{
	flex:0 0 auto;background:#e6f7ec;color:#16a34a;
	font-size:10.5px;font-weight:700;padding:5px 13px;border-radius:999px;white-space:nowrap;
}
.vad-doc-row{ display:flex; align-items:flex-start; gap:12px; padding:12px 0; }
.vad-doc-row + .vad-doc-row{ border-top:1px solid #f1f4f9; }
.vad-doc-row .ic{
	width:34px;height:34px;flex:0 0 34px;border-radius:9px;
	background:#f2f6fc;display:flex;align-items:center;justify-content:center;
}
.vad-doc-row .ic img{ width:16px;height:16px; }
.vad-doc-row > div{ flex:1; min-width:0; }
.vad-doc-row strong{ display:block; font-size:12.5px;font-weight:700;color:#14243d; }
.vad-doc-row p{ margin:2px 0 0; font-size:11px;line-height:1.4;color:#7c879a; }
.vad-doc-row .meta{
	flex:0 0 auto;display:flex;align-items:center;gap:4px;
	font-size:10.5px;font-weight:700;color:#8a97ab;white-space:nowrap;padding-top:2px;
}
.vad-doc-row .meta.ok{ color:#16a34a; }
.vad-doc-row .meta img{ width:10px;height:10px; }

/* Note d'orchestration */
.vad-note{
	grid-column:3;
	margin-top:18px;
	display:flex;gap:10px;align-items:flex-start;
	background:#eaf1ff;border-radius:12px;padding:12px 16px;
}
.vad-note .ic{
	width:26px;height:26px;flex:0 0 26px;border-radius:50%;
	background:#fff;display:flex;align-items:center;justify-content:center;
}
.vad-note .ic img{ width:13px;height:13px; }
.vad-note p{ margin:0; font-size:11.5px;font-weight:700;line-height:1.4;color:#123a8a; }

/* Flèche vers le résultat */
.vad-arrow-col{ grid-column:6; display:flex;align-items:center;justify-content:center; }
.vad-arrow-col img{ width:20px;height:20px;opacity:.5; }

/* Résultat : acte prêt à valider */
.vad-result{
	grid-column:7;
	border:1.6px solid #cfe0ff;border-radius:18px;
	background:linear-gradient(180deg,#f6f9ff,#ffffff);
	padding:20px;
	box-shadow:0 1px 2px rgba(16,38,73,.04), 0 24px 48px -22px rgba(40,113,254,.22);
}
.vad-result-head{ margin-bottom:14px; }
.vad-result-head .label{ display:block; font-size:12.5px;font-weight:800;color:#2871FE; }
.vad-result-head .check{
	display:flex;align-items:center;justify-content:center;
	width:38px;height:38px;border-radius:50%;
	background:#16a34a;margin:12px auto 0;
	box-shadow:0 10px 20px -8px rgba(22,163,74,.5);
}
.vad-result-head .check img{ width:17px;height:17px; }
.vad-result-doc{
	border:1px solid #e6ecf7;border-radius:12px;background:#fff;
	padding:16px 16px 12px;margin-bottom:16px;
}
.vad-result-doc .title{
	text-align:center;font-size:11px;font-weight:800;color:#0f2340;
	margin:0 0 12px;letter-spacing:.02em;line-height:1.4;
}
.vad-result-doc .row{ display:flex;align-items:center;gap:8px;padding:5px 0; }
.vad-result-doc .row .ph{ flex:0 0 16px;height:5px;border-radius:3px;background:#dde5f2; }
.vad-result-doc .row .val{ font-size:10.5px;font-weight:700;color:#1f3a75; }
.vad-result-list{ list-style:none; margin:0 0 16px; padding:0; }
.vad-result-list li{ display:flex; gap:10px; padding:8px 0; }
.vad-result-list .ic{
	width:26px;height:26px;flex:0 0 26px;border-radius:8px;
	background:#eaf1ff;display:flex;align-items:center;justify-content:center;
}
.vad-result-list .ic img{ width:13px;height:13px; }
.vad-result-list p{ margin:0; font-size:11px;line-height:1.4;color:#3a4a63;font-weight:600; }
.vad-result-cta{
	display:flex;align-items:center;justify-content:center;gap:8px;
	padding:12px;border-radius:10px;margin-bottom:10px;
	background:#2871FE;color:#fff;font-size:12.5px;font-weight:700;
	box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 12px 26px -8px rgba(40,113,254,.5);
	transition:transform .2s ease, box-shadow .2s ease;
}
.vad-result-cta img{ width:13px;height:13px; }
.vad-result-cta:hover{ transform:translateY(-2px); }
.vad-result-link{
	display:flex;align-items:center;justify-content:center;gap:6px;
	font-size:11.5px;font-weight:700;color:#2871FE;
}
.vad-result-link img{ width:13px;height:13px; }

/* ---------------- Bandeau statistiques ---------------- */
.vad-stats{
	display:grid;grid-template-columns:repeat(4,1fr);gap:26px;
	margin-top:32px;padding-top:26px;border-top:1px solid #edf1f7;
}
.vad-stat{ display:flex; gap:12px; align-items:flex-start; }
.vad-stat .ic{
	width:36px;height:36px;flex:0 0 36px;border-radius:50%;
	border:1.6px solid #cfe0ff;background:#fff;
	display:flex;align-items:center;justify-content:center;
}
.vad-stat .ic img{ width:17px;height:17px; }
.vad-stat strong{ display:block; font-size:12.5px;font-weight:800;color:#0f2340;margin-bottom:3px; }
.vad-stat p{ margin:0; font-size:11px;line-height:1.4;color:#66748c; }

/* ---------------- Responsive ---------------- */
@media (max-width:1280px){
	.vad-inner{ grid-template-columns:1fr; gap:44px; }
	.vad-left{ max-width:640px; margin:0 auto; }
}
@media (max-width:1100px){
	.vad-flow{ grid-template-columns:1fr; }
	.vad-connector{ display:none; }
	.vad-doc, .vad-note, .vad-result, .vad-agents.vad-agents-right{ grid-column:1; }
	.vad-agents{ flex-direction:row; gap:20px; }
	.vad-agents > .vad-agent{ flex:1; min-width:0; }
	.vad-arrow-col{ grid-column:1; transform:rotate(90deg); padding:6px 0; }
	.vad-note{ margin-top:0; }
	.vad-flow{ row-gap:22px; }
	.vad-stats{ grid-template-columns:1fr 1fr; row-gap:22px; }
}
@media (max-width:720px){
	.vad{ padding:52px 0 56px; }
	.vad-title{ font-size:24px; }
	.vad-panel{ padding:22px 16px 26px; }
	.vad-panel-head{ flex-direction:column; align-items:flex-start; gap:10px; }
	.vad-agents{ flex-direction:column; }
	.vad-stats{ grid-template-columns:1fr; }
}

/* =====================================================================
   VISIOacte — Animations premium (blog.html)
   Révélation au défilement + micro-interactions, dégradées et sobres.
   ===================================================================== */

@media (prefers-reduced-motion:no-preference){

	/* ---------- Révélation au scroll ---------- */
	.reveal{
		opacity:0;
		transform:translateY(26px);
		transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
	}
	.reveal.in-view{ opacity:1; transform:none; }

	.reveal-group > *{
		opacity:0;
		transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
	}
	.reveal-group.in-view > *{ opacity:1; }

	/* Variante glissement (par défaut) : ne touche jamais aux éléments en transform de positionnement (fade-only) */
	.reveal-group:not(.fade-only) > *{ transform:translateY(22px); }
	.reveal-group.in-view:not(.fade-only) > *{ transform:none; }

	.reveal-group.in-view > *:nth-child(1){ transition-delay:.05s; }
	.reveal-group.in-view > *:nth-child(2){ transition-delay:.12s; }
	.reveal-group.in-view > *:nth-child(3){ transition-delay:.19s; }
	.reveal-group.in-view > *:nth-child(4){ transition-delay:.26s; }
	.reveal-group.in-view > *:nth-child(5){ transition-delay:.33s; }
	.reveal-group.in-view > *:nth-child(6){ transition-delay:.40s; }
	.reveal-group.in-view > *:nth-child(7){ transition-delay:.47s; }
	.reveal-group.in-view > *:nth-child(8){ transition-delay:.54s; }
	.reveal-group.in-view > *:nth-child(9){ transition-delay:.61s; }

}

/* ---------- Icônes de fonctionnalités : micro-interaction au survol ---------- */
.va-aihero-feats .ic, .vfl-feats .ic, .vad-feats .ic,
.va-abhero-feats .ic, .vda-feat .ic, .vco-feat .ic, .vhi-feat .ic{
	transition:transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s ease, border-color .22s ease;
}
.va-aihero-feats li:hover .ic, .vfl-feats li:hover .ic, .vad-feats li:hover .ic,
.va-abhero-feats li:hover .ic, .vda-feat:hover .ic, .vco-feat:hover .ic, .vhi-feat:hover .ic{
	transform:scale(1.1);
	border-color:#2871FE;
	box-shadow:0 10px 20px -10px rgba(40,113,254,.45);
}

/* ---------- Cartes internes des maquettes (about.html) : survol ---------- */
.vda-card, .vco-kpi, .vco-stat, .vhi-card{
	transition:transform .24s cubic-bezier(.4,0,.2,1), box-shadow .24s ease, border-color .24s ease;
}
.vda-card:hover, .vco-kpi:hover, .vco-stat:hover, .vhi-card:hover{
	transform:translateY(-3px);
	box-shadow:0 18px 36px -18px rgba(16,38,73,.22);
	border-color:rgba(40,113,254,.22);
}

/* ---------- Cartes agents & lignes du dossier : survol ---------- */
.vad-agent{
	transition:transform .24s cubic-bezier(.4,0,.2,1), box-shadow .24s ease, border-color .24s ease;
}
.vad-agent:hover{
	transform:translateY(-4px);
	box-shadow:0 22px 42px -22px rgba(16,38,73,.28);
	border-color:rgba(40,113,254,.25);
}
.vad-doc-row{ border-radius:10px; transition:background .18s ease; }
.vad-doc-row:hover{ background:#f6f9ff; }
.vad-result{ transition:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease; }
.vad-result:hover{
	transform:translateY(-4px);
	box-shadow:0 32px 60px -26px rgba(40,113,254,.32);
}
.vad-stat{ transition:transform .2s ease; }
.vad-stat:hover{ transform:translateY(-2px); }

/* =====================================================================
   VISIOacte — pa-hero : "L'IA prépare. Vous gardez le contrôle."
   (reproduction de la maquette Production d'actes, étape 4)
   ===================================================================== */

.pa-hero *{ box-sizing:border-box; }

.pa-hero{
	background:
		radial-gradient(1100px 420px at 12% -10%, rgba(40,113,254,.08), transparent 60%),
		linear-gradient(180deg,#f4f7fd 0%,#eef2fb 100%);
	padding:64px 0 56px;
	overflow:hidden;
}
.pa-hero .va-container{
	max-width:1480px;
	margin:0 auto;
	padding:0 24px;
}

/* ---------- Bandeau haut : badge / titre / carte "assurance" ---------- */
.pa-top{
	display:flex;
	align-items:flex-start;
	gap:40px;
	margin-bottom:52px;
}
.pa-top-left{ flex:0 0 auto; max-width:460px; }
.pa-top-right{ flex:1 1 auto; padding-top:70px; }

.pa-badge{
	display:inline-block;
	background:#2871FE;
	color:#fff;
	font-size:12.5px;
	font-weight:700;
	letter-spacing:.4px;
	padding:8px 16px;
	border-radius:8px;
	margin-bottom:22px;
	box-shadow:0 10px 22px -8px rgba(40,113,254,.55);
}
.pa-title{
	font-family:"Cabin","Inter",sans-serif;
	font-size:42px;
	line-height:1.18;
	font-weight:700;
	color:#0b1830;
	margin:0 0 18px;
}
.pa-title span{ color:#2871FE; }
.pa-lead{
	font-family:"Inter",sans-serif;
	font-size:15.5px;
	line-height:1.65;
	color:#5b6b80;
	margin:0;
	max-width:400px;
}

.pa-assure{
	background:#ffffff;
	border:1px solid #e6ebf3;
	border-radius:16px;
	padding:22px 28px;
	display:flex;
	align-items:center;
	gap:26px;
	box-shadow:0 14px 36px rgba(16,38,73,.06);
}
.pa-assure-lead{
	display:flex;
	align-items:center;
	gap:14px;
	flex:0 0 auto;
	max-width:270px;
}
.pa-assure-ic{
	width:46px;height:46px;flex:0 0 46px;
	border-radius:12px;
	background:#eaf1ff;
	display:flex;align-items:center;justify-content:center;
}
.pa-assure-ic img{ width:22px;height:22px; }
.pa-assure-lead p{
	margin:0;
	font-size:14.5px;
	line-height:1.4;
	font-weight:700;
	color:#0b1830;
}
.pa-assure-sep{
	width:1px;
	align-self:stretch;
	background:#e6ebf3;
}
.pa-assure-grid{
	display:flex;
	flex:1 1 auto;
	gap:0;
}
.pa-assure-item{
	display:flex;
	align-items:center;
	gap:12px;
	flex:1 1 0;
	padding:0 16px;
	border-left:1px solid #e6ebf3;
}
.pa-assure-item:first-child{ border-left:none; padding-left:0; }
.pa-assure-item .ic{
	width:38px;height:38px;flex:0 0 38px;
	border-radius:50%;
	border:1.6px solid #cfe0ff;
	background:#fff;
	display:flex;align-items:center;justify-content:center;
}
.pa-assure-item .ic img{ width:17px;height:17px; }
.pa-assure-item span{
	font-size:13px;
	line-height:1.3;
	font-weight:600;
	color:#1c2b3f;
}

/* ---------- Timeline des 6 étapes ---------- */
.pa-steps{
	display:flex;
	align-items:stretch;
	gap:0;
	margin-bottom:36px;
}
.pa-step{
	position:relative;
	flex:1 1 0;
	padding:0 16px;
	text-align:center;
	display:flex;
	flex-direction:column;
}
.pa-step-num{
	position:relative;
	z-index:2;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:32px;height:32px;
	margin:0 auto 22px;
	border-radius:50%;
	background:linear-gradient(180deg,#3d84ff,#2871FE);
	color:#fff;
	font-size:14px;
	font-weight:700;
	box-shadow:0 0 0 6px rgba(40,113,254,.12);
}
.pa-step:not(:last-child)::after{
	content:"";
	position:absolute;
	top:15px;
	left:calc(50% + 26px);
	width:calc(100% - 52px);
	border-top:2px dashed #b9cdfa;
	z-index:1;
}
.pa-ic{
	width:100%;
	max-width:148px;
	height:118px;
	margin:0 auto 20px;
	display:flex;
	align-items:center;
	justify-content:center;
}
.pa-ic img{
	width:100%;
	height:100%;
	object-fit:contain;
	filter:drop-shadow(0 16px 16px rgba(16,38,73,.22));
}
.pa-step h3{
	font-family:"Cabin","Inter",sans-serif;
	font-size:16.5px;
	font-weight:700;
	color:#0b1830;
	margin:0 0 8px;
	min-height:44px;
}
.pa-step > p{
	font-size:13px;
	line-height:1.55;
	color:#5b6b80;
	margin:0 0 14px;
	min-height:82px;
}
.pa-note{
	display:flex;
	align-items:flex-start;
	gap:8px;
	text-align:left;
	background:#f2f6fd;
	border:1px solid #e6ebf3;
	border-radius:12px;
	padding:12px 14px;
	flex:1 1 auto;
	height:100%;
}
.pa-note i{
	color:#22B07D;
	font-size:14px;
	margin-top:2px;
	flex:0 0 auto;
}
.pa-note strong{
	display:block;
	font-size:12.5px;
	font-weight:700;
	color:#0b1830;
	margin-bottom:3px;
}
.pa-note span{
	display:block;
	font-size:11.5px;
	line-height:1.45;
	color:#6b7a8f;
}

/* ---------- Bandeau bas (façon .vfl-banner de blog.html) ---------- */
.pa-foot{
	position:relative;
	display:flex;
	align-items:center;
	background:#eaf1ff;
	border-radius:18px;
	padding:22px 28px;
	gap:24px;
}
.pa-foot-item{
	display:flex;
	align-items:center;
	gap:14px;
	flex:1 1 0;
}
.pa-foot-ic{
	width:34px;
	height:34px;
	flex-shrink:0;
	border-radius:50%;
	background:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
}
.pa-foot-ic img{ width:16px;height:16px;flex-shrink:0; }
.pa-foot-item strong{
	display:block;
	font-size:14px;
	font-weight:700;
	color:#0b1830;
	margin-bottom:2px;
}
.pa-foot-item div span{
	display:block;
	font-size:12.5px;
	line-height:1.4;
	color:#4a5872;
}
.pa-foot-sep{
	width:1px;
	align-self:stretch;
	background:rgba(40,113,254,.18);
}
.pa-flag{
	flex:0 0 26px;
	width:26px;height:26px;
	border-radius:50%;
	box-shadow:0 0 0 2px #fff, 0 2px 6px rgba(16,38,73,.18);
}

/* ---------- Animation d'entrée ---------- */
.pa-step,.pa-assure,.pa-top-left{
	animation:paFadeUp .6s ease both;
}
.pa-top-left{ animation-delay:.02s; }
.pa-assure{ animation-delay:.08s; }
.pa-step:nth-child(1){ animation-delay:.12s; }
.pa-step:nth-child(2){ animation-delay:.20s; }
.pa-step:nth-child(3){ animation-delay:.28s; }
.pa-step:nth-child(4){ animation-delay:.36s; }
.pa-step:nth-child(5){ animation-delay:.44s; }
.pa-step:nth-child(6){ animation-delay:.52s; }
@keyframes paFadeUp{
	from{ opacity:0; transform:translateY(16px); }
	to{ opacity:1; transform:translateY(0); }
}

/* ---------- Responsive ---------- */
@media (max-width:1199px){
	.pa-steps{ flex-wrap:wrap; row-gap:34px; }
	.pa-step{ flex:0 0 33.3333%; max-width:33.3333%; }
	.pa-step::after{ display:none; }
	.pa-assure-lead{ max-width:220px; }
}
@media (max-width:991px){
	.pa-top{ flex-direction:column; }
	.pa-top-left{ max-width:none; }
	.pa-assure{ flex-wrap:wrap; }
	.pa-assure-sep{ display:none; }
	.pa-assure-grid{ flex-wrap:wrap; row-gap:14px; }
	.pa-assure-item{ flex:0 0 50%; border-left:none !important; padding-left:0; }
	.pa-foot{ flex-wrap:wrap; }
	.pa-foot-sep{ display:none; }
	.pa-flag{ position:absolute; top:20px; right:30px; }
}
@media (max-width:767px){
	.pa-title{ font-size:32px; }
	.pa-step{ flex:0 0 50%; max-width:50%; }
	.pa-step > p{ min-height:0; }
}
@media (max-width:575px){
	.pa-step{ flex:0 0 100%; max-width:100%; }
}

/* =====================================================================
   VISIOacte — pc-prod : "Une production collaborative et maîtrisée"
   (reproduction de la maquette, sous le hero de portfolio.html)
   ===================================================================== */

.pc-prod *{ box-sizing:border-box; }
.pc-prod{
	background:#ffffff;
	padding:64px 0 60px;
	overflow:hidden;
}
.pc-prod .va-container{
	max-width:1480px;
	margin:0 auto;
	padding:0 24px;
}
.pc-prod .blue{ color:#2871FE; }

/* ---------- Haut : intro (gauche) + timeline (droite) ---------- */
.pc-top{
	display:flex;
	align-items:flex-start;
	gap:52px;
	margin-bottom:40px;
}
.pc-intro{ flex:0 0 300px; max-width:300px; }
.pc-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:36px; }
.pc-timeline{ display:flex; align-items:flex-start; padding-top:4px; }

.pc-title{
	font-family:"Cabin","Inter",sans-serif;
	font-size:33px;
	line-height:1.22;
	font-weight:700;
	color:#0b1830;
	margin:0 0 18px;
}
.pc-rule{
	display:block;
	width:46px;height:4px;border-radius:3px;
	background:#2871FE;
	margin-bottom:20px;
}
.pc-lead{
	font-size:14.5px;
	line-height:1.65;
	color:#5b6b80;
	margin:0 0 26px;
}

.pc-feats{ list-style:none; margin:0 0 26px; padding:0; }
.pc-feats li{ display:flex; gap:14px; padding:12px 0; }
.pc-feats li + li{ border-top:1px solid #eef1f6; }
.pc-feats .ic{
	width:40px;height:40px;flex:0 0 40px;
	border-radius:50%;
	border:1.6px solid #cfe0ff;
	background:#fff;
	display:flex;align-items:center;justify-content:center;
}
.pc-feats .ic img{ width:18px;height:18px; }
.pc-feats strong{
	display:block;
	font-size:14.5px;font-weight:700;color:#14243d;
	margin-bottom:3px;
}
.pc-feats p{ margin:0; font-size:12.5px; line-height:1.5; color:#6b7a8f; }

.pc-secu{
	display:flex;
	align-items:flex-start;
	gap:12px;
	background:#eef3fd;
	border:1px solid #e2ebfb;
	border-radius:14px;
	padding:16px 16px;
	position:relative;
}
.pc-secu .ic{
	width:38px;height:38px;flex:0 0 38px;
	border-radius:50%;
	background:#fff;
	display:flex;align-items:center;justify-content:center;
}
.pc-secu .ic img{ width:18px;height:18px; }
.pc-secu strong{ display:block; font-size:13px; font-weight:800; color:#0f2340; margin-bottom:3px; }
.pc-secu p{ margin:0; font-size:11.5px; line-height:1.5; color:#5a6b85; }
.pc-flag{
	width:22px;height:22px;flex:0 0 22px;
	border-radius:50%;
	align-self:center;
	box-shadow:0 0 0 2px #fff;
}

/* ---------- Timeline 6 etapes ---------- */
.pc-tstep{
	flex:1 1 0;
	position:relative;
	text-align:center;
	padding:0 12px;
}
.pc-tic{
	width:74px;height:74px;
	margin:0 auto 16px;
	border-radius:50%;
	display:flex;align-items:center;justify-content:center;
}
.pc-tic img{ width:30px;height:30px; }
.pc-tic.teal{ background:#e2f5f2; }
.pc-tic.blue{ background:#e9f1ff; }
.pc-tic.purple{ background:#efeaff; }
.pc-tic.orange{ background:#fdeede; }
.pc-tic.green{ background:#e6f7ec; }

/* connecteur fleche pointille degrade entre les cercles */
.pc-tstep:not(:last-child)::after{
	content:"";
	position:absolute;
	top:37px;
	left:calc(50% + 46px);
	width:calc(100% - 92px);
	height:8px;
	background:linear-gradient(90deg, var(--c1,#9bd8d0), var(--c2,#9bb8ff));
	-webkit-mask:linear-gradient(90deg,#000 0 5px,transparent 5px 11px) repeat-x left center/11px 2px;
	mask:linear-gradient(90deg,#000 0 5px,transparent 5px 11px) repeat-x left center/11px 2px;
}
.pc-tstep:not(:last-child)::before{
	content:"";
	position:absolute;
	top:33px;
	left:calc(150% - 50px);
	width:0;height:0;
	border-top:5px solid transparent;
	border-bottom:5px solid transparent;
	border-left:7px solid var(--c2,#9bb8ff);
	z-index:2;
}
.pc-tstep:nth-child(1){ --c1:#14B8A6; --c2:#2871FE; }
.pc-tstep:nth-child(2){ --c1:#2871FE; --c2:#7A5CFF; }
.pc-tstep:nth-child(3){ --c1:#7A5CFF; --c2:#F2994A; }
.pc-tstep:nth-child(4){ --c1:#F2994A; --c2:#2871FE; }
.pc-tstep:nth-child(5){ --c1:#2871FE; --c2:#22B07D; }

.pc-tstep h4{
	font-family:"Cabin","Inter",sans-serif;
	font-size:15px;font-weight:700;color:#0b1830;
	margin:0 0 8px;
	min-height:38px;
}
.pc-tstep > p{
	font-size:12px;line-height:1.5;color:#6b7a8f;
	margin:0 0 16px;
	min-height:54px;
}
.pc-pill{
	display:inline-flex;align-items:center;gap:6px;
	font-size:11.5px;font-weight:700;
	padding:6px 14px;border-radius:999px;
}
.pc-pill i{ font-size:11px; }
.pc-pill.green{ background:#e6f7ec; color:#16a34a; }
.pc-pill.blue{ background:#e9f1ff; color:#2871FE; }
.pc-pill.purple{ background:#efeaff; color:#7a5cff; }
.pc-pill.orange{ background:#fdeede; color:#e8863c; }
.pc-pill.gray{ background:#eef1f6; color:#7a869c; }
.pc-pill.green-out{ background:#eef8f1; color:#22a06b; }

/* ---------- Rangee du milieu : 3 panneaux ---------- */
.pc-panels{
	display:grid;
	grid-template-columns:1.15fr 1fr 1fr;
	gap:16px;
}
.pc-panel{
	background:#fff;
	border:1px solid #e6ebf3;
	border-radius:16px;
	padding:20px 22px;
	box-shadow:0 12px 30px -18px rgba(16,38,73,.16);
}
.pc-panel-head{
	display:flex;align-items:center;justify-content:space-between;gap:10px;
	margin-bottom:16px;
}
.pc-panel-head h3{
	font-family:"Cabin","Inter",sans-serif;
	font-size:15.5px;font-weight:700;color:#0b1830;margin:0;
}
.pc-tag{
	font-size:11px;font-weight:700;
	padding:4px 11px;border-radius:999px;
}
.pc-tag.green{ background:#e6f7ec; color:#16a34a; }
.pc-count{
	display:inline-flex;align-items:center;justify-content:center;
	min-width:22px;height:22px;padding:0 6px;
	border-radius:999px;background:#eef1f6;color:#5c6b80;
	font-size:11.5px;font-weight:700;
}

/* Panneau Apercu de l'acte */
.pc-doc-toolbar{
	display:flex;align-items:center;gap:10px;
	padding:8px 12px;
	border:1px solid #eef1f6;
	border-radius:10px 10px 0 0;
	border-bottom:none;
	color:#8a97ab;
	font-size:13px;
}
.pc-doc-toolbar > span{ display:flex;align-items:center; }
.pc-doc-toolbar .pc-zoom{
	margin-left:6px;gap:4px;
	font-size:11.5px;font-weight:600;color:#5c6b80;
}
.pc-doc-toolbar .pc-pdf{
	margin-left:auto;
	font-size:10.5px;font-weight:700;color:#5c6b80;
	background:#f1f4f9;border-radius:6px;padding:4px 9px;
}
.pc-doc{
	border:1px solid #eef1f6;
	border-radius:0 0 10px 10px;
	padding:22px 24px 26px;
}
.pc-doc-title{
	text-align:center;
	font-family:"Cabin","Inter",sans-serif;
	font-weight:800;font-size:14.5px;letter-spacing:.3px;
	color:#0b1830;
	margin:0 0 18px;
	line-height:1.4;
}
.pc-doc p{
	font-size:12px;line-height:1.7;color:#4a5872;
	margin:0 0 9px;
}
.pc-doc p strong{ color:#0b1830; font-weight:700; }
.pc-doc-more{ color:#9aa6b8; }

/* Panneau Commentaires */
.pc-comment{
	display:flex;gap:12px;
	padding:13px 0;
	border-top:1px solid #f0f2f7;
}
.pc-comment:first-of-type{ border-top:none; padding-top:2px; }
.pc-comment .ic{
	width:34px;height:34px;flex:0 0 34px;
	border-radius:50%;
	display:flex;align-items:center;justify-content:center;
}
.pc-comment .ic img{ width:16px;height:16px; }
.pc-comment .ic.purple{ background:#efeaff; }
.pc-comment .ic.orange{ background:#fdeede; }
.pc-comment .ic.gray{ background:#eef1f6; }
.pc-comment-top{
	display:flex;align-items:center;justify-content:space-between;gap:8px;
	margin-bottom:3px;
}
.pc-comment-top strong{ font-size:12.5px;font-weight:700;color:#0f2340; }
.pc-comment-top span{ font-size:11px;color:#9aa6b8; }
.pc-comment p{ margin:0; font-size:11.5px;line-height:1.5;color:#5a6b85; }
.pc-comment p b{ color:#16a34a;font-weight:700; }
.pc-link{
	display:inline-flex;align-items:center;gap:7px;
	margin-top:12px;
	font-size:12.5px;font-weight:700;color:#2871FE;
}
.pc-link:hover{ color:#1c5ce0; }

/* Panneau Indicateurs de qualite */
.pc-donut-row{
	display:flex;align-items:center;gap:20px;
	margin:4px 0 18px;
}
.pc-donut{
	width:132px;height:132px;flex:0 0 132px;
	border-radius:50%;
	background:conic-gradient(#22B07D 0 33%, #2871FE 33% 96%, #eaedf3 96% 100%);
	-webkit-mask:radial-gradient(circle 44px at 50% 50%, transparent 98%, #000 100%);
	mask:radial-gradient(circle 44px at 50% 50%, transparent 98%, #000 100%);
}
.pc-donut-txt strong{
	display:block;
	font-family:"Cabin","Inter",sans-serif;
	font-size:30px;font-weight:800;color:#0b1830;line-height:1;
}
.pc-donut-txt span{ font-size:12.5px;font-weight:600;color:#6b7a8f; }
.pc-quality-list{ list-style:none;margin:0 0 18px;padding:0; }
.pc-quality-list li{
	display:flex;align-items:center;gap:10px;
	padding:9px 0;
	border-bottom:1px solid #f0f2f7;
	font-size:12.5px;color:#3a4a63;
}
.pc-quality-list li:last-child{ border-bottom:none; }
.pc-quality-list li i{ color:#22B07D; font-size:15px; }
.pc-quality-list li span{ flex:1 1 auto; }
.pc-quality-list li b{ font-weight:700; color:#5c6b80; }
.pc-quality-list li b.green{ color:#16a34a; }
.pc-btn{
	display:flex;align-items:center;justify-content:center;gap:10px;
	background:#2871FE;color:#fff;
	font-size:13px;font-weight:600;
	padding:13px 18px;border-radius:10px;
	transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.pc-btn:hover{
	background:#1c5ce0;color:#fff;
	transform:translateY(-1px);
	box-shadow:0 12px 26px rgba(40,113,254,.3);
}

/* ---------- Bandeau bas : 5 items ---------- */
.pc-banner{
	display:flex;
	align-items:stretch;
	gap:0;
	background:#eef3fd;
	border:1px solid #e2ebfb;
	border-radius:18px;
	padding:22px 26px;
}
.pc-banner-item{
	flex:1 1 0;
	display:flex;
	gap:12px;
	padding:2px 20px;
	border-left:1px solid #dbe6fb;
}
.pc-banner-item:first-child{ border-left:none; padding-left:0; }
.pc-banner-lead{ flex:1.35 1 0; }
.pc-banner-item .ic{ flex:0 0 24px; }
.pc-banner-item .ic img{ width:24px;height:24px; }
.pc-banner-item strong{
	display:block;
	font-size:12.5px;font-weight:800;color:#0f2340;
	line-height:1.35;
	margin-bottom:4px;
}
.pc-banner-item p{ margin:0; font-size:11px;line-height:1.5;color:#5a6b85; }

/* ---------- Responsive ---------- */
@media (max-width:1200px){
	.pc-top{ flex-direction:column; gap:36px; }
	.pc-intro{ flex:none; max-width:none; }
	.pc-timeline{ flex-wrap:wrap; row-gap:30px; width:100%; }
	.pc-tstep{ flex:0 0 33.333%; }
	.pc-tstep::after,.pc-tstep::before{ display:none; }
	.pc-panels{ grid-template-columns:1fr 1fr; }
	.pc-quality{ grid-column:1 / -1; }
}
@media (max-width:860px){
	.pc-panels{ grid-template-columns:1fr; }
	.pc-quality{ grid-column:auto; }
	.pc-banner{ flex-wrap:wrap; gap:18px 0; }
	.pc-banner-item{ flex:0 0 50%; border-left:none; padding-left:0; }
}
@media (max-width:560px){
	.pc-tstep{ flex:0 0 100%; }
	.pc-banner-item{ flex:0 0 100%; }
	.pc-title{ font-size:27px; }
}

/* =====================================================================
   VISIOacte — tr-track : "Suivez chaque etape, en toute transparence"
   ===================================================================== */

.tr-track *{ box-sizing:border-box; }
.tr-track{
	background:#f7f9fd;
	padding:60px 0 60px;
	overflow:hidden;
}
.tr-track .va-container{
	max-width:1480px;
	margin:0 auto;
	padding:0 24px;
}
.tr-track .blue{ color:#2871FE; }

.tr-top{
	display:flex;
	align-items:flex-start;
	gap:34px;
	margin-bottom:34px;
}
.tr-intro{ flex:0 0 288px; max-width:288px; }
.tr-center{ flex:1 1 auto; min-width:0; }
.tr-benef{ flex:0 0 224px; max-width:224px; }

/* ---------- Colonne gauche ---------- */
.tr-badge{
	display:inline-flex;align-items:center;gap:8px;
	background:#2871FE;color:#fff;
	font-size:12px;font-weight:700;letter-spacing:.4px;
	padding:8px 15px;border-radius:8px;
	margin-bottom:20px;
	box-shadow:0 10px 22px -8px rgba(40,113,254,.55);
}
.tr-badge i{ font-size:13px; }
.tr-title{
	font-family:"Cabin","Inter",sans-serif;
	font-size:26px;line-height:1.28;font-weight:700;color:#0b1830;
	margin:0 0 16px;
}
.tr-rule{
	display:block;width:44px;height:4px;border-radius:3px;
	background:#2871FE;margin-bottom:18px;
}
.tr-lead{
	font-size:14px;line-height:1.65;color:#5b6b80;margin:0 0 26px;
}
.tr-secu{
	display:flex;align-items:flex-start;gap:12px;
	background:#eef3fd;border:1px solid #e2ebfb;border-radius:14px;
	padding:16px;
}
.tr-secu .ic{
	width:38px;height:38px;flex:0 0 38px;border-radius:50%;
	background:#fff;display:flex;align-items:center;justify-content:center;
}
.tr-secu .ic img{ width:18px;height:18px; }
.tr-secu strong{ display:block;font-size:13px;font-weight:800;color:#0f2340;margin-bottom:3px; }
.tr-secu p{ margin:0;font-size:11.5px;line-height:1.5;color:#5a6b85; }
.tr-flag{
	width:22px;height:22px;flex:0 0 22px;border-radius:50%;
	align-self:center;box-shadow:0 0 0 2px #fff;
}

/* ---------- Colonne centrale ---------- */
.tr-center{
	background:#fff;
	border:1px solid #e9edf4;
	border-radius:18px;
	padding:24px 28px 26px;
	box-shadow:0 18px 44px -30px rgba(16,38,73,.22);
}
.tr-h{
	font-family:"Cabin","Inter",sans-serif;
	font-size:15px;font-weight:700;color:#0b1830;
	margin:0 0 22px;
}

/* Stepper */
.tr-stepper{
	display:flex;
	align-items:flex-start;
	padding:4px 0 6px;
}
.tr-step{
	flex:1 1 0;
	position:relative;
	text-align:center;
	padding:0 6px;
}
.tr-sdot{
	position:relative;
	z-index:2;
	width:60px;height:60px;
	margin:0 auto 14px;
	border-radius:50%;
	background:#fff;
	border:2px solid #d5dce7;
	display:flex;align-items:center;justify-content:center;
}
.tr-sdot img{ width:26px;height:26px; }
.tr-step.done .tr-sdot{ border-color:#16a34a; }
.tr-step.active .tr-sdot{ border-color:#F2994A; box-shadow:0 0 0 4px rgba(242,153,74,.14); }

.tr-step:not(:last-child)::after{
	content:"";
	position:absolute;
	top:29px;
	left:calc(50% + 34px);
	width:calc(100% - 68px);
	height:3px;border-radius:2px;
	background:#e0e5ee;
	z-index:1;
}
.tr-step.done:not(:last-child)::after{ background:#16a34a; }

.tr-step h4{
	font-family:"Cabin","Inter",sans-serif;
	font-size:13.5px;font-weight:700;color:#0b1830;
	margin:0 0 7px;
	min-height:34px;
}
.tr-sstate{
	display:block;
	font-size:12.5px;font-weight:700;
	margin-bottom:3px;
}
.tr-sstate.green{ color:#16a34a; }
.tr-sstate.orange{ color:#e8863c; }
.tr-sstate.gray{ color:#9aa6b8; }
.tr-stime{ display:block;font-size:11px;color:#8a97ab; }

/* Journal des actions */
.tr-journal{
	margin-top:22px;
	border:1px solid #e9edf4;
	border-radius:14px;
	padding:20px 22px 18px;
}
.tr-table-wrap{ overflow-x:auto; }
.tr-table{
	width:100%;
	border-collapse:collapse;
	font-size:12.5px;
}
.tr-table th{
	text-align:left;
	font-weight:700;color:#7a869c;
	font-size:11.5px;
	padding:10px 14px;
	background:#f5f7fb;
	white-space:nowrap;
}
.tr-table th:first-child{ border-radius:8px 0 0 8px; }
.tr-table th:last-child{ border-radius:0 8px 8px 0; }
.tr-table td{
	padding:13px 12px;
	border-bottom:1px solid #eef1f6;
	color:#3a4a63;
	vertical-align:middle;
}
.tr-table tbody tr:last-child td{ border-bottom:none; }
.tr-table td:first-child{ white-space:nowrap; color:#5c6b80; }
.tr-table td:nth-child(2){ font-weight:600;color:#0f2340;white-space:nowrap; }
.tr-table td:nth-child(4){ white-space:nowrap; }
.tr-table th:nth-child(3),.tr-table td:nth-child(3){ width:34%; }
.tr-table td:last-child{ text-align:right;width:34px; }

.tr-ico{ font-size:16px;line-height:1;vertical-align:middle; }
.tr-ico.ok{ color:#16a34a; }
.tr-ico.wait{ color:#9aa6b8; font-size:15px; }
.tr-ico.spin{
	display:inline-block;
	width:15px;height:15px;
	border:2px dashed #F2994A;
	border-radius:50%;
	animation:trspin 3s linear infinite;
}
@keyframes trspin{ to{ transform:rotate(360deg); } }

.tr-link{
	display:inline-flex;align-items:center;gap:7px;
	margin-top:16px;
	font-size:12.5px;font-weight:700;color:#2871FE;
}
.tr-link:hover{ color:#1c5ce0; }

/* ---------- Colonne droite : Vos benefices ---------- */
.tr-benef-list{ list-style:none;margin:0;padding:0; }
.tr-benef-list li{
	display:flex;gap:13px;
	padding:14px 0;
}
.tr-benef-list li + li{ border-top:1px solid #e7ebf2; }
.tr-benef-list .ic{
	width:40px;height:40px;flex:0 0 40px;
	border-radius:50%;
	border:1.6px solid #cfe0ff;
	background:#fff;
	display:flex;align-items:center;justify-content:center;
}
.tr-benef-list .ic img{ width:18px;height:18px; }
.tr-benef-list strong{
	display:block;font-size:13.5px;font-weight:700;color:#14243d;margin-bottom:4px;
}
.tr-benef-list p{ margin:0;font-size:12px;line-height:1.5;color:#6b7a8f; }

/* ---------- Bandeau bas ---------- */
.tr-banner{
	display:flex;
	align-items:stretch;
	background:#fff;
	border:1px solid #e6ebf3;
	border-radius:18px;
	padding:22px 26px;
	box-shadow:0 14px 36px -24px rgba(16,38,73,.18);
}
.tr-banner-item{
	flex:1 1 0;
	display:flex;gap:12px;
	padding:2px 20px;
	border-left:1px solid #eef1f6;
}
.tr-banner-item:first-child{ border-left:none;padding-left:0; }
.tr-banner-lead{ flex:1.3 1 0; }
.tr-banner-item .ic{ flex:0 0 24px; }
.tr-banner-item .ic img{ width:24px;height:24px; }
.tr-banner-item strong{
	display:block;font-size:12.5px;font-weight:800;color:#0f2340;
	line-height:1.35;margin-bottom:4px;
}
.tr-banner-item p{ margin:0;font-size:11px;line-height:1.5;color:#5a6b85; }

/* ---------- Responsive ---------- */
@media (max-width:1180px){
	.tr-top{ flex-direction:column; gap:28px; }
	.tr-intro,.tr-benef{ flex:none;max-width:none;width:100%; }
	.tr-benef-list{ display:grid;grid-template-columns:1fr 1fr;gap:0 24px; }
	.tr-benef-list li + li{ border-top:none; }
	.tr-benef-list li{ border-top:1px solid #e7ebf2; }
}
@media (max-width:820px){
	.tr-stepper{ flex-wrap:wrap; row-gap:26px; }
	.tr-step{ flex:0 0 33.333%; }
	.tr-step::after{ display:none; }
	.tr-banner{ flex-wrap:wrap; gap:18px 0; }
	.tr-banner-item{ flex:0 0 50%;border-left:none;padding-left:0; }
}
@media (max-width:560px){
	.tr-step{ flex:0 0 50%; }
	.tr-benef-list{ grid-template-columns:1fr; }
	.tr-banner-item{ flex:0 0 100%; }
	.tr-title{ font-size:25px; }
}

/* =====================================================================
   portfolio.html — Animations premium (reveal au defilement + micro-interactions)
   ===================================================================== */
@media (prefers-reduced-motion:no-preference){

	.pf-reveal{ opacity:0; }
	.pf-reveal.pf-in{
		animation:pfReveal .85s cubic-bezier(.22,.61,.36,1) var(--pf-d,0s) both;
	}
	@keyframes pfReveal{
		from{ opacity:0; transform:translateY(28px); filter:blur(5px); }
		to{ opacity:1; transform:translateY(0); filter:blur(0); }
	}

	/* Connecteurs de la timeline "production collaborative" qui se tracent */
	.pc-timeline.pf-in .pc-tstep:not(:last-child)::after{
		animation:pcDraw .7s cubic-bezier(.4,0,.2,1) both;
	}
	.pc-timeline.pf-in .pc-tstep:nth-child(2):not(:last-child)::after{ animation-delay:.12s; }
	.pc-timeline.pf-in .pc-tstep:nth-child(3):not(:last-child)::after{ animation-delay:.24s; }
	.pc-timeline.pf-in .pc-tstep:nth-child(4):not(:last-child)::after{ animation-delay:.36s; }
	.pc-timeline.pf-in .pc-tstep:nth-child(5):not(:last-child)::after{ animation-delay:.48s; }
	@keyframes pcDraw{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }

	/* Donut "Indicateurs de qualite" : arrivee en rotation */
	.pc-quality.pf-in .pc-donut{ animation:pcDonut 1s .1s cubic-bezier(.34,1.2,.64,1) both; }
	@keyframes pcDonut{
		from{ opacity:0; transform:rotate(-130deg) scale(.75); }
		to{ opacity:1; transform:none; }
	}

	/* Stepper "transparence" : ligne de progression qui se remplit */
	.tr-step.done:not(:last-child)::after{ transform-origin:left center; }
	.tr-stepper.pf-in .tr-step.done:not(:last-child)::after{
		animation:trFill .6s cubic-bezier(.4,0,.2,1) both;
	}
	.tr-stepper.pf-in .tr-step:nth-child(2).done:not(:last-child)::after{ animation-delay:.18s; }
	.tr-stepper.pf-in .tr-step:nth-child(3).done:not(:last-child)::after{ animation-delay:.36s; }
	@keyframes trFill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

	/* Cercle de l'etape active : pulsation continue discrete */
	.tr-step.active .tr-sdot{ animation:trPulse 2.6s ease-in-out infinite; }
	@keyframes trPulse{
		0%,100%{ box-shadow:0 0 0 4px rgba(242,153,74,.16); }
		50%{ box-shadow:0 0 0 9px rgba(242,153,74,.04); }
	}

	/* Coches du journal qui apparaissent en "pop" */
	.tr-journal.pf-in .tr-ico.ok{ animation:trPop .5s cubic-bezier(.34,1.56,.64,1) both; }
	@keyframes trPop{ from{ transform:scale(0); } to{ transform:scale(1); } }
}

/* Micro-interactions au survol */
.pc-panel{ transition:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease; }
.pc-panel:hover{ transform:translateY(-4px); box-shadow:0 24px 46px -22px rgba(16,38,73,.3); }
.pc-tic, .tr-sdot{ transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.pc-tstep:hover .pc-tic, .tr-step:hover .tr-sdot{ transform:translateY(-4px) scale(1.05); }
.tr-benef-list li .ic{ transition:transform .25s ease, border-color .25s ease; }
.tr-benef-list li:hover .ic{ transform:scale(1.08); border-color:#2871FE; }
.tr-table tbody tr{ transition:background .18s ease; }
.tr-table tbody tr:hover{ background:#f7f9fd; }
.pc-note, .pa-step .pa-note{ transition:transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s ease, border-color .28s ease; }
.pa-step:hover .pa-note{ transform:translateY(-3px); border-color:#cfe0ff; box-shadow:0 14px 30px -18px rgba(16,38,73,.2); }

/* =====================================================================
   VISIOacte — pr-hero : "Une tarification simple, transparente..."
   (hero de service.html, reproduction de la maquette tarification)
   ===================================================================== */

.pr-hero *{ box-sizing:border-box; }
.pr-hero{
	position:relative;
	overflow:hidden;
	padding:58px 0 66px;
	background:
		radial-gradient(900px 460px at 90% -6%, rgba(40,113,254,.10), transparent 60%),
		linear-gradient(180deg,#eef3fc 0%,#f5f8fd 60%,#ffffff 100%);
}
.pr-hero::before{
	content:"";
	position:absolute;
	inset:0;
	background-image:radial-gradient(rgba(40,113,254,.10) 1px, transparent 1.4px);
	background-size:24px 24px;
	-webkit-mask:linear-gradient(180deg,#000 0%, rgba(0,0,0,.25) 55%, transparent 80%);
	mask:linear-gradient(180deg,#000 0%, rgba(0,0,0,.25) 55%, transparent 80%);
	opacity:.7;
	pointer-events:none;
}
.pr-hero .va-container{
	position:relative;
	z-index:1;
	max-width:1480px;
	margin:0 auto;
	padding:0 24px;
}
.pr-hero .blue{ color:#2871FE; }

.pr-top{
	display:flex;
	align-items:flex-start;
	gap:42px;
}
.pr-intro{ flex:0 0 300px; max-width:300px; }
.pr-main{ flex:1 1 auto; min-width:0; }

/* ---------- Colonne gauche ---------- */
.pr-title{
	font-family:"Cabin","Inter",sans-serif;
	font-size:33px;
	line-height:1.22;
	font-weight:700;
	color:#0b1830;
	margin:0 0 18px;
}
.pr-rule{
	display:block;width:46px;height:4px;border-radius:3px;
	background:#2871FE;margin-bottom:20px;
}
.pr-lead{
	font-size:14.5px;line-height:1.6;color:#5b6b80;margin:0 0 26px;
}
.pr-feats{ list-style:none;margin:0 0 28px;padding:0; }
.pr-feats li{ display:flex;gap:14px;padding:12px 0; }
.pr-feats li + li{ border-top:1px solid #e7ecf4; }
.pr-feats .ic{
	width:44px;height:44px;flex:0 0 44px;
	border-radius:50%;
	background:#e9f1ff;
	display:flex;align-items:center;justify-content:center;
}
.pr-feats .ic img{ width:20px;height:20px; }
.pr-feats strong{
	display:block;font-size:14.5px;font-weight:700;color:#14243d;margin-bottom:4px;
}
.pr-feats p{ margin:0;font-size:12.5px;line-height:1.5;color:#6b7a8f; }
.pr-btn{
	display:inline-flex;align-items:center;gap:12px;
	background:#2871FE;color:#fff;
	font-size:15px;font-weight:600;
	padding:15px 26px;border-radius:12px;
	box-shadow:0 16px 30px -12px rgba(40,113,254,.5);
	transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.pr-btn img{ width:16px;height:16px; transition:transform .2s ease; }
.pr-btn:hover{ background:#1c5ce0;color:#fff;transform:translateY(-2px); }
.pr-btn:hover img{ transform:translateX(4px); }

/* ---------- Bandeau "réassurance" ---------- */
.pr-assure{
	display:flex;
	background:#fff;
	border:1px solid #e9edf4;
	border-radius:16px;
	padding:18px 26px;
	margin-bottom:26px;
	box-shadow:0 14px 36px -22px rgba(16,38,73,.18);
}
.pr-assure-item{
	flex:1 1 0;
	display:flex;
	align-items:center;
	gap:13px;
	padding:0 16px;
}
.pr-assure-item:first-child{ padding-left:0; }
.pr-assure-item:last-child{ padding-right:0; }
.pr-assure-item .ic{
	width:42px;height:42px;flex:0 0 42px;
	border-radius:50%;
	border:1.6px solid #cfe0ff;
	background:#fff;
	display:flex;align-items:center;justify-content:center;
}
.pr-assure-item .ic img{ width:19px;height:19px; }
.pr-assure-item strong{
	display:block;font-size:13px;font-weight:700;color:#0f2340;margin-bottom:2px;
}
.pr-assure-item span{
	display:block;font-size:11.5px;line-height:1.35;color:#6b7a8f;
}

/* ---------- 3 cartes d'offres — style premium ---------- */
.pr-cards{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:22px;
	align-items:stretch;
	padding-top:6px;
}
.pr-card{
	position:relative;
	background:#fff;
	border:1px solid #e9edf4;
	border-radius:20px;
	padding:30px 26px 24px;
	display:flex;
	flex-direction:column;
	box-shadow:0 1px 2px rgba(16,38,73,.04), 0 26px 52px -34px rgba(16,38,73,.32);
	transition:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.pr-card::before{
	content:"";
	position:absolute;
	inset:0 0 auto 0;
	height:4px;
	border-radius:20px 20px 0 0;
}
.pr-card:hover{ transform:translateY(-8px); }

/* Ligne d'identité : badge + nom */
.pr-card-top{
	display:flex;
	align-items:center;
	gap:14px;
	padding-bottom:18px;
	border-bottom:1px solid #eef1f6;
}
.pr-cbadge{
	width:50px;height:50px;flex:0 0 50px;
	border-radius:15px;
	display:flex;align-items:center;justify-content:center;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
.pr-cbadge img{ width:23px;height:23px; }
.pr-card-id h3{
	font-family:"Cabin","Inter",sans-serif;
	font-size:17px;font-weight:800;letter-spacing:.3px;
	color:#0b1830;
	margin:0 0 3px;
}
.pr-card-id p{
	margin:0;font-size:11.5px;line-height:1.4;color:#8494ab;
}

/* Liste d'inclus */
.pr-list{
	list-style:none;margin:0;padding:16px 0 10px;flex:1 1 auto;
}
.pr-list li{
	position:relative;
	padding:6.5px 0 6.5px 26px;
	font-size:13px;line-height:1.5;color:#33415a;
}
.pr-list li::before{
	content:"\2713";
	position:absolute;left:0;top:6.5px;
	width:17px;height:17px;
	border-radius:50%;
	display:flex;align-items:center;justify-content:center;
	font-size:10px;font-weight:800;
	color:#fff;
}

/* Pied */
.pr-card-foot{
	display:flex;align-items:center;justify-content:center;gap:9px;
	margin-top:14px;padding-top:16px;
	border-top:1px dashed #e3e8f1;
	font-size:13px;font-weight:600;line-height:1.4;color:#5b6b80;
	text-align:center;
}
.pr-card-foot img{ width:16px;height:16px;flex:0 0 auto; }

/* --- Accent bleu (Cabinet) --- */
.pr-c-blue::before{ background:linear-gradient(90deg,#2871FE,#7aa6ff); }
.pr-c-blue .pr-cbadge{ background:linear-gradient(150deg,#3d84ff,#1c4fc4); box-shadow:0 12px 22px -8px rgba(40,113,254,.5), inset 0 1px 0 rgba(255,255,255,.35); }
.pr-c-blue .pr-list li::before{ background:#2871FE; }
.pr-c-blue:hover{ border-color:rgba(40,113,254,.4); box-shadow:0 40px 72px -34px rgba(40,113,254,.42); }

/* --- Accent vert (Entreprise) --- */
.pr-c-green::before{ background:linear-gradient(90deg,#12a074,#5fd9b0); }
.pr-c-green .pr-cbadge{ background:linear-gradient(150deg,#1fce93,#0f7f5c); box-shadow:0 12px 22px -8px rgba(23,162,121,.5), inset 0 1px 0 rgba(255,255,255,.35); }
.pr-c-green .pr-list li::before{ background:#12a074; }
.pr-c-green:hover{ border-color:rgba(18,160,116,.42); box-shadow:0 40px 72px -34px rgba(18,160,116,.4); }

/* --- Accent orange (Sur-mesure) --- */
.pr-c-orange::before{ background:linear-gradient(90deg,#ef8f3c,#f7c08a); }
.pr-c-orange .pr-cbadge{ background:linear-gradient(150deg,#f39a4b,#c96f1f); box-shadow:0 12px 22px -8px rgba(239,143,60,.5), inset 0 1px 0 rgba(255,255,255,.35); }
.pr-c-orange .pr-list li::before{ background:#e8862f; }
.pr-c-orange:hover{ border-color:rgba(232,134,47,.42); box-shadow:0 40px 72px -34px rgba(232,134,47,.4); }

/* ---------- Pièce € 3D + libellés flottants ---------- */
.pr-coin{
	position:relative;
	z-index:4;
	margin-top:-250px;
	min-height:440px;
	display:flex;
	align-items:flex-end;
	justify-content:center;
	transform:translateX(140px);
}
.pr-main{ position:relative; z-index:1; }
.pr-coin-img{
	width:520px;
	max-width:60vw;
	height:auto;
	filter:drop-shadow(0 40px 44px rgba(16,38,73,.28));
}
.pr-coin-label{
	position:absolute;
	top:44%;
	display:flex;
	align-items:flex-start;
	gap:11px;
	background:#fff;
	border:1px solid #e9edf4;
	border-radius:14px;
	padding:14px 16px;
	width:236px;
	box-shadow:0 18px 40px -22px rgba(16,38,73,.24);
	z-index:2;
}
.pr-coin-label .pr-cl-ic{ width:20px;height:20px;flex:0 0 auto;margin-top:1px; }
.pr-coin-label p{ margin:0;font-size:12px;line-height:1.45;font-weight:600;color:#1c2b3f; }
.pr-cl-left{ right:calc(50% + 214px); }
.pr-cl-right{ left:calc(50% + 214px); }
/* connecteurs : coude arrondi pointillé du libellé vers le socle */
.pr-cl-left::after,
.pr-cl-right::after{
	content:"";
	position:absolute;
	top:62%;
	width:66px;
	height:76px;
	border:2px dashed #b3caf2;
	border-bottom:none;
}
.pr-cl-left::after{
	left:calc(100% - 6px);
	border-left:none;
	border-radius:0 16px 0 0;
}
.pr-cl-right::after{
	right:calc(100% - 6px);
	border-right:none;
	border-radius:16px 0 0 0;
}
/* petit point de jonction sur le socle */
.pr-cl-left::before,
.pr-cl-right::before{
	content:"";
	position:absolute;
	top:calc(62% + 74px);
	width:7px;height:7px;
	border-radius:50%;
	background:#8fb2f0;
}
.pr-cl-left::before{ left:calc(100% + 54px); }
.pr-cl-right::before{ right:calc(100% + 54px); }

/* ---------- Responsive ---------- */
@media (max-width:1200px){
	.pr-top{ flex-direction:column; gap:34px; }
	.pr-intro{ flex:none;max-width:none; }
}
@media (max-width:900px){
	.pr-cards{ grid-template-columns:1fr; max-width:420px; margin:26px auto 0; padding-top:10px; }
	.pr-assure{ flex-wrap:wrap; gap:16px 0; }
	.pr-assure-item{ flex:0 0 50%;padding:0 10px; }
	.pr-coin{ flex-direction:column; gap:18px; }
	.pr-coin-img{ max-width:70vw;width:260px;order:-1; }
	.pr-cl-left,.pr-cl-right{ margin:0;max-width:280px; }
	.pr-cl-left::after,.pr-cl-right::after{ display:none; }
}
@media (max-width:560px){
	.pr-title{ font-size:27px; }
	.pr-assure-item{ flex:0 0 100%; }
}

/* pr-hero — entrée premium au chargement */
@media (prefers-reduced-motion:no-preference){
	.pr-intro > *, .pr-assure{
		animation:prRise .8s cubic-bezier(.22,.61,.36,1) both;
	}
	.pr-card, .pr-coin{
		animation:prFade .8s cubic-bezier(.22,.61,.36,1) both;
	}
	@keyframes prFade{ from{ opacity:0; } to{ opacity:1; } }
	.pr-intro > *:nth-child(1){ animation-delay:.02s; }
	.pr-intro > *:nth-child(2){ animation-delay:.08s; }
	.pr-intro > *:nth-child(3){ animation-delay:.14s; }
	.pr-intro > *:nth-child(4){ animation-delay:.20s; }
	.pr-intro > *:nth-child(5){ animation-delay:.26s; }
	.pr-assure{ animation-delay:.12s; }
	.pr-card:nth-child(1){ animation-delay:.22s; }
	.pr-card:nth-child(2){ animation-delay:.30s; }
	.pr-card:nth-child(3){ animation-delay:.38s; }
	.pr-coin{ animation-delay:.44s; }
	@keyframes prRise{
		from{ opacity:0; transform:translateY(24px); }
		to{ opacity:1; transform:translateY(0); }
	}
	.pr-c-blue .pr-cbadge, .pr-c-green .pr-cbadge, .pr-c-orange .pr-cbadge{
		animation:prBadge .6s .5s cubic-bezier(.34,1.56,.64,1) both;
	}
	@keyframes prBadge{ from{ transform:scale(0); } to{ transform:scale(1); } }
}

/* =====================================================================
   VISIOacte — ct-pricing : grille tarifaire Cabinets d'expertise comptable
   (sous le hero de service.html, reproduction de la maquette)
   ===================================================================== */

.ct-pricing *{ box-sizing:border-box; }
.ct-pricing{
	background:linear-gradient(180deg,#eef3fb 0%,#f4f7fc 100%);
	padding:58px 0 60px;
}
.ct-pricing .va-container{
	max-width:1480px;margin:0 auto;padding:0 24px;
}
.ct-pricing .blue{ color:#2871FE; }

.ct-grid{
	display:flex;
	align-items:flex-start;
	gap:34px;
	margin-bottom:26px;
}
.ct-intro{ flex:0 0 288px; max-width:288px; }
.ct-panel{ flex:1 1 auto; min-width:0; }
.ct-incl{ flex:0 0 300px; max-width:300px; }

/* ---------- Colonne gauche ---------- */
.ct-badge{
	display:inline-flex;align-items:center;gap:12px;
	margin-bottom:22px;
}
.ct-badge .ic{
	width:44px;height:44px;flex:0 0 44px;
	border-radius:50%;
	background:#2871FE;
	display:flex;align-items:center;justify-content:center;
}
.ct-badge .ic img{ width:22px;height:22px; filter:brightness(0) invert(1); }
.ct-badge-t{ display:flex;flex-direction:column;line-height:1.2; }
.ct-badge-t b{ font-size:14px;font-weight:800;color:#0f2340;letter-spacing:.5px; }
.ct-badge-t i{ font-size:11px;font-style:normal;font-weight:600;color:#5b6b80;letter-spacing:.4px; }

.ct-title{
	font-family:"Cabin","Inter",sans-serif;
	font-size:31px;line-height:1.22;font-weight:700;color:#0b1830;
	margin:0 0 18px;
}
.ct-rule{ display:block;width:46px;height:4px;border-radius:3px;background:#2871FE;margin-bottom:20px; }
.ct-lead{ font-size:14px;line-height:1.6;color:#5b6b80;margin:0 0 26px; }

.ct-feats{ list-style:none;margin:0;padding:0; }
.ct-feats li{ display:flex;gap:14px;padding:13px 0; }
.ct-feats li + li{ border-top:1px solid #e2e8f2; }
.ct-feats .ic{
	width:44px;height:44px;flex:0 0 44px;
	border-radius:50%;
	border:1.6px solid #cfe0ff;
	background:#fff;
	display:flex;align-items:center;justify-content:center;
}
.ct-feats .ic img{ width:19px;height:19px; }
.ct-feats strong{ display:block;font-size:13.5px;font-weight:700;color:#14243d;margin-bottom:3px; }
.ct-feats p{ margin:0;font-size:12px;line-height:1.5;color:#6b7a8f; }

/* ---------- Panneau central ---------- */
.ct-panel{
	background:#fff;
	border:1px solid #e6ebf3;
	border-radius:20px;
	padding:26px 28px 24px;
	box-shadow:0 22px 50px -32px rgba(16,38,73,.28);
}
.ct-panel-head{
	display:flex;align-items:center;gap:16px;
	margin-bottom:22px;
}
.ct-panel-head .ic{
	width:46px;height:46px;flex:0 0 46px;
	display:flex;align-items:center;justify-content:center;
}
.ct-panel-head .ic img{ width:40px;height:40px; }
.ct-panel-head h3{
	font-family:"Cabin","Inter",sans-serif;
	font-size:19px;font-weight:700;color:#0b1830;margin:0 0 3px;
}
.ct-panel-head p{ margin:0;font-size:13px;color:#6b7a8f; }

/* ---------- Tableau tarifaire ---------- */
.ct-table{
	border:1px solid #e9edf4;
	border-radius:14px;
	overflow:hidden;
}
.ct-tr{
	position:relative;
	display:grid;
	grid-template-columns:1.08fr 1fr 1fr;
	align-items:center;
}
.ct-tr + .ct-tr{ border-top:1px solid #eef1f6; }
.ct-tr > div{ padding:20px 22px;text-align:center; }
.ct-tr > div + div{ border-left:1px solid #eef1f6; }
.ct-tr .ct-c1{ text-align:left; }

.ct-th{ background:#f7f9fd; }
.ct-th > div{
	padding:15px 22px;
	font-size:13px;font-weight:700;color:#26364f;
}
.ct-th span{ display:block;font-size:11.5px;font-weight:600;color:#2871FE;margin-top:3px; }

.ct-c1 b{ display:block;font-size:15.5px;font-weight:700;color:#2871FE;margin-bottom:3px; }
.ct-c1 span{ font-size:12px;color:#8090a6; }
.ct-c2 b{ font-size:27px;font-weight:800;color:#2871FE;line-height:1; }
.ct-c2 em{ font-size:13px;font-style:normal;font-weight:700;color:#2871FE; }
.ct-c2 b.ct-quote{ font-size:19px; }
.ct-c2 span{ display:block;font-size:12px;color:#8090a6;margin-top:8px; }
.ct-c3 b{ display:block;font-size:15px;font-weight:800;color:#12203a;margin-bottom:3px; }
.ct-c3 span{ font-size:12px;color:#8090a6; }
.ct-dash{ font-size:20px;color:#9aa6b8; }

/* Ligne populaire */
.ct-pop{ background:#eef4ff; box-shadow:inset 0 0 0 1px rgba(40,113,254,.16); }
.ct-pop > div{ padding-top:40px;padding-bottom:16px; }
.ct-poptag{
	position:absolute;
	left:0;top:12px;
	background:#2871FE;color:#fff;
	font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
	padding:5px 13px;
	border-radius:6px;
	box-shadow:0 8px 16px -6px rgba(40,113,254,.5);
}

/* Note bas de panneau */
.ct-note{
	display:flex;align-items:flex-start;gap:12px;
	margin-top:16px;
	background:#eff4fc;
	border:1px solid #e0e9f7;
	border-radius:12px;
	padding:14px 16px;
}
.ct-note .ic{ flex:0 0 auto; }
.ct-note .ic img{ width:18px;height:18px;margin-top:1px; }
.ct-note p{ margin:0;font-size:12px;line-height:1.55;color:#5b6b85; }

/* ---------- Colonne droite : inclus ---------- */
.ct-incl h3{
	font-family:"Cabin","Inter",sans-serif;
	font-size:16px;font-weight:700;color:#0b1830;
	margin:0 0 8px;
	padding-bottom:2px;
}
.ct-incl ul{ list-style:none;margin:0;padding:0; }
.ct-incl li{ display:flex;gap:13px;padding:15px 0; }
.ct-incl li + li{ border-top:1px solid #e2e8f2; }
.ct-incl .ic{
	width:38px;height:38px;flex:0 0 38px;
	display:flex;align-items:flex-start;justify-content:center;
}
.ct-incl .ic img{ width:24px;height:24px; }
.ct-incl strong{ display:block;font-size:13.5px;font-weight:700;color:#14243d;margin-bottom:3px; }
.ct-incl p{ margin:0;font-size:12px;line-height:1.5;color:#6b7a8f; }

/* ---------- Bandeau bas ---------- */
.ct-foot{
	display:flex;
	align-items:center;
	gap:26px;
	background:#eaf1fb;
	border:1px solid #dde8f7;
	border-radius:18px;
	padding:20px 28px;
}
.ct-foot-item{
	display:flex;align-items:center;gap:16px;
	flex:1 1 0;
}
.ct-foot-shield{
	width:52px;height:52px;flex:0 0 52px;
	border-radius:14px;
	background:linear-gradient(150deg,#3d84ff,#1c4fc4);
	display:flex;align-items:center;justify-content:center;
	box-shadow:0 14px 26px -8px rgba(40,113,254,.55), inset 0 1px 0 rgba(255,255,255,.35);
}
.ct-foot-shield img{ width:26px;height:26px; }
.ct-foot-item .ic{
	width:52px;height:52px;flex:0 0 52px;
	border-radius:50%;
	background:#fff;
	display:flex;align-items:center;justify-content:center;
}
.ct-foot-item .ic img{ width:24px;height:24px; }
.ct-foot-item strong{ display:block;font-size:14px;font-weight:800;color:#0f2340;margin-bottom:3px; }
.ct-foot-item p{ margin:0;font-size:12px;line-height:1.5;color:#5a6b85; }
.ct-flag{
	width:26px;height:26px;flex:0 0 26px;
	border-radius:50%;
	box-shadow:0 0 0 2px #fff;
}
.ct-foot-sep{ width:1px;align-self:stretch;background:#cddcf0; }
.ct-foot-btn{
	flex:0 0 auto;
	display:inline-flex;align-items:center;gap:12px;
	background:#2871FE;color:#fff;
	font-size:15px;font-weight:600;
	padding:15px 26px;border-radius:12px;
	box-shadow:0 16px 30px -12px rgba(40,113,254,.5);
	transition:background .2s ease, transform .2s ease;
}
.ct-foot-btn img{ width:16px;height:16px;transition:transform .2s ease; }
.ct-foot-btn:hover{ background:#1c5ce0;color:#fff;transform:translateY(-2px); }
.ct-foot-btn:hover img{ transform:translateX(4px); }

/* ---------- Responsive ---------- */
@media (max-width:1180px){
	.ct-grid{ flex-wrap:wrap; }
	.ct-intro{ flex:1 1 100%;max-width:none; }
	.ct-panel{ flex:1 1 100%;order:3; }
	.ct-incl{ flex:1 1 100%;max-width:none; }
	.ct-incl ul{ display:grid;grid-template-columns:1fr 1fr;gap:0 26px; }
	.ct-incl li + li{ border-top:none; }
	.ct-incl li{ border-top:1px solid #e2e8f2; }
}
@media (max-width:820px){
	.ct-foot{ flex-wrap:wrap;gap:18px; }
	.ct-foot-sep{ display:none; }
	.ct-foot-item{ flex:1 1 100%; }
	.ct-foot-btn{ flex:1 1 100%;justify-content:center; }
}
@media (max-width:640px){
	.ct-title{ font-size:27px; }
	.ct-incl ul{ grid-template-columns:1fr; }
	.ct-tr{ grid-template-columns:1fr; text-align:left; }
	.ct-tr > div{ text-align:left;padding:12px 18px; }
	.ct-tr .ct-c2, .ct-tr .ct-c3{ padding-top:0; }
	.ct-th{ display:none; }
	.ct-c2 span, .ct-c3 span{ display:inline;margin:0 0 0 6px; }
	.ct-pop .ct-c1{ padding-top:28px; }
}

/* ---------- ct-pricing : variante verte (Offre Entreprises) ---------- */
.ct-theme-green .blue{ color:#12a074; }
.ct-theme-green .ct-badge .ic{ background:#e4f5ef; border-radius:13px; }
.ct-theme-green .ct-badge .ic img{ filter:none; width:24px;height:24px; }
.ct-theme-green .ct-rule{ background:#12a074; }
.ct-theme-green .ct-feats .ic{ border-color:#bfe6d8; }
.ct-theme-green .ct-panel-head .ic{
	width:56px;height:56px;flex:0 0 56px;
	border-radius:50%;
	background:#12a074;
}
.ct-theme-green .ct-panel-head .ic img{ width:28px;height:28px; }
.ct-theme-green .ct-th span{ color:#12a074; }
.ct-theme-green .ct-c1 b{ color:#12a074; }
.ct-theme-green .ct-c2 b{ color:#12a074; }
.ct-theme-green .ct-c2 em{ color:#12a074; }
.ct-theme-green .ct-pop{ background:#eef8f3; box-shadow:inset 0 0 0 1px rgba(18,160,116,.18); }
.ct-theme-green .ct-poptag{ background:#12a074; box-shadow:0 8px 16px -6px rgba(18,160,116,.5); }
.ct-theme-green .ct-note{ background:#eef8f3; border-color:#d7ede3; }
.ct-theme-green .ct-foot{ background:#e9f5f0; border-color:#d5ebe1; }
.ct-theme-green .ct-foot-shield{
	background:linear-gradient(150deg,#26c79a,#0d8a63);
	box-shadow:0 14px 26px -8px rgba(18,160,116,.55), inset 0 1px 0 rgba(255,255,255,.35);
}
.ct-theme-green .ct-foot-sep{ background:#c7e6da; }
.ct-theme-green .ct-foot-btn{
	background:#12a074;
	box-shadow:0 16px 30px -12px rgba(18,160,116,.5);
}
.ct-theme-green .ct-foot-btn:hover{ background:#0d8a63; }
.ct-foot-cta{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:9px; }
.ct-foot-cta-note{ font-size:12px; font-weight:600; color:#12a074; letter-spacing:.2px; }
@media (max-width:820px){
	.ct-foot-cta{ flex:1 1 100%; align-items:stretch; }
	.ct-foot-cta-note{ text-align:center; }
}

/* =====================================================================
   VISIOacte — Animations premium (service.html / offres.html)
   Reveal au scroll + micro-interactions. Piloté par assets/js/va-premium.js
   ===================================================================== */

@media (prefers-reduced-motion:no-preference){

	/* ---- Reveal générique au scroll ---- */
	.va-anim [data-va]{
		opacity:0;
		will-change:opacity, transform;
		transition:opacity .7s cubic-bezier(.22,.61,.36,1),
		           transform .7s cubic-bezier(.22,.61,.36,1);
		transition-delay:var(--va-delay, 0s);
	}
	.va-anim [data-va="up"]      { transform:translateY(34px); }
	.va-anim [data-va="down"]    { transform:translateY(-28px); }
	.va-anim [data-va="left"]    { transform:translateX(-40px); }
	.va-anim [data-va="right"]   { transform:translateX(40px); }
	.va-anim [data-va="zoom"]    { transform:scale(.92); }
	.va-anim [data-va="blur"]    { transform:translateY(24px); filter:blur(8px); }

	.va-anim [data-va].is-in{
		opacity:1;
		transform:none;
		filter:none;
	}

	/* ---- of-hero : entrée au chargement (offres.html) ---- */
	.of-hero .of-eyebrow,
	.of-hero .of-title,
	.of-hero .of-lead,
	.of-hero .of-jump{
		animation:ofRise .85s cubic-bezier(.22,.61,.36,1) both;
	}
	.of-hero .of-title{ animation-delay:.08s; }
	.of-hero .of-lead{ animation-delay:.16s; }
	.of-hero .of-jump{ animation-delay:.24s; }
	@keyframes ofRise{
		from{ opacity:0; transform:translateY(26px); }
		to{ opacity:1; transform:translateY(0); }
	}

	/* ---- ct-pricing : lignes du tableau en cascade ---- */
	.va-anim .ct-panel.is-in .ct-tr{
		animation:ctRow .55s cubic-bezier(.22,.61,.36,1) both;
	}
	.va-anim .ct-panel.is-in .ct-tr:nth-child(1){ animation-delay:.05s; }
	.va-anim .ct-panel.is-in .ct-tr:nth-child(2){ animation-delay:.11s; }
	.va-anim .ct-panel.is-in .ct-tr:nth-child(3){ animation-delay:.17s; }
	.va-anim .ct-panel.is-in .ct-tr:nth-child(4){ animation-delay:.23s; }
	.va-anim .ct-panel.is-in .ct-tr:nth-child(5){ animation-delay:.29s; }
	.va-anim .ct-panel.is-in .ct-tr:nth-child(6){ animation-delay:.35s; }
	@keyframes ctRow{
		from{ opacity:0; transform:translateY(16px); }
		to{ opacity:1; transform:translateY(0); }
	}

	/* ---- ct-incl : puces qui apparaissent une à une ---- */
	.va-anim .ct-incl.is-in li{
		animation:ctRow .5s cubic-bezier(.22,.61,.36,1) both;
	}
	.va-anim .ct-incl.is-in li:nth-child(1){ animation-delay:.04s; }
	.va-anim .ct-incl.is-in li:nth-child(2){ animation-delay:.10s; }
	.va-anim .ct-incl.is-in li:nth-child(3){ animation-delay:.16s; }
	.va-anim .ct-incl.is-in li:nth-child(4){ animation-delay:.22s; }
	.va-anim .ct-incl.is-in li:nth-child(5){ animation-delay:.28s; }
	.va-anim .ct-incl.is-in li:nth-child(6){ animation-delay:.34s; }

	/* ---- Ligne "Populaire" : halo pulsé ---- */
	.va-anim .ct-panel.is-in .ct-pop{
		animation:ctPopGlow 2.6s ease-in-out .9s infinite;
	}
	@keyframes ctPopGlow{
		0%,100%{ box-shadow:inset 0 0 0 1px rgba(40,113,254,.18); }
		50%{ box-shadow:inset 0 0 0 1px rgba(40,113,254,.35), 0 10px 30px -10px rgba(40,113,254,.35); }
	}
	.va-anim .ct-theme-green .ct-panel.is-in .ct-pop{
		animation:ctPopGlowGreen 2.6s ease-in-out .9s infinite;
	}
	@keyframes ctPopGlowGreen{
		0%,100%{ box-shadow:inset 0 0 0 1px rgba(18,160,116,.18); }
		50%{ box-shadow:inset 0 0 0 1px rgba(18,160,116,.35), 0 10px 30px -10px rgba(18,160,116,.35); }
	}
}

/* ---- Micro-interactions (toujours actives) ---- */
.ct-tr{ transition:background .25s ease, transform .25s ease; }
.ct-tr:not(.ct-th):hover{
	transform:translateX(3px);
	background:rgba(40,113,254,.05);
}
.ct-theme-green .ct-tr:not(.ct-th):hover{ background:rgba(18,160,116,.06); }

.ct-incl li{ transition:transform .22s ease; }
.ct-incl li:hover{ transform:translateX(4px); }

.ct-foot-btn, .ct-foot-cta .ct-foot-btn{ position:relative; overflow:hidden; }
.ct-foot-btn::after{
	content:"";
	position:absolute;
	top:0; left:-120%;
	width:60%; height:100%;
	background:linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
	transform:skewX(-20deg);
}
.ct-foot-btn:hover::after{
	animation:ctShine .9s ease;
}
@keyframes ctShine{
	from{ left:-120%; }
	to{ left:160%; }
}

.of-jump a img{ transition:transform .22s ease; }
.of-jump a:hover img{ transform:translateX(3px); }

/* =====================================================================
   VISIOacte — Responsive premium (service.html / offres.html)
   Complète les breakpoints existants ; empêche tout débordement latéral
   provoqué par les animations reveal.
   ===================================================================== */

/* Les translations horizontales du reveal ne doivent jamais créer de scroll */
.pr-hero, .ct-pricing, .va-cta, .of-hero{ overflow-x:hidden; }

@media (max-width:640px){
	/* le reveal passe en vertical pour éviter tout dépassement */
	.va-anim [data-va="left"],
	.va-anim [data-va="right"]{ transform:translateY(28px); }
}

/* ---------- pr-hero (service.html) ---------- */
@media (max-width:1024px){
	.pr-hero{ padding:44px 0 50px; }
	.pr-hero .va-container{ padding:0 20px; }
}
@media (max-width:560px){
	.pr-hero .va-container{ padding:0 16px; }
	.pr-lead{ font-size:14px; }
	.pr-feats li{ gap:12px; }
	.pr-btn{ width:100%; justify-content:center; }
	.pr-card{ max-width:none; }
	.pr-coin-img{ width:200px; }
	.pr-cl-left,.pr-cl-right{ max-width:none; }
}
@media (max-width:400px){
	.pr-title{ font-size:23px; }
	.pr-assure-item{ gap:10px; }
	.pr-card-id h3{ font-size:16px; }
}

/* ---------- ct-pricing (service.html + offres.html) ---------- */
@media (max-width:1180px){
	.ct-pricing{ padding:46px 0 48px; }
	.ct-pricing .va-container{ padding:0 20px; }
}
@media (max-width:820px){
	.ct-pricing .va-container{ padding:0 16px; }
	.ct-panel{ padding:22px 18px 20px; }
	.ct-panel-head{ gap:12px;margin-bottom:18px; }
	.ct-panel-head h3{ font-size:17px; }
}
@media (max-width:640px){
	/* Tableau : chaque palier devient une carte lisible */
	.ct-table{ border:none;border-radius:0;overflow:visible;background:transparent; }
	.ct-tr{
		grid-template-columns:1fr;
		border:1px solid #e5eaf3;
		border-radius:14px;
		background:#fff;
		margin-bottom:12px;
		overflow:hidden;
	}
	.ct-tr + .ct-tr{ border-top:1px solid #e5eaf3; }
	.ct-tr > div{ padding:14px 16px; }
	.ct-tr > div + div{
		border-left:none;
		border-top:1px solid #eef1f6;
	}
	.ct-tr .ct-c2, .ct-tr .ct-c3{ display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px; }
	.ct-tr .ct-c2::before{
		content:"Forfait mensuel";
		flex:1 0 100%;
		font-size:11px;font-weight:700;letter-spacing:.3px;
		color:#8090a6;text-transform:uppercase;
	}
	.ct-tr .ct-c3::before{
		content:"Acte supplémentaire";
		flex:1 0 100%;
		font-size:11px;font-weight:700;letter-spacing:.3px;
		color:#8090a6;text-transform:uppercase;
	}
	.ct-theme-green .ct-tr .ct-c2::before,
	.ct-theme-green .ct-tr .ct-c3::before{ color:#7c9a90; }
	.ct-c2 b{ font-size:23px; }
	.ct-c2 span, .ct-c3 span{ display:inline;margin:0; }
	.ct-pop{ box-shadow:none;border-color:rgba(40,113,254,.4); }
	.ct-pop > div{ padding-top:14px; }
	.ct-pop .ct-c1{ padding-top:34px; }
	.ct-theme-green .ct-pop{ box-shadow:none;border-color:rgba(18,160,116,.4); }
	.ct-poptag{ top:10px; }
	.va-anim .ct-panel.is-in .ct-pop{ animation:none; }
	.va-anim .ct-theme-green .ct-panel.is-in .ct-pop{ animation:none; }
}
@media (max-width:480px){
	.ct-badge{ gap:10px;margin-bottom:18px; }
	.ct-title{ font-size:24px; }
	.ct-foot{ padding:18px 16px; }
	.ct-foot-item{ gap:12px; }
	.ct-note{ padding:12px 14px; }
}

/* ---------- of-hero (offres.html) ---------- */
@media (max-width:480px){
	.of-hero{ padding:48px 0 30px; }
	.of-hero .va-container{ padding:0 16px; }
	.of-title{ font-size:23px; }
	.of-lead{ font-size:14px; }
}

/* ==================================================
   sd-hero — hero "Ressources juridiques" (service-details.html)
   ================================================== */
.sd-hero{
	position:relative;
	overflow:hidden;
	padding:56px 0 66px;
	background:
		radial-gradient(1100px 520px at 78% -10%, rgba(40,113,254,.14), transparent 62%),
		radial-gradient(780px 480px at 6% 14%, rgba(40,113,254,.07), transparent 60%),
		linear-gradient(180deg,#e9f0fc 0%,#f2f7fd 55%,#ffffff 100%);
}
.sd-hero::before{
	content:"";
	position:absolute; inset:0;
	background-image:radial-gradient(rgba(40,113,254,.10) 1px, transparent 1.5px);
	background-size:26px 26px;
	-webkit-mask:linear-gradient(180deg,#000 0%, rgba(0,0,0,.22) 60%, transparent 82%);
	mask:linear-gradient(180deg,#000 0%, rgba(0,0,0,.22) 60%, transparent 82%);
	opacity:.6; pointer-events:none;
}
.sd-hero .va-container{
	position:relative; z-index:1;
	max-width:1560px; margin:0 auto; padding:0 24px;
}

/* ---------- grille ---------- */
.sd-grid{
	display:grid;
	grid-template-columns:326px minmax(0,1fr) 226px;
	grid-template-areas:
		"left badges right"
		"left center right"
		".    flow   flow";
	column-gap:26px;
	row-gap:14px;
	align-items:start;
}
.sd-left{ grid-area:left; }
.sd-badges{ grid-area:badges; }
.sd-center{ grid-area:center; }
.sd-right{ grid-area:right; }

/* ---------- bandeau de badges ---------- */
.sd-badges{
	display:flex; align-items:flex-start; justify-content:center;
	gap:24px;
	padding:4px 0 2px;
}
.sd-badge{ display:flex; align-items:flex-start; gap:13px; max-width:236px; }
.sd-badge + .sd-badge{ border-left:1px solid rgba(40,113,254,.22); padding-left:24px; }
.sd-badge .ic{
	width:44px; height:44px; flex:0 0 44px;
	border-radius:50%;
	background:#fff;
	box-shadow:0 12px 26px -10px rgba(40,113,254,.5), inset 0 0 0 1px rgba(40,113,254,.12);
	display:flex; align-items:center; justify-content:center;
	color:#2871FE; font-size:19px;
}
.sd-badge strong{
	display:block; font-size:13.5px; font-weight:700; color:#0f2340;
	font-family:"Cabin","Inter",sans-serif; margin-bottom:3px;
}
.sd-badge span{ display:block; font-size:12px; line-height:1.45; color:#63728a; }

/* ---------- colonne gauche ---------- */
.sd-title{
	font-family:"Cabin","Inter",sans-serif;
	font-size:36px; line-height:1.22; font-weight:700; color:#0b1830;
	letter-spacing:-.4px; margin:0 0 22px;
}
.sd-title .blue{ color:#2871FE; }
.sd-rule{
	display:block; width:48px; height:4px; border-radius:3px;
	background:#2871FE; margin-bottom:20px;
}
.sd-lead{ font-size:14.5px; line-height:1.62; color:#54637a; margin:0 0 24px; }

.sd-feats{ list-style:none; margin:0 0 26px; padding:0; }
.sd-feats li{ display:flex; gap:14px; padding:11px 0; }
.sd-feats li + li{ border-top:1px solid #e5ecf5; }
.sd-feats .ic{
	width:44px; height:44px; flex:0 0 44px;
	border-radius:50%; background:#e9f1ff;
	display:flex; align-items:center; justify-content:center;
	color:#2871FE; font-size:19px;
}
.sd-feats strong{
	display:block; font-size:14px; font-weight:700; color:#14243d;
	font-family:"Cabin","Inter",sans-serif; margin-bottom:3px;
}
.sd-feats p{ margin:0; font-size:12.5px; line-height:1.5; color:#6b7a8f; }

.sd-btn{
	display:inline-flex; align-items:center; gap:12px;
	background:#2871FE; color:#fff;
	font-size:15px; font-weight:600; font-family:"Cabin","Inter",sans-serif;
	padding:15px 28px; border-radius:12px;
	box-shadow:0 18px 32px -12px rgba(40,113,254,.55);
	transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.sd-btn i{ font-size:16px; transition:transform .2s ease; }
.sd-btn:hover{ background:#1c5ce0; color:#fff; transform:translateY(-2px); }
.sd-btn:hover i{ transform:translateX(4px); }

/* ---------- centre : visuel ---------- */
.sd-center{
	position:relative;
	display:flex; align-items:flex-start; justify-content:center;
	padding-top:2px;
}
.sd-center::before{
	content:""; position:absolute; z-index:0;
	width:104%; height:74%; left:6%; top:10%;
	background:radial-gradient(closest-side, rgba(40,113,254,.34), transparent 78%);
	filter:blur(30px);
}
.sd-center img{
	position:relative; z-index:1;
	width:calc(100% + 320px); max-width:none; height:auto;
	margin:-52px -288px -16px -24px;
	border-radius:14px;
	filter:drop-shadow(0 50px 72px rgba(16,38,73,.34));
}

/* ---------- colonne droite : carte ---------- */
.sd-right{ align-self:start; position:relative; z-index:3; }
.sd-card{
	position:relative;
	isolation:isolate;
	background:linear-gradient(158deg, rgba(255,255,255,.60) 0%, rgba(255,255,255,.34) 100%);
	-webkit-backdrop-filter:blur(20px) saturate(160%);
	backdrop-filter:blur(20px) saturate(160%);
	border:1px solid rgba(255,255,255,.55);
	border-radius:22px;
	padding:24px 20px 20px;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.65),
		inset 0 0 0 1px rgba(40,113,254,.05),
		0 34px 64px -30px rgba(16,38,73,.40);
	transition:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease;
}
.sd-card::before{
	content:""; position:absolute; z-index:-1;
	left:-20px; right:-20px; top:-70px; height:150px;
	background:radial-gradient(58% 100% at 50% 0%, rgba(40,113,254,.28), transparent 72%);
	pointer-events:none;
}
.sd-card::after{
	content:""; position:absolute; left:24px; right:24px; top:0; height:2px;
	background:linear-gradient(90deg, transparent, rgba(40,113,254,.6), transparent);
}
.sd-card:hover{
	transform:translateY(-4px);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.65),
		inset 0 0 0 1px rgba(40,113,254,.05),
		0 40px 70px -28px rgba(16,38,73,.46);
}
.sd-card h4{
	position:relative;
	font-family:"Cabin","Inter",sans-serif;
	font-size:19px; font-weight:800; line-height:1.28; color:#0b1830;
	margin:0 0 14px; padding-bottom:14px;
}
.sd-card h4::after{
	content:""; position:absolute; left:0; bottom:0;
	width:40px; height:3px; border-radius:2px;
	background:linear-gradient(90deg,#2871FE,#7aa8ff);
}
.sd-card ul{ list-style:none; margin:0; padding:0; }
.sd-card li{
	display:flex; align-items:center; gap:13px;
	padding:12px 0; font-size:13px; line-height:1.45; color:#2b3a52; font-weight:500;
	transition:transform .18s ease, color .18s ease;
}
.sd-card li + li{ border-top:1px solid rgba(40,113,254,.12); }
.sd-card li:hover{ transform:translateX(3px); color:#0b1830; }
.sd-card li .ic{
	width:36px; height:36px; flex:0 0 36px;
	border-radius:11px;
	background:linear-gradient(145deg, rgba(40,113,254,.18), rgba(40,113,254,.05));
	box-shadow:inset 0 0 0 1px rgba(40,113,254,.16);
	display:flex; align-items:center; justify-content:center;
	color:#2871FE; font-size:16px;
	transition:background .2s ease, color .2s ease, box-shadow .2s ease;
}
.sd-card li:hover .ic{
	background:linear-gradient(145deg,#2871FE,#4d8bff);
	color:#fff;
	box-shadow:0 9px 20px -7px rgba(40,113,254,.65);
}

/* ---------- bandeau process (sous le mockup) ---------- */
.sd-flow{
	grid-area:flow;
	align-self:end;
	margin-top:-26px;
	background:#fff;
	border:1px solid #e9edf4;
	border-radius:22px;
	padding:28px 30px 30px;
	box-shadow:0 26px 60px -38px rgba(16,38,73,.32);
}
.sd-flow h3{
	text-align:center;
	font-family:"Cabin","Inter",sans-serif;
	font-size:21px; font-weight:800; color:#0b1830;
	margin:0 0 26px;
}
.sd-steps{
	display:flex; align-items:flex-start; justify-content:space-between;
	gap:6px;
}
.sd-step{ flex:1 1 0; display:flex; gap:15px; align-items:flex-start; padding:0 4px; }
.sd-step .ic{
	width:46px; height:46px; flex:0 0 46px;
	border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	color:#fff; font-size:19px;
	box-shadow:0 14px 26px -12px rgba(16,38,73,.5);
}
.sd-step.c-blue   .ic{ background:linear-gradient(135deg,#3f86ff,#2871FE); }
.sd-step.c-purple .ic{ background:linear-gradient(135deg,#9b8cff,#6d5be0); box-shadow:0 14px 26px -12px rgba(109,91,224,.55); }
.sd-step.c-green  .ic{ background:linear-gradient(135deg,#43d19e,#12a074); box-shadow:0 14px 26px -12px rgba(18,160,116,.5); }
.sd-step strong{
	display:block; font-size:14px; font-weight:800; color:#12233d;
	font-family:"Cabin","Inter",sans-serif; margin-bottom:5px;
}
.sd-step p{ margin:0; font-size:12px; line-height:1.5; color:#6b7a8f; }
.sd-arrow{
	flex:0 0 24px; align-self:center; margin-top:4px;
	display:flex; align-items:center; justify-content:center;
	color:#b9c9e4; font-size:16px;
}

/* ---------- responsive ---------- */
@media (max-width:1320px){
	.sd-grid{
		grid-template-columns:minmax(0,1fr) 300px;
		grid-template-areas:
			"left   right"
			"badges badges"
			"center center"
			"flow   flow";
		column-gap:36px;
	}
	.sd-flow{ margin-top:8px; }
	.sd-center::before{ width:78%; left:11%; }
	.sd-center{ justify-content:center; }
	.sd-center img{ width:100%; margin:0; max-width:1360px; }
}
@media (max-width:860px){
	.sd-hero{ padding:44px 0 52px; }
	.sd-grid{
		grid-template-columns:1fr;
		grid-template-areas:
			"left"
			"badges"
			"center"
			"right"
			"flow";
		row-gap:26px;
	}
	.sd-title{ font-size:31px; }
	.sd-badges{ flex-wrap:wrap; gap:18px 20px; }
	.sd-badge{ flex:1 1 230px; max-width:none; }
	.sd-badge + .sd-badge{ border-left:none; padding-left:0; }
	.sd-right{ max-width:440px; margin:0 auto; width:100%; }
	.sd-steps{ flex-wrap:wrap; gap:22px 10px; }
	.sd-step{ flex:1 1 42%; }
	.sd-arrow{ display:none; }
}
@media (max-width:560px){
	.sd-hero .va-container{ padding:0 16px; }
	.sd-title{ font-size:26px; }
	.sd-lead{ font-size:14px; }
	.sd-flow{ padding:24px 18px 26px; }
	.sd-flow h3{ font-size:18px; }
	.sd-step{ flex:1 1 100%; }
	.sd-btn{ width:100%; justify-content:center; }
}

/* ==================================================
   sda — Assistant juridique IA (service-details.html)
   ================================================== */
.sda{
	position:relative;
	padding:60px 0 74px;
	background:
		radial-gradient(900px 500px at 82% 4%, rgba(40,113,254,.07), transparent 60%),
		linear-gradient(180deg,#ffffff 0%,#eef4fb 40%,#f1f6fc 72%,#ffffff 100%);
}
.sda .va-container{
	position:relative; z-index:1;
	max-width:1480px; margin:0 auto; padding:0 24px;
}
.sda .blue{ color:#2871FE; }

.sda-grid{
	display:grid;
	grid-template-columns:348px minmax(0,1fr) 304px;
	grid-template-areas:
		"left steps  steps"
		"left center right";
	column-gap:30px;
	row-gap:22px;
	align-items:start;
}
.sda-left{ grid-area:left; }
.sda-steps{ grid-area:steps; }
.sda-center{ grid-area:center; align-self:stretch; }
.sda-right{ grid-area:right; align-self:stretch; display:flex; flex-direction:column; gap:18px; }
.sda-center > .sda-chat{ height:100%; }
.sda-right > .sda-enrich{ margin-top:auto; }

/* ---------- colonne gauche ---------- */
.sda-title{
	font-family:"Cabin","Inter",sans-serif;
	font-size:30px; line-height:1.24; font-weight:700; color:#0b1830;
	letter-spacing:-.3px; margin:0 0 20px;
}
.sda-rule{
	display:block; width:46px; height:4px; border-radius:3px;
	background:#2871FE; margin-bottom:20px;
}
.sda-lead{ font-size:14px; line-height:1.62; color:#54637a; margin:0 0 24px; }

.sda-feats{ list-style:none; margin:0 0 26px; padding:0; }
.sda-feats li{ display:flex; gap:14px; padding:12px 0; }
.sda-feats li + li{ border-top:1px solid #e5ecf5; }
.sda-feats .ic{
	width:44px; height:44px; flex:0 0 44px;
	border-radius:50%; background:#e9f1ff;
	display:flex; align-items:center; justify-content:center;
	color:#2871FE; font-size:18px;
}
.sda-feats strong{
	display:block; font-size:14px; font-weight:700; color:#14243d;
	font-family:"Cabin","Inter",sans-serif; margin-bottom:3px;
}
.sda-feats p{ margin:0; font-size:12.5px; line-height:1.5; color:#6b7a8f; }

.sda-btn{
	display:inline-flex; align-items:center; gap:12px;
	background:#2871FE; color:#fff;
	font-size:15px; font-weight:600; font-family:"Cabin","Inter",sans-serif;
	padding:15px 28px; border-radius:12px;
	box-shadow:0 18px 32px -12px rgba(40,113,254,.55);
	transition:background .2s ease, transform .2s ease;
}
.sda-btn i{ font-size:16px; transition:transform .2s ease; }
.sda-btn:hover{ background:#1c5ce0; color:#fff; transform:translateY(-2px); }
.sda-btn:hover i{ transform:translateX(4px); }

/* ---------- bandeau de progression ---------- */
.sda-steps{
	display:flex; align-items:flex-start; justify-content:space-between;
	gap:6px;
	background:#fff;
	border:1px solid #e9edf4;
	border-radius:20px;
	padding:22px 26px;
	box-shadow:0 24px 54px -38px rgba(16,38,73,.30);
}
.sda-step{ flex:1 1 0; display:flex; gap:13px; align-items:flex-start; padding:0 4px; }
.sda-step .ic{
	width:44px; height:44px; flex:0 0 44px;
	border-radius:50%;
	border:1.6px solid #cfe0ff; background:#fff;
	display:flex; align-items:center; justify-content:center;
	color:#2871FE; font-size:18px;
	transition:all .2s ease;
}
.sda-step strong{
	display:block; font-size:13.5px; font-weight:800; color:#12233d;
	font-family:"Cabin","Inter",sans-serif; margin-bottom:4px;
}
.sda-step p{ margin:0; font-size:12px; line-height:1.45; color:#6b7a8f; }
.sda-step.is-active .ic{
	border-color:transparent;
	background:linear-gradient(135deg,#3f86ff,#2871FE);
	color:#fff;
	box-shadow:0 13px 26px -8px rgba(40,113,254,.6);
}
.sda-step.is-active strong{ color:#2871FE; }
.sda-arrow{
	flex:0 0 22px; align-self:center; margin-top:4px;
	display:flex; align-items:center; justify-content:center;
	color:#b9c9e4; font-size:15px;
}

/* ---------- carte assistant ---------- */
.sda-chat{
	background:#fff;
	border:1px solid #e9edf4;
	border-radius:20px;
	padding:20px 22px 16px;
	box-shadow:0 34px 70px -34px rgba(16,38,73,.34);
}
.sda-chat-head{ display:flex; align-items:center; gap:12px; margin-bottom:11px; }
.sda-chat-head .ic{
	width:36px; height:36px; flex:0 0 36px;
	border-radius:11px;
	background:linear-gradient(145deg,#e9f1ff,#dbe8ff);
	box-shadow:inset 0 0 0 1px rgba(40,113,254,.14);
	display:flex; align-items:center; justify-content:center;
	color:#2871FE; font-size:16px;
}
.sda-chat-head strong{
	display:block; font-family:"Cabin","Inter",sans-serif;
	font-size:17px; font-weight:800; color:#0b1830;
}
.sda-chat-head span{ display:block; font-size:11.5px; color:#8494ab; margin-top:1px; }

.sda-input{ position:relative; margin-bottom:11px; }
.sda-input input{
	width:100%;
	font-size:12.5px; color:#33415a;
	padding:11px 50px 11px 16px;
	border:1.5px solid #e2e8f2; border-radius:12px;
	background:#fff; outline:none;
	transition:border-color .2s ease, box-shadow .2s ease;
}
.sda-input input:focus{
	border-color:#2871FE;
	box-shadow:0 0 0 4px rgba(40,113,254,.12);
}
.sda-input button{
	position:absolute; top:50%; right:6px; transform:translateY(-50%);
	width:38px; height:38px;
	border:none; border-radius:10px;
	background:linear-gradient(135deg,#3f86ff,#2871FE);
	color:#fff; font-size:14px;
	display:flex; align-items:center; justify-content:center;
	cursor:pointer;
	box-shadow:0 12px 22px -8px rgba(40,113,254,.6);
	transition:transform .2s ease, box-shadow .2s ease;
}
.sda-input button:hover{ transform:translateY(-50%) scale(1.06); }

.sda-answer{ border-top:1px solid #eef1f6; padding-top:12px; }
.sda-answer-head{
	display:flex; align-items:center; justify-content:space-between;
	margin-bottom:8px;
}
.sda-answer-label{
	display:inline-flex; align-items:center; gap:7px;
	font-size:12.5px; font-weight:700; color:#2871FE;
	font-family:"Cabin","Inter",sans-serif;
}
.sda-answer-act{ display:inline-flex; align-items:center; gap:13px; color:#aab6c8; font-size:13px; }
.sda-answer-act i{ cursor:pointer; transition:color .15s ease; }
.sda-answer-act i:hover{ color:#2871FE; }
.sda-answer > p{ margin:0 0 9px; font-size:12.5px; line-height:1.5; color:#3a4a63; }

.sda-check{ list-style:none; margin:0 0 2px; padding:0; }
.sda-check li{
	position:relative;
	display:flex; align-items:flex-start; gap:9px;
	padding:3.5px 0; font-size:12.5px; line-height:1.4; color:#2c3a52;
}
.sda-check li i{ color:#2871FE; font-size:14px; margin-top:2px; flex:0 0 auto; }

.sda-ref{ margin:7px 0 12px; font-size:12px; line-height:1.45; color:#6b7a8f; }

.sda-src-title{
	font-family:"Cabin","Inter",sans-serif;
	font-size:13px; font-weight:700; color:#2871FE;
	margin:0 0 8px;
}
.sda-src{
	display:flex; align-items:center; gap:11px;
	background:#f5f8fd;
	border:1px solid #eef2f8;
	border-radius:12px;
	padding:8px 11px;
	margin-bottom:6px;
	transition:border-color .2s ease, background .2s ease;
}
.sda-src:hover{ background:#eef4fd; border-color:#dbe6f5; }
.sda-src .ic{
	width:32px; height:32px; flex:0 0 32px;
	border-radius:9px; background:#fff;
	border:1px solid #e5ecf6;
	display:flex; align-items:center; justify-content:center;
	color:#2871FE; font-size:13px;
}
.sda-src-txt{ flex:1 1 auto; min-width:0; }
.sda-src-txt strong{
	display:block; font-size:12.5px; font-weight:700; color:#14243d;
	margin-bottom:2px;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sda-src-txt span{ display:block; font-size:11px; color:#8494ab; }
.sda-src-txt span b{ color:#c3cede; margin:0 4px; font-weight:400; }
.sda-src a{
	flex:0 0 auto;
	font-size:12px; font-weight:600; color:#2871FE;
	border:1px solid #cfe0ff; border-radius:8px;
	padding:6px 14px; background:#fff;
	transition:background .2s ease, color .2s ease;
}
.sda-src a:hover{ background:#2871FE; color:#fff; border-color:#2871FE; }

.sda-tip{
	display:flex; align-items:center; gap:9px;
	margin-top:10px;
	background:#eef4ff;
	border:1px solid #dbe7ff;
	border-radius:11px;
	padding:9px 13px;
	font-size:12px; line-height:1.4; color:#3f5573;
}
.sda-tip i{ color:#2871FE; font-size:14px; flex:0 0 auto; }

/* ---------- colonne droite ---------- */
.sda-adv{
	background:linear-gradient(180deg,
		#ffffff 0%,
		#ffffff 28%,
		rgba(233,241,255,.85) 62%,
		rgba(40,113,254,.16) 100%);
	border:1px solid #e9edf4;
	border-radius:22px;
	padding:24px 22px;
	box-shadow:0 28px 58px -36px rgba(16,38,73,.32);
}
.sda-adv h4{
	font-family:"Cabin","Inter",sans-serif;
	font-size:19px; font-weight:800; color:#0b1830;
	margin:0 0 6px;
}
.sda-adv ul{ list-style:none; margin:0; padding:0; }
.sda-adv li{ display:flex; gap:13px; padding:13px 0; }
.sda-adv li + li{ border-top:1px solid #eef1f6; }
.sda-adv .ic{
	width:40px; height:40px; flex:0 0 40px;
	border-radius:50%; background:#e9f1ff;
	display:flex; align-items:center; justify-content:center;
	color:#2871FE; font-size:17px;
}
.sda-adv strong{
	display:block; font-size:14px; font-weight:700; color:#14243d;
	font-family:"Cabin","Inter",sans-serif; margin-bottom:3px;
}
.sda-adv p{ margin:0; font-size:12px; line-height:1.5; color:#6b7a8f; }

.sda-adv-img{
	margin-top:14px;
}
.sda-adv-img img{
	display:block; width:calc(100% + 30px); max-width:none; height:auto;
	margin:0 -15px -14px;
	filter:drop-shadow(0 18px 22px rgba(16,38,73,.22)) drop-shadow(0 6px 10px rgba(40,113,254,.18));
}

.sda-enrich{
	display:flex; align-items:flex-start; gap:14px;
	background:#fff;
	border:1px solid #e9edf4;
	border-radius:18px;
	padding:18px 20px;
	box-shadow:0 22px 46px -34px rgba(16,38,73,.28);
}
.sda-enrich .ic{
	width:42px; height:42px; flex:0 0 42px;
	border-radius:50%; background:#e9f1ff;
	display:flex; align-items:center; justify-content:center;
	color:#2871FE; font-size:18px;
}
.sda-enrich strong{
	display:block; font-size:13.5px; font-weight:700; color:#14243d;
	font-family:"Cabin","Inter",sans-serif; margin-bottom:4px;
}
.sda-enrich strong b{ color:#2871FE; font-weight:800; }
.sda-enrich p{ margin:0; font-size:12px; line-height:1.5; color:#6b7a8f; }

/* ---------- responsive ---------- */
@media (max-width:1200px){
	.sda-grid{
		grid-template-columns:minmax(0,1fr) 304px;
		grid-template-areas:
			"left   left"
			"steps  steps"
			"center right";
		column-gap:28px;
	}
}
@media (max-width:900px){
	.sda{ padding:52px 0 58px; }
	.sda-grid{
		grid-template-columns:1fr;
		grid-template-areas:
			"left"
			"steps"
			"center"
			"right";
		row-gap:24px;
	}
	.sda-title{ font-size:27px; }
	.sda-steps{ flex-wrap:wrap; gap:20px 10px; }
	.sda-step{ flex:1 1 42%; }
	.sda-arrow{ display:none; }
	.sda-right{ max-width:460px; justify-self:center; width:100%; }
	.sda-chat{ max-width:640px; margin-left:auto; margin-right:auto; }
}
@media (max-width:560px){
	.sda .va-container{ padding:0 16px; }
	.sda-title{ font-size:23px; }
	.sda-chat{ padding:22px 18px 24px; max-width:none; }
	.sda-step{ flex:1 1 100%; }
	.sda-btn{ width:100%; justify-content:center; }
	.sda-src{ flex-wrap:wrap; }
	.sda-src-txt{ order:2; flex:1 1 100%; }
	.sda-src a{ order:3; }
}

/* ==================================================
   sdc — De la ressource a l'acte juridique (service-details.html)
   ================================================== */
.sdc{
	position:relative;
	padding:60px 0 74px;
	background:
		radial-gradient(880px 480px at 88% 3%, rgba(40,113,254,.07), transparent 60%),
		linear-gradient(180deg,#ffffff 0%,#eef4fb 42%,#f1f6fc 74%,#ffffff 100%);
}
.sdc .va-container{
	position:relative; z-index:1;
	max-width:1480px; margin:0 auto; padding:0 24px;
}
.sdc .blue{ color:#2871FE; }

.sdc-grid{
	display:grid;
	grid-template-columns:352px minmax(0,1fr);
	grid-template-areas:
		"left steps"
		"left flow"
		"left reassure";
	column-gap:34px;
	row-gap:22px;
	align-items:start;
}
.sdc-left{ grid-area:left; }
.sdc-steps{ grid-area:steps; }
.sdc-flow{ grid-area:flow; }
.sdc-reassure{ grid-area:reassure; }

/* ---------- colonne gauche ---------- */
.sdc-title{
	font-family:"Cabin","Inter",sans-serif;
	font-size:33px; line-height:1.2; font-weight:700; color:#0b1830;
	letter-spacing:-.4px; margin:0 0 20px;
}
.sdc-rule{
	display:block; width:46px; height:4px; border-radius:3px;
	background:#2871FE; margin-bottom:20px;
}
.sdc-lead{ font-size:14px; line-height:1.62; color:#54637a; margin:0 0 24px; }

.sdc-feats{ list-style:none; margin:0 0 26px; padding:0; }
.sdc-feats li{ display:flex; gap:14px; padding:12px 0; }
.sdc-feats li + li{ border-top:1px solid #e5ecf5; }
.sdc-feats .ic{
	width:44px; height:44px; flex:0 0 44px;
	border-radius:50%; background:#e9f1ff;
	display:flex; align-items:center; justify-content:center;
	color:#2871FE; font-size:18px;
}
.sdc-feats strong{
	display:block; font-size:14px; font-weight:700; color:#14243d;
	font-family:"Cabin","Inter",sans-serif; margin-bottom:3px;
}
.sdc-feats p{ margin:0; font-size:12.5px; line-height:1.5; color:#6b7a8f; }

.sdc-btn{
	display:inline-flex; align-items:center; gap:12px;
	background:#2871FE; color:#fff;
	font-size:15px; font-weight:600; font-family:"Cabin","Inter",sans-serif;
	padding:15px 28px; border-radius:12px;
	box-shadow:0 18px 32px -12px rgba(40,113,254,.55);
	transition:background .2s ease, transform .2s ease;
}
.sdc-btn i{ font-size:16px; transition:transform .2s ease; }
.sdc-btn:hover{ background:#1c5ce0; color:#fff; transform:translateY(-2px); }
.sdc-btn:hover i{ transform:translateX(4px); }

/* ---------- bandeau de progression ---------- */
.sdc-steps{
	display:flex; align-items:flex-start; justify-content:space-between;
	gap:6px;
	background:#fff;
	border:1px solid #e9edf4;
	border-radius:20px;
	padding:22px 26px;
	box-shadow:0 24px 54px -38px rgba(16,38,73,.30);
}
.sdc-step{ flex:1 1 0; display:flex; gap:13px; align-items:flex-start; padding:0 4px; }
.sdc-step .ic{
	width:44px; height:44px; flex:0 0 44px;
	border-radius:50%;
	border:1.6px solid #cfe0ff; background:#fff;
	display:flex; align-items:center; justify-content:center;
	color:#2871FE; font-size:18px;
}
.sdc-step strong{
	display:block; font-size:13.5px; font-weight:800; color:#12233d;
	font-family:"Cabin","Inter",sans-serif; margin-bottom:4px;
}
.sdc-step p{ margin:0; font-size:12px; line-height:1.45; color:#6b7a8f; }
.sdc-step.is-done .ic{
	border-color:transparent;
	background:linear-gradient(135deg,#43d19e,#12a074);
	color:#fff;
	box-shadow:0 13px 26px -8px rgba(18,160,116,.5);
}
.sdc-step.is-done strong{ color:#12a074; }
.sdc-arrow{
	flex:0 0 22px; align-self:center; margin-top:4px;
	display:flex; align-items:center; justify-content:center;
	color:#b9c9e4; font-size:15px;
}

/* ---------- enchainement des 3 cartes ---------- */
.sdc-flow{
	display:flex;
	align-items:stretch;
	justify-content:center;
	gap:6px;
	padding-top:34px;
}
.sdc-col{
	flex:0 1 284px;
	max-width:284px;
	position:relative;
	display:flex; flex-direction:column;
	background:rgba(255,255,255,.4);
	border:1px solid #eef1f7;
	border-radius:20px;
	padding:34px 15px 16px;
}
.sdc-col.sdc-col--final{ flex-basis:430px; max-width:430px; }
.sdc-col-ic{
	position:absolute; top:-28px; left:50%; transform:translateX(-50%);
	width:56px; height:56px;
	border-radius:50%;
	background:linear-gradient(135deg,#3f86ff,#2871FE);
	color:#fff; font-size:22px;
	display:flex; align-items:center; justify-content:center;
	box-shadow:0 16px 30px -10px rgba(40,113,254,.55);
	border:4px solid #fff;
	z-index:2;
}
.sdc-col-ic.green{
	background:linear-gradient(135deg,#43d19e,#12a074);
	box-shadow:0 16px 30px -10px rgba(18,160,116,.5);
}
.sdc-col h4{
	margin:6px 0 14px;
	text-align:center;
	font-family:"Cabin","Inter",sans-serif;
	font-size:15px; font-weight:800; color:#0b1830;
}
.sdc-card{
	align-self:stretch;
	flex:1 1 auto;
	display:flex; flex-direction:column; align-items:flex-start;
	background:#fff;
	border:1px solid #e9edf4;
	border-radius:16px;
	padding:18px 18px 16px;
	box-shadow:0 20px 44px -32px rgba(16,38,73,.3);
}
.sdc-card h5,
.sdc-sub,
.sdc-check,
.sdc-field,
.sdc-div,
.sdc-card-btn{ align-self:stretch; }
.sdc-div{ margin-top:auto; }
.sdc-tag{
	display:block; font-size:12px; font-weight:700;
	font-family:"Cabin","Inter",sans-serif; margin-bottom:7px;
}
.sdc-tag.blue{ color:#2871FE; }
.sdc-card h5{
	font-family:"Cabin","Inter",sans-serif;
	font-size:15px; font-weight:800; line-height:1.3; color:#0b1830;
	margin:0 0 10px;
}
.sdc-pill{
	display:inline-block;
	font-size:10.5px; color:#5b6b80;
	background:#eef2f8; border-radius:20px;
	padding:4px 11px; margin-bottom:14px;
}
.sdc-sub{
	display:block; font-family:"Cabin","Inter",sans-serif;
	font-size:12.5px; font-weight:800; color:#14243d;
	margin:2px 0 10px;
}
.sdc-check{ list-style:none; margin:0; padding:0; }
.sdc-check li{
	display:flex; align-items:flex-start; gap:9px;
	padding:4.5px 0; font-size:12px; line-height:1.4; color:#2c3a52;
}
.sdc-check li i{ color:#2871FE; font-size:13px; margin-top:2px; flex:0 0 auto; }

.sdc-field{
	position:relative;
	display:flex; align-items:center; gap:8px;
	padding:2.5px 0; font-size:11px;
}
.sdc-field.dot{ padding-left:13px; }
.sdc-field.dot::before{
	content:""; position:absolute; left:2px; top:50%;
	width:5px; height:5px; border-radius:50%; background:#2871FE;
	transform:translateY(-50%);
}
.sdc-field .lbl{ flex:0 0 auto; min-width:70px; color:#5b6b80; }
.sdc-field .val{
	flex:1 1 auto;
	background:#eef3fb; border:1px solid #e2e9f4; border-radius:7px;
	padding:4.5px 10px; font-size:11px; font-weight:600; color:#14243d;
}
.sdc-field.sep{ margin-top:5px; padding-top:8px; border-top:1px solid #eef1f6; }
.sdc-dots{ color:#b6c1d2; font-size:14px; letter-spacing:2px; padding:2px 0 0; }

.sdc-col:nth-child(3) .sdc-card{ padding:16px 16px 14px; }
.sdc-col:nth-child(3) .sdc-card h5{ font-size:13.5px; line-height:1.28; margin-bottom:8px; }
.sdc-col:nth-child(3) .sdc-pill{ font-size:9.5px; padding:3px 10px; margin-bottom:9px; }
.sdc-col:nth-child(3) .sdc-sub{ font-size:11px; margin:0 0 6px; }
.sdc-col:nth-child(3) .sdc-field{ font-size:10px; padding-top:2px; padding-bottom:2px; }
.sdc-col:nth-child(3) .sdc-field .lbl{ min-width:64px; }
.sdc-col:nth-child(3) .sdc-field .val{ font-size:10px; padding:4px 9px; }
.sdc-col:nth-child(3) .sdc-dots{ font-size:13px; }
.sdc-col:nth-child(3) .sdc-card-btn{ font-size:12px; margin-top:9px; padding:9px 16px; }

.sdc-div{ height:1px; background:#eef1f6; margin:14px 0 0; }
.sdc-card-btn{
	display:flex; align-items:center; justify-content:center; gap:9px;
	margin-top:14px;
	padding:11px 16px;
	border:1.5px solid #cfe0ff; border-radius:10px;
	background:#fff; color:#2871FE;
	font-size:13px; font-weight:600; font-family:"Cabin","Inter",sans-serif;
	transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.sdc-card-btn i{ font-size:14px; transition:transform .2s ease; }
.sdc-card-btn:hover{ background:#2871FE; color:#fff; border-color:#2871FE; }
.sdc-card-btn:hover i{ transform:translateX(4px); }

.sdc-col.sdc-col--final{
	align-self:center;
	background:transparent;
	border:none;
	padding:36px 0 0;
}
.sdc-final{
	flex:1 1 auto;
	display:flex; align-items:center; justify-content:center;
}
.sdc-final img{
	display:block; width:calc(100% + 240px); max-width:none; height:auto;
	margin:4px -130px 0 -110px;
	filter:drop-shadow(0 34px 50px rgba(16,38,73,.28));
}

.sdc-flow-arrow{
	flex:1 1 40px; min-width:24px; max-width:70px; align-self:center;
	display:flex; align-items:center; justify-content:center;
	color:#2871FE; font-size:22px;
}

/* ---------- bandeau reassurance ---------- */
.sdc-reassure{
	position:relative;
	overflow:hidden;
	display:flex; align-items:flex-start;
	gap:6px;
	background:#fff;
	border:1px solid #e9edf4;
	border-radius:20px;
	padding:24px 28px;
	margin-top:10px;
	box-shadow:0 24px 54px -38px rgba(16,38,73,.28);
}
.sdc-re{ flex:1 1 0; display:flex; gap:13px; align-items:flex-start; padding:0 6px; position:relative; z-index:1; }
.sdc-re .ic{
	width:42px; height:42px; flex:0 0 42px;
	border-radius:50%; background:#e9f1ff;
	display:flex; align-items:center; justify-content:center;
	color:#2871FE; font-size:17px;
}
.sdc-re strong{
	display:block; font-size:13px; font-weight:800; color:#12233d;
	font-family:"Cabin","Inter",sans-serif; margin-bottom:4px;
}
.sdc-re strong.blue{ color:#2871FE; }
.sdc-re p{ margin:0; font-size:11.5px; line-height:1.45; color:#6b7a8f; }
.sdc-re-arrow{
	flex:0 0 20px; align-self:center;
	display:flex; align-items:center; justify-content:center;
	color:#b9c9e4; font-size:14px;
}
.sdc-plexus{
	position:absolute; right:0; top:50%; transform:translateY(-50%);
	width:320px; height:190px; z-index:0;
	opacity:.5; pointer-events:none;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='170'%3E%3Cg stroke='%232871FE' stroke-width='1' fill='none' opacity='0.55'%3E%3Cpath d='M12,120 L62,42 L122,92 L182,32 L238,82'/%3E%3Cpath d='M62,42 L122,20 L182,32'/%3E%3Cpath d='M12,120 L82,150 L152,128 L206,150'/%3E%3Cpath d='M122,92 L152,128 L122,20'/%3E%3Cpath d='M182,32 L206,150'/%3E%3C/g%3E%3Cg fill='%232871FE' opacity='0.8'%3E%3Ccircle cx='12' cy='120' r='3'/%3E%3Ccircle cx='62' cy='42' r='3'/%3E%3Ccircle cx='122' cy='92' r='3'/%3E%3Ccircle cx='182' cy='32' r='3'/%3E%3Ccircle cx='238' cy='82' r='3'/%3E%3Ccircle cx='122' cy='20' r='3'/%3E%3Ccircle cx='82' cy='150' r='3'/%3E%3Ccircle cx='152' cy='128' r='3'/%3E%3Ccircle cx='206' cy='150' r='3'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- responsive ---------- */
@media (max-width:1180px){
	.sdc-grid{
		grid-template-columns:1fr;
		grid-template-areas:
			"left"
			"steps"
			"flow"
			"reassure";
		row-gap:26px;
	}
	.sdc-left{ max-width:640px; }
}
@media (max-width:960px){
	.sdc{ padding:48px 0 56px; }
	.sdc-title{ font-size:28px; }
	.sdc-steps{ flex-wrap:wrap; gap:20px 10px; }
	.sdc-step{ flex:1 1 42%; }
	.sdc-arrow{ display:none; }
	.sdc-flow{ flex-direction:column; gap:46px; padding-top:30px; }
	.sdc-flow-arrow{ transform:rotate(90deg); font-size:20px; }
	.sdc-col{ max-width:460px; margin:0 auto; width:100%; }
	.sdc-reassure{ flex-wrap:wrap; gap:20px 10px; }
	.sdc-re{ flex:1 1 42%; }
	.sdc-re-arrow{ display:none; }
	.sdc-plexus{ display:none; }
}
@media (max-width:560px){
	.sdc .va-container{ padding:0 16px; }
	.sdc-title{ font-size:24px; }
	.sdc-btn{ width:100%; justify-content:center; }
	.sdc-step{ flex:1 1 100%; }
	.sdc-re{ flex:1 1 100%; }
}

/* ==================================================
   service-details.html — animations premium
   ================================================== */
@media (prefers-reduced-motion: no-preference){

	/* --- reveal au scroll --- */
	.sd-anim{
		opacity:0;
		transform:translateY(28px);
		transition:opacity .8s cubic-bezier(.16,1,.3,1),
		           transform .8s cubic-bezier(.16,1,.3,1);
		will-change:opacity, transform;
	}
	.sd-anim.sd-in{ opacity:1; transform:none; }

	.sd-anim.sd-anim--left{ transform:translateX(-26px); }
	.sd-anim.sd-anim--right{ transform:translateX(26px); }
	.sd-anim.sd-anim--zoom{ transform:translateY(20px) scale(.94); }
	.sd-anim.sd-anim--left.sd-in,
	.sd-anim.sd-anim--right.sd-in,
	.sd-anim.sd-anim--zoom.sd-in{ transform:none; }

	/* --- halo pulsé sur l'étape active --- */
	.sda-step.is-active .ic{ animation:sdPulseBlue 2.6s ease-in-out infinite; }
	.sdc-step.is-done .ic{ animation:sdPulseGreen 2.6s ease-in-out infinite; }
	@keyframes sdPulseBlue{
		0%,100%{ box-shadow:0 13px 26px -8px rgba(40,113,254,.55); }
		50%{ box-shadow:0 13px 30px -6px rgba(40,113,254,.85), 0 0 0 7px rgba(40,113,254,.12); }
	}
	@keyframes sdPulseGreen{
		0%,100%{ box-shadow:0 13px 26px -8px rgba(18,160,116,.5); }
		50%{ box-shadow:0 13px 30px -6px rgba(18,160,116,.8), 0 0 0 7px rgba(18,160,116,.12); }
	}

	/* --- pastilles rondes des cartes : entrée pop --- */
	.sd-anim .sdc-col-ic,
	.sdc-col.sd-anim > .sdc-col-ic{
		opacity:0; transform:translateX(-50%) scale(.4);
		transition:opacity .5s ease .15s, transform .55s cubic-bezier(.34,1.56,.64,1) .15s;
	}
	.sdc-col.sd-in > .sdc-col-ic{ opacity:1; transform:translateX(-50%) scale(1); }

	/* --- lignes de sources / features : léger décalage au hover --- */
	.sda-src, .sdc-check li, .sda-check li{ transition:transform .2s ease, background .2s ease, border-color .2s ease; }

	/* --- sheen sur les boutons pleins --- */
	.sd-btn, .sda-btn, .sdc-btn{ position:relative; overflow:hidden; }
	.sd-btn::after, .sda-btn::after, .sdc-btn::after{
		content:"";
		position:absolute; top:0; left:-140%;
		width:55%; height:100%;
		background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
		transform:skewX(-18deg);
		transition:left .6s ease;
	}
	.sd-btn:hover::after, .sda-btn:hover::after, .sdc-btn:hover::after{ left:150%; }

	/* --- flèches de flux : glissement continu discret --- */
	.sdc-flow-arrow i, .sda-arrow, .sd-arrow, .sdc-arrow{ animation:sdArrowShift 2.8s ease-in-out infinite; }
	@keyframes sdArrowShift{
		0%,100%{ transform:translateX(0); opacity:.75; }
		50%{ transform:translateX(3px); opacity:1; }
	}
	.sdc-flow-arrow i{ animation-name:sdArrowShiftBlue; }
	@keyframes sdArrowShiftBlue{
		0%,100%{ transform:translateX(0); }
		50%{ transform:translateX(4px); }
	}

	/* --- carte assistant : léger halo respirant --- */
	.sda-chat-head .ic{ animation:sdBreathe 4s ease-in-out infinite; }
	@keyframes sdBreathe{
		0%,100%{ box-shadow:inset 0 0 0 1px rgba(40,113,254,.14); }
		50%{ box-shadow:inset 0 0 0 1px rgba(40,113,254,.3), 0 0 18px -2px rgba(40,113,254,.35); }
	}

	/* --- plexus : dérive lente --- */
	.sdc-plexus{ animation:sdDrift 12s ease-in-out infinite; }
	@keyframes sdDrift{
		0%,100%{ transform:translateY(-50%) translateX(0); }
		50%{ transform:translateY(-52%) translateX(-6px); }
	}
}

/* le curseur de saisie qui clignote dans la fausse recherche */
@media (prefers-reduced-motion: no-preference){
	.sda-input.is-typing input{ caret-color:#2871FE; }
}

/* ==================================================
   vhx-hero — "L'IA redige. Vous gardez le controle." (index.html)
   ================================================== */
.vhx-hero{
	position:relative;
	overflow:hidden;
	padding:0 0 58px;
	background:
		radial-gradient(1100px 520px at 88% 2%, rgba(40,113,254,.07), transparent 62%),
		linear-gradient(180deg,#ffffff 0%,#f7fafd 55%,#ffffff 100%);
}
.vhx-hero .va-container{
	position:relative; z-index:1;
	max-width:1760px; margin:0 auto; padding:0 0 0 40px;
}
.vhx-hero .blue{ color:#2871FE; }

.vhx-grid{
	display:grid;
	grid-template-columns:500px minmax(0,1fr);
	grid-template-areas:
		"left  image"
		"trust steps";
	column-gap:24px;
	row-gap:0;
	align-items:start;
}
.vhx-left{ position:relative; z-index:3; grid-area:left; padding-top:28px; }
/* l'accroche se superpose au haut de la photo */
.vhx-top{ position:relative; z-index:3; grid-area:image; align-self:start; }
.vhx-image{ grid-area:image; }
.vhx-trust{ position:relative; z-index:3; grid-area:trust; }
.vhx-steps{ grid-area:steps; }

/* ---------- accroche haut droite ---------- */
.vhx-top{
	text-align:center;
	padding:14px 40px 0 0;
}
.vhx-top h2{
	margin:0;
	font-family:"Cabin","Inter",sans-serif;
	font-size:21px; font-weight:800; line-height:1.32;
	color:#0b1830; text-transform:uppercase; letter-spacing:.2px;
}
.vhx-top h2 span{ display:block; color:#2871FE; margin-top:1px; }

/* ---------- colonne gauche : panneau "verre" ---------- */
.vhx-left::before,
.vhx-left::after{
	content:"";
	position:absolute; z-index:-1;
	top:-58px; bottom:-44px; left:-520px; right:-14px;
	border-radius:0 38px 38px 0;
	pointer-events:none;
}
/* voile translucide + halo bleu (le haut reste blanc) */
.vhx-left::before{
	background:
		linear-gradient(180deg, #ffffff 0%, #ffffff 30%, rgba(255,255,255,0) 58%),
		radial-gradient(560px 380px at 78% 62%, rgba(40,113,254,.12), transparent 66%),
		linear-gradient(112deg, #ffffff 0%, rgba(255,255,255,.88) 58%, rgba(255,255,255,.28) 100%);
}
/* trame de points : apparait sous le titre, estompee vers la droite */
.vhx-left::after{
	background-image:radial-gradient(rgba(40,113,254,.14) 1px, transparent 1.5px);
	background-size:24px 24px;
	-webkit-mask:linear-gradient(160deg, transparent 0%, transparent 24%, rgba(0,0,0,.5) 50%, transparent 86%);
	mask:linear-gradient(160deg, transparent 0%, transparent 24%, rgba(0,0,0,.5) 50%, transparent 86%);
	opacity:.6;
}

/* ---------- colonne gauche ---------- */
.vhx-title{
	font-family:"Cabin","Inter",sans-serif;
	font-size:45px; line-height:1.16; font-weight:700; color:#0b1830;
	letter-spacing:-.6px; margin:0 0 20px;
}
.vhx-title .blue{ display:block; }
.vhx-lead{
	font-size:17px; line-height:1.55; font-weight:500; color:#233349;
	margin:0 0 22px;
}
.vhx-lead b{ color:#2871FE; font-weight:600; }
.vhx-rule{
	display:block; width:56px; height:4px; border-radius:3px;
	background:#2871FE; margin-bottom:34px;
}

.vhx-feats{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	margin-bottom:34px;
}
.vhx-feat{
	text-align:center;
	padding:0 13px;
	border-left:1px solid #e3eaf4;
}
.vhx-feat:first-child{ border-left:none; padding-left:0; }
.vhx-feat:last-child{ padding-right:0; }
.vhx-feat .ic{
	width:52px; height:52px; border-radius:50%;
	background:#fff;
	box-shadow:0 8px 20px -8px rgba(40,113,254,.35), inset 0 0 0 1.5px rgba(40,113,254,.14);
	display:flex; align-items:center; justify-content:center;
	color:#2871FE; font-size:21px;
	margin:0 auto 14px;
}
.vhx-feat strong{
	display:block;
	font-family:"Cabin","Inter",sans-serif;
	font-size:12px; font-weight:800; letter-spacing:.3px; text-transform:uppercase;
	color:#12233d; margin-bottom:8px; line-height:1.35;
}
.vhx-feat p{ margin:0; font-size:11.5px; line-height:1.55; color:#6b7a8f; }

.vhx-cta{ display:flex; flex-wrap:wrap; gap:16px; }
.vhx-btn-primary, .vhx-btn-outline{
	position:relative; overflow:hidden;
	display:inline-flex; align-items:center; gap:14px;
	font-size:15px; font-weight:600; font-family:"Cabin","Inter",sans-serif;
	padding:15px 26px; border-radius:10px;
	transition:transform .2s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}
.vhx-btn-primary{
	background:#2160F0; color:#fff;
	box-shadow:0 16px 30px -14px rgba(33,96,240,.6);
}
.vhx-btn-primary:hover{ background:#1a4fd0; color:#fff; transform:translateY(-2px); }
.vhx-btn-outline{
	background:#fff; color:#12233d;
	border:1.5px solid #2871FE;
}
.vhx-btn-outline:hover{ background:#2871FE; color:#fff; transform:translateY(-2px); }
.vhx-btn-primary i, .vhx-btn-outline i{ font-size:16px; transition:transform .2s ease; }
.vhx-btn-primary:hover i, .vhx-btn-outline:hover i{ transform:translateX(4px); }

/* ---------- visuel ---------- */
.vhx-image{
	position:relative;
}
.vhx-image::before{
	content:"";
	position:absolute; z-index:0;
	inset:6% -4% 4% -4%;
	background:radial-gradient(closest-side, rgba(40,113,254,.20), transparent 72%);
	filter:blur(30px);
}
.vhx-image img{
	position:relative; z-index:1;
	display:block; width:100%; height:auto;
}
/* fondus du haut et du bord gauche de la photo vers le fond de la section */
.vhx-image::after{
	content:"";
	position:absolute; z-index:2;
	inset:-1px 0 0 0;
	background:
		linear-gradient(180deg, #fff 0%, rgba(255,255,255,.95) 42%, rgba(255,255,255,.45) 76%, rgba(255,255,255,0) 100%)
			top left / 100% 132px no-repeat,
		linear-gradient(90deg, #fff 0%, rgba(255,255,255,.8) 28%, rgba(255,255,255,.32) 62%, rgba(255,255,255,0) 100%)
			top left / 100px 100% no-repeat;
	pointer-events:none;
}

/* ---------- bandeau de confiance (bas gauche) ---------- */
.vhx-trust{
	display:flex;
	background:#fff;
	border-radius:16px;
	padding:18px 4px;
	margin-top:30px;
	box-shadow:0 20px 44px -26px rgba(16,38,73,.30), 0 0 0 1px rgba(16,38,73,.045);
}
.vhx-trust-item{
	flex:1 1 0;
	display:flex; align-items:center; gap:9px;
	padding:2px 9px;
	border-left:1px solid #eef1f7;
}
.vhx-trust-item:first-child{ border-left:none; }
.vhx-trust-item i{ color:#2871FE; font-size:18px; flex:0 0 auto; }
.vhx-trust-item span{
	font-size:10.5px; line-height:1.4; font-weight:600; color:#33415a;
	white-space:nowrap;
}

/* ---------- bandeau process (bas droite) ---------- */
.vhx-steps{
	display:flex; align-items:center;
	background:linear-gradient(135deg,#16305c 0%,#122a52 55%,#0e2040 100%);
	border-radius:16px;
	padding:22px 24px;
	/* collé au bas de la photo */
	position:relative; z-index:4;
	margin:-70px 0 0 0;
	box-shadow:0 26px 54px -28px rgba(8,20,40,.6);
}
.vhx-step{ flex:1 1 0; display:flex; align-items:center; gap:12px; padding:0 2px; }
.vhx-step .ic{
	flex:0 0 auto;
	display:flex; align-items:center; justify-content:center;
	color:#fff; font-size:23px;
}
.vhx-step strong{
	display:block;
	font-family:"Cabin","Inter",sans-serif;
	font-size:11px; font-weight:800; letter-spacing:.3px; text-transform:uppercase;
	color:#fff; margin-bottom:4px;
}
.vhx-step p{ margin:0; font-size:10.5px; line-height:1.4; color:#9db0cd; }
.vhx-step-arrow{
	flex:0 0 auto;
	display:flex; align-items:center; justify-content:center;
	color:#6f88ad; font-size:14px; padding:0 4px;
}

/* ---------- responsive ---------- */
@media (max-width:1500px){
	.vhx-grid{ grid-template-columns:520px minmax(0,1fr); column-gap:30px; }
	.vhx-title{ font-size:40px; }
	.vhx-lead{ font-size:16px; }
	.vhx-top h2{ font-size:19px; }
	.vhx-feat{ padding:0 9px; }
	.vhx-feat p{ font-size:11px; }
	.vhx-cta{ gap:12px; }
	.vhx-btn-primary, .vhx-btn-outline{ padding:13px 18px; font-size:13.5px; gap:10px; }
	.vhx-trust-item{ padding:2px 10px; gap:8px; }
	.vhx-trust-item span{ font-size:10.5px; }
	.vhx-trust-item i{ font-size:17px; }
	/* le bandeau process passe sur 2 lignes : 5 etapes ne tiennent plus */
	.vhx-steps{ flex-wrap:wrap; row-gap:20px; }
	.vhx-step{ flex:1 1 42%; }
	.vhx-step-arrow{ display:none; }
}
@media (max-width:1150px){
	.vhx-hero .va-container{ padding:0 26px; }
	.vhx-grid{
		grid-template-columns:1fr;
		grid-template-areas:
			"left"
			"top"
			"image"
			"trust"
			"steps";
	}
	/* l'accroche reprend sa propre ligne : plus de superposition sur la photo */
	.vhx-top{ grid-area:top; padding:28px 0 14px; }
	/* le panneau "verre" passe pleine largeur, sans coin arrondi */
	.vhx-left::before, .vhx-left::after{
		left:-40px; right:-40px; top:-30px; bottom:-24px; border-radius:0;
	}
	.vhx-left::before{ box-shadow:none; }
	.vhx-lead br{ display:none; }
	.vhx-image{ margin-top:0; }
	/* fondus desactives : la photo est trop petite ici pour les supporter */
	.vhx-image::after{ display:none; }
	.vhx-steps{ flex-wrap:wrap; row-gap:20px; margin:24px 0 0; }
	.vhx-step{ flex:1 1 40%; }
	.vhx-step-arrow{ display:none; }
}
@media (max-width:760px){
	.vhx-hero{ padding:0 0 44px; }
	.vhx-title{ font-size:31px; }
	.vhx-top h2{ font-size:18px; }
	.vhx-feats{ grid-template-columns:repeat(2,1fr); row-gap:26px; }
	.vhx-feat:nth-child(odd){ border-left:none; padding-left:0; }
	.vhx-feat:nth-child(even){ padding-right:0; }
	.vhx-cta{ flex-direction:column; }
	.vhx-btn-primary, .vhx-btn-outline{ justify-content:center; }
	.vhx-trust{ flex-wrap:wrap; row-gap:18px; padding:18px 6px; }
	.vhx-trust-item{ flex:1 1 44%; }
	.vhx-trust-item:nth-child(odd){ border-left:none; }
	.vhx-step{ flex:1 1 100%; }
}
@media (max-width:480px){
	.vhx-hero .va-container{ padding:0 16px; }
	.vhx-title{ font-size:26px; }
	.vhx-lead{ font-size:15px; }
	.vhx-feats{ grid-template-columns:1fr 1fr; }
	.vhx-trust-item{ flex:1 1 100%; border-left:none; }
}

/* ==================================================
   vpx — "Produire un acte ne devrait plus mobiliser des heures" (index.html)
   ================================================== */
.vpx{
	position:relative;
	overflow:hidden;
	padding:74px 0 78px;
	background:
		radial-gradient(900px 500px at 12% 8%, rgba(40,113,254,.05), transparent 62%),
		linear-gradient(180deg,#ffffff 0%,#f6f9fe 40%,#f2f6fd 72%,#ffffff 100%);
}
/* trames de points decoratives dans les angles bas */
.vpx::before, .vpx::after{
	content:"";
	position:absolute; bottom:0; z-index:0;
	width:340px; height:210px;
	background-image:radial-gradient(rgba(40,113,254,.34) 1.3px, transparent 1.7px);
	background-size:15px 15px;
	pointer-events:none;
}
.vpx::before{
	left:0;
	-webkit-mask:radial-gradient(130% 130% at 0% 100%, #000 0%, rgba(0,0,0,.35) 45%, transparent 74%);
	mask:radial-gradient(130% 130% at 0% 100%, #000 0%, rgba(0,0,0,.35) 45%, transparent 74%);
}
.vpx::after{
	right:0;
	-webkit-mask:radial-gradient(130% 130% at 100% 100%, #000 0%, rgba(0,0,0,.35) 45%, transparent 74%);
	mask:radial-gradient(130% 130% at 100% 100%, #000 0%, rgba(0,0,0,.35) 45%, transparent 74%);
}
.vpx .va-container{
	position:relative; z-index:1;
	max-width:1560px; margin:0 auto; padding:0 40px;
}
.vpx .blue{ color:#2871FE; }

/* ---------- en-tete ---------- */
.vpx-head{ text-align:center; margin-bottom:44px; }
.vpx-title{
	font-family:"Cabin","Inter",sans-serif;
	font-size:42px; line-height:1.2; font-weight:700;
	letter-spacing:-.5px; color:#0b1830; margin:0;
}
.vpx-lead{
	font-size:16px; line-height:1.62; color:#5b6b80;
	margin:16px auto 0; max-width:900px;
}

/* ---------- comparatif ---------- */
.vpx-compare{
	display:grid;
	grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);
	align-items:start;
	gap:0;
}
.vpx-arrow{
	align-self:center;
	display:flex; align-items:center; justify-content:center;
	color:#c3d3ea; font-size:34px;
	padding-top:60px;
}

.vpx-col-head{ text-align:center; margin-bottom:26px; }
.vpx-badge{
	display:inline-block;
	font-family:"Cabin","Inter",sans-serif;
	font-size:12.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
	color:#fff; padding:9px 24px; border-radius:8px;
}
.vpx-badge.dark{ background:#3d4450; color:#fff; }
.vpx-badge.blue{ background:#2871FE; color:#fff; }
.vpx-col-sub{
	margin:16px 0 0;
	font-size:14.5px; font-weight:600; color:#1b2a42;
}

/* ---------- frises d'etapes ---------- */
.vpx-steps{
	position:relative;
	display:flex; align-items:flex-start;
}
.vpx-step{
	flex:1 1 0; min-width:0;
	position:relative; z-index:1;
	text-align:center;
	padding:0 3px;
}
.vpx-num{
	display:flex; align-items:center; justify-content:center;
	width:22px; height:22px; border-radius:50%;
	background:#3d4450; color:#fff;
	font-size:10.5px; font-weight:700;
	margin:0 auto 12px;
}
.vpx-ic{
	display:flex; align-items:center; justify-content:center;
	width:64px; height:64px; border-radius:50%;
	margin:0 auto 13px;
}
.vpx-step p{ margin:0; font-size:11.5px; line-height:1.45; }

/* frise "ancienne methode" */
.vpx-col--old .vpx-steps::before{
	content:"";
	position:absolute; z-index:0;
	left:10%; right:10%; top:66px; height:1px;
	background:#e2e5ea;
}
.vpx-col--old .vpx-ic{
	background:#f4f5f7;
	box-shadow:inset 0 0 0 1px #e9ebef;
	color:#8f97a5; font-size:25px;
}
.vpx-col--old .vpx-step p{ color:#6e7a8c; }

/* panneau + frise VISIOacte */
.vpx-panel{
	background:linear-gradient(180deg,#f3f8ff 0%,#edf3fd 100%);
	border:1px solid #e2ecfb;
	border-radius:22px;
	padding:30px 20px 26px;
}
.vpx-col--new .vpx-steps::before{
	content:"";
	position:absolute; z-index:0;
	left:9%; right:9%; top:34px; height:1.5px;
	background:#bcd6fb;
}
.vpx-col--new .vpx-step::before{
	content:"";
	position:absolute; z-index:2;
	top:-3px; left:50%; transform:translateX(-50%);
	width:7px; height:7px; border-radius:50%;
	background:#2871FE;
}
.vpx-col--new .vpx-ic{
	background:#fff;
	box-shadow:inset 0 0 0 1.5px #cfe0ff, 0 6px 16px -8px rgba(40,113,254,.4);
	color:#2871FE; font-size:25px;
}
.vpx-col--new .vpx-ic.solid{
	background:linear-gradient(145deg,#3f86ff,#2871FE);
	box-shadow:0 10px 20px -8px rgba(40,113,254,.7);
	color:#fff;
}
.vpx-col--new .vpx-step p{ color:#1b2a42; font-weight:600; }
.vpx-col--new .vpx-step p.blue{ color:#2871FE; }

/* ---------- bandeaux de synthese ---------- */
.vpx-tags{
	display:flex;
	border-radius:16px;
	padding:19px 6px;
	margin-top:26px;
}
.vpx-tag{
	flex:1 1 0; min-width:0;
	display:flex; align-items:center; gap:9px;
	padding:0 8px;
}
.vpx-tag i{ flex:0 0 auto; font-size:19px; }
.vpx-tag span{
	font-size:11px; line-height:1.35; font-weight:600;
	white-space:nowrap;
}

.vpx-tags--old{
	background:#fbfbfc;
	border:1px solid #eef0f3;
}
.vpx-tags--old i{ color:#e8505b; }
.vpx-tags--old span{ color:#4a5668; }

.vpx-tags--new{
	background:#eef4fe;
	border:1px solid #ddeafd;
}
.vpx-tags--new i{ color:#2871FE; }
.vpx-tags--new span{ color:#1b2a42; }
.vpx-tags--new span.blue{ color:#2871FE; }

/* ---------- pied de section ---------- */
.vpx-foot{
	text-align:center;
	margin:58px 0 0;
	font-family:"Cabin","Inter",sans-serif;
	font-size:27px; line-height:1.42; font-weight:700;
	color:#12233d;
}

/* ---------- responsive ---------- */
@media (max-width:1440px){
	.vpx-title{ font-size:36px; }
	.vpx-foot{ font-size:23px; }
	.vpx-ic{ width:56px; height:56px; }
	.vpx-col--old .vpx-ic, .vpx-col--new .vpx-ic{ font-size:22px; }
	.vpx-col--old .vpx-steps::before{ top:62px; }
	.vpx-col--new .vpx-steps::before{ top:30px; }
	.vpx-step p{ font-size:10.5px; }
	.vpx-tag{ padding:0 7px; gap:7px; align-items:flex-start; }
	.vpx-tag i{ font-size:17px; line-height:1.3; }
	.vpx-tag span{ font-size:10.5px; white-space:normal; }
}
@media (max-width:1150px){
	.vpx{ padding:56px 0 60px; }
	.vpx .va-container{ padding:0 26px; }
	.vpx-compare{
		grid-template-columns:minmax(0,1fr);
		row-gap:20px;
	}
	.vpx-arrow{
		padding:0; transform:rotate(90deg);
		font-size:28px;
	}
	.vpx-title{ font-size:31px; }
	.vpx-lead{ font-size:15px; }
	.vpx-lead br{ display:none; }
	.vpx-foot{ font-size:21px; margin-top:44px; }
}
@media (max-width:820px){
	.vpx-steps{ flex-wrap:wrap; row-gap:26px; }
	.vpx-step{ flex:1 1 25%; }
	.vpx-col--old .vpx-steps::before,
	.vpx-col--new .vpx-steps::before{ display:none; }
	.vpx-tags{ flex-wrap:wrap; row-gap:18px; }
	.vpx-tag{ flex:1 1 45%; }
}
@media (max-width:560px){
	.vpx .va-container{ padding:0 16px; }
	.vpx-title{ font-size:25px; }
	.vpx-foot{ font-size:18px; }
	.vpx-foot br{ display:none; }
	.vpx-step{ flex:1 1 33%; }
	.vpx-tag{ flex:1 1 100%; }
	.vpx-panel{ padding:24px 12px 20px; }
}

/* ==================================================
   vag — "L'IA travaille. Vous decidez." (index.html)
   ================================================== */
.vag{
	position:relative;
	overflow:hidden;
	padding:74px 0 80px;
	background:
		radial-gradient(950px 500px at 82% 4%, rgba(40,113,254,.055), transparent 62%),
		linear-gradient(180deg,#ffffff 0%,#f6f9fe 42%,#f1f6fd 74%,#ffffff 100%);
}
.vag::before, .vag::after{
	content:"";
	position:absolute; bottom:0; z-index:0;
	width:330px; height:205px;
	background-image:radial-gradient(rgba(40,113,254,.32) 1.3px, transparent 1.7px);
	background-size:15px 15px;
	pointer-events:none;
}
.vag::before{
	left:0;
	-webkit-mask:radial-gradient(130% 130% at 0% 100%, #000 0%, rgba(0,0,0,.35) 45%, transparent 74%);
	mask:radial-gradient(130% 130% at 0% 100%, #000 0%, rgba(0,0,0,.35) 45%, transparent 74%);
}
.vag::after{
	right:0;
	-webkit-mask:radial-gradient(130% 130% at 100% 100%, #000 0%, rgba(0,0,0,.35) 45%, transparent 74%);
	mask:radial-gradient(130% 130% at 100% 100%, #000 0%, rgba(0,0,0,.35) 45%, transparent 74%);
}
.vag .va-container{
	position:relative; z-index:1;
	max-width:1640px; margin:0 auto; padding:0 34px;
}
.vag .blue{ color:#2871FE; }

/* ---------- en-tete ---------- */
.vag-head{ text-align:center; margin-bottom:38px; }
.vag-title{
	font-family:"Cabin","Inter",sans-serif;
	font-size:58px; line-height:1.15; font-weight:700;
	letter-spacing:-1px; color:#0b1830; margin:0;
}
.vag-lead{
	font-size:19px; line-height:1.6; color:#4a5a71;
	margin:14px auto 0; max-width:920px;
}
.vag-lead b{ color:#2871FE; font-weight:700; }

/* ---------- grille du parcours ---------- */
.vag-flow{
	display:grid;
	/* proportions reprises de la maquette (colonnes etroites = fleches) */
	grid-template-columns:
		minmax(0,180fr) minmax(0,36fr)
		minmax(0,250fr) minmax(0,36fr)
		minmax(0,570fr) minmax(0,36fr)
		minmax(0,252fr) minmax(0,36fr)
		minmax(0,208fr);
	grid-template-areas:
		"s1 a1 s2 a2 s3 a3 s4 a4 s5"
		".  bn bn bn bn bn bn s6 s6"
		".  ct ct ct ct ct ct .  . ";
	column-gap:0;
	row-gap:28px;
	align-items:start;
}
.vag-s1{ grid-area:s1; } .vag-a1{ grid-area:a1; }
.vag-s2{ grid-area:s2; } .vag-a2{ grid-area:a2; }
.vag-s3{ grid-area:s3; } .vag-a3{ grid-area:a3; }
.vag-s4{ grid-area:s4; } .vag-a4{ grid-area:a4; }
.vag-s5{ grid-area:s5; }
.vag-benefits{ grid-area:bn; }
.vag-s6{ grid-area:s6; margin-top:-166px; margin-left:34px; }
.vag-cta{ grid-area:ct; }

.vag-arrow{
	align-self:center;
	display:flex; align-items:center; justify-content:center;
	color:#2871FE; font-size:19px;
	margin-top:-40px;
}

/* ---------- colonnes ---------- */
.vag-col{ text-align:center; min-width:0; }
.vag-badge{
	display:inline-block;
	font-family:"Cabin","Inter",sans-serif;
	font-size:11.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
	color:#fff; background:#2871FE;
	padding:7px 15px; border-radius:7px;
}
.vag-badge.dark{ background:#0b1830; color:#fff; }
.vag-badge i{ font-style:normal; text-transform:lowercase; }
.vag-sub{
	margin:13px 0 16px;
	font-size:12px; line-height:1.5; color:#5b6b80;
}

.vag-card{
	background:#fff;
	border:1px solid #eaeef5;
	border-radius:14px;
	padding:13px 14px;
	box-shadow:0 18px 38px -28px rgba(16,38,73,.4);
	text-align:left;
}
.vag-row{
	display:flex; align-items:center; gap:10px;
	padding:7.5px 0;
	font-size:11.5px; font-weight:500; line-height:1.35; color:#33415a;
}
.vag-row .ic{
	width:26px; height:26px; flex:0 0 26px;
	border-radius:8px; background:#eaf1ff;
	display:flex; align-items:center; justify-content:center;
	color:#2871FE; font-size:12px;
}
.vag-more{ text-align:center; color:#b6c3d6; font-size:13px; padding-top:2px; }

.vag-checks{ padding:12px 14px; }
.vag-check{
	display:flex; align-items:center; gap:9px;
	padding:5.5px 0;
	font-size:11.5px; line-height:1.35; color:#33415a;
}
.vag-check i{ color:#2871FE; font-size:14px; flex:0 0 auto; }

.vag-visual{ margin:0 0 14px; }
.vag-visual img{ display:block; width:100%; height:auto; }
.vag-visual--round img{ max-width:215px; margin:0 auto; }

/* ---------- 3. panneau des agents ---------- */
.vag-s3{
	margin-top:-3px;
	background:
		radial-gradient(330px 300px at 50% 60%, rgba(255,255,255,.9), rgba(255,255,255,0) 72%),
		linear-gradient(180deg,#f3f8ff 0%,#eaf2fd 100%);
	border:1px solid #dfeafb;
	border-radius:22px;
	padding:3px 14px 12px;
}
.vag-agents{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,28%) minmax(0,1fr);
	grid-template-areas:
		"an  cube ref"
		"red cube form"
		".   ctrl .";
	column-gap:12px; row-gap:36px;
	align-items:stretch;
	text-align:left;
}
.vag-an{ grid-area:an; }
.vag-ref{ grid-area:ref; }
.vag-red{ grid-area:red; }
.vag-form{ grid-area:form; }
.vag-s3 .vag-sub{ position:relative; z-index:2; }
/* la carte Controle remonte sous le cube, comme sur la maquette */
.vag-ctrl{ grid-area:ctrl; align-self:start; justify-self:center; width:125%; margin-top:-52px; }

.vag-cube{
	grid-area:cube; align-self:center;
	position:relative; z-index:0; min-width:0;
	display:flex; align-items:center; justify-content:center;
}
/* sphere lumineuse + reseau de points derriere le cube */
.vag-cube::before,
.vag-cube::after{
	content:"";
	position:absolute; z-index:-1;
	left:50%; top:50%;
	width:300px; height:300px;
	transform:translate(-50%,-50%);
	border-radius:50%;
	pointer-events:none;
}
.vag-cube::before{
	background:radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(214,231,255,.75) 36%, rgba(40,113,254,.14) 58%, rgba(40,113,254,0) 72%);
}
.vag-cube::after{
	background-image:radial-gradient(rgba(40,113,254,.42) 1px, transparent 1.6px);
	background-size:11px 11px;
	-webkit-mask:radial-gradient(circle, transparent 28%, #000 42%, rgba(0,0,0,.55) 58%, transparent 71%);
	mask:radial-gradient(circle, transparent 28%, #000 42%, rgba(0,0,0,.55) 58%, transparent 71%);
	opacity:.75;
}
/* le PNG a beaucoup de marge transparente : on l agrandit sans le modifier */
.vag-cube img{ display:block; flex:0 0 auto; width:245%; max-width:none; height:auto; pointer-events:none; }

/* carte agent : icone + titre sur la 1re ligne, description alignee sous le titre */
.vag-agent{
	position:relative; z-index:1;
	display:grid;
	grid-template-columns:28px minmax(0,1fr);
	grid-template-rows:minmax(28px,auto) auto;
	column-gap:9px; row-gap:7px;
	align-items:center;
	background:#fff;
	border:1px solid #e8eef8;
	border-radius:11px;
	padding:14px 11px 16px;
	box-shadow:0 12px 28px -16px rgba(16,38,73,.22), 0 1px 2px rgba(16,38,73,.04);
	transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.vag-agent:hover{
	transform:translateY(-3px);
	border-color:#cfe0ff;
	box-shadow:0 20px 36px -18px rgba(40,113,254,.38), 0 1px 2px rgba(16,38,73,.04);
}
.vag-agent .ic{
	grid-column:1; grid-row:1;
	display:flex; align-items:center; justify-content:center;
	width:28px; height:28px;
	color:#2871FE; font-size:25px; line-height:1;
}
.vag-agent .ic svg{ display:block; width:27px; height:27px; }
.vag-agent strong{
	grid-column:2; grid-row:1;
	display:block;
	font-family:"Cabin","Inter",sans-serif;
	font-size:13px; font-weight:700; line-height:1.25;
	color:#2871FE;
	margin:0;
}
.vag-agent p{
	grid-column:2; grid-row:2; align-self:start;
	margin:0; font-size:11px; line-height:1.6; color:#4a5870;
}

/* ---------- 5. validation humaine ---------- */
.vag-control{
	display:flex; align-items:center; justify-content:center; gap:11px;
	margin-top:6px;
}
.vag-control i{ color:#22c55e; font-size:23px; flex:0 0 auto; }
.vag-control span{ font-size:12px; line-height:1.4; color:#41506a; text-align:left; }
.vag-control b{ color:#12233d; font-weight:700; }
.vag-down{
	display:flex; align-items:center; justify-content:center;
	margin-top:2px; color:#2871FE; font-size:21px;
}

/* ---------- 6. signature & formalites ---------- */
.vag-seal{
	display:flex; align-items:center; gap:8px;
	background:#fff;
	border:1px solid #eaeef5;
	border-radius:14px;
	padding:13px 12px;
	box-shadow:0 18px 38px -28px rgba(16,38,73,.4);
}
.vag-seal span{
	flex:1 1 0;
	display:flex; align-items:center; justify-content:center;
	height:40px;
	color:#1e3a8a; font-size:24px;
}
.vag-seal span + span{ border-left:1px solid #eef1f7; }
.vag-seal span.solid{ color:#2871FE; font-size:25px; }
/* nuage + cadenas composes (l'icone n'existe pas dans bootstrap-icons 1.9.1) */
.vag-cloudlock{ position:relative; }
.vag-cloudlock i:first-child{ font-size:25px; }
.vag-cloudlock i:last-child{
	position:absolute; z-index:1;
	font-size:11px; color:#fff;
	top:52%; left:50%; transform:translate(-50%,-46%);
}

/* ---------- bandeau benefices ---------- */
.vag-benefits{
	display:flex; align-items:center;
	background:#fff;
	border:1px solid #eaeef5;
	border-radius:18px;
	padding:22px 14px;
	box-shadow:0 22px 48px -32px rgba(16,38,73,.4);
}
.vag-benefit{
	flex:1 1 0; min-width:0;
	display:flex; align-items:center; gap:16px;
	padding:0 24px;
	text-align:left;
}
.vag-benefit:first-child{ border-left:none; }
.vag-benefit .ic{
	width:58px; height:58px; flex:0 0 58px;
	border-radius:50%;
	box-shadow:inset 0 0 0 2px #2871FE;
	display:flex; align-items:center; justify-content:center;
	color:#2871FE; font-size:26px;
}
.vag-benefit strong{
	display:block;
	font-family:"Cabin","Inter",sans-serif;
	font-size:15px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
	color:#2871FE; margin-bottom:6px;
}
.vag-benefit p{ margin:0; font-size:13px; line-height:1.45; color:#4a5a71; }

/* ---------- CTA ---------- */
.vag-cta{
	display:flex; justify-content:center; gap:20px;
	padding-top:4px;
}
.vag-btn-primary, .vag-btn-outline{
	position:relative; overflow:hidden;
	display:inline-flex; align-items:center; gap:14px;
	font-family:"Cabin","Inter",sans-serif;
	font-size:16.5px; font-weight:600;
	padding:17px 52px; border-radius:10px;
	transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.vag-btn-primary{
	background:#2160F0; color:#fff;
	box-shadow:0 16px 30px -14px rgba(33,96,240,.6);
}
.vag-btn-primary:hover{ background:#1a4fd0; color:#fff; transform:translateY(-2px); }
.vag-btn-outline{
	background:#fff; color:#12233d;
	border:1.5px solid #2871FE;
}
.vag-btn-outline:hover{ background:#2871FE; color:#fff; transform:translateY(-2px); }
.vag-btn-primary i, .vag-btn-outline i{ font-size:16px; transition:transform .2s ease; }
.vag-btn-primary:hover i, .vag-btn-outline:hover i{ transform:translateX(4px); }

/* ---------- responsive ---------- */
@media (max-width:1500px){
	.vag-title{ font-size:46px; }
	.vag-lead{ font-size:17px; }
	.vag-card{ padding:12px 11px; }
	.vag-row{ gap:8px; }
	.vag-row .ic{ width:24px; height:24px; flex:0 0 24px; }
	.vag-benefit{ padding:0 16px; gap:13px; }
	.vag-benefit .ic{ width:44px; height:44px; flex:0 0 44px; font-size:19px; }
	.vag-benefit strong{ font-size:12.5px; }
	.vag-benefit p{ font-size:11px; }
	.vag-agent p{ font-size:10px; }
	.vag-agent strong{ font-size:11.5px; }
	.vag-row{ font-size:11px; }
	.vag-badge{ font-size:10.5px; letter-spacing:.3px; padding:7px 11px; }
}
/* panneau agents trop etroit : cube au-dessus, agents sur 2 colonnes */
@media (max-width:1440px){
	.vag-agents{
		grid-template-columns:minmax(0,1fr) minmax(0,1fr);
		grid-template-areas:
			"cube cube"
			"an   ref"
			"red  form"
			"ctrl ctrl";
		row-gap:10px;
	}
	.vag-cube img{ width:100%; max-width:300px; }
	.vag-ctrl{ justify-self:center; width:62%; margin-top:0; }
	.vag-cube::before, .vag-cube::after{ width:230px; height:230px; }
	.vag-agent strong{ font-size:13px; }
	.vag-agent p{ font-size:11px; }
}
@media (max-width:1320px){
	.vag{ padding:56px 0 62px; }
	.vag-flow{
		grid-template-columns:minmax(0,1fr);
		grid-template-areas:
			"s1" "a1" "s2" "a2" "s3" "a3" "s4" "a4" "s5" "s6" "bn" "ct";
		row-gap:16px;
	}
	.vag-col{ max-width:640px; margin:0 auto; width:100%; }
	.vag-s3{ max-width:760px; }
	.vag-arrow{ margin-top:0; transform:rotate(90deg); }
	.vag-title{ font-size:32px; }
	.vag-lead br{ display:none; }
	.vag-visual img{ max-width:320px; margin:0 auto; }
	.vag-benefits{ margin-top:14px; }
}
@media (max-width:820px){
	.vag-ctrl{ width:100%; }
	.vag-agents{
		grid-template-columns:minmax(0,1fr);
		grid-template-areas:"cube" "an" "ref" "red" "form" "ctrl";
		row-gap:10px;
	}
	.vag-cube img{ width:100%; max-width:340px; margin:0 auto; }
	.vag-benefits{ flex-wrap:wrap; row-gap:20px; padding:20px 16px; }
	.vag-benefit{ flex:1 1 100%; border-left:none; padding:0; }
	.vag-cta{ flex-direction:column; align-items:stretch; }
	.vag-btn-primary, .vag-btn-outline{ justify-content:center; }
}
@media (max-width:560px){
	.vag .va-container{ padding:0 16px; }
	.vag-title{ font-size:26px; }
	.vag-lead{ font-size:15px; }
}

/* =====================================================================
   index.html — micro-interactions premium
   Respecte prefers-reduced-motion : tout est desactive si l'utilisateur
   demande moins d'animations.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference){

	/* ---------- Sphere du cube IA : respiration + rotation lente ---------- */
	.vag-cube::before{ animation:vagBreathe 6.5s ease-in-out infinite; }
	.vag-cube::after{ animation:vagSpin 70s linear infinite; }
	@keyframes vagBreathe{
		0%,100%{ opacity:1; }
		50%{ opacity:.68; }
	}
	@keyframes vagSpin{
		from{ transform:translate(-50%,-50%) rotate(0deg); }
		to{   transform:translate(-50%,-50%) rotate(360deg); }
	}

	/* ---------- Fleches de parcours : leger va-et-vient ---------- */
	.vag-arrow i, .vpx-arrow i, .vhx-step-arrow i{
		display:inline-block;
		animation:vaxDrift 2.8s ease-in-out infinite;
	}
	.vag-down i{
		display:inline-block;
		animation:vaxDriftDown 2.8s ease-in-out infinite;
	}
	@keyframes vaxDrift{
		0%,100%{ transform:translateX(0);   opacity:.75; }
		50%{     transform:translateX(4px); opacity:1; }
	}
	@keyframes vaxDriftDown{
		0%,100%{ transform:translateY(0);   opacity:.75; }
		50%{     transform:translateY(4px); opacity:1; }
	}

	/* ---------- Reflet balaye sur les boutons pleins ---------- */
	.vhx-btn-primary::after, .vag-btn-primary::after{
		content:"";
		position:absolute; top:0; left:-140%;
		width:55%; height:100%;
		background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
		transform:skewX(-18deg);
		transition:left .6s ease;
		pointer-events:none;
	}
	.vhx-btn-primary:hover::after, .vag-btn-primary:hover::after{ left:150%; }

	/* ---------- Etapes actives : halo pulse ---------- */
	.vpx-ic.solid{ animation:vpxPulse 2.8s ease-in-out infinite; }
	@keyframes vpxPulse{
		0%,100%{ box-shadow:0 10px 20px -8px rgba(40,113,254,.7); }
		50%{     box-shadow:0 10px 26px -6px rgba(40,113,254,.95), 0 0 0 7px rgba(40,113,254,.12); }
	}
}

/* =====================================================================
   login.html — Écran de connexion (rendu façon maquette 8.0)
   Split-screen : panneau branding à gauche, formulaire à droite.
   Respecte le design system VISIOacte (#2871FE, navy, Cabin).
   ===================================================================== */
.vx-login *{ box-sizing:border-box; }

.vx-login{
	display:grid;
	grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
	min-height:calc(100vh - 88px);
	background:#f4f7fc;
}

/* ---------------- Panneau gauche (branding) ---------------- */
.vx-login-side{
	position:relative;
	overflow:hidden;
	display:flex;
	align-items:stretch;
	background:linear-gradient(155deg,#0a1c33 0%,#0e2a52 55%,#123c74 100%);
	padding:56px 60px 48px;
	color:#cbd8e8;
}
.vx-login-side-bg{
	position:absolute;
	inset:0;
	pointer-events:none;
	background-image:
		linear-gradient(rgba(94,150,255,.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(94,150,255,.05) 1px, transparent 1px);
	background-size:44px 44px;
}
.vx-login-side-bg::after{
	content:'';
	position:absolute;
	top:-220px; right:-240px;
	width:640px; height:640px;
	border-radius:50%;
	background:radial-gradient(circle, rgba(40,113,254,.35) 0%, rgba(40,113,254,0) 62%);
}
.vx-login-side-inner{
	position:relative;
	z-index:1;
	width:100%;
	display:flex;
	flex-direction:column;
}
.vx-login-logo img{ height:52px; width:auto; }
.vx-login-side-title{ margin:56px 0 0; max-width:520px; }
.vx-login-side-title h2{
	margin:0 0 14px;
	font-size:34px;
	line-height:1.25;
	font-weight:700;
	color:#ffffff;
	font-family:"Cabin","Titillium Web",Arial,sans-serif;
}
.vx-login-side-title h2 b{ color:#5c9bff; font-weight:700; }
.vx-login-side-title p{
	margin:0;
	font-size:15.5px;
	line-height:1.7;
	color:#a9bcd2;
}
.vx-login-side-points{
	margin:36px 0 0;
	display:flex;
	flex-direction:column;
	gap:20px;
	max-width:520px;
}
.vx-login-point{
	display:flex;
	align-items:center;
	gap:16px;
}
.vx-login-point .vx-login-ic{
	width:46px; height:46px; flex:0 0 46px;
	border-radius:12px;
	background:rgba(40,113,254,.16);
	border:1px solid rgba(94,150,255,.3);
	display:flex; align-items:center; justify-content:center;
}
.vx-login-point .vx-login-ic i{ font-size:20px; color:#6fa2ff; }
.vx-login-point strong{
	display:block;
	font-size:15px;
	font-weight:700;
	color:#ffffff;
	margin-bottom:3px;
}
.vx-login-point span:not(.vx-login-ic){
	display:block;
	font-size:13px;
	line-height:1.5;
	color:#8fa4bd;
}
.vx-login-side-visual{
	margin-top:auto;
	padding-top:34px;
}
.vx-login-side-visual img{
	width:100%;
	border-radius:14px;
	border:1px solid rgba(255,255,255,.14);
	box-shadow:0 30px 60px -20px rgba(0,0,0,.5);
	display:block;
}

/* ---------------- Panneau droit (formulaire) ---------------- */
.vx-login-main{
	display:flex;
	align-items:center;
	justify-content:center;
	padding:48px 40px;
}
.vx-login-card{
	width:100%;
	max-width:452px;
}
.vx-login-head{ margin-bottom:34px; }
.vx-login-head-logo{ margin-bottom:26px; }
.vx-login-head-logo img{ height:40px; width:auto; }
.vx-login-head h3{
	margin:0 0 8px;
	font-size:26px;
	line-height:1.25;
	font-weight:700;
	color:#1c2b3f;
	font-family:"Cabin","Titillium Web",Arial,sans-serif;
}
.vx-login-head p{
	margin:0;
	font-size:15px;
	line-height:1.6;
	color:#6b7a8f;
}

.vx-field{ margin-bottom:20px; }
.vx-field label{
	display:block;
	font-size:13.5px;
	font-weight:600;
	color:#1c2b3f;
	margin:0 0 8px;
}
.vx-field-box{
	position:relative;
}
.vx-field-box .vx-field-ic{
	position:absolute;
	left:16px; top:50%;
	transform:translateY(-50%);
	font-size:18px;
	color:#9aa9bd;
	pointer-events:none;
	transition:color .2s ease;
}
.vx-field-box input{
	width:100%;
	height:54px;
	padding:0 46px 0 48px;
	font-size:15px;
	font-family:"Inter","Cabin",Arial,sans-serif;
	color:#1c2b3f;
	background:#ffffff;
	border:1.5px solid #dbe3ee;
	border-radius:12px;
	outline:none;
	transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.vx-field-box input::placeholder{ color:#a9b6c8; }
.vx-field-box input:focus{
	border-color:#2871FE;
	background:#fff;
	box-shadow:0 0 0 4px rgba(40,113,254,.12);
}
.vx-field-box input:focus ~ .vx-field-ic,
.vx-field-box input:focus + .vx-field-eye + .vx-field-ic,
.vx-field-box:focus-within .vx-field-ic{ color:#2871FE; }
.vx-field-eye{
	position:absolute;
	right:8px; top:50%;
	transform:translateY(-50%);
	width:40px; height:40px;
	border:none;
	background:transparent;
	border-radius:10px;
	display:flex; align-items:center; justify-content:center;
	color:#9aa9bd;
	cursor:pointer;
	transition:color .2s ease;
}
.vx-field-eye:hover{ color:#2871FE; }
.vx-field-eye i{ font-size:20px; }

.vx-login-row{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:14px;
	margin:22px 0 26px;
}
.vx-check{
	display:flex;
	align-items:center;
	gap:9px;
	cursor:pointer;
	font-size:14px;
	color:#5b6b80;
}
.vx-check input[type="checkbox"]{
	width:17px; height:17px;
	border-radius:4px;
	cursor:pointer;
	accent-color:#2871FE;
}
.vx-forgot{
	font-size:14px;
	font-weight:600;
	color:#2871FE;
	text-decoration:none;
	white-space:nowrap;
	transition:color .2s ease;
}
.vx-forgot:hover{ color:#1c5ce0; text-decoration:underline; }

.vx-login-btn{
	width:100%;
	height:54px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	background:linear-gradient(135deg,#2871FE 0%,#1c5ce0 100%);
	color:#ffffff;
	font-size:16px;
	font-weight:700;
	font-family:"Cabin","Titillium Web",Arial,sans-serif;
	border:none;
	border-radius:12px;
	cursor:pointer;
	transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.vx-login-btn:hover{
	background:linear-gradient(135deg,#1c5ce0 0%,#1a4fd0 100%);
	color:#fff;
	transform:translateY(-2px);
	box-shadow:0 16px 34px -12px rgba(40,113,254,.55);
}
.vx-login-btn i{ font-size:17px; transition:transform .2s ease; }
.vx-login-btn:hover i{ transform:translateX(4px); }

.vx-login-switch{
	margin-top:28px;
	text-align:center;
	border-top:1px solid #e6ebf3;
	padding-top:22px;
}
.vx-login-switch p{
	margin:0;
	font-size:14.5px;
	color:#5b6b80;
}
.vx-login-switch a{
	font-weight:700;
	color:#2871FE;
	text-decoration:none;
	transition:color .2s ease;
}
.vx-login-switch a:hover{ color:#1c5ce0; text-decoration:underline; }

/* ---------- Survols (actifs meme en mouvement reduit : pas d'animation continue) ---------- */
.vhx-feat .ic, .vag-benefit .ic, .vpx-col--new .vpx-ic{
	transition:transform .24s cubic-bezier(.4,0,.2,1), box-shadow .24s ease;
}
.vhx-feat:hover .ic, .vag-benefit:hover .ic{
	transform:scale(1.09);
	box-shadow:0 12px 24px -10px rgba(40,113,254,.5);
}
.vpx-step:hover .vpx-ic{ transform:translateY(-3px); }

.vhx-trust-item, .vag-row, .vpx-tag{
	transition:transform .2s ease;
}
.vhx-trust-item:hover, .vag-row:hover, .vpx-tag:hover{ transform:translateX(3px); }

/* cartes du parcours : leger soulevement */
.vag-card, .vag-seal, .vpx-panel{
	transition:transform .26s cubic-bezier(.4,0,.2,1), box-shadow .26s ease;
}
.vag-card:hover, .vag-seal:hover{
	transform:translateY(-3px);
	box-shadow:0 22px 44px -22px rgba(16,38,73,.35);
}

/* =====================================================================
   login.html — Maquette 8.0
   Split-screen : panneau branding gauche / formulaire droite.
   Prefixe : va-lp-
   ===================================================================== */

/* ---------- Variables locales ---------- */
.va-lp-page{
	--va-navy:#0D2058;
	--va-blue:#1455FF;
	--va-blue-alt:#2871FE;
	--va-blue-hover:#0f3de8;
	--va-bg:#f6f8fc;
	--va-card:#ffffff;
	--va-border:#dfe5ee;
	--va-text:#1c2b3f;
	--va-text2:#6b7a8f;
	--va-text3:#97a3b5;
	--va-radius:12px;
	--va-radius-sm:8px;
	--va-font-display:"Manrope","Cabin","Titillium Web",Arial,sans-serif;
	--va-font-body:"Inter","Cabin",Arial,sans-serif;
}

.va-lp-page *{box-sizing:border-box;}
.va-lp-page{
	font-family:var(--va-font-body);
	color:var(--va-text);
	background:var(--va-bg);
	min-height:100vh;
	display:flex;
	flex-direction:column;
	overflow-x:hidden;
}
.va-lp-page a{text-decoration:none;}

/* ============================================================
   SPLIT SCREEN
   ============================================================ */
.va-lp-split{
	display:grid;
	grid-template-columns:1fr 1fr;
	min-height:100vh;
	flex:1;
}

/* ============================================================
   PANNEAU GAUCHE — fond premium multi-couches
   ============================================================ */
.va-lp-left{
	position:relative;
	background:#edf2fc;
	overflow:hidden;
	display:flex;
	align-items:stretch;
}

/* Couche 0 — mesh gradient de base */
.va-lp-left::before{
	content:'';
	position:absolute;
	inset:0;
	background:
		radial-gradient(ellipse 80% 60% at 15% 20%, rgba(20,85,255,.06) 0%, transparent 60%),
		radial-gradient(ellipse 70% 50% at 85% 75%, rgba(100,140,255,.05) 0%, transparent 55%),
		linear-gradient(162deg,#f6f9ff 0%,#edf2fc 28%,#e2ebf8 56%,#d6e2f5 100%);
	pointer-events:none;
}

/* Couche 1 — grille technologique fine */
.va-lp-left-bg{
	position:absolute;
	inset:0;
	pointer-events:none;
	background-image:
		linear-gradient(rgba(20,85,255,.04) 1px,transparent 1px),
		linear-gradient(90deg,rgba(20,85,255,.04) 1px,transparent 1px);
	background-size:52px 52px;
}

/* Couche 2 — orbes lumineux principaux */
.va-lp-left-bg::before{
	content:'';
	position:absolute;
	top:-8%; right:-14%;
	width:680px; height:680px;
	border-radius:50%;
	background:
		radial-gradient(circle,rgba(20,85,255,.14) 0%,rgba(20,85,255,.04) 40%,transparent 70%);
	filter:blur(2px);
}
.va-lp-left-bg::after{
	content:'';
	position:absolute;
	bottom:-14%; left:4%;
	width:520px; height:520px;
	border-radius:50%;
	background:
		radial-gradient(circle,rgba(40,113,254,.08) 0%,rgba(100,160,255,.02) 45%,transparent 70%);
}

/* Couche 3 — accents additionnels via la page */
.va-lp-left-inner{
	position:relative;
	z-index:1;
	width:100%;
	max-width:540px;
	padding:48px 56px 40px;
	display:flex;
	flex-direction:column;
}
/* Orbe flottant haut-gauche */
.va-lp-left-inner::before{
	content:'';
	position:absolute;
	top:18%; left:-6%;
	width:300px; height:300px;
	border-radius:50%;
	background:radial-gradient(circle,rgba(40,113,254,.07) 0%,transparent 65%);
	pointer-events:none;
	animation:va-lp-orb-float 12s ease-in-out infinite alternate;
}
/* Orbe flottant bas-droite */
.va-lp-left-inner::after{
	content:'';
	position:absolute;
	bottom:8%; right:-8%;
	width:260px; height:260px;
	border-radius:50%;
	background:radial-gradient(circle,rgba(20,85,255,.06) 0%,transparent 60%);
	pointer-events:none;
	animation:va-lp-orb-float 15s ease-in-out infinite alternate-reverse;
}
@keyframes va-lp-orb-float{
	0%{transform:translate(0,0) scale(1);}
	100%{transform:translate(18px,-14px) scale(1.08);}
}

/* Logo */
.va-lp-logo{margin-bottom:40px;}
.va-lp-logo img{height:40px;width:auto;display:block;}

/* Hero */
.va-lp-hero{margin-top:4px;}
.va-lp-hero h1{
	margin:0 0 18px;
	font-family:var(--va-font-display);
	font-size:36px;
	font-weight:800;
	line-height:1.22;
	letter-spacing:-.025em;
}
.va-lp-hero-navy{display:block;color:var(--va-navy);}
.va-lp-hero-blue{display:block;color:var(--va-blue);}

/* Description */
.va-lp-desc{margin-bottom:28px;}
.va-lp-desc p{
	margin:0;
	font-size:17px;
	line-height:1.7;
	color:var(--va-text2);
}

/* Filet bleu */
.va-lp-rule{
	width:36px;
	height:3px;
	border-radius:2px;
	background:linear-gradient(90deg,var(--va-blue),var(--va-blue-alt));
	margin-bottom:36px;
}

/* ============================================================
   6 AVANTAGES — grille 3×2
   ============================================================ */
.va-lp-features{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:28px 24px;
	margin-bottom:36px;
}
.va-lp-feat{}
.va-lp-feat-ic{
	width:44px; height:44px;
	border-radius:50%;
	background:rgba(20,85,255,.08);
	border:1.5px solid rgba(20,85,255,.18);
	display:flex;align-items:center;justify-content:center;
	margin-bottom:12px;
}
.va-lp-feat-ic i{font-size:17px;color:var(--va-blue);}
.va-lp-feat h3{
	margin:0 0 5px;
	font-family:var(--va-font-display);
	font-size:11.5px;
	font-weight:700;
	line-height:1.35;
	color:var(--va-navy);
	text-transform:uppercase;
	letter-spacing:.02em;
}
.va-lp-feat p{
	margin:0;
	font-size:12.5px;
	line-height:1.55;
	color:var(--va-text2);
}

/* ============================================================
   CARTE HÉBERGEMENT
   ============================================================ */
.va-lp-hosting{
	display:flex;
	align-items:center;
	gap:16px;
	max-width:420px;
	background:rgba(255,255,255,.85);
	backdrop-filter:blur(6px);
	-webkit-backdrop-filter:blur(6px);
	border:1px solid rgba(20,85,255,.12);
	border-radius:var(--va-radius);
	padding:16px 20px;
	box-shadow:0 2px 12px rgba(16,38,73,.06);
}
.va-lp-hosting-ic{
	flex:0 0 42px;
	height:42px;
	border-radius:10px;
	background:linear-gradient(135deg,#1455FF,#2871FE);
	display:flex;align-items:center;justify-content:center;
}
.va-lp-hosting-ic i{font-size:18px;color:#fff;}
.va-lp-hosting-txt strong{
	display:block;
	font-size:13.5px;
	font-weight:700;
	color:var(--va-navy);
	margin-bottom:2px;
}
.va-lp-hosting-txt span{
	display:block;
	font-size:12px;
	color:var(--va-text2);
	line-height:1.4;
}

/* ============================================================
   PANNEAU DROIT
   ============================================================ */
.va-lp-right{
	position:relative;
	background:#ffffff;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:40px 48px;
}

/* Sélecteur de langue */
.va-lp-lang{
	position:absolute;
	top:24px; right:24px;
	z-index:5;
}
.va-lp-lang-btn{
	display:inline-flex;
	align-items:center;
	gap:6px;
	background:#fff;
	border:1px solid var(--va-border);
	border-radius:9px;
	padding:7px 14px;
	font-size:13px;
	font-weight:600;
	color:var(--va-text);
	cursor:pointer;
	transition:border-color .2s ease,box-shadow .2s ease;
	font-family:var(--va-font-body);
}
.va-lp-lang-btn:hover{border-color:var(--va-blue-alt);box-shadow:0 0 0 3px rgba(40,113,254,.08);}
.va-lp-lang-btn i{font-size:14px;color:var(--va-text2);}
.va-lp-lang-btn .fa-chevron-down{font-size:10px;}

/* Zone formulaire */
.va-lp-form-area{
	width:100%;
	max-width:520px;
}

/* Titre */
.va-lp-form-head{margin-bottom:28px;}
.va-lp-form-head h2{
	margin:0 0 10px;
	font-family:var(--va-font-display);
	font-size:26px;
	font-weight:700;
	line-height:1.3;
}
.c-navy{color:var(--va-navy);}
.c-blue{color:var(--va-blue);}
.va-lp-form-head p{
	margin:0;
	font-size:15px;
	line-height:1.6;
	color:var(--va-text2);
}

/* ============================================================
   CARTE FORMULAIRE
   ============================================================ */
.va-lp-card{
	background:var(--va-card);
	border:1px solid var(--va-border);
	border-radius:10px;
	box-shadow:0 1px 3px rgba(16,38,73,.04),0 12px 32px -12px rgba(16,38,73,.08);
	overflow:hidden;
}

/* ---------- Onglets ---------- */
.va-lp-tabs{
	display:grid;
	grid-template-columns:1fr 1fr;
	border-bottom:1px solid var(--va-border);
}
.va-lp-tab{
	display:flex;
	align-items:center;
	gap:10px;
	padding:16px 20px;
	font-size:14px;
	color:var(--va-text);
	background:rgba(240,244,252,.6);
	border:none;
	cursor:pointer;
	transition:background .2s ease,color .2s ease;
	text-decoration:none;
}
.va-lp-tab i{font-size:16px;color:var(--va-text3);}
.va-lp-tab strong{
	display:block;
	font-size:13.5px;
	font-weight:600;
	line-height:1.3;
}
.va-lp-tab span{
	display:block;
	font-size:11.5px;
	color:var(--va-text3);
	margin-top:1px;
}
.va-lp-tab:hover{background:rgba(20,85,255,.04);}
.va-lp-tab.active{
	background:#f0f5ff;
	border-bottom:3px solid var(--va-blue);
}
.va-lp-tab.active i,
.va-lp-tab.active strong{color:var(--va-blue);}

/* ---------- Formulaire ---------- */
.va-lp-form{padding:32px 28px 0;}
.va-lp-fields{}

.va-lp-field{margin-bottom:18px;}
.va-lp-field label{
	display:block;
	font-size:13px;
	font-weight:600;
	color:var(--va-text);
	margin:0 0 7px;
}
.va-lp-input-box{position:relative;}
.va-lp-input-ic{
	position:absolute;
	left:15px; top:50%;
	transform:translateY(-50%);
	font-size:16px;
	color:var(--va-text3);
	pointer-events:none;
	transition:color .2s ease;
}
.va-lp-input-box input{
	width:100%;
	height:48px;
	padding:0 44px 0 44px;
	font-size:14.5px;
	font-family:var(--va-font-body);
	color:var(--va-text);
	background:#fff;
	border:1px solid var(--va-border);
	border-radius:var(--va-radius-sm);
	outline:none;
	transition:border-color .2s ease,box-shadow .2s ease;
}
.va-lp-input-box input::placeholder{color:var(--va-text3);}
.va-lp-input-box input:focus{
	border-color:var(--va-blue);
	box-shadow:0 0 0 3px rgba(20,85,255,.1);
}
.va-lp-input-box input:focus~.va-lp-input-ic{color:var(--va-blue);}

.va-lp-eye{
	position:absolute;
	right:4px; top:50%;
	transform:translateY(-50%);
	width:38px; height:38px;
	border:none;
	background:transparent;
	border-radius:var(--va-radius-sm);
	display:flex;align-items:center;justify-content:center;
	color:var(--va-text3);
	cursor:pointer;
	transition:color .2s ease;
}
.va-lp-eye:hover{color:var(--va-blue);}
.va-lp-eye i{font-size:18px;}

/* ---------- Remember / Forgot ---------- */
.va-lp-row{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	margin:6px 0 22px;
}
.va-lp-check{
	display:flex;
	align-items:center;
	gap:8px;
	cursor:pointer;
	font-size:13.5px;
	color:var(--va-text2);
}
.va-lp-check input[type="checkbox"]{
	width:16px; height:16px;
	border-radius:4px;
	cursor:pointer;
	accent-color:var(--va-blue);
}
.va-lp-forgot{
	font-size:13.5px;
	font-weight:600;
	color:var(--va-blue);
	white-space:nowrap;
	transition:color .2s ease;
}
.va-lp-forgot:hover{color:var(--va-blue-hover);text-decoration:underline;}

/* ---------- Bouton Se connecter ---------- */
.va-lp-submit{
	width:100%;
	height:48px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	background:linear-gradient(135deg,var(--va-blue) 0%,var(--va-blue-alt) 100%);
	color:#fff;
	font-size:15.5px;
	font-weight:700;
	font-family:var(--va-font-display);
	border:none;
	border-radius:var(--va-radius-sm);
	cursor:pointer;
	transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.va-lp-submit:hover{
	background:linear-gradient(135deg,var(--va-blue-hover) 0%,var(--va-blue) 100%);
	transform:translateY(-1px);
	box-shadow:0 10px 28px -10px rgba(20,85,255,.5);
	color:#fff;
}
.va-lp-submit i{font-size:15px;transition:transform .2s ease;}
.va-lp-submit:hover i{transform:translateX(3px);}

/* ---------- Séparateur social ---------- */
.va-lp-sep{
	display:flex;
	align-items:center;
	gap:16px;
	padding:22px 28px 0;
}
.va-lp-sep::before,.va-lp-sep::after{
	content:'';
	flex:1;
	height:1px;
	background:var(--va-border);
}
.va-lp-sep span{
	font-size:12.5px;
	color:var(--va-text3);
	white-space:nowrap;
	font-weight:500;
}

/* ---------- Boutons sociaux ---------- */
.va-lp-social{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:12px;
	padding:18px 28px 28px;
}
.va-lp-social-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	height:46px;
	background:#fff;
	border:1px solid var(--va-border);
	border-radius:var(--va-radius-sm);
	font-size:14px;
	font-weight:600;
	color:var(--va-text);
	cursor:pointer;
	font-family:var(--va-font-body);
	transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.va-lp-social-btn:hover{
	border-color:#c4cdd9;
	background:#fafbfd;
	box-shadow:0 2px 8px rgba(16,38,73,.06);
}
.va-lp-social-btn svg{flex-shrink:0;}

/* ---------- Badge sécurité ---------- */
.va-lp-secure{
	text-align:center;
	margin-top:24px;
}
.va-lp-secure i{
	font-size:16px;
	color:var(--va-blue);
	margin-right:5px;
}
.va-lp-secure strong{
	font-size:13.5px;
	font-weight:700;
	color:var(--va-blue);
}
.va-lp-secure span{
	display:block;
	font-size:12.5px;
	color:var(--va-text3);
	margin-top:3px;
}

/* ============================================================
   BARRE INFÉRIEURE — 4 avantages
   ============================================================ */
.va-lp-bottom{
	padding:28px 70px 20px;
}
.va-lp-bottom-card{
	display:grid;
	grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
	align-items:center;
	background:rgba(255,255,255,.88);
	backdrop-filter:blur(8px);
	-webkit-backdrop-filter:blur(8px);
	border:1px solid rgba(20,85,255,.1);
	border-radius:15px;
	padding:28px 36px;
	box-shadow:0 2px 16px rgba(16,38,73,.05);
}
.va-lp-bottom-item{
	display:flex;
	align-items:center;
	gap:14px;
}
.va-lp-bottom-ic{
	flex:0 0 40px;
	height:40px;
	border-radius:10px;
	background:rgba(20,85,255,.07);
	display:flex;align-items:center;justify-content:center;
}
.va-lp-bottom-ic i{font-size:17px;color:var(--va-blue);}
.va-lp-bottom-txt strong{
	display:block;
	font-size:13px;
	font-weight:700;
	color:var(--va-navy);
	margin-bottom:2px;
}
.va-lp-bottom-txt span{
	display:block;
	font-size:11.5px;
	line-height:1.5;
	color:var(--va-text2);
}
.va-lp-bottom-divider{
	width:1px;
	height:36px;
	background:var(--va-border);
	align-self:center;
}

/* ============================================================
   FOOTER
   ============================================================ */
.va-lp-footer{
	text-align:center;
	padding:12px 24px 24px;
}
.va-lp-footer-copy{
	display:block;
	font-size:12.5px;
	color:var(--va-text3);
	margin-bottom:6px;
}
.va-lp-footer-links{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	flex-wrap:wrap;
}
.va-lp-footer-links a{
	font-size:12px;
	color:var(--va-text3);
	transition:color .2s ease;
}
.va-lp-footer-links a:hover{color:var(--va-blue);}
.va-lp-footer-links a:not(:last-child)::after{
	content:'·';
	margin-left:6px;
	color:var(--va-text3);
}

/* =====================================================================
   signup.html — Maquette 8.0 / parcours d'inscription 4 étapes
   Stepper + formulaires + confirmation. Prefixe : va-sg-
   ===================================================================== */

.va-sg-back{
	margin-bottom:16px;
}

/* Le formulaire d'inscription est haut : aligner en haut plutôt qu'au centre */
.va-sg-page .va-lp-right{
	align-items:flex-start;
}
/* Formulaire plus large sur la page d'inscription */
.va-sg-page .va-lp-form-area{
	max-width:640px;
}
.va-sg-back a{
	display:inline-flex;
	align-items:center;
	gap:6px;
	font-size:12px;
	font-weight:600;
	color:var(--va-text2);
	transition:color .2s ease;
}
.va-sg-back a:hover{color:var(--va-blue);}
.va-sg-back a i{font-size:11px;}

/* ============================================================
   STEPPER
   ============================================================ */
.va-sg-stepper{
	display:flex;
	align-items:flex-start;
	margin-bottom:18px;
}
.va-sg-step{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:5px;
	min-width:0;
	flex:0 0 auto;
}
.va-sg-step-circle{
	width:30px; height:30px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	border:1.5px solid #cfd8e6;
	background:#fff;
	color:#9db0c7;
	transition:all .25s ease;
}
.va-sg-step-circle i{font-size:12px;}
.va-sg-step span{
	font-size:10.5px;
	font-weight:600;
	color:var(--va-text3);
	white-space:nowrap;
	transition:color .2s ease;
}
.va-sg-step-line{
	flex:1;
	height:2px;
	background:#e2e8f1;
	margin-top:13px;
	border-radius:2px;
	transition:background .3s ease;
}

/* Étape active */
.va-sg-step.active .va-sg-step-circle{
	background:linear-gradient(135deg,var(--va-blue),var(--va-blue-alt));
	border-color:var(--va-blue);
	color:#fff;
	box-shadow:0 6px 16px -6px rgba(20,85,255,.55);
}
.va-sg-step.active span{color:var(--va-blue);}

/* Étape terminée */
.va-sg-step.completed .va-sg-step-circle{
	background:#fff;
	border-color:var(--va-blue);
	color:var(--va-blue);
}
.va-sg-step.completed span{color:var(--va-blue);}
.va-sg-step-line.completed{
	background:linear-gradient(90deg,var(--va-blue),var(--va-blue-alt));
}

/* ============================================================
   FORM CONTAINER
   ============================================================ */
.va-sg-form-container{}
.va-sg-panel{animation:va-sg-fadein .3s ease;}
@keyframes va-sg-fadein{
	from{opacity:0;transform:translateY(6px);}
	to{opacity:1;transform:translateY(0);}
}

.va-sg-panel-head{margin-bottom:14px;}
.va-sg-panel-head h2{
	margin:0 0 4px;
	font-family:var(--va-font-display);
	font-size:20px;
	font-weight:800;
	letter-spacing:-.02em;
	color:var(--va-navy);
	line-height:1.3;
}
.va-sg-panel-head p{
	margin:0;
	font-size:12.5px;
	line-height:1.6;
	color:var(--va-text2);
}

/* ============================================================
   CARD FORMULAIRE
   ============================================================ */
.va-sg-card{
	background:#fff;
	border:1px solid var(--va-border);
	border-radius:var(--va-radius);
	box-shadow:0 1px 3px rgba(16,38,73,.04),0 12px 32px -16px rgba(16,38,73,.1);
}
.va-sg-card-body{
	padding:16px 20px 0;
}

/* Grilles 2 colonnes / 1 colonne */
.va-sg-row-2{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px 14px;
}
.va-sg-row-1{
	display:grid;
	grid-template-columns:1fr;
}
.va-sg-row-2 .va-sg-field{margin-bottom:8px;}

.va-sg-field{min-width:0;}
.va-sg-field label{
	display:block;
	font-size:11.5px;
	font-weight:600;
	color:var(--va-text);
	margin:0 0 4px;
}
.va-sg-required{color:var(--va-blue);}
.va-sg-hint{
	display:block;
	font-size:10.5px;
	color:var(--va-text3);
	margin-top:3px;
	line-height:1.45;
}
.va-sg-hint-right{
	display:block;
	text-align:right;
	font-size:10.5px;
	color:var(--va-text3);
	margin-top:3px;
}

/* ---------- Inputs ---------- */
.va-sg-input-box{
	position:relative;
	display:flex;
	align-items:center;
}
.va-sg-input-ic{
	position:absolute;
	left:11px; top:50%;
	transform:translateY(-50%);
	font-size:12px;
	color:var(--va-text3);
	pointer-events:none;
	transition:color .2s ease;
	z-index:1;
}
.va-sg-input-box input{
	width:100%;
	height:38px;
	padding:0 12px 0 34px;
	font-size:13px;
	font-family:var(--va-font-body);
	color:var(--va-text);
	background:#fff;
	border:1px solid var(--va-border);
	border-radius:var(--va-radius-sm);
	outline:none;
	transition:border-color .2s ease,box-shadow .2s ease;
	box-sizing:border-box;
}
.va-sg-input-box input::placeholder{color:var(--va-text3);}
.va-sg-input-box input:focus{
	border-color:var(--va-blue);
	box-shadow:0 0 0 3px rgba(20,85,255,.1);
}
.va-sg-input-box input:focus ~ .va-sg-input-ic{color:var(--va-blue);}

/* Input avec bouton annexe */
.va-sg-input-box.va-sg-input-with-btn input{
	padding-right:78px;
}
.va-sg-input-box.va-sg-input-with-btn-icon input{
	padding-right:46px;
}
.va-sg-input-with-btn-icon .va-sg-check-btn{
	width:36px;
	padding:0;
	justify-content:center;
	display:flex;
	align-items:center;
}
.va-sg-check-btn{
	position:absolute;
	right:4px; top:50%;
	transform:translateY(-50%);
	height:30px;
	padding:0 9px;
	border:none;
	border-radius:6px;
	background:rgba(20,85,255,.09);
	color:var(--va-blue);
	font-size:11.5px;
	font-weight:700;
	font-family:var(--va-font-body);
	cursor:pointer;
	white-space:nowrap;
	transition:background .2s ease,color .2s ease;
	z-index:1;
}
.va-sg-check-btn:hover{background:rgba(20,85,255,.16);}
.va-sg-check-btn.verified{background:rgba(76,175,80,.14);color:#2e7d32;}

/* ---------- Selects ---------- */
.va-sg-select-box{position:relative;}
.va-sg-select-box::after{
	content:'';
	position:absolute;
	right:14px; top:50%;
	transform:translateY(-50%) rotate(45deg);
	width:6px; height:6px;
	border-right:1.5px solid #8b9ab0;
	border-bottom:1.5px solid #8b9ab0;
	pointer-events:none;
}
.va-sg-select-box select{
	width:100%;
	height:38px;
	padding:0 34px 0 12px;
	font-size:13px;
	font-family:var(--va-font-body);
	color:var(--va-text);
	background:#fff;
	border:1px solid var(--va-border);
	border-radius:var(--va-radius-sm);
	outline:none;
	appearance:none;
	-webkit-appearance:none;
	cursor:pointer;
	transition:border-color .2s ease,box-shadow .2s ease;
	box-sizing:border-box;
}
.va-sg-select-box select:focus{
	border-color:var(--va-blue);
	box-shadow:0 0 0 3px rgba(20,85,255,.1);
}

/* ---------- Choix en cartes (mode d'utilisation) ---------- */
.va-sg-choice-group{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:8px;
}
.va-sg-choice{
	display:flex;
	align-items:center;
	gap:8px;
	padding:8px 10px;
	border:1.5px solid var(--va-border);
	border-radius:var(--va-radius-sm);
	background:#fff;
	cursor:pointer;
	transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
	position:relative;
}
.va-sg-choice > i{
	font-size:14px;
	color:var(--va-text3);
	flex-shrink:0;
	transition:color .2s ease;
}
.va-sg-choice strong{
	display:block;
	font-size:11.5px;
	font-weight:700;
	color:var(--va-text);
	line-height:1.3;
}
.va-sg-choice span{
	display:block;
	font-size:10.5px;
	color:var(--va-text3);
	margin-top:1px;
}
.va-sg-choice-check{
	position:absolute;
	top:6px; right:6px;
	font-size:12px;
	color:transparent;
	transition:color .2s ease;
}
.va-sg-choice:hover{border-color:#b8c6dd;background:#fafbfe;}
.va-sg-choice.active{
	border-color:var(--va-blue);
	background:rgba(20,85,255,.05);
	box-shadow:0 0 0 3px rgba(20,85,255,.08);
}
.va-sg-choice.active > i{color:var(--va-blue);}
.va-sg-choice.active .va-sg-choice-check{color:var(--va-blue);}

/* ---------- Textarea ---------- */
.va-sg-textarea-box{}
.va-sg-textarea-box textarea{
	width:100%;
	min-height:70px;
	padding:8px 12px;
	font-size:13px;
	font-family:var(--va-font-body);
	color:var(--va-text);
	background:#fff;
	border:1px solid var(--va-border);
	border-radius:var(--va-radius-sm);
	outline:none;
	resize:vertical;
	transition:border-color .2s ease,box-shadow .2s ease;
	box-sizing:border-box;
}
.va-sg-textarea-box textarea::placeholder{color:var(--va-text3);}
.va-sg-textarea-box textarea:focus{
	border-color:var(--va-blue);
	box-shadow:0 0 0 3px rgba(20,85,255,.1);
}

/* ---------- Bloc info récupération ---------- */
.va-sg-info-block{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:12px;
	background:#f0f6ff;
	border:1px solid rgba(20,85,255,.22);
	border-radius:var(--va-radius-sm);
	padding:12px 14px;
	margin:2px 0 10px;
}
.va-sg-info-content h4{
	margin:0 0 3px;
	font-family:var(--va-font-display);
	font-size:12.5px;
	font-weight:700;
	color:var(--va-navy);
}
.va-sg-info-content h4 i{color:var(--va-blue);margin-right:4px;}
.va-sg-info-content p{
	margin:0;
	font-size:11.5px;
	line-height:1.55;
	color:var(--va-text2);
}
.va-sg-info-btn{
	flex-shrink:0;
	height:30px;
	padding:0 12px;
	border:none;
	border-radius:6px;
	background:rgba(20,85,255,.12);
	color:var(--va-blue);
	font-size:12px;
	font-weight:700;
	font-family:var(--va-font-body);
	cursor:pointer;
	white-space:nowrap;
	transition:background .2s ease,color .2s ease;
}
.va-sg-info-btn:hover{background:var(--va-blue);color:#fff;}

/* ---------- Sections internes (paramètres) ---------- */
.va-sg-section-title{
	font-family:var(--va-font-display);
	font-size:13px;
	font-weight:700;
	color:var(--va-navy);
	margin:14px 0 3px;
}
.va-sg-optional{
	font-size:11px;
	font-weight:600;
	color:var(--va-text3);
}
.va-sg-section-desc{
	margin:0 0 8px;
	font-size:12px;
	color:var(--va-text2);
}
.va-sg-align-center{align-items:center;}
.va-sg-toggle-field{
	display:flex;
	align-items:center;
}
.va-sg-toggle-row{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	width:100%;
	height:38px;
	padding:0 12px;
	border:1px solid var(--va-border);
	border-radius:var(--va-radius-sm);
	background:#fafbfd;
	font-size:12.5px;
	font-weight:600;
	color:var(--va-text2);
}
.va-sg-toggle{
	position:relative;
	display:inline-block;
	width:34px;
	height:20px;
	flex-shrink:0;
	cursor:pointer;
}
.va-sg-toggle input{opacity:0;width:0;height:0;position:absolute;}
.va-sg-toggle-slider{
	position:absolute;
	inset:0;
	background:#d5dde9;
	border-radius:20px;
	transition:background .25s ease;
}
.va-sg-toggle-slider::before{
	content:'';
	position:absolute;
	left:2px; top:2px;
	width:16px; height:16px;
	border-radius:50%;
	background:#fff;
	transition:transform .25s ease;
	box-shadow:0 1px 3px rgba(16,38,73,.25);
}
.va-sg-toggle input:checked + .va-sg-toggle-slider{
	background:linear-gradient(135deg,var(--va-blue),var(--va-blue-alt));
}
.va-sg-toggle input:checked + .va-sg-toggle-slider::before{transform:translateX(14px);}
.va-sg-toggle input:focus-visible + .va-sg-toggle-slider{
	box-shadow:0 0 0 3px rgba(20,85,255,.15);
}

/* ---------- Checkbox custom ---------- */
.va-sg-checkboxes{
	display:flex;
	flex-direction:column;
	gap:8px;
	margin-bottom:12px;
}
.va-sg-checkbox{
	display:flex;
	align-items:flex-start;
	gap:8px;
	cursor:pointer;
	font-size:12.5px;
	color:var(--va-text);
	line-height:1.5;
}
.va-sg-checkbox input{position:absolute;opacity:0;width:1px;height:1px;}
.va-sg-checkbox-mark{
	flex:0 0 17px;
	width:17px; height:17px;
	border:1.5px solid #c3cedd;
	border-radius:5px;
	background:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	margin-top:1px;
	transition:all .2s ease;
}
.va-sg-checkbox-mark i{
	font-size:10px;
	color:#fff;
	opacity:0;
	transition:opacity .15s ease;
}
.va-sg-checkbox:hover .va-sg-checkbox-mark{border-color:#9db0c7;}
.va-sg-checkbox input:checked + .va-sg-checkbox-mark{
	background:linear-gradient(135deg,var(--va-blue),var(--va-blue-alt));
	border-color:var(--va-blue);
}
.va-sg-checkbox input:checked + .va-sg-checkbox-mark i{opacity:1;}
.va-sg-checkbox input:focus-visible + .va-sg-checkbox-mark{
	box-shadow:0 0 0 3px rgba(20,85,255,.15);
}

/* ---------- Erreurs de validation ---------- */
.va-sg-field.has-error .va-sg-input-box input,
.va-sg-field.has-error .va-sg-select-box select,
.va-sg-field.has-error .va-sg-textarea-box textarea{
	border-color:#e53935;
	box-shadow:0 0 0 3px rgba(229,57,53,.1);
}
.va-sg-field.has-error label{color:#e53935;}

/* ---------- Pied de carte (boutons) ---------- */
.va-sg-card-footer{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	padding:10px 20px 14px;
}
.va-sg-btn-back,
.va-sg-btn-next,
.va-sg-cancel{
	height:38px;
	padding:0 14px;
	border-radius:var(--va-radius-sm);
	font-size:13px;
	font-weight:700;
	font-family:var(--va-font-display);
	cursor:pointer;
	transition:all .2s ease;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
}
.va-sg-cancel{
	background:#fff;
	border:1px solid var(--va-border);
	color:var(--va-text2);
}
.va-sg-cancel:hover{border-color:#c4cdd9;color:var(--va-text);background:#fafbfd;}
.va-sg-btn-back{
	background:#fff;
	border:1px solid var(--va-border);
	color:var(--va-text2);
}
.va-sg-btn-back:hover{border-color:var(--va-blue);color:var(--va-blue);background:#f0f5ff;}
.va-sg-btn-back i{font-size:12px;transition:transform .2s ease;}
.va-sg-btn-back:hover i{transform:translateX(-3px);}
.va-sg-btn-next{
	background:linear-gradient(135deg,var(--va-blue) 0%,var(--va-blue-alt) 100%);
	border:none;
	color:#fff;
	box-shadow:0 8px 20px -8px rgba(20,85,255,.55);
}
.va-sg-btn-next:hover{
	background:linear-gradient(135deg,var(--va-blue-hover) 0%,var(--va-blue) 100%);
	transform:translateY(-1px);
	box-shadow:0 12px 26px -10px rgba(20,85,255,.6);
}
.va-sg-btn-next i{font-size:12px;transition:transform .2s ease;}
.va-sg-btn-next:hover i{transform:translateX(3px);}

/* ============================================================
   ÉTAPE 4 — CONFIRMATION
   ============================================================ */
.va-sg-confirm{
	padding-top:4px;
}
.va-sg-success{
	position:relative;
	display:flex;
	justify-content:center;
	margin:4px 0 14px;
}
.va-sg-success-glow{
	position:absolute;
	top:50%; left:50%;
	transform:translate(-50%,-50%);
	width:120px; height:120px;
	border-radius:50%;
	background:radial-gradient(circle,rgba(76,175,80,.18) 0%,transparent 65%);
	animation:va-sg-pulse 2.6s ease-in-out infinite;
}
@keyframes va-sg-pulse{
	0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.7;}
	50%{transform:translate(-50%,-50%) scale(1.25);opacity:1;}
}
.va-sg-success-circle{
	position:relative;
	width:76px; height:76px;
	border-radius:50%;
	background:linear-gradient(135deg,#43A047,#66BB6A);
	display:flex;
	align-items:center;
	justify-content:center;
	color:#fff;
	box-shadow:0 0 0 8px rgba(76,175,80,.14),0 16px 34px -12px rgba(46,125,50,.55);
	z-index:1;
}
.va-sg-success-circle i{font-size:28px;}
.va-sg-confetti{
	position:absolute;
	inset:-60px 0 -40px;
	z-index:2;
	overflow:hidden;
	pointer-events:none;
}
.va-sg-confetti-piece{
	position:absolute;
	top:-14px;
	width:8px; height:8px;
	border-radius:2px;
	animation:va-sg-fall 2s ease-in forwards;
	opacity:0;
}
@keyframes va-sg-fall{
	0%{opacity:1;transform:translateY(0) rotate(0deg);}
	100%{opacity:0;transform:translateY(130px) rotate(300deg);}
}

.va-sg-confirm-head{text-align:center;margin-bottom:4px;}
.va-sg-confirm-head h2{
	margin:0 0 4px;
	font-family:var(--va-font-display);
	font-size:21px;
	font-weight:800;
	letter-spacing:-.02em;
	color:var(--va-navy);
}
.va-sg-confirm-head p{
	margin:0;
	font-size:14px;
	font-weight:600;
	color:var(--va-blue);
}
.va-sg-confirm-sub{
	text-align:center;
	margin:6px 0 16px;
	font-size:12.5px;
	color:var(--va-text2);
	line-height:1.6;
}

/* ---------- Cartes récapitulatif ---------- */
.va-sg-recap-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:14px;
	margin-bottom:14px;
}
.va-sg-recap-card{
	background:#fff;
	border:1px solid var(--va-border);
	border-radius:var(--va-radius);
	box-shadow:0 1px 3px rgba(16,38,73,.04),0 12px 32px -18px rgba(16,38,73,.1);
	overflow:hidden;
}
.va-sg-recap-card-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	padding:14px 16px;
	border-bottom:1px solid var(--va-border);
}
.va-sg-recap-card-head h4{
	margin:0;
	font-family:var(--va-font-display);
	font-size:14px;
	font-weight:700;
	color:var(--va-navy);
}
.va-sg-edit-btn{
	display:inline-flex;
	align-items:center;
	gap:5px;
	background:none;
	border:none;
	font-size:12px;
	font-weight:700;
	color:var(--va-blue);
	cursor:pointer;
	font-family:var(--va-font-body);
	transition:color .2s ease;
}
.va-sg-edit-btn:hover{color:var(--va-blue-hover);text-decoration:underline;}
.va-sg-edit-btn i{font-size:11px;}

.va-sg-recap-list{display:flex;flex-direction:column;}
.va-sg-recap-item{
	display:flex;
	gap:10px;
	align-items:flex-start;
	padding:10px 16px;
	border-bottom:1px solid #eef2f8;
}
.va-sg-recap-item:last-child{border-bottom:none;}
.va-sg-recap-item > i{
	margin-top:2px;
	font-size:13px;
	color:var(--va-blue);
	width:16px;
	text-align:center;
	flex-shrink:0;
}
.va-sg-recap-item > div{min-width:0;}
.va-sg-recap-label{
	display:block;
	font-size:10px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.04em;
	color:var(--va-text3);
	margin-bottom:1px;
}
.va-sg-recap-val{
	display:block;
	font-size:12.5px;
	font-weight:600;
	color:var(--va-text);
	line-height:1.45;
}
.va-sg-recap-badge{
	display:inline-block;
	margin-top:4px;
	padding:2px 8px;
	border-radius:20px;
	background:rgba(20,85,255,.09);
	color:var(--va-blue);
	font-size:10.5px;
	font-weight:700;
}

/* ---------- Prochaines étapes ---------- */
.va-sg-next-steps{display:flex;flex-direction:column;padding:4px 0;}
.va-sg-next-step{
	display:flex;
	gap:11px;
	align-items:flex-start;
	padding:10px 16px;
	border-bottom:1px solid #eef2f8;
}
.va-sg-next-step:last-child{border-bottom:none;}
.va-sg-next-check{
	flex:0 0 20px;
	width:20px; height:20px;
	border-radius:50%;
	background:rgba(76,175,80,.13);
	color:#2e7d32;
	display:flex;
	align-items:center;
	justify-content:center;
	margin-top:1px;
}
.va-sg-next-check i{font-size:10px;}
.va-sg-next-step strong{
	display:block;
	font-size:12.5px;
	font-weight:600;
	color:var(--va-text);
	line-height:1.4;
}
.va-sg-next-step span{
	display:block;
	font-size:11.5px;
	color:var(--va-text3);
	margin-top:1px;
	line-height:1.45;
}

/* ---------- Carte collaborateurs ---------- */
.va-sg-collab-card{
	background:#fff;
	border:1px solid var(--va-border);
	border-radius:var(--va-radius);
	box-shadow:0 1px 3px rgba(16,38,73,.04),0 12px 32px -18px rgba(16,38,73,.1);
	margin-bottom:16px;
}
.va-sg-collab-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	padding:14px 16px;
	border-bottom:1px solid var(--va-border);
}
.va-sg-collab-head h4{
	margin:0 0 3px;
	font-family:var(--va-font-display);
	font-size:14px;
	font-weight:700;
	color:var(--va-navy);
}
.va-sg-collab-head p{
	margin:0;
	font-size:12px;
	color:var(--va-text3);
}
.va-sg-collab-btn{
	display:inline-flex;
	align-items:center;
	gap:7px;
	height:36px;
	padding:0 14px;
	background:linear-gradient(135deg,var(--va-blue),var(--va-blue-alt));
	border:none;
	border-radius:8px;
	color:#fff;
	font-size:12.5px;
	font-weight:700;
	font-family:var(--va-font-body);
	cursor:pointer;
	white-space:nowrap;
	transition:all .2s ease;
}
.va-sg-collab-btn:hover{
	transform:translateY(-1px);
	box-shadow:0 10px 22px -8px rgba(20,85,255,.55);
}
.va-sg-collab-grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:12px;
	padding:14px 16px;
}
.va-sg-collab-user{
	display:flex;
	gap:10px;
	align-items:flex-start;
	padding:12px;
	border:1px solid #e8edf5;
	border-radius:10px;
	background:#fafbfe;
	min-width:0;
}
.va-sg-collab-avatar{
	flex:0 0 34px;
	width:34px; height:34px;
	border-radius:50%;
	background:linear-gradient(135deg,#e6edfb,#f2f6ff);
	border:1px solid rgba(20,85,255,.18);
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:11px;
	font-weight:800;
	color:var(--va-blue);
}
.va-sg-collab-user strong{
	display:block;
	font-size:12px;
	font-weight:700;
	color:var(--va-text);
	line-height:1.35;
}
.va-sg-collab-user span{
	display:block;
	font-size:11px;
	color:var(--va-text3);
	line-height:1.4;
}
.va-sg-collab-role{
	display:inline-block !important;
	margin-top:4px;
	padding:2px 7px;
	border-radius:14px;
	background:rgba(20,85,255,.08);
	color:var(--va-blue) !important;
	font-size:10px;
	font-weight:700;
}
.va-sg-collab-add{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:5px;
	min-height:86px;
	border:1.5px dashed #c3cedd;
	border-radius:10px;
	background:transparent;
	cursor:pointer;
	text-align:center;
	color:var(--va-text3);
	transition:all .2s ease;
	padding:10px;
}
.va-sg-collab-add i{font-size:16px;color:var(--va-blue);}
.va-sg-collab-add span{font-size:11.5px;font-weight:600;line-height:1.3;}
.va-sg-collab-add:hover{
	border-color:var(--va-blue);
	background:rgba(20,85,255,.04);
	color:var(--va-text2);
}

/* ---------- Boutons finaux ---------- */
.va-sg-final-btns{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:14px;
	margin-top:4px;
}
.va-sg-btn-outline,
.va-sg-btn-primary{
	height:42px;
	border-radius:9px;
	font-size:13.5px;
	font-weight:700;
	font-family:var(--va-font-display);
	cursor:pointer;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	transition:all .2s ease;
}
.va-sg-btn-outline{
	background:#fff;
	border:1.5px solid var(--va-border);
	color:var(--va-text);
}
.va-sg-btn-outline i{color:var(--va-blue);font-size:14px;}
.va-sg-btn-outline .va-sg-btn-sub{font-weight:500;color:var(--va-text3);font-size:12px;}
.va-sg-btn-outline:hover{
	border-color:var(--va-blue);
	background:#f0f5ff;
	color:var(--va-blue);
	transform:translateY(-1px);
}
.va-sg-btn-primary{
	background:linear-gradient(135deg,var(--va-blue) 0%,var(--va-blue-alt) 100%);
	border:none;
	color:#fff;
	box-shadow:0 10px 24px -10px rgba(20,85,255,.55);
}
.va-sg-btn-primary:hover{
	background:linear-gradient(135deg,var(--va-blue-hover) 0%,var(--va-blue) 100%);
	transform:translateY(-1px);
	box-shadow:0 14px 30px -12px rgba(20,85,255,.65);
}
.va-sg-btn-primary i{font-size:14px;transition:transform .2s ease;}
.va-sg-btn-primary:hover i{transform:translateX(3px);}

/* ================================================================
   Pages légales — mentions-legales.html / rgpd.html
   Prefixe : .va-legal*
   ================================================================ */
.va-legal-wrap{max-width:860px;margin:0 auto;padding:64px 24px 80px;}
.va-legal-badge{
	display:inline-block;padding:5px 14px;border-radius:999px;
	background:#eef3ff;color:#2871FE;font-size:11px;font-weight:700;
	letter-spacing:.06em;text-transform:uppercase;margin-bottom:18px;
}
.va-legal-wrap h1{
	margin:0 0 18px;font:700 28px/1.25 "Cabin","Titillium Web",Arial,sans-serif;
	color:#010e22;
}
.va-legal-intro{
	font-size:16px;line-height:1.75;color:#556072;margin:0 0 44px;
}
.va-legal-section{margin-bottom:36px;}
.va-legal-section h2{
	font:700 17px/1.35 "Cabin","Titillium Web",Arial,sans-serif;
	color:#010e22;padding-left:14px;border-left:3px solid #2871FE;
	margin:0 0 14px;
}
.va-legal-section p,
.va-legal-section li{
	font-size:14px;line-height:1.75;color:#556072;margin:0 0 14px;
}
.va-legal-section ul,.va-legal-section ol{
	margin:0 0 14px;padding-left:22px;
}
.va-legal-section a{color:#2871FE;text-decoration:underline;}
.va-legal-section a:hover{color:#1c5ad6;}
.va-legal-card{
	background:#f5f8fc;border-radius:8px;padding:16px 18px;margin:0 0 16px;
	border:1px solid #e8eef6;
}
.va-legal-card p{margin:0;font-size:14px;line-height:1.75;color:#556072;}
.va-legal-card strong{color:#1c2b3f;}

/* RGPD — Accordéon */
.va-legal-acc{margin-top:36px;}
.va-legal-acc-item{
	border:1px solid #e8eef6;border-radius:8px;margin-bottom:10px;
	background:#fff;overflow:hidden;
}
.va-legal-acc-head{
	display:flex;align-items:center;justify-content:space-between;
	width:100%;padding:14px 18px;border:none;background:none;cursor:pointer;
	font:600 15px/1.4 "Cabin","Titillium Web",Arial,sans-serif;
	color:#010e22;text-align:left;
}
.va-legal-acc-head::after{
	content:'';width:10px;height:10px;border-right:2px solid #556072;
	border-bottom:2px solid #556072;transform:rotate(45deg);transition:transform .25s;
	flex-shrink:0;
}
.va-legal-acc-item.is-open .va-legal-acc-head::after{transform:rotate(-135deg);}
.va-legal-acc-body{
	max-height:0;overflow:hidden;transition:max-height .35s ease;
}
.va-legal-acc-inner{padding:0 18px 18px;}
.va-legal-acc-inner p,.va-legal-acc-inner li{
	font-size:14px;line-height:1.75;color:#556072;margin:0 0 14px;
}
.va-legal-acc-inner ul{margin:0 0 14px;padding-left:22px;}
.va-legal-acc-inner a{color:#2871FE;text-decoration:underline;}
.va-legal-acc-card{
	background:#f5f8fc;border-radius:8px;padding:14px 16px;margin:0 0 14px;
	border:1px solid #e8eef6;
}
.va-legal-acc-card p{margin:0;}