.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;
}
/*
*/
.header-top {
background: #2871FF;
padding: 9px 0;
}
.header-left-text p {
font-size: 14px;
font-weight: 400;
font-family: 'Inter';
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;
}
/*
*/
.main-header {
position: relative;
z-index: 99;
padding: 0 50px 15px;
}
.header-logo img{
width: 150px;
height: 100px;
}
.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: "Inter";
}
.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: "Inter";
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;
}
/*
*/
.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: "Inter";
}
.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: "Inter";
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%;
}
/*
*/
.section-title {
text-align: center;
margin-bottom: 50px;
}
.main-title h1 {
font-size: 42px;
line-height: 56px;
color: #010e22;
font-weight: 700;
font-family: "Inter";
text-align: center;
margin: 0;
}
.sub-title h5 {
font-size: 18px;
line-height: 26px;
color: #2871ff;
font-weight: 400;
font-family: "Inter";
}
.sub-title p {
font-size: 16px;
line-height: 28px;
color: #616161;
font-weight: 400;
font-family: "Inter";
margin: 20px 0 0;
}
/*
*/
.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: "Inter";
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: "Inter";
text-transform: capitalize;
margin-left: -30px;
}
.breadcumb-content-text a span {
font-size: 16px;
line-height: 75px;
color: #616161;
font-weight: 400;
font-family: "Inter";
position: relative;
left: 35px;
}
.breadcumb-content-text a span::before {
position: absolute;
content: "";
top: 11px;
left: -28px;
height: 1px;
width: 17px;
background: #2F71FF;
}
/*
*/
.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: "Inter";
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%);
}
/*
*/
.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: "Inter";
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: "Inter";
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;
}
/*
*/
.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: "Inter";
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;
}
/*
*/
.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: 'Inter', 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;
}
/*
*/
.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: "Inter";
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;
}
/*
*/
.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: "Inter";
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;
}
/*
*/
.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: "Inter";
text-align: center;
margin: 0;
}
.fintech-brand-section .single-brand {
margin-bottom: 60px;
}
/*
*/
.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;
}
/*
*/
.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: "Inter";
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: "Inter";
margin: 0;
}
.quote-title span {
font-size: 15px;
line-height: 28px;
color: #ffffff;
font-weight: 400;
font-family: "Inter";
}
/*
*/
.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;
}
/*
*/
.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;
}
/*
*/
.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: "Inter";
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;
}
/*
*/
.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: "Inter";
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: "Inter";
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: "Inter";
}
.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";
}
/*
*/
.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: "Inter";
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: "Inter";
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: "Inter";
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: "Inter";
margin: 30px 0 20px;
}
.pricing-area .pricing-dolar p span {
font-size: 36px;
line-height: 28px;
color: #010e22;
font-weight: 700;
font-family: "Inter";
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;
}
/*
*/
.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;
}
/*
*/
.row.name {
overflow: hidden;
}
/*
*/
.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: "Inter";
}
.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: "Inter";
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;
}
/*
*/
.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: "Inter";
margin: 0;
}
.archive-title p {
font-size: 15px;
line-height: 26px;
color: #616161;
font-weight: 300;
font-family: "Inter";
margin: 0;
overflow: hidden;
}
/*
*/
.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: "Inter";
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;
}
/*
*/
.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;
}
/*
*/
.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;
}
/*
*/
.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: 'Inter';
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);
}
/*
*/
.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: "Inter";
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;
}
/*
*/
.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: "Inter";
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;
}
/*
*/
.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: "Inter";
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 ;
}
/*
*/
.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%;
}
/*
*/
.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: 'Inter';
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;
}
/*
*/
.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: 'Inter';
}
.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: "Inter";
margin: 23px 34px 0;
transition: .5s;
}
.blog-title h2 a:hover{
color: #5739FA;
}
.blog-area .row.details {
margin-top: 20px;
}
/*
*/
.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: "Inter", 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;
}
/*
*/
.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: 'Inter', 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: 'Inter', 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: 'Inter';
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: "Inter";
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: "Inter";
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: "Inter";
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);
}
}
/*===========================scroll strat===========================
===========================************=========================== */
.scroll-area {
position: relative;
z-index: 999;
}
.scroll-area .go-top {
position: fixed;
cursor: pointer;
top: 0;
right: 30px;
color: #ffffff;
background: #2871FF;
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: #2771FF;
}
.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;
}
}
/*
*/
.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;
}
/* ================= FERnest design tokens (partagés par toutes les sections) ================= */
:root{
--fn-blue:#2871ff;
--fn-blue-dark:#1a56d6;
--fn-navy:#0b1a33;
--fn-navy-2:#0f2242;
--fn-text:#0a1224;
--fn-muted:#66738a;
--fn-bg-soft:#f4f6fb;
--fn-border:#e6e9f2;
--fn-green:#17a35c;
--fn-orange:#f5a623;
--fn-purple:#8b5cf6;
--fn-red:#ef4444;
--fn-radius:14px;
}
/* ================= Typographie (comme visiofact.fr/landing-page) ================= */
/* Cabin pour les titres, Inter conserve le texte courant */
h1, h2, h3, h4, h5, h6{
font-family:"Cabin", sans-serif;
}
/* ================= Mobile menu bar logo ================= */
.mobile-menu-area{ position:relative; }
.fn-mobile-logo{
position:absolute;
top:50%;
left:16px;
transform:translateY(-50%);
height:46px;
width:auto;
z-index:1000000;
}
/* ================= FERnest Stack / Ecosystem detail section ================= */
.fn-stack{
background:#ffffff;
padding:90px 0 100px;
font-family:"Inter", sans-serif;
}
.fn-stack .container{ max-width:1180px; padding-left:8px; padding-right:8px; }
.fn-stack-brand{ margin-bottom:56px; }
.fn-stack-body{
position:relative;
display:flex;
justify-content:center;
}
.fn-stack-canvas{
position:relative;
width:100%;
max-width:1180px;
height:580px;
}
.fn-stack-image{
position:absolute;
left:50%;
top:0;
width:300px;
transform:translateX(-50%);
z-index:1;
}
.fn-stack-image img{ width:100%; height:auto; display:block; }
.fn-stack-card{
position:absolute;
top:var(--row-top);
width:395px;
display:flex;
align-items:flex-start;
background:#ffffff;
border:1px solid #edf0f7;
border-radius:16px;
padding:16px 22px;
box-shadow:0 4px 16px -8px rgba(20,40,90,.06), 0 16px 36px -24px rgba(20,40,90,.12);
transform:translateY(-50%);
transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.fn-stack-card:hover{
transform:translateY(calc(-50% - 4px));
border-color:#dbe6fb;
box-shadow:0 10px 22px -8px rgba(20,60,150,.10), 0 24px 48px -22px rgba(20,60,150,.18);
}
.fn-stack-card-left{ right:calc(50% + 182px); }
.fn-stack-card-right{ left:calc(50% + 182px); }
.fn-stack-card::after{
content:"";
position:absolute;
top:50%;
width:32px; height:2px;
background:var(--row-color);
opacity:.5;
transform:translateY(-50%);
}
.fn-stack-card::before{
content:"";
position:absolute;
top:50%;
width:6px; height:6px;
border-radius:50%;
background:var(--row-color);
transform:translateY(-50%);
}
.fn-stack-card-left::after{ right:-32px; }
.fn-stack-card-left::before{ right:-36px; }
.fn-stack-card-right::after{ left:-32px; }
.fn-stack-card-right::before{ left:-36px; }
.fn-stack-icon{
width:64px; height:64px;
border-radius:18px;
background:linear-gradient(145deg,#ffffff,var(--row-tint));
color:var(--row-color);
display:flex; align-items:center; justify-content:center;
font-size:24px;
flex:0 0 64px;
margin-right:22px;
box-shadow:0 10px 22px -12px rgba(20,40,90,.28), inset 0 0 0 1px rgba(255,255,255,.6);
transition:transform .3s ease;
}
.fn-stack-card:hover .fn-stack-icon{ transform:translateY(-2px) scale(1.04); }
.fn-stack-content{ flex:1; padding-top:2px; min-width:0; }
.fn-stack-content h3{
font-size:17px;
font-weight:700;
color:var(--fn-text);
margin:0 0 8px;
letter-spacing:-0.2px;
}
.fn-stack-content p{
font-size:13px;
line-height:1.55;
color:var(--fn-muted);
margin:0 0 8px;
}
.fn-stack-tags{
font-size:13px;
font-weight:600;
color:var(--row-color);
display:flex;
flex-wrap:wrap;
align-items:center;
gap:6px;
}
.fn-stack-tags .dot{
width:3px; height:3px; border-radius:50%;
background:var(--row-color);
display:inline-block;
opacity:.6;
}
.fn-stack-bar{
margin-top:44px;
background:#ffffff;
border:1px solid var(--fn-border);
border-radius:18px;
padding:24px 34px;
display:flex;
align-items:center;
gap:18px;
flex-wrap:wrap;
box-shadow:0 12px 28px -16px rgba(20,40,90,.18);
}
.fn-stack-bar-icon{
width:44px; height:44px; border-radius:14px;
background:linear-gradient(135deg, var(--fn-blue), #5c94ff);
color:#fff;
display:flex; align-items:center; justify-content:center;
font-size:18px;
flex:0 0 auto;
box-shadow:0 8px 18px -6px rgba(40,113,255,.5);
}
.fn-stack-bar-text{
font-family:"Inter", sans-serif;
font-weight:700;
color:var(--fn-text);
font-size:16px;
letter-spacing:-0.2px;
flex:1 1 260px;
}
.fn-stack-bar-sep{
width:1px; height:28px;
background:var(--fn-border);
flex:0 0 auto;
}
.fn-stack-bar-item{
display:flex; align-items:center; gap:8px;
font-size:14px; font-weight:600; color:var(--fn-text);
padding:0 14px;
border-right:1px solid var(--fn-border);
}
.fn-stack-bar-item:last-child{ border-right:none; }
.fn-stack-bar-item i{ color:var(--fn-blue); font-size:15px; }
@media (max-width:991px){
.fn-stack-canvas{
height:auto;
display:flex;
flex-direction:column;
align-items:center;
gap:16px;
max-width:520px;
margin:0 auto;
}
.fn-stack-image{
position:static;
transform:none;
width:220px;
margin:0 auto 8px;
}
.fn-stack-card{
position:static;
width:100%;
transform:none !important;
}
.fn-stack-card::after,
.fn-stack-card::before{ display:none; }
.fn-stack-icon{ margin-right:18px; }
}
@media (max-width:767px){
.fn-stack-bar{ justify-content:center; text-align:center; }
.fn-stack-bar-item{ border-right:none; }
}
/* ================= FERnest Pricing Section ================= */
.fn-pricing{
background:#ffffff;
padding:40px 0 100px;
font-family:"Inter", sans-serif;
}
.fn-pricing .container{ max-width:1180px; }
.fn-pricing-title{
text-align:center;
font-size:34px;
font-weight:700;
line-height:1.18;
color:var(--fn-text);
margin:0 0 14px;
}
.fn-pricing-title span{ color:var(--fn-blue); }
.fn-pricing-subtitle{ text-align:center; font-size:15.5px; color:var(--fn-muted); max-width:560px; margin:0 auto 40px; }
.fn-pricing-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:16px;
align-items:stretch;
}
.fn-price-card{
background:#ffffff;
border:1px solid #edf0f7;
border-radius:16px;
padding:26px 20px 22px;
text-align:center;
display:flex;
flex-direction:column;
box-shadow:0 4px 16px -6px rgba(20,40,90,.06), 0 20px 45px -28px rgba(20,40,90,.14);
transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.fn-price-card:hover{
transform:translateY(-6px);
border-color:#dbe6fb;
box-shadow:0 8px 20px -6px rgba(20,60,150,.08), 0 30px 60px -24px rgba(20,60,150,.22);
}
.fn-price-icon{
width:54px; height:54px;
border-radius:50%;
background:linear-gradient(145deg,#eaf1ff,#dbe9ff);
color:var(--fn-blue);
display:flex; align-items:center; justify-content:center;
font-size:21px;
margin:0 auto 16px;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
}
.fn-price-card h3{
font-size:17px;
font-weight:700;
color:var(--fn-text);
margin:0 0 6px;
}
.fn-price-sub{
font-size:12.5px;
color:var(--fn-muted);
margin:0 0 18px;
line-height:1.5;
}
.fn-price-amount{
font-size:27px;
font-weight:700;
color:var(--fn-text);
letter-spacing:-0.5px;
margin:0 0 2px;
}
.fn-price-amount sup{
font-size:14px;
font-weight:700;
margin-right:1px;
top:-0.9em;
}
.fn-price-amount.fn-price-custom{ font-size:22px; }
.fn-price-period{
font-size:12px;
color:var(--fn-muted);
margin:0 0 20px;
}
.fn-price-features{
list-style:none;
margin:0 0 22px;
padding:0;
text-align:left;
flex:1;
}
.fn-price-features li{
display:flex;
align-items:flex-start;
gap:9px;
font-size:13px;
color:var(--fn-text);
margin-bottom:11px;
}
.fn-price-features li i{
color:var(--fn-blue);
font-size:14px;
margin-top:1px;
flex:none;
}
.fn-price-btn{
display:block;
text-align:center;
padding:11px 18px;
border-radius:8px;
font-size:14px;
font-weight:600;
text-decoration:none;
transition:.25s;
background:var(--fn-blue);
color:#fff;
margin-top:auto;
}
.fn-price-btn:hover{ background:var(--fn-blue-dark); color:#fff; }
.fn-price-btn.fn-price-btn-outline{
background:#fff;
color:var(--fn-blue);
border:1.5px solid var(--fn-blue);
}
.fn-price-btn.fn-price-btn-outline:hover{ background:var(--fn-blue); color:#fff; }
@media (max-width:1199px){
.fn-pricing-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:575px){
.fn-pricing-grid{ grid-template-columns:1fr; }
.fn-pricing-title{ font-size:28px; }
}
/* ================= FERnest Solutions (ecosystem) Section ================= */
.fn-solutions{
position:relative;
background:linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
padding:90px 0 100px;
font-family:"Inter", sans-serif;
overflow:hidden;
}
.fn-solutions::before,
.fn-solutions::after{
content:"";
position:absolute;
bottom:-40px;
width:340px; height:220px;
background-image:radial-gradient(circle, rgba(40,113,255,.16) 1.4px, transparent 1.4px);
background-size:16px 16px;
pointer-events:none;
z-index:0;
}
.fn-solutions::before{
left:0;
-webkit-mask-image:linear-gradient(45deg, #000 10%, transparent 70%);
mask-image:linear-gradient(45deg, #000 10%, transparent 70%);
}
.fn-solutions::after{
right:0;
-webkit-mask-image:linear-gradient(135deg, #000 10%, transparent 70%);
mask-image:linear-gradient(135deg, #000 10%, transparent 70%);
}
.fn-solutions .container{ position:relative; z-index:1; max-width:1180px; }
.fn-solutions-tag{
text-align:center;
font-size:13px;
font-weight:700;
letter-spacing:1.5px;
color:var(--fn-blue);
display:flex;
align-items:center;
justify-content:center;
gap:10px;
margin:0 0 18px;
}
.fn-solutions-tag .dot{ width:4px; height:4px; border-radius:50%; background:var(--fn-blue); display:inline-block; }
.fn-solutions-title{
text-align:center;
font-size:42px;
font-weight:700;
line-height:1.18;
color:var(--fn-text);
margin:0 0 16px;
}
.fn-solutions-title span{ color:var(--fn-blue); }
.fn-solutions-subtitle{
text-align:center;
font-size:16px;
color:var(--fn-muted);
margin:0 auto 56px;
max-width:520px;
}
.fn-solutions-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:20px;
}
.fn-solution-card{
background:#ffffff;
border:1px solid #edf0f7;
border-radius:18px;
padding:24px 22px;
text-align:left;
box-shadow:0 4px 16px -6px rgba(20,40,90,.06), 0 20px 45px -28px rgba(20,40,90,.14);
transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.fn-solution-card:hover{
transform:translateY(-6px);
border-color:#dbe6fb;
box-shadow:0 8px 20px -6px rgba(20,60,150,.08), 0 30px 60px -24px rgba(20,60,150,.22);
}
.fn-solution-icon{
width:68px; height:68px;
border-radius:50%;
background:var(--fn-bg-soft);
display:flex; align-items:center; justify-content:center;
margin:0 0 14px;
}
.fn-solution-icon img{ width:60px; height:60px; object-fit:contain; }
.fn-solution-accent{
width:32px; height:3px;
border-radius:3px;
background:var(--fn-blue);
margin:0 0 12px;
}
.fn-solution-card h3{
font-size:18px;
font-weight:800;
color:var(--fn-text);
margin:0 0 8px;
}
.fn-solution-card h3 span{ color:var(--fn-blue); }
.fn-solution-desc{
font-size:13px;
line-height:1.5;
color:var(--fn-muted);
margin:0 0 14px;
}
.fn-solution-divider{
height:1px;
background:var(--fn-border);
margin:0 0 14px;
}
.fn-solution-list{
list-style:none;
margin:0;
padding:0;
text-align:left;
}
.fn-solution-list li{
display:flex;
align-items:center;
gap:9px;
font-size:13px;
color:var(--fn-text);
margin-bottom:9px;
}
.fn-solution-list li:last-child{ margin-bottom:0; }
.fn-solution-list li i{ color:var(--fn-blue); font-size:14px; flex:none; }
.fn-solutions-cta{ text-align:center; margin-top:50px; }
.fn-solutions-btn{
display:inline-flex;
align-items:center;
gap:10px;
background:linear-gradient(135deg,var(--fn-blue),var(--fn-blue-dark));
color:#fff;
padding:17px 32px;
border-radius:9px;
font-size:15px;
font-weight:700;
text-decoration:none;
box-shadow:0 18px 34px -14px rgba(40,113,255,.55);
transition:transform .25s ease, box-shadow .25s ease;
}
.fn-solutions-btn:hover{ transform:translateY(-2px); box-shadow:0 22px 40px -14px rgba(40,113,255,.7); color:#fff; }
@media (max-width:1199px){
.fn-solutions-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:575px){
.fn-solutions-grid{ grid-template-columns:1fr; }
.fn-solutions-title{ font-size:28px; }
}
/* ================= FERnest Navbar (style + animation façon visiofact.fr) ================= */
.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;
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:var(--fn-blue);
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;
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:var(--fn-blue) !important;
transition:background .2s ease, transform .18s ease, box-shadow .18s ease !important;
}
.header-button a:hover{
background:var(--fn-blue-dark) !important;
transform:translateY(-1px);
box-shadow:0 6px 16px rgba(40,113,255,.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; }
}
/* ---- Premium dropdown submenus (matching the nav redesign) ---- */
.heder-menu ul li.icon::before{
top:50% !important;
transform:translateY(-50%);
}
.heder-menu ul .sub-menu{
top:calc(100% + 10px) !important;
left:0;
height:auto !important;
width:250px !important;
background:#fff !important;
border:1px solid var(--fn-border);
border-radius:14px !important;
box-shadow:0 20px 45px -14px rgba(10,20,50,.2) !important;
padding:8px !important;
opacity:0;
visibility:hidden;
transform:translateY(8px);
transition:opacity .22s cubic-bezier(.2,.7,.2,1), transform .22s cubic-bezier(.2,.7,.2,1), visibility .22s !important;
}
.heder-menu ul li:hover .sub-menu{
top:calc(100% + 10px) !important;
opacity:1;
visibility:visible !important;
transform:translateY(0);
}
.heder-menu ul .sub-menu ul{
display:block !important;
flex-wrap:nowrap;
}
.heder-menu ul .sub-menu ul li{
display:block !important;
width:100%;
margin:2px 0 !important;
border-top:none !important;
}
.heder-menu ul .sub-menu ul li a{
display:flex !important;
align-items:center;
min-height:0 !important;
font-size:14.5px !important;
font-weight:600 !important;
color:var(--fn-navy) !important;
padding:10px 14px !important;
border-radius:9px !important;
transition:background .18s ease, color .18s ease;
}
.heder-menu ul .sub-menu ul li a::after{ display:none !important; content:none !important; }
.heder-menu ul .sub-menu ul li:hover a{ background:var(--fn-bg-soft) !important; color:var(--fn-blue) !important; }
.sticky-nav .heder-menu ul .sub-menu ul li a{ color:var(--fn-navy) !important; margin:0 !important; }
.sticky-nav .heder-menu ul .sub-menu ul li:hover a{ background:var(--fn-bg-soft) !important; color:var(--fn-blue) !important; }
/* ============================================================== */
/* FERnest — Intro Hero (maquette "Transformez votre cabinet") */
/* ============================================================== */
.fn-intro{
position:relative;
background:
radial-gradient(ellipse 900px 500px at 50% 0%, rgba(40,113,255,.16), transparent 60%),
linear-gradient(180deg,#060b1c 0%,#070d22 55%,#081026 100%);
padding:72px 0 0;
overflow:hidden;
text-align:center;
}
.fn-intro *{ box-sizing:border-box; }
.fn-intro .container{ max-width:1180px; position:relative; z-index:2; padding-left:12px; padding-right:12px; }
.fn-intro-bg-glow{
position:absolute; inset:0; z-index:1; pointer-events:none;
background:
radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,.5) 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 82% 15%, rgba(255,255,255,.4) 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 92% 55%, rgba(255,255,255,.35) 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 6% 65%, rgba(255,255,255,.3) 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 45% 10%, rgba(255,255,255,.35) 50%, transparent 51%);
}
.fn-intro-top{ display:flex; flex-direction:column; align-items:center; margin-bottom:34px; }
.fn-intro-logo img{ height:64px; width:auto; display:block; }
.fn-intro-title{
font-weight:800; color:#fff;
font-size:54px; line-height:1.08; letter-spacing:-1.5px; margin:0 0 26px;
}
.fn-intro-title span{ color:var(--fn-blue); }
.fn-intro-desc{
font-size:19px; line-height:1.6; color:#c4cce3; max-width:760px; margin:0 auto 36px;
font-weight:400;
}
.fn-intro-desc strong{ color:#fff; font-weight:700;
background:linear-gradient(90deg,#6fa3ff,var(--fn-blue)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.fn-intro-cta{ margin-bottom:64px; }
.fn-intro-btn{
display:inline-block; padding:19px 44px; border-radius:12px;
background:linear-gradient(180deg,#2f7bff,#1a56d6);
color:#fff; font-weight:700; font-size:17px; text-decoration:none;
box-shadow:0 16px 40px -12px rgba(40,113,255,.65), inset 0 1px 0 rgba(255,255,255,.15);
transition:transform .25s ease, box-shadow .25s ease;
}
.fn-intro-btn:hover{ transform:translateY(-3px); color:#fff; box-shadow:0 20px 46px -12px rgba(40,113,255,.8); }
.fn-intro-features{
display:flex; justify-content:space-between; gap:10px;
padding-bottom:40px; position:relative;
}
.fn-intro-feature{
flex:1 1 0; padding:0 14px; position:relative;
transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.fn-intro-feature:hover{ transform:translateY(-6px); }
.fn-intro-feature:not(:last-child)::after{
content:''; position:absolute; top:6px; right:0; bottom:56px; width:1px;
background:rgba(255,255,255,.08);
}
.fn-intro-avatar{
width:136px; height:136px; display:block; object-fit:contain;
margin:0 auto 20px;
filter:drop-shadow(0 18px 34px rgba(0,0,0,.45)) drop-shadow(0 0 0 rgba(40,113,255,0));
transition:filter .35s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.fn-intro-feature:hover .fn-intro-avatar{
transform:scale(1.05);
filter:drop-shadow(0 22px 40px rgba(0,0,0,.5)) drop-shadow(0 0 26px rgba(40,113,255,.35));
}
.fn-intro-feature h4{
font-size:18px; font-weight:700; color:#fff; margin:0 0 12px;
}
.fn-intro-feature p{
font-size:14.5px; line-height:1.6; color:#9aa5c3; margin:0; max-width:230px; margin-left:auto; margin-right:auto;
}
.fn-intro-trust{
position:relative; z-index:2;
display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px 12px;
background:rgba(255,255,255,.045);
backdrop-filter:blur(6px);
border:1px solid rgba(255,255,255,.12);
border-radius:16px;
padding:22px 26px;
margin-bottom:100px;
box-shadow:0 24px 48px -20px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
.fn-intro-trust-item{ display:flex; align-items:center; gap:12px; flex:1 1 0; min-width:150px; }
.fn-intro-trust-ic{ flex:none; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; transition:transform .3s ease; }
.fn-intro-trust-item:hover .fn-intro-trust-ic{ transform:translateY(-2px) scale(1.08); }
.fn-intro-trust-ic-blue{ background:var(--fn-blue); box-shadow:0 8px 18px -4px rgba(40,113,255,.6); }
.fn-intro-trust-ic-purple{ background:var(--fn-purple); box-shadow:0 8px 18px -4px rgba(139,92,246,.6); }
.fn-intro-trust-ic-cyan{ background:#3ad0e0; box-shadow:0 8px 18px -4px rgba(58,208,224,.55); }
.fn-intro-trust-ic-teal{ background:var(--fn-green); box-shadow:0 8px 18px -4px rgba(23,163,92,.55); }
.fn-intro-trust-ic-flag{ background:rgba(255,255,255,.08); font-size:18px; box-shadow:none; }
.fn-intro-trust-item strong{ display:block; font-size:13.5px; font-weight:700; color:#fff; margin-bottom:2px; }
.fn-intro-trust-item p{ font-size:11.5px; color:#9aa5c3; margin:0; line-height:1.4; }
@media (max-width:1100px){
.fn-intro-title{ font-size:48px; }
.fn-intro-features{ flex-wrap:wrap; row-gap:44px; padding-bottom:44px; }
.fn-intro-feature{ flex:1 1 30%; min-width:200px; }
.fn-intro-feature:nth-child(3)::after{ display:none; }
}
@media (max-width:767px){
.fn-intro{ padding-top:70px; }
.fn-intro-logo{ font-size:40px; }
.fn-intro-title{ font-size:34px; letter-spacing:-1px; }
.fn-intro-desc{ font-size:16px; }
.fn-intro-btn{ padding:16px 32px; font-size:15px; }
.fn-intro-feature{ flex:1 1 100%; }
.fn-intro-feature:not(:last-child)::after{ display:none; }
.fn-intro-trust{ flex-direction:column; align-items:stretch; margin-bottom:70px; }
.fn-intro-trust-item{ min-width:0; }
}
/* ================= FERnest — scroll-reveal utility (partagé par toutes les sections) ================= */
.fn-reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.fn-reveal.in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce){
.fn-reveal{ opacity:1; transform:none; transition:none; }
}
/* ================= FERnest — Centre de production (production.html) =================
Composant autonome et statique (pas d'animations premium type accueil / .fn-prodmap) :
photos réelles telles quelles (déjà cerclées/badgées dans les PNG sources), cartes plates,
flèches en pointillés SVG entre les cartes et le cercle central, timeline + mockup laptop. */
.fn-cprod{ background:#fff; padding:70px 0 60px; font-family:"Inter", sans-serif; color:var(--fn-text); }
.fn-cprod *{ box-sizing:border-box; }
.fn-cprod .container{ max-width:1400px; }
.fn-cprod-head{ text-align:center; margin-bottom:46px; }
.fn-cprod-head .fn-cprod-kicker{ font-size:28px; font-weight:800; letter-spacing:.5px; color:var(--fn-navy); margin:0 0 8px; }
.fn-cprod-head p{ font-size:15.5px; color:var(--fn-muted); margin:0; }
.fn-cprod-head p span{ color:var(--fn-blue); font-weight:700; }
.fn-cprod-main{ display:flex; align-items:center; gap:20px; }
/* left text column */
.fn-cprod-intro{ flex:0 0 270px; max-width:270px; }
.fn-cprod-title{ font-size:30px; font-weight:800; line-height:1.2; color:var(--fn-navy); margin:0 0 14px; }
.fn-cprod-title span{ color:var(--fn-blue); }
.fn-cprod-intro > p{ font-size:14.5px; color:var(--fn-muted); line-height:1.6; margin:0 0 26px; }
.fn-cprod-features{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:20px; }
.fn-cprod-features li{ display:flex; gap:12px; align-items:flex-start; }
.fn-cprod-feat-ic{ flex:0 0 42px; width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,#eaf0ff,#dde9ff); color:var(--fn-blue); display:flex; align-items:center; justify-content:center; font-size:18px; }
.fn-cprod-features strong{ display:block; color:var(--fn-blue); font-size:14.5px; margin-bottom:2px; }
.fn-cprod-features p{ margin:0; font-size:13px; color:var(--fn-muted); line-height:1.5; }
/* "Vos cabinets" / "Vos clients" side columns */
.fn-cprod-side{ flex:0 0 180px; max-width:180px; display:flex; flex-direction:column; align-items:center; text-align:center; background:#fff; border:1px solid var(--fn-border); border-radius:var(--fn-radius); box-shadow:0 10px 26px rgba(20,40,90,.06); padding:20px 16px; transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease; }
.fn-cprod-side:hover{ transform:translateY(-5px); box-shadow:0 8px 20px -6px rgba(20,60,150,.08), 0 30px 60px -24px rgba(20,60,150,.22); }
.fn-cprod-side-label{ font-size:12.5px; font-weight:800; letter-spacing:1px; color:var(--fn-blue); text-transform:uppercase; margin-bottom:14px; }
.fn-cprod-avatar{ width:130px; height:auto; display:block; background:#fff; margin-bottom:10px; }
.fn-cprod-side-name{ font-size:14px; font-weight:700; color:var(--fn-navy); margin:0; }
.fn-cprod-side-rule{ display:block; width:24px; height:2px; border-radius:2px; background:var(--fn-blue); margin:6px 0 16px; }
.fn-cprod-side-list{ list-style:none; margin:0; padding:0; width:100%; display:flex; flex-direction:column; gap:12px; }
.fn-cprod-side-list li{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--fn-text); text-align:left; }
.fn-cprod-side-list li i{ color:var(--fn-blue); font-size:14px; flex:none; }
/* central diagram */
.fn-cprod-diagram{ flex:1 1 auto; min-width:0; display:flex; align-items:center; justify-content:center; }
.fn-cprod-diagram-col{ display:flex; flex-direction:column; gap:40px; flex:0 0 148px; }
.fn-cprod-diagram-col-left{ margin-right:-80px; position:relative; z-index:2; }
.fn-cprod-diagram-col-right{ margin-left:-80px; position:relative; z-index:2; }
.fn-cprod-node{ position:relative; display:flex; align-items:flex-start; gap:5px; width:148px; height:96px; overflow:hidden; background:#fff; border:1px solid var(--fn-border); border-radius:var(--fn-radius); padding:6px; box-shadow:0 10px 26px rgba(20,40,90,.06); transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease; }
.fn-cprod-node:hover{ transform:translateY(-4px); box-shadow:0 8px 20px -6px rgba(20,60,150,.08), 0 30px 60px -24px rgba(20,60,150,.22); }
.fn-cprod-node-ic{ flex:0 0 48px; width:48px; height:48px; background:none; color:var(--fn-blue); display:flex; align-items:center; justify-content:center; font-size:30px; transition:transform .3s ease; }
.fn-cprod-node:hover .fn-cprod-node-ic{ transform:scale(1.08) rotate(-4deg); }
.fn-cprod-node strong{ display:block; font-size:11.5px; line-height:1.1; color:var(--fn-navy); margin-bottom:2px; }
.fn-cprod-node p{ margin:0; font-size:10px; color:var(--fn-muted); line-height:1.35; }
.fn-cprod-circle{ position:relative; z-index:1; width:445px; height:445px; flex:0 0 445px; margin:0; }
.fn-cprod-circle img{ width:100%; height:100%; object-fit:contain; display:block; background:#fff; }
/* process card */
.fn-cprod-process{ margin-top:50px; background:#fff; border:1px solid var(--fn-border); border-radius:20px; padding:36px 34px; box-shadow:0 10px 30px rgba(20,40,90,.06); }
.fn-cprod-process h3{ text-align:center; font-size:22px; font-weight:800; color:var(--fn-navy); margin:0 0 30px; }
.fn-cprod-process h3 span{ color:var(--fn-blue); }
.fn-cprod-process-body{ display:flex; align-items:center; justify-content:center; }
.fn-cprod-steps{ position:relative; list-style:none; margin:0; padding:0; display:flex; align-items:flex-start; gap:8px; width:100%; max-width:940px; }
.fn-cprod-steps::before{ content:""; position:absolute; top:12px; left:6%; right:6%; height:2px; background:repeating-linear-gradient(to right,#c7d6fb 0 6px, transparent 6px 12px); z-index:0; }
.fn-cprod-steps li{ position:relative; z-index:1; flex:1 1 0; display:flex; flex-direction:column; align-items:center; text-align:center; }
.fn-cprod-step-num{ width:24px; height:24px; border-radius:50%; background:var(--fn-blue); color:#fff; font-weight:700; font-size:11px; display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.fn-cprod-step-ic{ width:44px; height:44px; background:none; color:var(--fn-blue); font-size:40px; display:flex; align-items:center; justify-content:center; margin-bottom:10px; transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.fn-cprod-steps li:hover .fn-cprod-step-ic{ transform:scale(1.1) translateY(-3px); }
.fn-cprod-steps strong{ font-size:13px; color:var(--fn-navy); margin-bottom:3px; }
.fn-cprod-steps p{ font-size:11px; color:var(--fn-muted); margin:0; line-height:1.4; }
/* trust badges */
.fn-cprod-badges{ display:flex; align-items:center; justify-content:center; gap:34px; flex-wrap:wrap; margin-top:40px; }
.fn-cprod-badges span{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--fn-navy); }
.fn-cprod-badges span i{ color:var(--fn-blue); font-size:16px; }
@media (max-width:1200px){
.fn-cprod-main{ flex-direction:column; align-items:center; gap:26px; }
.fn-cprod-intro{ flex:0 0 auto; max-width:560px; width:100%; text-align:center; }
.fn-cprod-features{ max-width:400px; margin:0 auto; text-align:left; }
.fn-cprod-diagram{ flex-direction:column; gap:22px; width:100%; }
.fn-cprod-diagram-col{ flex-direction:row; flex-wrap:wrap; justify-content:center; gap:16px; width:100%; max-width:460px; flex:0 0 auto; }
.fn-cprod-diagram-col-left{ margin-right:0; }
.fn-cprod-diagram-col-right{ margin-left:0; }
.fn-cprod-node{ flex:0 0 210px; text-align:left; }
.fn-cprod-circle{ margin:0; }
.fn-cprod-side{ flex:0 0 auto; width:100%; max-width:280px; }
}
@media (max-width:767px){
.fn-cprod-process{ padding:28px 18px; }
.fn-cprod-process-body{ flex-direction:column; }
.fn-cprod-steps{ flex-direction:column; align-items:stretch; gap:20px; }
.fn-cprod-steps::before{ content:none; }
.fn-cprod-steps li{ position:relative; flex-direction:row; align-items:center; text-align:left; gap:12px; width:100%; }
.fn-cprod-steps li:not(:last-child)::after{
content:""; position:absolute; left:11px; top:36px; bottom:-20px; width:2px;
background:repeating-linear-gradient(to bottom,#c7d6fb 0 6px, transparent 6px 12px);
}
.fn-cprod-step-num{ margin-bottom:0; position:relative; z-index:1; }
.fn-cprod-step-ic{ margin-bottom:0; }
.fn-cprod-step-text{ text-align:left; }
}
/* ================= FERnest — Production augmentée : hero + timeline + confiance (production.html) =================
Réutilise les tokens/traitements déjà en place : var(--fn-blue/navy/muted/border/radius), l'ombre
multi-couche de .fn-ecofeat-card, l'icône ronde bleu clair générique, le bandeau navy à diviseurs
verticaux inspiré de .fn-overview-benefits, et .fn-cprod-badges pour le footer strip. */
/* ---- Hero ---- */
.fn-paug-hero{ background:#ffffff; padding:80px 0; font-family:"Inter", sans-serif; }
.fn-paug-hero .container{ max-width:1360px; }
.fn-paug-hero-grid{ display:flex; align-items:center; gap:64px; flex-wrap:wrap; }
.fn-paug-hero-text{ flex:1 1 340px; min-width:280px; }
.fn-paug-hero-visual{ flex:1.8 1 720px; min-width:320px; }
.fn-paug-hero-title{ font-size:44px; font-weight:800; line-height:1.18; color:var(--fn-navy); margin:0 0 20px; }
.fn-paug-hero-title span{ color:var(--fn-blue); }
.fn-paug-hero-rule{ display:block; width:60px; height:4px; border-radius:4px; background:linear-gradient(90deg,var(--fn-blue),#5b9dff); margin:0 0 22px; }
.fn-paug-hero-desc{ font-size:16.5px; line-height:1.7; color:var(--fn-muted); max-width:400px; margin:0; }
.fn-paug-hero-visual img{ width:100%; height:auto; display:block; }
/* ---- Process : timeline 5 étapes + carte bénéfices ---- */
.fn-paug-process{ position:relative; z-index:1; background:transparent; padding:0 0 90px; margin-top:-140px; font-family:"Inter", sans-serif; }
.fn-paug-process .container{ max-width:1360px; }
.fn-paug-process-grid{ display:flex; align-items:stretch; gap:28px; flex-wrap:wrap; }
.fn-paug-left-col{ flex:2.3 1 700px; min-width:0; display:flex; flex-direction:column; gap:24px; }
.fn-paug-timeline{ display:flex; align-items:stretch; gap:40px; }
.fn-paug-step{ position:relative; flex:1 1 0; min-width:0; }
.fn-paug-step-card{
position:relative; height:100%; display:flex; flex-direction:column; align-items:center; text-align:center;
background:#fff; border:1px solid #edf0f7; border-radius:20px; padding:22px 12px 10px;
box-shadow:0 4px 16px -6px rgba(20,40,90,.06), 0 20px 45px -28px rgba(20,40,90,.14);
transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.fn-paug-step-card:hover{
transform:translateY(-6px); border-color:#dbe6fb;
box-shadow:0 8px 20px -6px rgba(20,60,150,.08), 0 30px 60px -24px rgba(20,60,150,.22);
}
.fn-paug-avatar{ position:relative; width:112px; height:112px; margin:-26px auto 16px; }
.fn-paug-avatar img{ width:100%; height:100%; object-fit:contain; display:block; }
.fn-paug-badge-num{
position:absolute; left:50%; bottom:-6px; transform:translateX(-50%);
width:26px; height:26px; border-radius:50%;
background:var(--fn-blue); color:#fff;
font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center;
border:2.5px solid #fff; box-shadow:0 4px 10px rgba(40,113,255,.35); z-index:2;
}
.fn-paug-step-card h4{ font-size:14.5px; font-weight:700; color:var(--fn-navy); margin:0 0 8px; line-height:1.3; }
.fn-paug-step-card p{ font-size:12px; line-height:1.55; color:var(--fn-muted); margin:0; }
.fn-paug-arrow{ position:absolute; top:52px; right:-40px; width:32px; height:14px; z-index:1; pointer-events:none; }
.fn-paug-arrow svg{ width:100%; height:100%; display:block; overflow:visible; }
.fn-paug-arrow svg line{ stroke:var(--fn-blue); stroke-width:1.8; stroke-dasharray:3 4; stroke-linecap:round; }
.fn-paug-arrow svg path{ fill:none; stroke:var(--fn-blue); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.fn-paug-benefits{
flex:1 1 300px; min-width:280px;
background:#fff; border:1px solid var(--fn-border); border-radius:20px; padding:30px 26px;
box-shadow:0 4px 16px -6px rgba(20,40,90,.06), 0 20px 45px -28px rgba(20,40,90,.14);
}
.fn-paug-benefits h3{ font-size:19px; font-weight:800; color:var(--fn-navy); margin:0 0 22px; }
.fn-paug-benefits ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:20px; }
.fn-paug-benefits li{ display:flex; align-items:flex-start; gap:14px; }
.fn-paug-benefits .ic{
flex:0 0 42px; width:42px; height:42px; background:none; color:var(--fn-blue);
display:flex; align-items:center; justify-content:center; font-size:38px;
}
.fn-paug-benefits strong{ display:block; font-size:14px; color:var(--fn-navy); margin-bottom:3px; }
.fn-paug-benefits p{ margin:0; font-size:12.5px; line-height:1.5; color:var(--fn-muted); }
/* ---- Bandeau de confiance (reste horizontal, textes réduits pour tenir aux côtés de la carte Bénéfices) ---- */
.fn-paug-trust{ background:linear-gradient(160deg, var(--fn-navy) 0%, var(--fn-navy-2) 100%); border-radius:20px; padding:22px 24px; }
.fn-paug-trust-title{ display:flex; align-items:center; justify-content:flex-start; gap:8px; font-size:14px; font-weight:800; color:#fff; margin:0 0 16px; text-align:left; }
.fn-paug-trust-title i{ color:var(--fn-blue); font-size:15px; }
.fn-paug-trust-row{ display:flex; flex-wrap:wrap; }
.fn-paug-trust-item{
flex:1 1 0; min-width:0; display:flex; align-items:flex-start; gap:8px;
padding:2px 10px; border-right:1px solid rgba(255,255,255,.1);
transition:opacity .25s ease;
}
.fn-paug-trust-item:first-child{ padding-left:0; }
.fn-paug-trust-item:last-child{ border-right:none; padding-right:0; }
.fn-paug-trust-item:hover{ opacity:.8; }
.fn-paug-trust-ic{
flex:0 0 28px; width:28px; height:28px; background:none; color:#fff;
display:flex; align-items:center; justify-content:center; font-size:28px;
transition:color .25s ease, transform .25s ease;
}
.fn-paug-trust-item:hover .fn-paug-trust-ic{ color:var(--fn-blue); transform:scale(1.1); }
.fn-paug-trust-item b{ display:block; font-size:11px; color:#fff; margin-bottom:2px; line-height:1.25; }
.fn-paug-trust-item p{ margin:0; font-size:9.5px; color:#aab4d1; line-height:1.35; }
/* ---- Footer strip (réutilise .fn-cprod-badges) ---- */
.fn-paug-strip{ background:#fff; padding:0 0 70px; margin-top:-40px; }
.fn-paug-strip .container{ max-width:1360px; }
.fn-paug-strip .fn-cprod-badges{ margin-top:0; }
.fn-paug-strip .fn-cprod-badges span i{ font-size:30px; }
.fn-paug-strip .fn-cprod-badges span{ position:relative; }
.fn-paug-strip .fn-cprod-badges span:not(:first-child)::before{
content:""; position:absolute; left:-17px; top:50%; transform:translateY(-50%);
width:1px; height:18px; background:rgba(10,18,36,.3);
}
@media (max-width:575px){
.fn-paug-strip .fn-cprod-badges{ display:grid; grid-template-columns:1fr 1fr; justify-items:center; gap:22px 12px; }
.fn-paug-strip .fn-cprod-badges span:not(:first-child)::before{ content:none; }
}
@media (max-width:991px){
.fn-paug-hero-grid{ flex-direction:column; gap:44px; }
.fn-paug-hero-text, .fn-paug-hero-visual{ width:100%; min-width:0; flex:1 1 auto; }
.fn-paug-hero-title{ font-size:36px; }
.fn-paug-process-grid{ flex-direction:column; }
.fn-paug-left-col{ width:100%; }
.fn-paug-timeline{ flex-wrap:wrap; row-gap:36px; gap:24px; }
.fn-paug-step{ flex:1 1 30%; min-width:150px; }
.fn-paug-arrow{ display:none; }
.fn-paug-benefits{ width:100%; }
.fn-paug-trust-row{ flex-direction:column; }
.fn-paug-trust-item{ border-right:none; border-bottom:1px solid rgba(255,255,255,.1); padding:10px 0; }
.fn-paug-trust-item:first-child{ padding-top:0; }
.fn-paug-trust-item:last-child{ border-bottom:none; padding-bottom:0; }
}
@media (max-width:575px){
.fn-paug-hero{ padding:56px 0; }
.fn-paug-hero-title{ font-size:30px; }
.fn-paug-process{ padding:56px 0; }
.fn-paug-step{ flex:1 1 100%; }
}
/* ================= FERnest — Production augmentée v2 : hero + timeline icônes + stats + confiance (production.html) =================
Second bloc "Production augmentée", sous le premier. Mêmes tokens/traitements que .fn-paug-*
(var(--fn-blue/navy/muted/border/radius), ombre .fn-ecofeat-card, icône ronde bleu clair générique,
bandeau navy à diviseurs verticaux), mais avatars en icône (pas photo) et rangée "stats" en plus. */
/* ---- Hero ---- */
.fn-paug2-hero{ background:#ffffff; padding:80px 0; font-family:"Inter", sans-serif; }
.fn-paug2-hero .container{ max-width:1360px; }
.fn-paug2-hero-grid{ display:flex; align-items:center; gap:64px; flex-wrap:wrap; }
.fn-paug2-hero-text{ flex:1 1 340px; min-width:280px; }
.fn-paug2-hero-visual{ position:relative; flex:1.8 1 720px; min-width:320px; margin-top:56px; }
.fn-paug2-hero-visual::before{
content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
background:
linear-gradient(to right, #fff, transparent 13%),
linear-gradient(to top, #fff, transparent 13%),
radial-gradient(circle at top left, #fff, transparent 18%),
radial-gradient(circle at bottom right, #fff, transparent 18%);
}
.fn-paug2-hero-title{ font-size:44px; font-weight:800; line-height:1.18; color:var(--fn-navy); margin:0 0 20px; }
.fn-paug2-hero-title span{ color:var(--fn-blue); }
.fn-paug2-hero-rule{ display:block; width:60px; height:4px; border-radius:4px; background:linear-gradient(90deg,var(--fn-blue),#5b9dff); margin:0 0 22px; }
.fn-paug2-hero-desc{ font-size:16.5px; line-height:1.7; color:var(--fn-muted); max-width:440px; margin:0; }
.fn-paug2-hero-visual img{ width:100%; height:auto; display:block; border-radius:20px; }
/* ---- Process : timeline 5 étapes (icônes) + carte bénéfices ---- */
.fn-paug2-process{ position:relative; z-index:1; background:transparent; padding:0 0 40px; margin-top:-140px; font-family:"Inter", sans-serif; }
.fn-paug2-process .container{ max-width:1360px; }
.fn-paug2-process-grid{ display:flex; align-items:stretch; gap:28px; flex-wrap:wrap; }
.fn-paug2-left-col{ flex:2.3 1 700px; min-width:0; display:flex; flex-direction:column; gap:24px; }
.fn-paug2-timeline{ display:flex; align-items:stretch; gap:40px; }
.fn-paug2-step{ position:relative; flex:1 1 0; min-width:0; }
.fn-paug2-step-card{
position:relative; height:100%; display:flex; flex-direction:column; align-items:center; text-align:center;
background:#fff; border:1px solid #edf0f7; border-radius:20px; padding:6px 12px 0;
box-shadow:0 4px 16px -6px rgba(20,40,90,.06), 0 20px 45px -28px rgba(20,40,90,.14);
transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.fn-paug2-step-card:hover{
transform:translateY(-6px); border-color:#dbe6fb;
box-shadow:0 8px 20px -6px rgba(20,60,150,.08), 0 30px 60px -24px rgba(20,60,150,.22);
}
.fn-paug2-avatar{ width:100px; height:100px; margin:0 auto 16px; }
.fn-paug2-avatar img{ width:100%; height:100%; object-fit:contain; display:block; }
.fn-paug2-timeline > .fn-paug2-step:first-child .fn-paug2-avatar{ width:128px; height:128px; }
.fn-paug2-step-card h4{ font-size:14.5px; font-weight:700; color:var(--fn-navy); margin:0 0 8px; line-height:1.3; }
.fn-paug2-step-card p{ font-size:12px; line-height:1.55; color:var(--fn-muted); margin:0; }
.fn-paug2-arrow{ position:absolute; top:56px; right:-40px; width:32px; height:14px; z-index:1; pointer-events:none; }
.fn-paug2-arrow svg{ width:100%; height:100%; display:block; overflow:visible; }
.fn-paug2-arrow svg line{ stroke:var(--fn-blue); stroke-width:1.8; stroke-dasharray:3 4; stroke-linecap:round; }
.fn-paug2-arrow svg path{ fill:none; stroke:var(--fn-blue); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.fn-paug2-benefits{
flex:1 1 300px; min-width:280px; align-self:flex-start; margin-top:-70px; position:relative; z-index:2;
background:#fff; border:1px solid var(--fn-border); border-radius:20px; padding:30px 26px;
box-shadow:0 4px 16px -6px rgba(20,40,90,.06), 0 20px 45px -28px rgba(20,40,90,.14);
}
.fn-paug2-benefits h3{ font-size:19px; font-weight:800; color:var(--fn-navy); margin:0 0 22px; }
.fn-paug2-benefits ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:20px; }
.fn-paug2-benefits li{ display:flex; align-items:flex-start; gap:14px; }
.fn-paug2-benefits .ic{
flex:0 0 42px; width:42px; height:42px; background:none; color:var(--fn-blue);
display:flex; align-items:center; justify-content:center; font-size:32px;
}
.fn-paug2-benefits strong{ display:block; font-size:14px; color:var(--fn-navy); margin-bottom:3px; }
.fn-paug2-benefits p{ margin:0; font-size:12.5px; line-height:1.5; color:var(--fn-muted); }
/* ---- Rangée stats (Qualité / Sécurité / Délai / Traçabilité / Performance) ---- */
.fn-paug2-stats{
display:flex; flex-wrap:wrap; gap:24px;
background:var(--fn-bg-soft); border:1px solid var(--fn-border); border-radius:20px; padding:32px 26px;
}
.fn-paug2-stats-item{ flex:1 1 0; min-width:150px; text-align:center; }
.fn-paug2-stats-item .ic{
width:54px; height:54px; border-radius:50%; margin:0 auto 14px;
background:linear-gradient(135deg,#eaf0ff,#dde9ff); color:var(--fn-blue);
display:flex; align-items:center; justify-content:center; font-size:24px;
}
.fn-paug2-stats-item h4{ font-size:14.5px; font-weight:700; color:var(--fn-navy); margin:0 0 6px; }
.fn-paug2-stats-item p{ font-size:12px; color:var(--fn-muted); margin:0; line-height:1.5; max-width:190px; margin-left:auto; margin-right:auto; }
/* ---- Bandeau de confiance (pleine largeur) ---- */
.fn-paug2-trust-wrap{ background:transparent; padding:36px 0 0; }
.fn-paug2-trust-wrap .container{ max-width:1360px; }
.fn-paug2-trust{ background:linear-gradient(160deg, var(--fn-navy) 0%, var(--fn-navy-2) 100%); border-radius:20px; padding:34px 40px; }
.fn-paug2-trust-title{ display:flex; align-items:center; justify-content:center; gap:10px; font-size:17px; font-weight:800; color:#fff; margin:0 0 26px; text-align:center; }
.fn-paug2-trust-title i{ color:var(--fn-blue); font-size:18px; }
.fn-paug2-trust-row{ display:flex; flex-wrap:wrap; }
.fn-paug2-trust-item{
flex:1 1 0; min-width:170px; display:flex; align-items:flex-start; gap:12px;
padding:4px 20px; border-right:1px solid rgba(255,255,255,.1);
transition:opacity .25s ease;
}
.fn-paug2-trust-item:first-child{ padding-left:0; }
.fn-paug2-trust-item:last-child{ border-right:none; padding-right:0; }
.fn-paug2-trust-item:hover{ opacity:.8; }
.fn-paug2-trust-ic{
flex:0 0 36px; width:36px; height:36px; background:none; color:#fff;
display:flex; align-items:center; justify-content:center; font-size:28px;
transition:color .25s ease, transform .25s ease;
}
.fn-paug2-trust-item:hover .fn-paug2-trust-ic{ color:var(--fn-blue); transform:scale(1.1); }
.fn-paug2-trust-item b{ display:block; font-size:13px; color:#fff; margin-bottom:3px; }
.fn-paug2-trust-item p{ margin:0; font-size:11px; color:#aab4d1; line-height:1.45; }
/* ---- Footer strip (réutilise .fn-cprod-badges) ---- */
.fn-paug2-strip{ background:#fff; padding:24px 0 70px; }
.fn-paug2-strip .container{ max-width:1360px; }
@media (max-width:991px){
.fn-paug2-hero-grid{ flex-direction:column; gap:44px; }
.fn-paug2-hero-text, .fn-paug2-hero-visual{ width:100%; min-width:0; flex:1 1 auto; }
.fn-paug2-hero-title{ font-size:36px; }
.fn-paug2-process-grid{ flex-direction:column; }
.fn-paug2-left-col{ width:100%; }
.fn-paug2-timeline{ flex-wrap:wrap; row-gap:36px; gap:24px; }
.fn-paug2-step{ flex:1 1 30%; min-width:150px; }
.fn-paug2-arrow{ display:none; }
.fn-paug2-benefits{ width:100%; height:auto; }
.fn-paug2-stats{ flex-direction:column; }
.fn-paug2-stats-item{ min-width:0; }
.fn-paug2-trust{ padding:30px 24px; }
.fn-paug2-trust-row{ flex-direction:column; }
.fn-paug2-trust-item{ border-right:none; border-bottom:1px solid rgba(255,255,255,.1); padding:14px 0; }
.fn-paug2-trust-item:first-child{ padding-top:0; }
.fn-paug2-trust-item:last-child{ border-bottom:none; padding-bottom:0; }
}
@media (max-width:575px){
.fn-paug2-hero{ padding:56px 0; }
.fn-paug2-hero-title{ font-size:30px; }
.fn-paug2-step{ flex:1 1 100%; }
.fn-paug2-strip .fn-cprod-badges{ display:grid; grid-template-columns:1fr 1fr; justify-items:center; gap:22px 12px; }
}
/* ================= FERnest — Notre Histoire (histoire.html) =================
Réutilise var(--fn-blue/navy/muted/border/radius) et Inter pour le corps de texte ;
Playfair Display (importée dans le head) uniquement pour le titre éditorial et les citations. */
.fn-histoire{ background:rgb(233,231,231); font-family:"Inter", sans-serif; color:var(--fn-text); }
.fn-histoire *{ box-sizing:border-box; }
/* ---- Bloc 1 : storytelling 3 colonnes ---- */
.fn-histoire-story{ padding:0; overflow:hidden; }
.fn-histoire-grid{ display:grid; grid-template-columns:1.3fr .3fr 1.3fr; align-items:end; }
.fn-histoire-col-left{ align-self:start; }
.fn-histoire-col-right{ grid-column:3; align-self:start; }
.fn-histoire-col-center{ grid-column:2; grid-row:1; }
.fn-histoire-photo{ position:relative; width:94%; overflow:hidden; background:var(--fn-bg-soft); }
.fn-histoire-photo::before{
content:"";
position:absolute; left:0; right:0; bottom:0; height:35%;
background:linear-gradient(to bottom, transparent, rgb(233,231,231));
pointer-events:none; z-index:2;
}
.fn-histoire-col-left .fn-histoire-photo{ width:100%; margin-right:auto; margin-top:-4px; transform:scale(1.0); transform-origin:top left; }
.fn-histoire-col-right .fn-histoire-photo{ margin-left:auto; max-height:520px; }
.fn-histoire-col-right .fn-histoire-photo img{ height:100%; object-fit:cover; }
.fn-histoire-photo img{ width:100%; height:auto; display:block; }
.fn-histoire-col-right .fn-histoire-photo img{ object-position:right top; }
.fn-histoire-col-left .fn-histoire-photo::after{
content:"";
position:absolute; right:0; bottom:0; width:55%; height:55%;
background:radial-gradient(circle at bottom right, rgb(233,231,231) 0%, transparent 70%);
pointer-events:none; z-index:2;
}
.fn-histoire-col-right .fn-histoire-photo::after{
content:"";
position:absolute; left:0; bottom:0; width:55%; height:55%;
background:radial-gradient(circle at bottom left, rgb(233,231,231) 0%, transparent 70%);
pointer-events:none; z-index:2;
}
.fn-histoire-photo-overlay{ position:absolute; top:92px; left:24px; z-index:3; }
.fn-histoire-photo-overlay .fn-histoire-name{ font-size:18px; }
.fn-histoire-photo-overlay .fn-histoire-role{ font-size:11px; }
.fn-histoire-photo-overlay-right{ left:auto; right:40px; text-align:left; max-width:220px; }
.fn-histoire-photo-overlay-right::before{
content:"";
position:absolute; inset:-230px -110px -230px -110px;
background:radial-gradient(ellipse at center, rgb(233,231,231) 0%, rgb(233,231,231) 15%, transparent 75%);
z-index:-1;
pointer-events:none;
}
.fn-histoire-photo-overlay-right .fn-histoire-role{ color:#000; font-size:11.5px; font-weight:400; line-height:1.25; }
.fn-histoire-photo-overlay-right .fn-histoire-quote{ color:#000; }
.fn-histoire-overlay-rule{ display:block; width:32px; height:3px; border-radius:3px; background:var(--fn-blue); margin:6px 0 10px; }
.fn-histoire-person{ padding:26px 32px 44px 40px; }
.fn-histoire-col-right .fn-histoire-person{ padding:26px 40px 44px 32px; text-align:right; }
.fn-histoire-name{ font-size:22px; font-weight:800; color:var(--fn-navy); margin:0 0 4px; }
.fn-histoire-name .last{ color:var(--fn-blue); }
.fn-histoire-role{ font-size:13.5px; font-weight:600; color:var(--fn-blue); margin:0 0 18px; }
.fn-histoire-role-desc{ font-weight:500; color:var(--fn-muted); line-height:1.6; max-width:280px; margin-left:auto; }
.fn-histoire-quote{
position:relative;
margin:0; padding:0 0 0 22px;
font-size:14.5px; line-height:1.65; color:var(--fn-text);
border-left:2px solid var(--fn-border);
}
.fn-histoire-col-right .fn-histoire-quote{ padding:0; border-left:none; border-right:none; margin-left:0; font-size:10.5px; }
.fn-histoire-col-right .fn-histoire-quote::after{
content:"\201D";
display:block;
font-family:"Playfair Display", serif;
font-size:44px; font-weight:800; line-height:1;
color:var(--fn-blue);
text-align:left;
margin-top:14px;
}
.fn-histoire-photo-overlay .fn-histoire-quote{ border-left:none; padding-left:0; font-size:10.5px; }
.fn-histoire-photo-overlay .fn-histoire-quote::after{
content:"\201D";
display:block;
font-family:"Playfair Display", serif;
font-size:44px; font-weight:800; line-height:1;
color:var(--fn-blue);
text-align:left;
margin-top:14px;
}
.fn-histoire-quote::before{
content:"\201C";
display:block;
font-family:"Playfair Display", serif;
font-size:44px; font-weight:800; line-height:1;
color:var(--fn-blue);
margin-bottom:2px;
}
.fn-histoire-col-right .fn-histoire-quote::before{ content:"\201D"; text-align:left; }
.fn-histoire-col-center{
position:relative;
align-self:start;
display:flex; flex-direction:column; align-items:center; text-align:center;
padding:10px 16px 40px;
}
.fn-histoire-col-center::before, .fn-histoire-col-center::after{
content:"";
position:absolute; top:0; bottom:0;
width:70px; z-index:2; pointer-events:none;
}
.fn-histoire-col-center::before{ left:-70px; background:linear-gradient(to left, rgb(233,231,231), transparent); }
.fn-histoire-col-center::after{ right:-70px; background:linear-gradient(to right, rgb(233,231,231), transparent); }
.fn-histoire-logo{ height:clamp(56px, 9vw, 92px); width:auto; margin:0 0 28px; }
.fn-histoire-title{
font-family:"Cabin", sans-serif;
font-size:clamp(28px, 5vw, 52px); font-weight:800; letter-spacing:.01em;
color:var(--fn-navy);
margin:0 0 18px;
}
.fn-histoire-rule{ display:block; width:56px; height:3px; border-radius:3px; background:var(--fn-blue); margin:0 0 26px; }
.fn-histoire-lead{
font-family:"Playfair Display", serif;
font-size:clamp(15px, 2vw, 19px); font-weight:700; line-height:1.5;
color:var(--fn-navy);
margin:0 0 22px;
}
.fn-histoire-lead span{ color:var(--fn-blue); }
.fn-histoire-desc{ font-size:14px; line-height:1.75; color:#000; max-width:360px; margin:0; }
/* ---- Bloc 2 : frise chronologique ---- */
.fn-histoire .container{ max-width:1560px; }
.fn-histoire-timeline{
position:relative;
z-index:5;
display:grid;
grid-template-columns:1fr 200px 1fr;
align-items:center;
gap:24px;
background:var(--fn-bg-soft);
border-radius:20px;
padding:56px 0;
margin:-30px 0 90px;
box-shadow:0 4px 16px -6px rgba(20,40,90,.05), 0 24px 55px -30px rgba(20,40,90,.14);
}
.fn-histoire-story{ position:relative; z-index:1; }
.fn-histoire-tl-col{ position:relative; z-index:1; text-align:center; }
.fn-histoire-tl-label{ display:block; font-size:14px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#000; margin-bottom:8px; }
.fn-histoire-tl-year{ display:block; font-size:clamp(30px, 4.5vw, 44px); font-weight:800; color:var(--fn-blue); line-height:1.1; margin-bottom:14px; }
.fn-histoire-tl-col p{ font-size:13px; line-height:1.6; color:var(--fn-muted); max-width:280px; margin:0 auto; }
.fn-histoire-tl-mid{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
.fn-histoire-tl-badge-row{ display:flex; align-items:center; gap:18px; margin-bottom:16px; }
.fn-histoire-tl-dot{ width:9px; height:9px; border-radius:50%; background:var(--fn-blue); flex:none; }
.fn-histoire-tl-badge{
flex:none;
width:clamp(64px, 9vw, 96px); height:clamp(64px, 9vw, 96px);
border-radius:50%;
box-shadow:0 14px 30px -10px rgba(11,26,51,.45);
}
.fn-histoire-tl-badge img{ width:100%; height:100%; object-fit:contain; display:block; }
.fn-histoire-tl-caption{ font-size:14.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--fn-blue); text-align:center; line-height:1.5; margin:0; }
@media (max-width:1199px){
.fn-histoire-grid{ grid-template-columns:1fr; }
.fn-histoire-col-left, .fn-histoire-col-right{ grid-column:auto; align-self:auto; }
.fn-histoire-col-center{ position:relative; grid-column:auto; grid-row:auto; order:-1; padding:48px 24px 40px; }
.fn-histoire-col-center::before{ display:none; }
.fn-histoire-col-center::after{
left:0; right:0; top:auto; bottom:-70px; width:auto; height:70px;
background:linear-gradient(to bottom, rgb(233,231,231), transparent);
}
.fn-histoire-col-left .fn-histoire-photo{ margin-top:0; transform:none; }
.fn-histoire-photo-overlay{ top:32px; left:16px; }
.fn-histoire-photo-overlay-right{ right:16px; max-width:60%; }
.fn-histoire-photo-overlay-right::before{ inset:-140px -60px -140px -60px; }
.fn-histoire-title{ font-size:38px; }
.fn-histoire-lead{ font-size:16px; }
.fn-histoire-timeline{ grid-template-columns:1fr; gap:40px; padding:40px 28px; margin:40px 0 70px; }
.fn-histoire-timeline::before{ left:50%; top:0; bottom:0; right:auto; width:2px; height:auto; transform:translateX(-50%); }
.fn-histoire-tl-mid{ order:-1; }
.fn-histoire-tl-col, .fn-histoire-tl-mid{ padding-left:0; }
}
@media (max-width:575px){
.fn-histoire-title{ font-size:30px; }
.fn-histoire-logo{ height:70px; }
.fn-histoire-timeline{ padding:32px 20px; gap:28px; }
.fn-histoire-col-center{ padding:36px 16px 32px; }
}
/* ---- Mobile (<=767px) : les légendes photo quittent l'image pour devenir des cartes de texte lisibles ---- */
@media (max-width:767px){
.fn-histoire-photo{ overflow:visible; box-shadow:0 4px 16px -6px rgba(20,40,90,.08); }
.fn-histoire-photo::before,
.fn-histoire-col-left .fn-histoire-photo::after,
.fn-histoire-col-right .fn-histoire-photo::after{ display:none; }
.fn-histoire-photo-overlay,
.fn-histoire-photo-overlay-right{
position:static;
left:auto; right:auto; top:auto;
max-width:none;
text-align:left;
padding:22px 22px 28px;
background:#fff;
border-radius:0 0 var(--fn-radius) var(--fn-radius);
box-shadow:0 4px 16px -6px rgba(20,40,90,.06), 0 20px 45px -28px rgba(20,40,90,.1);
}
.fn-histoire-photo-overlay-right::before{ display:none; }
.fn-histoire-photo-overlay .fn-histoire-name{ font-size:20px; }
.fn-histoire-photo-overlay .fn-histoire-role{ font-size:13px; }
.fn-histoire-photo-overlay-right .fn-histoire-role{ font-size:13px; line-height:1.5; }
.fn-histoire-photo-overlay .fn-histoire-quote,
.fn-histoire-photo-overlay-right .fn-histoire-quote{ font-size:13px; line-height:1.6; }
.fn-histoire-col-left .fn-histoire-photo{ width:100%; margin:0; }
.fn-histoire-col-right .fn-histoire-photo{ width:100%; margin:0; max-height:none; }
.fn-histoire-col-right .fn-histoire-photo img{ height:auto; object-fit:initial; }
.fn-histoire-col-left, .fn-histoire-col-right{ margin-bottom:32px; }
.fn-histoire-col-center{ padding-top:8px; }
}
/* ---- Bloc 3 mobile : carrousel horizontal à défilement (les visuels gardent une taille lisible) ---- */
@media (max-width:767px){
.fn-histoire-innovation{
display:flex;
gap:12px;
overflow-x:auto;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
border-radius:16px;
padding:0 16px 4px;
margin:0 -16px;
background:none;
}
.fn-histoire-innovation-col{
flex:0 0 88%;
scroll-snap-align:center;
border-radius:16px;
overflow:hidden;
}
.fn-histoire-innovation-col img{ height:auto; }
}
/* ---- Bloc 4 mobile : cartes centrées empilées ---- */
@media (max-width:575px){
.fn-histoire-values{ padding:32px 0 40px; }
.fn-histoire-values-grid{ gap:28px; }
.fn-histoire-value{ flex-direction:column; align-items:center; text-align:center; gap:10px; }
}
/* ---- Bloc 3 : innovation mécanique / numérique ---- */
.fn-histoire-innovation{ display:grid; grid-template-columns:1fr 1fr; gap:2px; border-radius:24px; overflow:hidden; box-shadow:0 4px 16px -6px rgba(20,40,90,.08), 0 24px 55px -30px rgba(20,40,90,.2); }
.fn-histoire-innovation-col{ overflow:hidden; }
.fn-histoire-innovation-col img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.fn-histoire-innovation-col:hover img{ transform:scale(1.03); }
/* ---- Bloc 4 : nos valeurs ---- */
.fn-histoire-values{ background:var(--fn-navy); padding:28px 0 56px; margin-top:2px; border-radius:24px; }
.fn-histoire-values-title{
text-align:center; color:#fff;
font-size:clamp(15px, 2.2vw, 20px); font-weight:800; letter-spacing:.2em; text-transform:uppercase;
margin:0 0 44px;
}
.fn-histoire-values-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:32px; }
.fn-histoire-value{ display:flex; align-items:flex-start; gap:14px; text-align:left; color:#fff; padding:0 12px; }
.fn-histoire-value-ic{
display:inline-flex; align-items:center; justify-content:center;
width:56px; height:56px; flex:none;
border-radius:50%;
border:1.5px solid rgba(91,157,255,.5);
color:#5b9dff; font-size:24px;
transition:background .3s ease, color .3s ease, transform .3s ease, border-color .3s ease;
}
.fn-histoire-value:hover .fn-histoire-value-ic{ background:var(--fn-blue); border-color:var(--fn-blue); color:#fff; transform:scale(1.08); }
.fn-histoire-value h4{ font-size:16px; font-weight:800; color:#fff; margin:0 0 8px; }
.fn-histoire-value p{ font-size:13px; line-height:1.6; color:rgba(255,255,255,.7); margin:0; }
@media (max-width:991px){
.fn-histoire-innovation{ grid-template-columns:1fr; }
.fn-histoire-values-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:575px){
.fn-histoire-values-grid{ grid-template-columns:1fr; }
}
/* ================= FERnest — Vos agents IA spécialisés (agents-ia.html) ================= */
.fn-agentsia2{ background:linear-gradient(to bottom, #fff 0%, #fff 85%, var(--fn-bg-soft) 100%); padding:56px 0 80px; font-family:"Inter", sans-serif; color:var(--fn-text); }
.fn-agentsia2 .container{ max-width:100%; padding-left:48px; padding-right:48px; }
.fn-agentsia2 *{ box-sizing:border-box; }
.fn-agentsia2-head{ text-align:center; margin-bottom:44px; }
.fn-agentsia2-title{ font-size:clamp(28px, 4vw, 42px); font-weight:800; color:var(--fn-navy); margin:0 0 10px; }
.fn-agentsia2-title span{ color:var(--fn-blue); }
.fn-agentsia2-subtitle{ font-size:15px; color:var(--fn-muted); margin:0; }
.fn-agentsia2-grid{ display:grid; grid-template-columns:1fr 300px; gap:24px; align-items:start; }
.fn-agentsia2-cards{ display:flex; flex-wrap:wrap; justify-content:center; gap:20px; }
.fn-agentsia2-card{
flex:0 1 calc((100% - 60px) / 4);
min-width:170px;
background:#fff; border:1px solid var(--fn-border); border-radius:24px;
padding:12px 14px; text-align:center;
box-shadow:0 4px 16px -6px rgba(20,40,90,.05), 0 20px 45px -30px rgba(20,40,90,.1);
transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.fn-agentsia2-card:hover{ transform:translateY(-6px); box-shadow:0 8px 20px -6px rgba(20,60,150,.1), 0 30px 60px -28px rgba(20,60,150,.22); }
.fn-agentsia2-card-photo{ display:block; width:144px; height:144px; margin:0 auto 14px; transform:translateX(12px); transition:transform .3s ease; }
.fn-agentsia2-card:hover .fn-agentsia2-card-photo{ transform:translateX(12px) scale(1.05); }
.fn-agentsia2-card-photo img{ width:100%; height:100%; object-fit:contain; display:block; }
.fn-agentsia2-card strong{ display:block; font-size:18px; font-weight:800; color:var(--fn-navy); margin-bottom:2px; }
.fn-agentsia2-role{ font-size:13px; font-weight:700; margin:0 0 12px; }
.fn-agentsia2-desc{ font-size:13px; color:var(--fn-muted); line-height:1.55; margin:0 0 16px; min-height:58px; }
.fn-agentsia2-pill{
display:inline-flex; align-items:center; gap:6px;
font-size:11.5px; font-weight:700; border-radius:999px;
padding:8px 14px;
transition:transform .3s ease;
}
.fn-agentsia2-card:hover .fn-agentsia2-pill{ transform:scale(1.04); }
.fn-agentsia2-pill i{ font-size:13px; }
.fn-agentsia2-c-blue{ color:var(--fn-blue); }
.fn-agentsia2-c-green{ color:var(--fn-green); }
.fn-agentsia2-c-purple{ color:var(--fn-purple); }
.fn-agentsia2-c-orange{ color:var(--fn-orange); }
.fn-agentsia2-c-teal{ color:#14b8a6; }
.fn-agentsia2-c-red{ color:var(--fn-red); }
.fn-agentsia2-pill.fn-agentsia2-c-blue{ background:rgba(40,113,255,.08); }
.fn-agentsia2-pill.fn-agentsia2-c-green{ background:rgba(23,163,92,.08); }
.fn-agentsia2-pill.fn-agentsia2-c-purple{ background:rgba(139,92,246,.08); }
.fn-agentsia2-pill.fn-agentsia2-c-orange{ background:rgba(245,166,35,.08); }
.fn-agentsia2-pill.fn-agentsia2-c-teal{ background:rgba(20,184,166,.08); }
.fn-agentsia2-pill.fn-agentsia2-c-red{ background:rgba(239,68,68,.08); }
/* ---- Sidebar ---- */
.fn-agentsia2-side{
background:#fff; border:1px solid var(--fn-border); border-radius:var(--fn-radius);
padding:26px 24px; align-self:start;
box-shadow:0 4px 16px -6px rgba(20,40,90,.05), 0 20px 45px -30px rgba(20,40,90,.1);
}
.fn-agentsia2-side-head{ display:flex; align-items:flex-start; gap:14px; margin-bottom:16px; }
.fn-agentsia2-side-ic{
flex:none; width:40px; height:40px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
background:linear-gradient(135deg,#eaf0ff,#dde9ff); color:var(--fn-blue); font-size:18px;
}
.fn-agentsia2-side-head p{ margin:0; font-size:15px; font-weight:700; color:var(--fn-navy); line-height:1.4; }
.fn-agentsia2-side-head span{ color:var(--fn-blue); }
.fn-agentsia2-side-rule{ display:block; width:36px; height:2px; background:var(--fn-border); margin:0 0 20px; }
.fn-agentsia2-stats{ list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:16px; }
.fn-agentsia2-stats li{ display:flex; align-items:center; gap:12px; }
.fn-agentsia2-stats b{ display:block; font-size:16px; font-weight:800; color:var(--fn-navy); }
.fn-agentsia2-stats p{ margin:0; font-size:12px; color:var(--fn-muted); }
.fn-agentsia2-side-btn{
display:flex; align-items:center; justify-content:center; gap:8px;
width:100%; background:var(--fn-blue); color:#fff;
font-size:14px; font-weight:700; text-decoration:none;
border-radius:var(--fn-radius); padding:14px 18px;
transition:background .3s ease, transform .3s ease;
}
.fn-agentsia2-side-btn:hover{ background:var(--fn-blue-dark); color:#fff; transform:translateY(-2px); }
/* ---- Barre du bas ---- */
.fn-agentsia2-strip{
display:grid; grid-template-columns:repeat(6, 1fr); gap:24px;
margin-top:44px; padding:28px 32px;
background:#fff; border:1px solid var(--fn-border); border-radius:var(--fn-radius);
box-shadow:0 4px 16px -6px rgba(20,40,90,.05), 0 20px 45px -30px rgba(20,40,90,.1);
}
.fn-agentsia2-strip-item{ display:flex; align-items:flex-start; gap:12px; }
.fn-agentsia2-strip-item .ic{
flex:none; width:40px; height:40px;
display:flex; align-items:center; justify-content:center;
color:var(--fn-blue); font-size:34px;
transition:transform .3s ease;
}
.fn-agentsia2-strip-item:hover .ic{ transform:scale(1.08) rotate(-4deg); }
.fn-agentsia2-strip-item b{ display:block; font-size:13.5px; font-weight:800; color:var(--fn-navy); margin-bottom:3px; }
.fn-agentsia2-strip-item p{ margin:0; font-size:11.5px; color:var(--fn-muted); line-height:1.4; }
@media (max-width:1199px){
.fn-agentsia2-card{ flex-basis:calc((100% - 40px) / 3); }
}
@media (max-width:991px){
.fn-agentsia2{ padding:40px 0 56px; }
.fn-agentsia2 .container{ padding-left:24px; padding-right:24px; }
.fn-agentsia2-head{ margin-bottom:32px; }
.fn-agentsia2-grid{ grid-template-columns:1fr; gap:20px; }
.fn-agentsia2-side{ order:-1; }
.fn-agentsia2-card{ flex-basis:calc((100% - 20px) / 2); }
.fn-agentsia2-strip{ grid-template-columns:repeat(3, 1fr); gap:24px 16px; margin-top:32px; }
}
@media (max-width:575px){
.fn-agentsia2 .container{ padding-left:14px; padding-right:14px; }
.fn-agentsia2-card{ flex-basis:100%; }
.fn-agentsia2-card-photo{ width:110px; height:110px; }
.fn-agentsia2-side{ padding:22px 18px; }
.fn-agentsia2-strip{ grid-template-columns:repeat(2, 1fr); padding:24px 18px; }
}
/* ================= FERnest — Votre équipe IA (agents-ia.html) ================= */
.fn-agentsia{ background:var(--fn-bg-soft); padding:90px 0 100px; font-family:"Inter", sans-serif; color:var(--fn-text); }
.fn-agentsia .container{ max-width:100%; padding-left:10px; padding-right:10px; }
.fn-agentsia *{ box-sizing:border-box; }
/* ---- En-tête ---- */
.fn-agentsia-head{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; margin-bottom:56px; }
.fn-agentsia-logo{ height:44px; width:auto; }
.fn-agentsia-head-text{ grid-column:2; text-align:center; }
.fn-agentsia-title{ font-size:clamp(26px, 4vw, 44px); font-weight:800; color:var(--fn-navy); margin:0 0 8px; }
.fn-agentsia-title span{ color:var(--fn-blue); }
.fn-agentsia-subtitle{ font-size:clamp(13px, 1.6vw, 15px); color:#000; margin:0; }
.fn-agentsia-badge{
grid-column:3; justify-self:end;
display:flex; align-items:center; gap:12px;
background:#fff;
border:1px solid rgba(40,113,255,.16);
border-radius:var(--fn-radius);
padding:12px 22px;
backdrop-filter:blur(6px);
}
.fn-agentsia-badge-ic{
flex:none; width:38px; height:38px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
background:linear-gradient(135deg,#eaf0ff,#dde9ff); color:var(--fn-blue); font-size:17px;
}
.fn-agentsia-badge-text{ font-size:13px; line-height:1.4; color:#000; display:flex; flex-direction:column; }
.fn-agentsia-badge-text b{ color:var(--fn-blue); font-size:14.5px; font-weight:800; }
/* ---- Diagramme 3 colonnes ---- */
.fn-agentsia-diagram{ display:grid; grid-template-columns:1.3fr 1fr 1.3fr; gap:24px; align-items:start; }
.fn-agentsia-col{ display:flex; flex-direction:column; align-items:center; gap:20px; }
.fn-agentsia-hub-col{ display:flex; flex-direction:column; align-items:center; gap:20px; }
.fn-agentsia-hub-row{ display:flex; align-items:flex-start; justify-content:center; gap:20px; width:100%; }
.fn-agentsia-hub-row .fn-agentsia-dept{ flex:0 0 auto; }
.fn-agentsia-dept{
background:#fff;
border:1px solid var(--fn-border);
border-radius:var(--fn-radius);
padding:12px 10px;
box-shadow:0 4px 16px -6px rgba(20,40,90,.05), 0 20px 45px -30px rgba(20,40,90,.1);
transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.fn-agentsia-dept:hover{ transform:translateY(-4px); box-shadow:0 8px 20px -6px rgba(20,60,150,.08), 0 26px 55px -26px rgba(20,60,150,.2); }
.fn-agentsia-dept h3{
font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
margin:0 0 14px; text-align:center;
}
.fn-agentsia-dept-direction h3{ color:var(--fn-navy); }
.fn-agentsia-dept-compta h3{ color:var(--fn-blue); }
.fn-agentsia-dept-fiscal h3{ color:var(--fn-green); }
.fn-agentsia-dept-relation h3{ color:#e0349b; }
.fn-agentsia-dept-social h3{ color:var(--fn-blue); }
.fn-agentsia-dept-juridique h3{ color:var(--fn-orange); }
.fn-agentsia-dept-gestdoc h3{ color:#0d9488; }
.fn-agentsia-dept-intel h3{ color:var(--fn-purple); }
.fn-agentsia-dept-conformite h3{ color:var(--fn-blue); }
.fn-agentsia-cards{ display:flex; flex-wrap:nowrap; gap:0; justify-content:center; }
.fn-agentsia-card{
position:relative;
flex:1 1 0; min-width:0; max-width:96px;
display:flex; flex-direction:column; align-items:center; text-align:center;
padding:8px 10px 10px;
border-radius:10px;
transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, background .3s ease;
}
.fn-agentsia-card:not(:last-child)::after{
content:"";
position:absolute; top:14px; bottom:14px; right:0;
width:1px; background:var(--fn-border);
}
.fn-agentsia-card:hover{ transform:translateY(-4px); background:#fff; box-shadow:0 8px 20px -6px rgba(20,60,150,.1), 0 24px 50px -26px rgba(20,60,150,.22); }
.fn-agentsia-card-photo{
display:flex; align-items:flex-end; justify-content:center;
width:100%; height:90px; margin:0 0 6px;
transition:transform .3s ease;
}
.fn-agentsia-card:hover .fn-agentsia-card-photo{ transform:scale(1.06); }
.fn-agentsia-card-photo img{ width:auto; max-width:100%; height:100%; display:block; }
.fn-agentsia-card strong{ font-size:10.5px; font-weight:800; color:var(--fn-navy); line-height:1.15; }
.fn-agentsia-card p{ font-size:8px; color:var(--fn-muted); line-height:1.2; margin:2px 0 4px; }
.fn-agentsia-card-ic{ font-size:20px; color:var(--fn-blue); }
/* ---- Hub central ---- */
.fn-agentsia-hub{ position:relative; z-index:0; width:100%; max-width:min(340px, 90vw); display:flex; flex-direction:column; align-items:center; padding:20px 0; }
.fn-agentsia-hub::before{
content:"";
position:absolute; inset:-40px;
background:radial-gradient(ellipse at center, #fff 0%, #fff 30%, transparent 70%);
z-index:0; pointer-events:none;
}
.fn-agentsia-hub-lines{ display:none; position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:1; }
.fn-agentsia-hub-lines path{ fill:none; stroke:var(--fn-blue); stroke-width:.3; stroke-dasharray:2 2; opacity:.35; }
.fn-agentsia-hub-lines circle{ fill:var(--fn-blue); opacity:.55; }
.fn-agentsia-hub-circle{ position:relative; z-index:1; width:clamp(130px, 22vw, 190px); }
.fn-agentsia-hub-circle::before{
content:"";
position:absolute; inset:-30px;
background:radial-gradient(circle at center, #fff 0%, #fff 40%, transparent 75%);
z-index:0; pointer-events:none;
}
.fn-agentsia-hub-circle img{ position:relative; z-index:1; width:100%; height:auto; display:block; }
.fn-agentsia-hub-ring{
position:absolute; inset:-10px; border-radius:50%;
border:1px dashed rgba(40,113,255,.35);
animation:fnAgentsiaSpin 30s linear infinite;
}
@keyframes fnAgentsiaSpin{ to{ transform:rotate(360deg); } }
.fn-agentsia-hub-tag{
position:relative; z-index:1; margin-top:0;
background:#fff; border:1px solid var(--fn-border); border-radius:var(--fn-radius);
padding:clamp(12px, 2.5vw, 16px) clamp(16px, 4vw, 24px); text-align:center;
box-shadow:0 4px 16px -6px rgba(20,40,90,.06), 0 20px 45px -28px rgba(20,40,90,.1);
}
.fn-agentsia-hub-tag p{ margin:0; font-size:clamp(12.5px, 2vw, 14.5px); font-weight:700; color:var(--fn-navy); line-height:1.5; }
.fn-agentsia-hub-tag span{ color:var(--fn-blue); }
/* ---- Barre de stats ---- */
.fn-agentsia-strip{
display:grid; grid-template-columns:repeat(6, auto); gap:0 32px;
width:fit-content; max-width:100%; margin:70px auto 0; padding:32px 84px; border-top:1px solid var(--fn-border);
background:#fff; border-radius:var(--fn-radius);
}
.fn-agentsia-strip-item{ display:flex; align-items:flex-start; gap:12px; text-align:left; padding:0 14px; }
.fn-agentsia-strip-item .ic{
display:inline-flex; align-items:center; justify-content:center;
flex:none; width:44px; height:44px; font-size:32px;
color:var(--fn-blue);
transition:transform .3s ease;
}
.fn-agentsia-strip-item:hover .ic{ transform:scale(1.08) rotate(-4deg); }
.fn-agentsia-strip-item .ic-green{ color:var(--fn-green); }
.fn-agentsia-strip-item .ic-purple{ color:var(--fn-purple); }
.fn-agentsia-strip-item .ic-orange{ color:var(--fn-orange); }
.fn-agentsia-strip-item .ic-pink{ color:#e0349b; }
.fn-agentsia-strip-item .ic-teal{ color:#14b8a6; }
.fn-agentsia-strip-item b{ display:block; font-family:"Cabin", sans-serif; font-size:19px; font-weight:800; color:var(--fn-navy); margin-bottom:4px; }
.fn-agentsia-strip-item:first-child b{ color:var(--fn-blue); }
.fn-agentsia-strip-item:nth-child(2) b{ color:var(--fn-green); }
.fn-agentsia-strip-item:nth-child(3) b{ color:var(--fn-purple); }
.fn-agentsia-strip-item:nth-child(4) b{ color:var(--fn-orange); }
.fn-agentsia-strip-item:nth-child(5) b{ color:#14b8a6; }
.fn-agentsia-strip-item:nth-child(6) b{ color:#e0349b; }
.fn-agentsia-strip-item p{ font-size:12.5px; color:#000; line-height:1.5; margin:0; }
.fn-agentsia-footline{ text-align:center; font-size:17px; font-weight:700; color:var(--fn-navy); margin:44px 0 0; }
.fn-agentsia-footline span{ color:var(--fn-blue); }
@media (max-width:1199px) and (min-width:992px){
.fn-agentsia-diagram{ grid-template-columns:1.15fr 1fr 1.15fr; gap:16px; }
}
@media (max-width:991px){
.fn-agentsia{ padding:64px 0 70px; }
.fn-agentsia-head{ margin-bottom:40px; }
.fn-agentsia-diagram{ grid-template-columns:1fr; gap:32px; }
.fn-agentsia-hub-col{ order:-1; }
.fn-agentsia-hub{ order:-1; }
.fn-agentsia-hub-lines{ display:none; }
.fn-agentsia-hub-row{ flex-direction:column; align-items:center; }
.fn-agentsia-strip{ grid-template-columns:repeat(3, auto); gap:28px 32px; margin-top:48px; }
.fn-agentsia-footline{ font-size:15px; margin-top:32px; }
}
@media (max-width:575px){
.fn-agentsia .container{ padding-left:6px; padding-right:6px; }
.fn-agentsia-head{ grid-template-columns:1fr; gap:16px; }
.fn-agentsia-head-text{ grid-column:1; }
.fn-agentsia-badge{ grid-column:1; justify-self:center; }
.fn-agentsia-strip{ grid-template-columns:repeat(2, auto); padding:24px 16px; }
.fn-agentsia-dept{ padding:10px 8px; }
}
/* ================= FERnest Dashboard Mockup Section ================= */
.fn-mck{
position:relative;
background:#ffffff;
padding:70px 0 50px;
overflow:hidden;
font-family:"Inter", sans-serif;
}
.fn-mck *{ box-sizing:border-box; }
.fn-mck .container-fluid{ max-width:1440px; margin:0 auto; padding:0 50px; position:relative; z-index:2; }
.fn-mck-dots{
position:absolute;
left:-60px; bottom:-60px;
width:520px; height:420px;
background-image:radial-gradient(var(--fn-blue) 1.6px, transparent 1.6px);
background-size:22px 22px;
opacity:.12;
-webkit-mask-image:radial-gradient(circle at 20% 80%, #000 0%, transparent 70%);
mask-image:radial-gradient(circle at 20% 80%, #000 0%, transparent 70%);
z-index:1;
pointer-events:none;
}
.fn-mck-grid{
display:flex;
align-items:flex-start;
gap:40px;
flex-wrap:wrap;
}
/* ---- Left column ---- */
.fn-mck-left{ flex:1 1 320px; min-width:280px; padding-top:6px; }
.fn-mck-tagline{
margin:10px 0 26px;
padding-bottom:14px;
border-bottom:2px solid var(--fn-blue);
display:inline-block;
font-size:13px;
font-weight:600;
letter-spacing:1.5px;
text-transform:uppercase;
color:var(--fn-muted);
}
.fn-mck-title{
font-size:36px;
font-weight:800;
line-height:1.18;
color:var(--fn-navy);
margin-bottom:18px;
letter-spacing:-0.5px;
}
.fn-mck-title span{ color:var(--fn-blue); }
.fn-mck-desc{
font-size:16px;
color:var(--fn-muted);
line-height:1.6;
max-width:320px;
margin-bottom:32px;
}
.fn-mck-cta{
display:inline-flex;
align-items:center;
gap:10px;
background:linear-gradient(135deg,var(--fn-blue),var(--fn-blue-dark));
color:#fff;
font-weight:600;
font-size:15px;
padding:15px 26px;
border-radius:10px;
text-decoration:none;
box-shadow:0 18px 34px -14px rgba(40,113,255,.55);
transition:transform .25s ease, box-shadow .25s ease;
}
.fn-mck-cta:hover{ transform:translateY(-2px); box-shadow:0 22px 40px -14px rgba(40,113,255,.7); color:#fff; }
.fn-mck-cta i{ font-size:15px; }
/* ---- Right column ---- */
.fn-mck-right{ flex:3.1 1 700px; min-width:320px; }
.fn-mck-kpis{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:18px;
margin-bottom:18px;
}
.fn-mck-kpi{
background:#fff;
border:1px solid var(--fn-border);
border-radius:var(--fn-radius);
padding:20px 18px;
box-shadow:0 6px 18px rgba(10,20,50,0.04);
transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s cubic-bezier(.2,.7,.2,1);
}
.fn-mck-kpi:hover{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(10,20,50,0.09); }
.fn-mck-kpi-ic{
width:44px; height:44px;
border-radius:50%;
display:flex; align-items:center; justify-content:center;
font-size:18px;
margin-bottom:16px;
}
.fn-mck-ic-blue{ background:rgba(40,113,255,0.12); color:var(--fn-blue); }
.fn-mck-ic-green{ background:rgba(23,163,92,0.12); color:var(--fn-green); }
.fn-mck-ic-purple{ background:rgba(139,92,246,0.12); color:var(--fn-purple); }
.fn-mck-ic-teal{ background:rgba(23,201,154,0.14); color:#17c99a; }
.fn-mck-ic-navy{ background:rgba(11,26,51,0.08); color:var(--fn-navy); }
.fn-mck-kpi h4{
font-size:13.5px;
font-weight:600;
color:var(--fn-text);
margin:0 0 8px;
}
.fn-mck-kpi-val{
font-size:21px;
font-weight:800;
color:var(--fn-navy);
display:flex;
align-items:baseline;
gap:8px;
margin-bottom:4px;
}
.fn-mck-up{ color:var(--fn-green); font-size:13px; font-weight:700; }
.fn-mck-kpi small{ color:var(--fn-muted); font-size:12px; }
.fn-mck-row{
display:flex;
gap:18px;
margin-bottom:18px;
flex-wrap:wrap;
}
.fn-mck-card{
flex:1 1 260px;
background:#fff;
border:1px solid var(--fn-border);
border-radius:var(--fn-radius);
padding:22px 24px;
box-shadow:0 6px 18px rgba(10,20,50,0.04);
transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s cubic-bezier(.2,.7,.2,1);
}
.fn-mck-card:hover{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(10,20,50,0.09); }
.fn-mck-card-lg{ flex:1.7 1 380px; }
.fn-mck-card-head{
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
gap:10px;
margin-bottom:18px;
}
.fn-mck-card-head h3{
font-size:15.5px;
font-weight:700;
color:var(--fn-navy);
display:flex;
align-items:center;
gap:10px;
margin:0;
}
.fn-mck-card-ic{
width:32px; height:32px;
border-radius:50%;
display:inline-flex; align-items:center; justify-content:center;
font-size:14px;
flex-shrink:0;
}
.fn-mck-select{
font-size:12.5px;
font-weight:600;
color:var(--fn-muted);
background:var(--fn-bg-soft);
border:1px solid var(--fn-border);
border-radius:8px;
padding:7px 12px;
display:inline-flex;
align-items:center;
gap:6px;
}
.fn-mck-chart-wrap{ height:200px; position:relative; }
.fn-mck-chart-wrap-sm{ height:130px; margin-top:8px; }
.fn-mck-donut-row{
display:flex;
align-items:center;
gap:20px;
}
.fn-mck-donut-wrap{ height:120px; width:120px; flex:0 0 120px; position:relative; }
.fn-mck-legend{ list-style:none; margin:0; padding:0; flex:1; min-width:0; }
.fn-mck-legend li{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
font-size:13.5px;
color:var(--fn-text);
padding:8px 0;
white-space:nowrap;
}
.fn-mck-legend li span:not(.fn-mck-dot){ flex:1; overflow:hidden; text-overflow:ellipsis; }
.fn-mck-legend li b{ color:var(--fn-navy); font-weight:700; }
.fn-mck-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:9px; }
.fn-mck-dot-teal{ background:#17c99a; }
.fn-mck-dot-blue{ background:var(--fn-blue); }
.fn-mck-dot-red{ background:var(--fn-red); }
.fn-mck-legend li .fn-mck-dot{ vertical-align:middle; }
.fn-mck-cashflow-figure{ margin-bottom:6px; }
.fn-mck-cashflow-figure small{ color:var(--fn-muted); font-size:12.5px; }
.fn-mck-cashflow-val{ font-size:26px; font-weight:800; color:var(--fn-navy); margin:4px 0 6px; }
.fn-mck-muted{ color:var(--fn-muted); font-weight:500; margin-left:4px; }
.fn-mck-clients{ list-style:none; margin:0 0 12px; padding:0; }
.fn-mck-clients li{
display:flex;
align-items:center;
gap:12px;
font-size:14.5px;
font-weight:600;
color:var(--fn-text);
padding:7px 0;
border-bottom:1px solid var(--fn-border);
}
.fn-mck-clients li:last-child{ border-bottom:none; }
.fn-mck-clients li b{ margin-left:auto; color:var(--fn-navy); font-weight:700; }
.fn-mck-rank{
width:24px; height:24px;
border-radius:50%;
background:var(--fn-blue);
color:#fff;
font-size:12px;
font-weight:700;
display:inline-flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}
.fn-mck-link{
color:var(--fn-blue);
font-size:13.5px;
font-weight:600;
text-decoration:none;
display:inline-flex;
align-items:center;
gap:6px;
}
.fn-mck-link:hover{ color:var(--fn-blue-dark); }
/* ---- Bottom strip ---- */
.fn-mck-strip{
margin-top:34px;
background:#fff;
border:1px solid var(--fn-border);
border-radius:var(--fn-radius);
padding:22px 30px;
display:flex;
flex-wrap:wrap;
gap:22px;
box-shadow:0 6px 18px rgba(10,20,50,0.04);
}
.fn-mck-strip-item{
flex:1 1 200px;
display:flex;
align-items:center;
gap:14px;
}
.fn-mck-strip-ic{
width:44px; height:44px;
border-radius:12px;
background:rgba(40,113,255,0.1);
color:var(--fn-blue);
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
flex-shrink:0;
}
.fn-mck-strip-item b{ display:block; font-size:14.5px; color:var(--fn-navy); margin-bottom:2px; }
.fn-mck-strip-item p{ margin:0; font-size:12.5px; color:var(--fn-muted); }
/* ---- Responsive ---- */
@media (max-width:1200px){
.fn-mck-kpis{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:991px){
.fn-mck .container-fluid{ padding:0 30px; }
.fn-mck-grid{ flex-direction:column; }
.fn-mck-left, .fn-mck-right{ width:100%; min-width:0; }
.fn-mck-title{ font-size:32px; }
}
@media (max-width:640px){
.fn-mck{ padding:50px 0 34px; }
.fn-mck .container-fluid{ padding:0 20px; }
.fn-mck-title{ font-size:26px; }
.fn-mck-desc{ max-width:100%; }
.fn-mck-cta{ width:100%; justify-content:center; }
.fn-mck-kpis{ grid-template-columns:1fr 1fr; gap:12px; }
.fn-mck-row{ flex-direction:column; }
.fn-mck-donut-row{ flex-wrap:wrap; }
.fn-mck-strip{ padding:20px; }
}
@media (max-width:420px){
.fn-mck-kpis{ grid-template-columns:1fr; }
}
/* ================= FERnest Photo Hero Section (cockpit numérique) ================= */
.fn-photohero{
background:#ffffff;
padding:0;
font-family:"Inter", sans-serif;
}
.fn-photohero *{ box-sizing:border-box; }
.fn-photohero .container-fluid{ max-width:1440px; margin:0 auto; padding:0; }
.fn-photohero-card{
position:relative;
display:flex;
align-items:stretch;
background:#ffffff;
overflow:hidden;
min-height:560px;
}
.fn-photohero-dots{
position:absolute;
left:0; bottom:0;
width:420px; height:340px;
background-image:radial-gradient(var(--fn-blue) 1.6px, transparent 1.6px);
background-size:20px 20px;
opacity:.14;
-webkit-mask-image:radial-gradient(circle at 10% 100%, #000 0%, transparent 68%);
mask-image:radial-gradient(circle at 10% 100%, #000 0%, transparent 68%);
z-index:1;
pointer-events:none;
}
.fn-photohero-left{
position:relative;
z-index:2;
flex:0 0 40%;
max-width:40%;
display:flex;
flex-direction:column;
justify-content:center;
padding:60px 20px 60px 60px;
}
.fn-photohero-logo{
font-size:34px;
font-weight:800;
color:var(--fn-navy);
letter-spacing:-0.5px;
margin-bottom:22px;
}
.fn-photohero-logo span{ color:var(--fn-blue); }
.fn-photohero-rule{
display:block;
width:48px;
height:4px;
border-radius:2px;
background:var(--fn-blue);
margin-bottom:26px;
}
.fn-photohero-title{
font-size:36px;
font-weight:800;
line-height:1.2;
color:var(--fn-navy);
margin-bottom:20px;
letter-spacing:-0.5px;
}
.fn-photohero-title span{ color:var(--fn-blue); }
.fn-photohero-desc{
font-size:16px;
color:var(--fn-muted);
line-height:1.65;
max-width:380px;
margin-bottom:34px;
}
.fn-photohero-cta{
display:inline-flex;
align-items:center;
gap:10px;
background:linear-gradient(135deg,var(--fn-blue),var(--fn-blue-dark));
color:#fff;
font-weight:600;
font-size:15px;
padding:16px 28px;
border-radius:12px;
text-decoration:none;
width:fit-content;
box-shadow:0 18px 34px -14px rgba(40,113,255,.55);
transition:transform .25s ease, box-shadow .25s ease;
}
.fn-photohero-cta:hover{ transform:translateY(-2px); box-shadow:0 22px 40px -14px rgba(40,113,255,.7); color:#fff; }
.fn-photohero-right{
flex:1;
position:relative;
min-height:100%;
overflow:hidden;
}
.fn-photohero-right img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.fn-photohero-right::before{
content:"";
position:absolute;
top:0; left:0; bottom:0;
width:22%;
min-width:120px;
background:linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0) 100%);
z-index:2;
pointer-events:none;
}
@media (max-width:991px){
.fn-photohero-card{ flex-direction:column; min-height:0; }
.fn-photohero-dots{ display:none; }
.fn-photohero-left{ flex:1 1 auto; max-width:100%; padding:44px 30px 30px; }
.fn-photohero-right{ min-height:320px; }
.fn-photohero-right::before{
width:auto; height:22%; min-width:0; min-height:80px;
left:0; right:0; bottom:auto;
background:linear-gradient(to bottom, #ffffff 0%, rgba(255,255,255,0) 100%);
}
.fn-photohero-title{ font-size:28px; }
}
@media (max-width:640px){
.fn-photohero .container-fluid{ padding:0; }
.fn-photohero-left{ padding:34px 22px 26px; }
.fn-photohero-title{ font-size:22px; }
.fn-photohero-desc{ font-size:14.5px; max-width:100%; }
.fn-photohero-cta{ width:100%; justify-content:center; padding:14px 22px; font-size:14px; }
.fn-photohero-right{ min-height:220px; }
}
/* ================= FERnest Ecosystem Hero Section (ecosysteme.html) ================= */
.fn-ecohero{
background:linear-gradient(180deg,#f7f9fd 0%,#ffffff 45%);
padding:30px 0 70px;
font-family:"Inter", sans-serif;
}
.fn-ecohero *{ box-sizing:border-box; }
.fn-ecohero .container{ max-width:100%; padding-left:60px; padding-right:0; }
.fn-ecohero-tag{
font-size:12px;
font-weight:700;
letter-spacing:1.5px;
color:var(--fn-blue);
text-transform:uppercase;
display:flex;
align-items:center;
gap:8px;
margin:0 0 10px;
}
.fn-ecohero-tag .dot{ width:6px; height:6px; border-radius:50%; background:var(--fn-blue); flex:none; }
.fn-ecohero-grid{
display:flex;
align-items:flex-start;
gap:50px;
margin-bottom:44px;
}
.fn-ecohero-left{ flex:1 1 460px; min-width:320px; padding-top:50px; }
.fn-ecohero-right{ flex:1.3 1 560px; min-width:320px; }
.fn-ecohero-right img{ width:100%; height:auto; display:block; }
.fn-ecohero-title{
font-size:48px;
line-height:1.15;
font-weight:800;
letter-spacing:-1px;
color:var(--fn-text);
margin:0 0 20px;
}
.fn-ecohero-title span{ color:var(--fn-blue); }
.fn-ecohero-rule{
display:block;
width:60px; height:4px;
border-radius:4px;
background:linear-gradient(90deg,var(--fn-blue),#5b9dff);
margin:0 0 22px;
}
.fn-ecohero-desc{
font-size:16px;
line-height:1.75;
color:var(--fn-muted);
max-width:480px;
margin:0 0 32px;
}
.fn-ecohero-desc b{ color:var(--fn-blue); font-weight:700; }
.fn-ecohero-cta{ display:flex; flex-wrap:wrap; gap:14px; }
.fn-ecohero-btn-primary,
.fn-ecohero-btn-outline{
display:inline-flex;
align-items:center;
gap:9px;
padding:16px 26px;
border-radius:10px;
font-size:15px;
font-weight:700;
text-decoration:none;
white-space:nowrap;
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease;
}
.fn-ecohero-btn-primary{
background:linear-gradient(135deg,var(--fn-blue),var(--fn-blue-dark));
color:#fff;
box-shadow:0 18px 34px -14px rgba(40,113,255,.55);
}
.fn-ecohero-btn-primary:hover{
transform:translateY(-2px);
box-shadow:0 22px 40px -14px rgba(40,113,255,.7);
color:#fff;
}
.fn-ecohero-btn-outline{
background:#fff;
color:var(--fn-text);
border:1.5px solid var(--fn-border);
}
.fn-ecohero-btn-outline:hover{ border-color:var(--fn-blue); color:var(--fn-blue); }
/* ---- feature row + team panel ---- */
.fn-ecohero-row{
display:flex;
flex-wrap:wrap;
gap:16px;
margin-bottom:36px;
}
.fn-ecohero-feature{
flex:1 1 180px;
background:#fff;
border:1px solid #edf0f7;
border-radius:16px;
padding:12px;
box-shadow:0 4px 16px -6px rgba(20,40,90,.06), 0 20px 45px -28px rgba(20,40,90,.14);
transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.fn-ecohero-feature:hover{
transform:translateY(-4px);
border-color:#dbe6fb;
box-shadow:0 8px 20px -6px rgba(20,60,150,.08), 0 30px 60px -24px rgba(20,60,150,.22);
}
.fn-ecohero-ic{
width:40px; height:40px;
border-radius:11px;
display:flex; align-items:center; justify-content:center;
font-size:18px;
margin-bottom:6px;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
}
.fn-ecohero-ic.blue{ background:linear-gradient(145deg,#eaf1ff,#dbe9ff); color:var(--fn-blue); }
.fn-ecohero-ic.purple{ background:linear-gradient(145deg,#f2eefe,#e6ddfd); color:var(--fn-purple); }
.fn-ecohero-ic.green{ background:linear-gradient(145deg,#e8f9f1,#d6f5e6); color:var(--fn-green); }
.fn-ecohero-feature b{
display:block;
font-size:14px;
font-weight:700;
color:var(--fn-text);
margin-bottom:4px;
}
.fn-ecohero-feature p{
font-size:12px;
line-height:1.4;
color:var(--fn-muted);
margin:0;
}
.fn-ecohero-team{
flex:2 1 380px;
display:flex;
align-items:center;
gap:12px;
background:#fff;
border:1px solid #edf0f7;
border-radius:16px;
padding:10px;
box-shadow:0 4px 16px -6px rgba(20,40,90,.06), 0 20px 45px -28px rgba(20,40,90,.14);
transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.fn-ecohero-team:hover{
transform:translateY(-4px);
border-color:#dbe6fb;
box-shadow:0 8px 20px -6px rgba(20,60,150,.08), 0 30px 60px -24px rgba(20,60,150,.22);
}
.fn-ecohero-team-photo{
flex:0 0 80px;
width:80px; height:80px;
border-radius:12px;
overflow:hidden;
box-shadow:0 6px 16px -8px rgba(20,40,90,.3);
}
.fn-ecohero-team-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.fn-ecohero-team-text{ flex:1; min-width:0; }
.fn-ecohero-team-text h4{
font-size:15px;
font-weight:700;
color:var(--fn-text);
line-height:1.35;
margin:0 0 10px;
}
.fn-ecohero-team-text ul{
list-style:none;
margin:0 0 10px;
padding:0;
display:flex;
flex-direction:column;
gap:5px;
}
.fn-ecohero-team-text ul li{
display:flex;
align-items:center;
gap:6px;
font-size:12.5px;
color:var(--fn-text);
}
.fn-ecohero-team-text ul li i{ color:var(--fn-blue); font-size:15px; }
.fn-ecohero-team-text a{
display:inline-flex;
align-items:center;
gap:6px;
font-size:12.5px;
font-weight:700;
color:var(--fn-blue);
text-decoration:none;
transition:color .25s ease;
}
.fn-ecohero-team-text a i{ transition:transform .25s ease; }
.fn-ecohero-team-text a:hover{ color:var(--fn-blue-dark); }
.fn-ecohero-team-text a:hover i{ transform:translateX(3px); }
/* ---- stats bar ---- */
.fn-ecohero-stats{
display:flex;
flex-wrap:wrap;
gap:22px;
padding-top:30px;
border-top:1px solid var(--fn-border);
}
.fn-ecohero-stat{
flex:1 1 200px;
display:flex;
align-items:center;
gap:12px;
}
.fn-ecohero-stat i{ font-size:26px; color:var(--fn-blue); flex:none; }
.fn-ecohero-stat div{ display:flex; flex-direction:column; }
.fn-ecohero-stat b{ font-size:19px; font-weight:800; color:var(--fn-text); line-height:1.2; }
.fn-ecohero-stat span{ font-size:12px; color:var(--fn-muted); }
@media (max-width:1199px){
.fn-ecohero-title{ font-size:40px; }
}
@media (max-width:991px){
.fn-ecohero-grid{ flex-direction:column; }
.fn-ecohero-left, .fn-ecohero-right{ width:100%; min-width:0; }
.fn-ecohero-title{ font-size:34px; }
.fn-ecohero-desc{ max-width:none; }
.fn-ecohero-team{ flex:1 1 100%; }
}
@media (max-width:767px){
.fn-ecohero-row{ flex-direction:column; }
.fn-ecohero-feature, .fn-ecohero-team{ flex:1 1 100%; }
}
@media (max-width:575px){
.fn-ecohero-title{ font-size:28px; }
.fn-ecohero-cta{ flex-direction:column; }
.fn-ecohero-btn-primary, .fn-ecohero-btn-outline{ width:100%; justify-content:center; }
.fn-ecohero-team{ flex-direction:column; align-items:flex-start; }
.fn-ecohero-team-photo{ width:100%; height:160px; }
.fn-ecohero-stats{ flex-direction:column; gap:16px; }
}
/* ================= FERnest Ecosystem Features Section (ecosysteme.html) ================= */
.fn-ecofeat{
background:#ffffff;
padding:100px 0 110px;
font-family:"Inter", sans-serif;
}
.fn-ecofeat *{ box-sizing:border-box; }
.fn-ecofeat .container{ max-width:1440px; padding-left:0; padding-right:0; }
.fn-ecofeat-head{
display:flex;
justify-content:center;
margin-bottom:56px;
}
.fn-ecofeat-brand{ flex:0 0 300px; max-width:300px; }
.fn-ecofeat-logo{
font-size:46px;
font-weight:800;
line-height:1;
color:var(--fn-text);
letter-spacing:-1px;
font-family:"Inter", sans-serif;
}
.fn-ecofeat-logo span{ color:var(--fn-blue); }
.fn-ecofeat-brand-line{
width:100%;
height:1px;
background:var(--fn-border);
margin:18px 0 12px;
}
.fn-ecofeat-brand-tag{
font-size:11px;
font-weight:600;
letter-spacing:1px;
color:var(--fn-muted);
margin:0;
display:flex;
align-items:center;
gap:6px;
flex-wrap:wrap;
}
.fn-ecofeat-brand-tag .dot{
width:4px; height:4px; border-radius:50%;
background:var(--fn-blue);
display:inline-block;
flex:0 0 auto;
}
.fn-ecofeat-divider{
width:1px;
align-self:stretch;
background:var(--fn-border);
flex:0 0 1px;
}
.fn-ecofeat-titleblock{ max-width:640px; text-align:center; }
.fn-ecofeat-titleblock h2{
font-size:42px;
line-height:1.18;
font-weight:700;
color:var(--fn-text);
margin:0 0 14px;
}
.fn-ecofeat-titleblock h2 span{ color:var(--fn-blue); }
.fn-ecofeat-titleblock p{
font-size:16px;
color:var(--fn-muted);
margin:0;
line-height:1.7;
}
.fn-ecofeat-titleblock p b{ color:var(--fn-blue); font-weight:700; }
/* ---- Cards grid ---- */
.fn-ecofeat-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:22px;
align-items:stretch;
}
.fn-ecofeat-card{
position:relative;
display:flex;
flex-direction:column;
background:#ffffff;
border:1px solid #edf0f7;
border-radius:20px;
padding:22px;
box-shadow:0 4px 16px -6px rgba(20,40,90,.06), 0 20px 45px -28px rgba(20,40,90,.14);
transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.fn-ecofeat-card:hover{
transform:translateY(-6px);
border-color:#dbe6fb;
box-shadow:0 8px 20px -6px rgba(20,60,150,.08), 0 30px 60px -24px rgba(20,60,150,.22);
}
.fn-ecofeat-num{
position:absolute;
top:4px; left:20px;
width:34px; height:34px;
border-radius:50%;
background:linear-gradient(135deg,var(--fn-blue),var(--fn-blue-dark));
color:#fff;
font-size:12px;
font-weight:700;
letter-spacing:.5px;
display:flex;
align-items:center;
justify-content:center;
z-index:2;
}
.fn-ecofeat-row{
display:flex;
align-items:flex-start;
gap:16px;
margin-top:30px;
}
.fn-ecofeat-icon{
flex:0 0 112px;
width:112px;
}
.fn-ecofeat-icon img{
width:100%;
height:auto;
display:block;
}
.fn-ecofeat-body{ flex:1; min-width:0; }
.fn-ecofeat-body h3{
font-size:18px;
font-weight:700;
color:var(--fn-text);
margin:0 0 8px;
letter-spacing:-0.2px;
line-height:1.25;
}
.fn-ecofeat-body h3 span{ color:var(--fn-blue); }
.fn-ecofeat-body p{
font-size:13px;
line-height:1.5;
color:var(--fn-muted);
margin:0 0 10px;
}
.fn-ecofeat-list{
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap:6px;
}
.fn-ecofeat-list li{
display:flex;
align-items:flex-start;
gap:8px;
font-size:12.5px;
line-height:1.4;
color:var(--fn-text);
}
.fn-ecofeat-list li i{
flex:none;
color:var(--fn-blue);
font-size:16px;
margin-top:2px;
}
.fn-ecofeat-pill{
margin-top:14px;
min-height:42px;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
background:#eaf1ff;
color:var(--fn-blue);
font-size:12.5px;
font-weight:700;
padding:11px 14px;
border-radius:10px;
text-align:center;
}
/* ---- Bottom trust bar ---- */
.fn-ecofeat-bar{
margin-top:50px;
background:#ffffff;
border:1px solid var(--fn-border);
border-radius:20px;
padding:26px 10px;
display:flex;
align-items:flex-start;
box-shadow:0 10px 24px -16px rgba(20,40,90,.16);
}
.fn-ecofeat-bar-item{
flex:1;
display:flex;
align-items:flex-start;
gap:10px;
padding:0 18px;
border-right:1px solid var(--fn-border);
}
.fn-ecofeat-bar-item:last-child{ border-right:none; }
.fn-ecofeat-bar-item .ic{
flex:none;
color:var(--fn-blue);
font-size:25px;
margin-top:2px;
}
.fn-ecofeat-bar-item b{
display:block;
font-size:13.5px;
font-weight:700;
color:var(--fn-text);
margin-bottom:2px;
}
.fn-ecofeat-bar-item p{
font-size:11.5px;
line-height:1.4;
color:var(--fn-muted);
margin:0;
}
@media (max-width:1199px){
.fn-ecofeat-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:991px){
.fn-ecofeat-bar{ flex-wrap:wrap; row-gap:18px; }
.fn-ecofeat-bar-item{ flex:1 1 45%; border-right:none; }
}
@media (max-width:575px){
.fn-ecofeat{ padding:70px 0 80px; }
.fn-ecofeat-grid{ grid-template-columns:1fr; }
.fn-ecofeat-titleblock h2{ font-size:28px; }
.fn-ecofeat-row{ flex-direction:column; }
.fn-ecofeat-icon{ width:120px; }
.fn-ecofeat-bar-item{ flex:1 1 100%; }
}
/* ================= FERnest Enterprise Hero Section (ecosysteme.html) ================= */
.fn-enthero{
font-family:"Inter", sans-serif;
background:#ffffff;
overflow:hidden;
}
.fn-enthero *{ box-sizing:border-box; }
.fn-enthero-grid{
display:flex;
align-items:stretch;
}
.fn-enthero-left{
flex:0 0 420px;
max-width:420px;
background:#f5f6fa;
display:flex;
flex-direction:column;
justify-content:center;
padding:70px 56px;
}
.fn-enthero-right{
flex:1;
min-width:0;
position:relative;
}
.fn-enthero-right img{
width:100%;
height:100%;
min-height:640px;
object-fit:cover;
display:block;
}
.fn-enthero-logo{
font-size:32px;
font-weight:800;
line-height:1;
color:var(--fn-text);
letter-spacing:-.5px;
margin-bottom:6px;
}
.fn-enthero-logo span{ color:var(--fn-blue); }
.fn-enthero-tag{
font-size:13px;
font-weight:700;
letter-spacing:.28em;
color:var(--fn-blue);
margin:0 0 22px;
}
.fn-enthero-rule{
display:block;
width:56px; height:3px;
border-radius:3px;
background:var(--fn-blue);
margin:0 0 26px;
}
.fn-enthero-title{
font-size:32px;
line-height:1.28;
font-weight:800;
letter-spacing:-.5px;
color:var(--fn-text);
margin:0 0 24px;
}
.fn-enthero-title span{ color:var(--fn-blue); }
.fn-enthero-desc{
font-size:15px;
line-height:1.7;
color:var(--fn-muted);
margin:0 0 18px;
}
.fn-enthero-desc b{ color:var(--fn-blue); font-weight:700; }
.fn-enthero-cta{ display:flex; flex-direction:column; gap:12px; margin-top:14px; }
.fn-enthero-btn-primary,
.fn-enthero-btn-outline{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding:15px 22px;
border-radius:10px;
font-size:15px;
font-weight:700;
text-decoration:none;
transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.fn-enthero-btn-primary{
background:linear-gradient(135deg,var(--fn-blue),var(--fn-blue-dark));
color:#fff;
box-shadow:0 18px 34px -14px rgba(40,113,255,.55);
}
.fn-enthero-btn-primary:hover{
transform:translateY(-2px);
box-shadow:0 22px 40px -14px rgba(40,113,255,.7);
color:#fff;
}
.fn-enthero-btn-outline{
background:#fff;
color:var(--fn-blue);
border:1.5px solid var(--fn-blue);
}
.fn-enthero-btn-outline:hover{ background:rgba(40,113,255,.06); }
/* ---- floating annotation cards ---- */
.fn-enthero-float{
position:absolute;
width:186px;
display:flex;
align-items:center;
gap:10px;
background:#f5f6f9;
border-radius:12px;
padding:11px 13px;
box-shadow:0 4px 16px -6px rgba(20,40,90,.06), 0 20px 45px -28px rgba(20,40,90,.14);
z-index:3;
transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, background .3s ease;
}
.fn-enthero-float:hover{
transform:translateY(-4px);
background:#ffffff;
box-shadow:0 8px 20px -6px rgba(20,60,150,.08), 0 30px 60px -24px rgba(20,60,150,.22);
}
.fn-enthero-float:hover .ic{ transform:scale(1.08); }
.fn-enthero-float .ic{
flex:none;
width:42px; height:42px;
border-radius:11px;
transition:transform .3s ease;
background:linear-gradient(135deg,#eaf0ff,#dde9ff);
color:var(--fn-blue);
display:flex; align-items:center; justify-content:center;
font-size:19px;
}
.fn-enthero-float b{
display:block;
font-size:12.5px;
font-weight:700;
color:var(--fn-text);
line-height:1.3;
}
.fn-enthero-float span{
display:block;
font-size:10.5px;
color:var(--fn-muted);
line-height:1.3;
}
.fn-enthero-float.f-collab{ top:6%; left:24px; }
.fn-enthero-float.f-agents{ top:30%; left:8px; }
.fn-enthero-float.f-prod{ top:54%; left:24px; }
.fn-enthero-float.f-market{ top:4%; right:24px; }
.fn-enthero-float.f-time{ top:24%; right:8px; }
.fn-enthero-float.f-partners{ top:44%; right:24px; }
.fn-enthero-float.f-docs{ top:64%; right:8px; }
/* ---- bottom feature strip ---- */
.fn-enthero-strip{
display:flex;
flex-wrap:wrap;
background:#ffffff;
border-top:1px solid var(--fn-border);
}
.fn-enthero-strip-item{
flex:1 1 190px;
padding:32px 24px;
border-right:1px solid var(--fn-border);
transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.fn-enthero-strip-item:last-child{ border-right:none; }
.fn-enthero-strip-item:hover{ transform:translateY(-4px); }
.fn-enthero-strip-item .ic{
width:50px; height:50px;
border-radius:13px;
background:linear-gradient(135deg,#eaf0ff,#dde9ff);
color:var(--fn-blue);
display:flex; align-items:center; justify-content:center;
font-size:23px;
margin-bottom:16px;
transition:transform .3s ease;
}
.fn-enthero-strip-item:hover .ic{ transform:scale(1.08) rotate(-4deg); }
.fn-enthero-strip-item b{
display:block;
font-size:14.5px;
font-weight:700;
color:var(--fn-text);
margin-bottom:8px;
}
.fn-enthero-strip-item p{
font-size:12.5px;
line-height:1.55;
color:var(--fn-muted);
margin:0;
}
@media (max-width:1199px){
.fn-enthero-float{ width:160px; padding:9px 11px; }
.fn-enthero-float b{ font-size:11.5px; }
.fn-enthero-float span{ font-size:10px; }
}
@media (max-width:991px){
.fn-enthero-grid{ flex-direction:column; }
.fn-enthero-left{ max-width:100%; padding:56px 24px; }
.fn-enthero-right img{ min-height:420px; }
.fn-enthero-float{ display:none; }
.fn-enthero-strip-item{ flex:1 1 45%; border-right:none; border-bottom:1px solid var(--fn-border); }
}
@media (max-width:575px){
.fn-enthero-title{ font-size:26px; }
.fn-enthero-strip-item{ flex:1 1 100%; }
}
/* ================= FERnest Communities Hero Section (commu.html) ================= */
.fn-commhero{
font-family:"Inter", sans-serif;
background:#ffffff;
overflow:hidden;
}
.fn-commhero *{ box-sizing:border-box; }
.fn-commhero-grid{
display:flex;
align-items:stretch;
}
.fn-commhero-left{
flex:0 0 420px;
max-width:420px;
background:#f5f6fa;
display:flex;
flex-direction:column;
justify-content:center;
padding:70px 56px;
}
.fn-commhero-right{
flex:1;
min-width:0;
position:relative;
}
.fn-commhero-right > img{
width:100%;
height:100%;
min-height:640px;
object-fit:cover;
display:block;
}
.fn-commhero-tag{
font-size:12px;
font-weight:700;
letter-spacing:.28em;
color:var(--fn-blue);
display:flex;
align-items:center;
gap:8px;
margin:0 0 20px;
}
.fn-commhero-tag .dot{ width:6px; height:6px; border-radius:50%; background:var(--fn-blue); flex:none; }
.fn-commhero-title{
font-size:34px;
line-height:1.25;
font-weight:800;
letter-spacing:-.5px;
color:var(--fn-text);
margin:0 0 18px;
}
.fn-commhero-title span{ color:var(--fn-blue); }
.fn-commhero-rule{
display:block;
width:56px; height:4px;
border-radius:4px;
background:var(--fn-blue);
margin:0 0 24px;
}
.fn-commhero-desc{
font-size:15px;
line-height:1.7;
color:var(--fn-muted);
margin:0 0 16px;
}
.fn-commhero-cta{ margin-top:10px; }
.fn-commhero-btn{
display:inline-flex;
align-items:center;
gap:10px;
background:linear-gradient(135deg,var(--fn-blue),var(--fn-blue-dark));
color:#fff;
padding:11px 28px;
border-radius:10px;
font-size:15px;
font-weight:700;
text-decoration:none;
white-space:nowrap;
box-shadow:0 18px 34px -14px rgba(40,113,255,.55);
transition:transform .25s ease, box-shadow .25s ease;
}
.fn-commhero-btn:hover{ transform:translateY(-2px); box-shadow:0 22px 40px -14px rgba(40,113,255,.7); color:#fff; }
/* ---- floating community cards ---- */
.fn-commhero-float{
position:absolute;
width:210px;
background:#fff;
border-radius:14px;
padding:14px;
box-shadow:0 14px 28px -12px rgba(6,12,30,.35);
z-index:3;
}
.fn-commhero-float-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.fn-commhero-float .ic{
flex:none;
width:46px; height:46px;
border-radius:10px;
background:transparent;
color:var(--fn-blue);
display:flex; align-items:center; justify-content:center;
font-size:25px;
}
.fn-commhero-float-head b{ display:block; font-size:13.5px; font-weight:700; color:var(--fn-text); }
.fn-commhero-float-head small{ display:block; font-size:11px; color:var(--fn-muted); }
.fn-commhero-avatars{ display:flex; align-items:center; }
.fn-commhero-avatars img{
width:26px; height:26px;
border-radius:50%;
border:2px solid #fff;
object-fit:cover;
margin-left:-8px;
box-shadow:0 0 0 1px var(--fn-border);
}
.fn-commhero-avatars img:first-child{ margin-left:0; }
.fn-commhero-avatars .more{
margin-left:8px;
font-size:11px;
font-weight:700;
color:var(--fn-muted);
}
.fn-commhero-float.f-clients{ top:5%; left:24px; }
.fn-commhero-float.f-partners{ top:5%; right:24px; }
.fn-commhero-float.f-collab{ top:40%; left:8px; }
.fn-commhero-float.f-experts{ top:40%; right:8px; }
/* ---- name-tag pins ---- */
.fn-commhero-pin{
position:absolute;
display:flex;
flex-direction:column;
align-items:center;
gap:6px;
z-index:3;
}
.fn-commhero-pin .fn-collective-avatar-photo{ width:56px; height:56px; }
.fn-commhero-pin .fn-collective-avatar-tag{ white-space:nowrap; }
.fn-commhero-pin.pin-sophie{ bottom:17%; left:15%; }
.fn-commhero-pin.pin-marc{ bottom:14%; left:33%; }
.fn-commhero-pin.pin-emma{ bottom:17%; left:52%; }
.fn-commhero-pin.pin-julien{ bottom:14%; left:69%; }
/* ---- Agents IA badge ---- */
.fn-commhero-agents{
position:absolute;
bottom:4%;
left:50%;
transform:translateX(-50%);
display:flex;
align-items:center;
gap:10px;
background:linear-gradient(135deg,var(--fn-blue),var(--fn-blue-dark));
color:#fff;
border-radius:12px;
padding:10px 18px;
box-shadow:0 14px 28px -10px rgba(40,113,255,.6);
z-index:4;
white-space:nowrap;
}
.fn-commhero-agents .ic{
width:30px; height:30px;
border-radius:8px;
background:rgba(255,255,255,.18);
display:flex; align-items:center; justify-content:center;
font-size:14px;
}
.fn-commhero-agents b{ display:block; font-size:13px; font-weight:700; }
.fn-commhero-agents span{ display:flex; align-items:center; gap:5px; font-size:11px; color:rgba(255,255,255,.85); }
.fn-commhero-agents span .dot{ width:6px; height:6px; border-radius:50%; background:#22d3a8; display:inline-block; }
/* ---- bottom feature strip ---- */
.fn-commhero-strip{
display:flex;
flex-wrap:wrap;
background:#ffffff;
border-top:1px solid var(--fn-border);
}
.fn-commhero-strip-item{
flex:1 1 180px;
padding:32px 24px;
border-right:1px solid var(--fn-border);
transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.fn-commhero-strip-item:last-child{ border-right:none; }
.fn-commhero-strip-item:hover{ transform:translateY(-4px); }
.fn-commhero-strip-item .ic{
display:block;
font-size:32px;
color:var(--fn-blue);
margin-bottom:14px;
transition:transform .3s ease;
}
.fn-commhero-strip-item:hover .ic{ transform:scale(1.08) rotate(-4deg); }
.fn-commhero-strip-item b{
display:block;
font-size:14.5px;
font-weight:700;
color:var(--fn-text);
margin-bottom:8px;
}
.fn-commhero-strip-item p{
font-size:12.5px;
line-height:1.55;
color:var(--fn-muted);
margin:0;
}
@media (max-width:1300px){
.fn-commhero-float{ width:180px; padding:11px; }
.fn-commhero-pin{ display:none; }
}
@media (max-width:991px){
.fn-commhero-grid{ flex-direction:column; }
.fn-commhero-left{ max-width:100%; padding:56px 24px; }
.fn-commhero-right > img{ min-height:420px; }
.fn-commhero-float, .fn-commhero-agents{ display:none; }
.fn-commhero-strip-item{ flex:1 1 45%; border-right:none; border-bottom:1px solid var(--fn-border); }
}
@media (max-width:575px){
.fn-commhero-title{ font-size:26px; }
.fn-commhero-strip-item{ flex:1 1 100%; }
}
/* ================= FERnest Communities Hub Section (commu.html) ================= */
.fn-commhub{
font-family:"Inter", sans-serif;
background:#f9fafc;
overflow:hidden;
}
.fn-commhub *{ box-sizing:border-box; }
.fn-commhub .container-fluid{ padding:0; }
.fn-commhub-grid{
display:flex;
align-items:stretch;
}
.fn-commhub-left{
flex:0 0 380px;
min-width:300px;
display:flex;
flex-direction:column;
justify-content:center;
padding:70px 50px;
}
.fn-commhub-left .fn-commhero-title{ font-size:32px; }
.fn-commhub-center{
flex:1.7;
position:relative;
display:grid;
grid-template-columns:1fr 1fr;
grid-template-rows:1fr 1fr;
gap:40px 56px;
align-items:center;
padding:56px 56px;
}
.fn-commhub-lines{
position:absolute;
inset:0;
width:100%;
height:100%;
z-index:1;
pointer-events:none;
}
.fn-commhub-lines path{ fill:none; stroke:var(--fn-blue); stroke-width:.3; opacity:.5; }
.fn-commhub-lines circle{ fill:var(--fn-blue); opacity:.7; }
.fn-commhub-circle{
position:absolute;
top:50%; left:50%;
transform:translate(-50%,-50%);
width:190px; height:190px;
z-index:2;
display:flex;
align-items:center;
justify-content:center;
}
.fn-commhub-ring{
position:absolute;
inset:0;
border-radius:50%;
background:#fff;
border:10px solid #eaf1ff;
box-shadow:0 0 0 10px rgba(40,113,255,.06), 0 20px 45px -20px rgba(20,40,90,.25);
}
.fn-commhub-logo{
position:relative;
z-index:2;
font-size:27px;
font-weight:800;
letter-spacing:-.5px;
color:var(--fn-blue);
}
.fn-commhub-logo b{ color:var(--fn-text); font-weight:800; }
.fn-commhub-logo-img{
position:relative;
z-index:2;
width:135px;
height:auto;
display:block;
}
.fn-commhub-card{
position:relative;
z-index:2;
background:#fff;
border-radius:16px;
padding:20px 22px;
box-shadow:0 4px 16px -6px rgba(20,40,90,.06), 0 20px 45px -28px rgba(20,40,90,.16);
transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.fn-commhub-card:hover{
transform:translateY(-4px);
box-shadow:0 8px 20px -6px rgba(20,60,150,.1), 0 30px 60px -24px rgba(20,60,150,.24);
}
.fn-commhub-card .ic{
width:48px; height:48px;
border-radius:10px;
background:transparent;
color:var(--fn-blue);
display:flex; align-items:center; justify-content:center;
font-size:26px;
margin-bottom:12px;
}
.fn-commhub-card h4{
font-size:15px;
font-weight:700;
color:var(--fn-text);
margin:0 0 6px;
line-height:1.3;
}
.fn-commhub-card p{
font-size:12.5px;
line-height:1.5;
color:var(--fn-muted);
margin:0 0 14px;
}
.fn-commhub-avatars{ display:flex; }
.fn-commhub-avatars img,
.fn-commhub-avatars .avatar-ic{
width:28px; height:28px;
border-radius:50%;
border:2px solid #fff;
object-fit:cover;
margin-left:-8px;
box-shadow:0 0 0 1px var(--fn-border);
}
.fn-commhub-avatars .avatar-ic{
background:#eaf1ff;
color:var(--fn-blue);
display:flex;
align-items:center;
justify-content:center;
font-size:13px;
}
.fn-commhub-avatars img:first-child,
.fn-commhub-avatars .avatar-ic:first-child{ margin-left:0; }
.fn-commhub-right{
flex:0 0 420px;
min-width:300px;
position:relative;
}
.fn-commhub-right > img{
width:100%; height:100%;
min-height:560px;
object-fit:cover;
display:block;
border-bottom-left-radius:60px;
}
.fn-commhub-stat{
position:absolute;
left:24px; bottom:24px;
width:220px;
background:#fff;
border-radius:14px;
padding:18px 20px;
box-shadow:0 18px 36px -14px rgba(6,12,30,.4);
z-index:3;
}
.fn-commhub-stat b{
display:block;
font-size:27px;
font-weight:800;
color:var(--fn-blue);
margin-bottom:4px;
}
.fn-commhub-stat span{
display:block;
font-size:12px;
line-height:1.4;
color:var(--fn-muted);
margin-bottom:10px;
}
.fn-commhub-stat-chart{ width:100%; height:34px; display:block; }
@media (max-width:1400px){
.fn-commhub-right{ flex:0 0 340px; }
}
@media (max-width:1199px){
.fn-commhub-grid{ flex-direction:column; }
.fn-commhub-left, .fn-commhub-right{ flex:1 1 auto; width:100%; }
.fn-commhub-right > img{ min-height:360px; }
.fn-commhub-center{ padding:40px 24px 70px; }
}
@media (max-width:767px){
.fn-commhub-center{ grid-template-columns:1fr; grid-template-rows:none; gap:70px 0; padding:100px 20px 40px; }
.fn-commhub-lines{ display:none; }
.fn-commhub-circle{ top:0; }
}
/* ================= FERnest Communities Journey Section (commu.html) ================= */
.fn-commjourney{
position:relative;
isolation:isolate;
overflow:hidden;
font-family:"Inter", sans-serif;
background:linear-gradient(180deg,#f7f9fc 0%,#eef3fb 100%);
padding:0 0 100px;
}
.fn-commjourney *{ box-sizing:border-box; }
.fn-commjourney::before,
.fn-commjourney::after{
content:"";
position:absolute;
border-radius:50%;
z-index:0;
pointer-events:none;
}
.fn-commjourney::before{
top:-140px; left:-120px;
width:420px; height:420px;
background:radial-gradient(circle, rgba(40,113,255,.12), transparent 70%);
}
.fn-commjourney::after{
bottom:-160px; right:-110px;
width:460px; height:460px;
background:radial-gradient(circle, rgba(40,113,255,.09), transparent 70%);
}
.fn-commjourney .container{ position:relative; z-index:1; max-width:1360px; }
.fn-commjourney-left{ max-width:600px; padding-top:48px; margin-bottom:50px; }
.fn-commjourney-flow{
display:flex;
align-items:center;
gap:14px;
margin-bottom:34px;
}
.fn-commjourney-photo{
position:relative;
flex:0 0 220px;
border-radius:20px;
overflow:hidden;
box-shadow:0 24px 50px -22px rgba(20,40,90,.32);
transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;
}
.fn-commjourney-photo:hover{
transform:translateY(-6px);
box-shadow:0 30px 60px -18px rgba(20,40,90,.42);
}
.fn-commjourney-photo img{
width:100%;
height:380px;
object-fit:cover;
display:block;
transition:transform .5s ease;
}
.fn-commjourney-photo:hover img{ transform:scale(1.06); }
.fn-commjourney-photo-tag{
position:absolute;
top:16px; left:50%;
transform:translateX(-50%);
text-align:center;
background:#a9bfd1;
color:#1c2b3a;
font-size:12.5px;
font-weight:700;
padding:8px 14px;
border-radius:8px;
box-shadow:0 8px 16px -8px rgba(6,12,30,.35);
}
.fn-commjourney-photo-badge{
position:absolute;
bottom:16px; left:50%;
transform:translateX(-50%);
width:62px; height:62px;
border-radius:50%;
background:#fff;
color:var(--fn-blue);
display:flex; align-items:center; justify-content:center;
font-size:34px;
box-shadow:0 0 0 4px #fff, 0 10px 24px -10px rgba(6,12,30,.4);
}
.fn-commjourney-steps{
flex:1;
align-self:center;
margin-top:22px;
display:flex;
align-items:flex-start;
justify-content:center;
gap:8px;
flex-wrap:wrap;
}
.fn-commjourney-step{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
width:104px;
}
.fn-commjourney-circle{
width:64px; height:64px;
border-radius:50%;
background:#fff;
border:3px solid #d7e3fb;
color:var(--fn-blue);
display:flex; align-items:center; justify-content:center;
font-size:24px;
margin-bottom:12px;
box-shadow:0 10px 22px -14px rgba(20,40,90,.2);
transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.fn-commjourney-step:hover .fn-commjourney-circle{
transform:translateY(-4px);
border-color:var(--fn-blue);
box-shadow:0 14px 26px -12px rgba(40,113,255,.4);
}
.fn-commjourney-step b{
font-size:12.5px;
font-weight:700;
color:var(--fn-text);
line-height:1.3;
}
.fn-commjourney-arrow{
flex:none;
color:var(--fn-blue);
font-size:15px;
margin-top:24px;
}
.fn-commjourney-arrow-end{
align-self:center;
margin-top:0;
font-size:15px;
}
.fn-commjourney-dashline{
position:relative;
display:flex;
align-items:center;
gap:14px;
max-width:760px;
margin:0 auto 56px;
}
.fn-commjourney-dashline::before{
content:"";
position:absolute;
left:20px; right:20px; top:50%;
border-top:1.5px dashed #b9c8e8;
z-index:0;
}
.fn-commjourney-dashline .arrow-l,
.fn-commjourney-dashline .arrow-r{
position:relative;
z-index:1;
color:var(--fn-blue);
font-size:12px;
background:#f7f9fc;
}
.fn-commjourney-dashline .dl-text{
position:relative;
z-index:1;
margin:0 auto;
background:#f7f9fc;
padding:0 14px;
font-size:13px;
font-weight:600;
color:var(--fn-blue);
white-space:nowrap;
}
.fn-commjourney-bar{
background:#fff;
border-radius:24px;
padding:36px 40px;
display:flex;
gap:24px;
box-shadow:0 4px 16px -6px rgba(20,40,90,.06), 0 20px 45px -28px rgba(20,40,90,.14);
}
.fn-commjourney-bar-item{
flex:1;
min-width:0;
padding:12px;
border-radius:16px;
transition:background .3s ease, transform .3s cubic-bezier(.2,.7,.3,1);
}
.fn-commjourney-bar-item:hover{
background:#f4f8ff;
transform:translateY(-4px);
}
.fn-commjourney-bar-item .ic{
width:44px; height:44px;
border-radius:12px;
background:#fff;
border:3px solid #d7e3fb;
color:var(--fn-blue);
display:flex; align-items:center; justify-content:center;
font-size:20px;
margin-bottom:16px;
box-shadow:0 8px 18px -12px rgba(20,40,90,.15);
transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.fn-commjourney-bar-item:hover .ic{
transform:scale(1.08) translateY(-2px);
border-color:var(--fn-blue);
box-shadow:0 12px 22px -10px rgba(40,113,255,.35);
}
.fn-commjourney-bar-item b{
display:block;
font-size:14.5px;
font-weight:700;
color:var(--fn-text);
margin-bottom:8px;
}
.fn-commjourney-bar-item p{
font-size:12.5px;
line-height:1.55;
color:var(--fn-muted);
margin:0;
}
@media (max-width:1300px){
.fn-commjourney-photo{ display:none; }
}
@media (max-width:991px){
.fn-commjourney-bar{ flex-wrap:wrap; }
.fn-commjourney-bar-item{ flex:1 1 45%; }
.fn-commjourney-dashline .dl-text{ white-space:normal; text-align:center; }
}
@media (max-width:575px){
.fn-commjourney-step{ width:84px; }
.fn-commjourney-circle{ width:52px; height:52px; font-size:19px; }
.fn-commjourney-bar{ padding:28px 24px; }
.fn-commjourney-bar-item{ flex:1 1 100%; }
}
/* ================= FERnest Collective Intelligence Section (commu.html) ================= */
.fn-collective{
position:relative;
isolation:isolate;
overflow:hidden;
background:#ffffff;
padding:0 0 100px;
font-family:"Inter", sans-serif;
}
.fn-collective *{ box-sizing:border-box; }
.fn-collective .container{ max-width:1400px; }
.fn-collective-top{
display:flex;
align-items:center;
gap:44px;
background:#f6f8fc;
border-radius:28px;
padding:36px;
margin-bottom:40px;
}
.fn-collective-left{ flex:0 0 400px; min-width:300px; }
.fn-collective-right{ flex:1; min-width:0; }
.fn-collective-num{
display:inline-flex;
align-items:center;
justify-content:center;
width:44px; height:44px;
border-radius:50%;
background:linear-gradient(135deg,var(--fn-blue),var(--fn-blue-dark));
color:#fff;
font-size:19px;
font-weight:800;
margin-bottom:22px;
box-shadow:0 12px 24px -10px rgba(40,113,255,.5);
}
.fn-collective-title{
font-size:25px;
line-height:1.35;
font-weight:800;
letter-spacing:.4px;
text-transform:uppercase;
color:var(--fn-text);
margin:0 0 18px;
}
.fn-collective-title span{ color:var(--fn-blue); }
.fn-collective-rule{
display:block;
width:56px; height:4px;
border-radius:4px;
background:var(--fn-blue);
margin:0 0 22px;
}
.fn-collective-desc{
font-size:15px;
line-height:1.75;
color:var(--fn-muted);
max-width:380px;
margin:0 0 32px;
}
.fn-collective-features{
display:flex;
gap:16px;
}
.fn-collective-feature{
flex:1;
min-width:0;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:10px;
}
.fn-collective-fic{
width:74px; height:74px;
border-radius:18px;
background:#fff;
border:2px solid #dce6f8;
color:var(--fn-blue);
display:flex; align-items:center; justify-content:center;
font-size:32px;
box-shadow:0 8px 18px -12px rgba(20,40,90,.18);
transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.fn-collective-feature:hover .fn-collective-fic{
transform:translateY(-3px);
border-color:var(--fn-blue);
box-shadow:0 12px 22px -10px rgba(40,113,255,.35);
}
.fn-collective-feature b{
font-size:13px;
font-weight:700;
color:var(--fn-text);
line-height:1.4;
}
.fn-collective-photo{
position:relative;
border-radius:20px;
overflow:hidden;
}
.fn-collective-photo img{
width:100%;
height:auto;
display:block;
}
.fn-collective-avatars{
position:absolute;
top:24px; left:0; right:0;
display:flex;
justify-content:center;
gap:16px;
padding:0 20px;
}
.fn-collective-avatar{
display:flex;
flex-direction:column;
align-items:center;
width:94px;
}
.fn-collective-avatar-photo{
width:84px; height:84px;
border-radius:50%;
background:#cfe0fb;
display:flex; align-items:center; justify-content:center;
overflow:hidden;
box-shadow:0 10px 22px -10px rgba(6,12,30,.4);
}
.fn-collective-avatar-photo img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.4); }
.fn-collective-lines{
position:absolute;
inset:0;
width:100%;
height:100%;
z-index:1;
pointer-events:none;
}
.fn-collective-lines path{
fill:none;
stroke:#3b82f6;
stroke-width:.3;
stroke-linecap:round;
stroke-dasharray:1.4 1.2;
opacity:.8;
}
.fn-collective-lines circle{ fill:#3b82f6; opacity:.9; }
.fn-collective-avatar-tag{
display:flex;
flex-direction:column;
align-items:center;
background:#fff;
border-radius:8px;
padding:3px 10px;
box-shadow:0 8px 16px -8px rgba(6,12,30,.3);
white-space:nowrap;
}
.fn-collective-avatar-tag b{ font-size:11.5px; font-weight:700; color:var(--fn-text); }
.fn-collective-avatar-tag small{ font-size:9.5px; color:var(--fn-muted); }
.fn-collective-stats{
background:#fff;
border:1px solid var(--fn-border);
border-radius:22px;
padding:30px 36px;
display:flex;
gap:20px;
box-shadow:0 4px 16px -6px rgba(20,40,90,.06), 0 20px 45px -28px rgba(20,40,90,.14);
}
.fn-collective-stat{
flex:1;
min-width:0;
display:flex;
align-items:center;
gap:14px;
}
.fn-collective-stat .ic{
flex:none;
width:44px; height:44px;
border-radius:12px;
background:#eaf1ff;
color:var(--fn-blue);
display:flex; align-items:center; justify-content:center;
font-size:19px;
}
.fn-collective-stat b{
display:block;
font-size:19px;
font-weight:800;
color:var(--fn-blue);
line-height:1.2;
}
.fn-collective-stat span{
display:block;
font-size:11.5px;
line-height:1.4;
color:var(--fn-muted);
}
@media (max-width:1300px){
.fn-collective-avatars{ display:none; }
}
@media (max-width:991px){
.fn-collective-top{ flex-direction:column; padding:24px; }
.fn-collective-left, .fn-collective-right{ width:100%; }
.fn-collective-stats{ flex-wrap:wrap; }
.fn-collective-stat{ flex:1 1 45%; }
}
@media (max-width:575px){
.fn-collective-features{ flex-wrap:wrap; }
.fn-collective-feature{ flex:1 1 40%; }
.fn-collective-stat{ flex:1 1 100%; }
}
/* ================= FERnest Network Section (commu.html) ================= */
.fn-network{
font-family:"Inter", sans-serif;
background:#ffffff;
padding:0 0 100px;
}
.fn-network *{ box-sizing:border-box; }
.fn-network .container{ max-width:1400px; }
.fn-network-top{
display:flex;
align-items:center;
gap:48px;
margin-bottom:40px;
}
.fn-network-left{ flex:0 0 380px; min-width:300px; }
.fn-network-right{
flex:1;
min-width:0;
position:relative;
border-radius:24px;
box-shadow:0 0 0 1px rgba(40,113,255,.08), 0 30px 70px -30px rgba(10,20,60,.5), 0 0 90px -20px rgba(40,113,255,.35);
}
.fn-network-right img{
width:100%;
height:auto;
display:block;
border-radius:24px;
}
.fn-network-num{
display:inline-flex;
align-items:center;
justify-content:center;
width:44px; height:44px;
border-radius:50%;
background:linear-gradient(135deg,var(--fn-blue),var(--fn-blue-dark));
color:#fff;
font-size:19px;
font-weight:800;
margin-bottom:22px;
box-shadow:0 12px 24px -10px rgba(40,113,255,.5);
}
.fn-network-title{
font-size:25px;
line-height:1.35;
font-weight:800;
letter-spacing:.4px;
text-transform:uppercase;
color:var(--fn-text);
margin:0 0 18px;
}
.fn-network-title span{ color:var(--fn-blue); }
.fn-network-rule{
display:block;
width:56px; height:4px;
border-radius:4px;
background:var(--fn-blue);
margin:0 0 22px;
}
.fn-network-desc{
font-size:15px;
line-height:1.7;
color:var(--fn-muted);
max-width:380px;
margin:0 0 14px;
}
.fn-network-mini-grid{
display:flex;
gap:14px;
margin-top:26px;
}
.fn-network-mini{
flex:1;
min-width:0;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:8px;
}
.fn-network-mini-ic{
width:74px; height:74px;
border-radius:18px;
background:#fff;
border:2px solid #dce6f8;
color:var(--fn-blue);
display:flex; align-items:center; justify-content:center;
font-size:32px;
box-shadow:0 8px 18px -12px rgba(20,40,90,.18);
transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.fn-network-mini:hover .fn-network-mini-ic{
transform:translateY(-3px);
border-color:var(--fn-blue);
box-shadow:0 12px 22px -10px rgba(40,113,255,.35);
}
.fn-network-mini b{
display:block;
font-size:19px;
font-weight:800;
color:var(--fn-text);
line-height:1.2;
}
.fn-network-mini span{
display:block;
font-size:11px;
color:var(--fn-muted);
line-height:1.35;
}
.fn-network-panel{
position:absolute;
top:50%; right:26px;
transform:translateY(-50%);
width:270px;
background:rgba(255,255,255,.94);
backdrop-filter:blur(6px);
border-radius:18px;
padding:20px 22px;
box-shadow:0 24px 50px -20px rgba(6,12,30,.6);
z-index:2;
}
.fn-network-panel-item{
display:flex;
align-items:center;
gap:12px;
padding:11px 0;
border-bottom:1px solid #eef1f7;
}
.fn-network-panel-item:first-child{ padding-top:0; }
.fn-network-panel-item .ic{
flex:none;
width:38px; height:38px;
border-radius:10px;
background:#eaf1ff;
color:var(--fn-blue);
display:flex; align-items:center; justify-content:center;
font-size:17px;
}
.fn-network-panel-item b{
display:block;
font-size:16px;
font-weight:800;
color:var(--fn-blue);
line-height:1.25;
}
.fn-network-panel-item span{
display:block;
font-size:11px;
color:var(--fn-muted);
}
.fn-network-panel-avatars{
display:flex;
padding-top:14px;
}
.fn-network-panel-avatars img{
width:32px; height:32px;
border-radius:50%;
border:2px solid #fff;
object-fit:cover;
margin-left:-9px;
box-shadow:0 0 0 1px var(--fn-border);
}
.fn-network-panel-avatars img:first-child{ margin-left:0; }
.fn-network-bar{
display:flex;
flex-wrap:wrap;
background:#ffffff;
border:1px solid var(--fn-border);
border-radius:22px;
padding:44px 36px 32px;
box-shadow:0 4px 16px -6px rgba(20,40,90,.06), 0 20px 45px -28px rgba(20,40,90,.14);
}
.fn-network-bar-item{
flex:1;
min-width:0;
display:flex;
flex-direction:row;
align-items:center;
gap:12px;
padding:0 12px;
border-right:1px solid #e2e8f4;
transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.fn-network-bar-item:last-child{ border-right:none; }
.fn-network-bar-item:hover{ transform:translateY(-4px); }
.fn-network-bar-item .ic{
flex:none;
font-size:32px;
color:var(--fn-blue);
transition:transform .3s ease;
}
.fn-network-bar-item:hover .ic{ transform:scale(1.08) rotate(-4deg); }
.fn-network-bar-item b{
font-size:13.5px;
font-weight:700;
color:var(--fn-text);
}
.fn-network-bar-item p{
font-size:12px;
line-height:1.5;
color:var(--fn-muted);
margin:0;
}
@media (max-width:1300px){
.fn-network-panel{ width:230px; padding:16px 18px; }
}
@media (max-width:1100px){
.fn-network-panel{ display:none; }
}
@media (max-width:991px){
.fn-network-top{ flex-direction:column; }
.fn-network-left, .fn-network-right{ width:100%; }
.fn-network-bar{ flex-wrap:wrap; gap:20px; }
.fn-network-bar-item{ flex:1 1 45%; border-right:none; }
}
@media (max-width:575px){
.fn-network-mini-grid{ flex-wrap:wrap; }
.fn-network-mini{ flex:1 1 45%; }
.fn-network-bar-item{ flex:1 1 100%; }
}
/* ================= FERnest Marketplace Section (commu.html) ================= */
.fn-market{
font-family:"Inter", sans-serif;
background:#ffffff;
padding:0 0 100px;
}
.fn-market *{ box-sizing:border-box; }
.fn-market .container{ max-width:1400px; }
.fn-market-top{
display:flex;
align-items:stretch;
gap:44px;
background:#f6f8fc;
border-radius:28px;
padding:36px;
margin-bottom:40px;
box-shadow:0 4px 16px -6px rgba(20,40,90,.05), 0 24px 55px -30px rgba(20,40,90,.16);
}
.fn-market-left{ flex:0 0 400px; min-width:300px; }
.fn-market-right{
flex:1;
min-width:0;
margin-left:90px;
display:flex;
flex-direction:column;
}
.fn-market-num{
display:inline-flex;
align-items:center;
justify-content:center;
width:44px; height:44px;
border-radius:50%;
background:linear-gradient(135deg,var(--fn-blue),var(--fn-blue-dark));
color:#fff;
font-size:19px;
font-weight:800;
margin-bottom:22px;
box-shadow:0 12px 24px -10px rgba(40,113,255,.5);
}
.fn-market-title{
font-size:25px;
line-height:1.35;
font-weight:800;
letter-spacing:.4px;
text-transform:uppercase;
color:var(--fn-text);
margin:0 0 18px;
}
.fn-market-title span{ color:var(--fn-blue); }
.fn-market-rule{
display:block;
width:56px; height:4px;
border-radius:4px;
background:var(--fn-blue);
margin:0 0 22px;
}
.fn-market-desc{
font-size:15px;
line-height:1.7;
color:var(--fn-muted);
max-width:380px;
margin:0 0 28px;
}
.fn-market-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:12px;
}
.fn-market-cat{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
aspect-ratio:1/1;
gap:12px;
background:#fff;
border:1px solid #e6ebf5;
border-radius:16px;
padding:18px 14px;
box-shadow:0 4px 14px -10px rgba(20,40,90,.1);
transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.fn-market-cat:hover{
transform:translateY(-3px);
border-color:#c9d8f5;
box-shadow:0 10px 22px -10px rgba(40,113,255,.25);
}
.fn-market-cat .ic{
color:var(--fn-blue);
font-size:26px;
line-height:1;
}
.fn-market-cat b{
font-size:12.5px;
font-weight:700;
color:var(--fn-text);
}
.fn-market-photo{
position:relative;
flex:1;
border-radius:20px 20px 0 0;
overflow:hidden;
min-height:300px;
}
.fn-market-photo img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.fn-market-partners{
background:#fff;
border-radius:20px;
padding:20px 28px;
display:flex;
align-items:center;
gap:28px;
flex-wrap:wrap;
box-shadow:0 -4px 16px -10px rgba(20,40,90,.1);
position:relative;
margin-top:-16px;
}
.fn-market-partners-count{
flex:none;
font-size:13px;
line-height:1.35;
color:var(--fn-text);
font-weight:700;
}
.fn-market-partners-count b{
font-size:23px;
font-weight:800;
color:var(--fn-text);
margin-right:4px;
}
.fn-market-partners-logos{
display:flex;
align-items:center;
gap:26px;
flex-wrap:wrap;
padding-left:24px;
border-left:1px solid var(--fn-border);
}
.fn-logo-img{
height:26px;
width:auto;
max-width:100px;
object-fit:contain;
display:block;
}
.fn-market-partners-more{
display:inline-flex;
align-items:center;
gap:8px;
font-size:13px;
font-weight:600;
color:var(--fn-text);
white-space:nowrap;
}
.fn-market-partners-more i{
width:22px;
height:22px;
border-radius:50%;
background:var(--fn-blue);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:12px;
flex:none;
}
.fn-market-bar{
display:flex;
flex-wrap:wrap;
background:#ffffff;
border:1px solid var(--fn-border);
border-radius:22px;
padding:32px 36px;
box-shadow:0 4px 16px -6px rgba(20,40,90,.06), 0 20px 45px -28px rgba(20,40,90,.14);
}
.fn-market-bar-item{
flex:1;
min-width:0;
display:flex;
align-items:center;
gap:12px;
padding:0 12px;
border-right:1px solid #e2e8f4;
transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.fn-market-bar-item:last-child{ border-right:none; }
.fn-market-bar-item:hover{ transform:translateY(-4px); }
.fn-market-bar-item .ic{
flex:none;
font-size:32px;
color:var(--fn-blue);
transition:transform .3s ease;
}
.fn-market-bar-item:hover .ic{ transform:scale(1.08) rotate(-4deg); }
.fn-market-bar-item b{
display:block;
font-size:13.5px;
font-weight:700;
color:var(--fn-text);
margin-bottom:4px;
}
.fn-market-bar-item p{
font-size:12px;
line-height:1.5;
color:var(--fn-muted);
margin:0;
}
@media (max-width:1300px){
.fn-market-partners{ gap:18px; }
.fn-market-partners-logos{ gap:18px; padding-left:18px; }
}
@media (max-width:1199px){
.fn-market-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:991px){
.fn-market-top{ flex-direction:column; padding:24px; }
.fn-market-left, .fn-market-right{ width:100%; }
.fn-market-partners{ flex-direction:column; align-items:flex-start; }
.fn-market-partners-logos{ border-left:none; padding-left:0; }
.fn-market-bar{ flex-wrap:wrap; gap:20px; }
.fn-market-bar-item{ flex:1 1 45%; border-right:none; }
}
@media (max-width:575px){
.fn-market-grid{ grid-template-columns:1fr 1fr; }
.fn-market-bar-item{ flex:1 1 100%; }
}
/* ================= FERnest Realtime Section (commu.html) ================= */
.fn-realtime{
background:#ffffff;
padding:0 0 100px;
}
.fn-realtime *{ box-sizing:border-box; }
.fn-realtime .container{ max-width:1400px; }
.fn-realtime-top{
display:flex;
align-items:center;
gap:60px;
margin-bottom:40px;
}
.fn-realtime-left{ flex:0 0 400px; min-width:300px; }
.fn-realtime-right{
flex:1;
min-width:0;
}
.fn-realtime-right img{
width:100%;
height:auto;
display:block;
}
.fn-realtime-num{
display:inline-flex;
align-items:center;
justify-content:center;
width:44px; height:44px;
border-radius:50%;
background:linear-gradient(135deg,var(--fn-blue),var(--fn-blue-dark));
color:#fff;
font-size:19px;
font-weight:800;
margin-bottom:22px;
box-shadow:0 12px 24px -10px rgba(40,113,255,.5);
}
.fn-realtime-title{
font-size:25px;
line-height:1.35;
font-weight:800;
letter-spacing:.4px;
text-transform:uppercase;
color:var(--fn-text);
margin:0 0 18px;
}
.fn-realtime-rule{
display:block;
width:56px; height:4px;
border-radius:4px;
background:var(--fn-blue);
margin:0 0 22px;
}
.fn-realtime-desc{
font-size:15px;
line-height:1.7;
color:var(--fn-muted);
max-width:380px;
margin:0 0 30px;
}
.fn-realtime-features{
display:flex;
flex-direction:column;
gap:22px;
}
.fn-realtime-feat{
display:flex;
align-items:flex-start;
gap:16px;
}
.fn-realtime-feat .ic{
flex:none;
width:52px; height:52px;
border-radius:50%;
background:linear-gradient(135deg,#ffffff,#eaf0ff);
border:1.5px solid #dce6f8;
color:var(--fn-blue);
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
box-shadow:0 8px 18px -12px rgba(20,40,90,.18);
transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.fn-realtime-feat:hover .ic{
transform:translateY(-3px) scale(1.06);
box-shadow:0 12px 22px -10px rgba(40,113,255,.35);
}
.fn-realtime-feat b{
display:block;
font-size:15px;
font-weight:700;
color:var(--fn-text);
margin-bottom:4px;
}
.fn-realtime-feat p{
font-size:13.5px;
line-height:1.6;
color:var(--fn-muted);
margin:0;
}
.fn-realtime-bar{
display:flex;
flex-wrap:wrap;
background:#ffffff;
border:1px solid var(--fn-border);
border-radius:22px;
padding:32px 36px;
box-shadow:0 4px 16px -6px rgba(20,40,90,.06), 0 20px 45px -28px rgba(20,40,90,.14);
}
.fn-realtime-bar-item{
flex:1;
min-width:0;
display:flex;
align-items:center;
gap:14px;
padding:0 14px;
}
.fn-realtime-bar-item .ic{
flex:none;
width:48px; height:48px;
border-radius:50%;
background:linear-gradient(135deg,#eaf0ff,#dde9ff);
color:var(--fn-blue);
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
box-shadow:inset 0 0 0 1px rgba(40,113,255,.08);
transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.fn-realtime-bar-item:hover .ic{
transform:translateY(-3px) scale(1.06);
box-shadow:0 10px 20px -8px rgba(40,113,255,.35);
}
.fn-realtime-bar-item b{
display:block;
font-size:13.5px;
font-weight:700;
color:var(--fn-text);
margin-bottom:4px;
}
.fn-realtime-bar-item p{
font-size:12px;
line-height:1.5;
color:var(--fn-muted);
margin:0;
}
@media (max-width:1300px){
.fn-realtime-top{ gap:36px; }
}
@media (max-width:1199px){
.fn-realtime-bar{ flex-wrap:wrap; gap:24px; }
.fn-realtime-bar-item{ flex:1 1 40%; }
}
@media (max-width:991px){
.fn-realtime-top{ flex-direction:column; }
.fn-realtime-left, .fn-realtime-right{ width:100%; }
}
@media (max-width:575px){
.fn-realtime-bar-item{ flex:1 1 100%; }
}
/* ================= FERnest Journey Section (commu.html) ================= */
.fn-journey{
background:#ffffff;
padding:0 0 100px;
}
.fn-journey *{ box-sizing:border-box; }
.fn-journey .container{ max-width:1400px; }
.fn-journey-card{
background:var(--fn-bg-soft);
border-radius:32px;
padding:44px 12px;
box-shadow:0 4px 16px -6px rgba(20,40,90,.05), 0 24px 55px -30px rgba(20,40,90,.16);
}
.fn-journey-flow{
display:flex;
align-items:center;
gap:22px;
margin-bottom:36px;
}
.fn-journey-head{
flex:0 0 250px;
min-width:210px;
}
.fn-journey-num{
display:inline-flex;
align-items:center;
justify-content:center;
width:40px; height:40px;
border-radius:50%;
background:linear-gradient(135deg,var(--fn-blue),var(--fn-blue-dark));
color:#fff;
font-size:17px;
font-weight:800;
margin-bottom:18px;
box-shadow:0 12px 24px -10px rgba(40,113,255,.5);
}
.fn-journey-title{
font-size:21px;
line-height:1.32;
font-weight:800;
text-transform:uppercase;
letter-spacing:.2px;
color:var(--fn-text);
margin:0 0 14px;
}
.fn-journey-title span{ color:var(--fn-blue); }
.fn-journey-rule{
display:block;
width:40px; height:4px;
border-radius:4px;
background:var(--fn-blue);
margin:0 0 16px;
}
.fn-journey-desc{
font-size:13.5px;
line-height:1.7;
color:var(--fn-muted);
margin:0;
}
.fn-journey-desc b{ color:var(--fn-text); }
.fn-journey-steps{
display:flex;
align-items:flex-start;
flex:1;
min-width:0;
gap:0;
}
.fn-journey-step{
flex:1;
min-width:0;
display:flex;
flex-direction:column;
padding:0 10px;
}
.fn-journey-photo{
border-radius:16px;
overflow:hidden;
aspect-ratio:1/1.05;
margin-bottom:14px;
box-shadow:0 10px 24px -14px rgba(20,40,90,.3);
}
.fn-journey-photo img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform .4s ease;
}
.fn-journey-step:hover .fn-journey-photo img{ transform:scale(1.06); }
.fn-journey-step-head{
display:flex;
align-items:center;
gap:8px;
margin-bottom:8px;
}
.fn-journey-step-num{
flex:none;
width:20px; height:20px;
border-radius:50%;
background:var(--fn-blue);
color:#fff;
font-size:10.5px;
font-weight:800;
display:flex;
align-items:center;
justify-content:center;
}
.fn-journey-step-head b{
font-size:12px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.2px;
color:var(--fn-text);
line-height:1.3;
}
.fn-journey-step p{
font-size:12.5px;
line-height:1.6;
color:var(--fn-muted);
margin:0;
}
.fn-journey-arrow{
flex:none;
align-self:center;
color:#c3d3f4;
font-size:20px;
margin:0 -4px 90px;
}
.fn-journey-panel{
flex:0 0 230px;
background:#ffffff;
border:1px solid var(--fn-border);
border-radius:20px;
padding:26px 22px;
box-shadow:0 4px 16px -6px rgba(20,40,90,.06), 0 20px 45px -28px rgba(20,40,90,.14);
}
.fn-journey-panel-ic{
width:50px; height:50px;
border-radius:14px;
background:linear-gradient(135deg,#eaf0ff,#dde9ff);
color:var(--fn-blue);
display:flex;
align-items:center;
justify-content:center;
font-size:23px;
margin-bottom:16px;
}
.fn-journey-panel h3{
font-size:14.5px;
line-height:1.4;
font-weight:800;
text-transform:uppercase;
letter-spacing:.2px;
color:var(--fn-text);
margin:0 0 16px;
}
.fn-journey-panel h3 span{ color:var(--fn-blue); }
.fn-journey-panel-rule{
display:block;
width:100%;
height:1px;
background:var(--fn-border);
margin:0 0 20px;
}
.fn-journey-stat{
display:flex;
align-items:center;
gap:12px;
margin-bottom:16px;
}
.fn-journey-stat .ic{
flex:none;
width:42px; height:42px;
border-radius:12px;
background:#f0f4fc;
color:var(--fn-blue);
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
}
.fn-journey-stat b{
display:block;
font-size:16.5px;
font-weight:800;
color:var(--fn-text);
line-height:1.2;
}
.fn-journey-stat p{
font-size:11.5px;
color:var(--fn-muted);
margin:0;
}
.fn-journey-cta{
display:block;
text-align:center;
background:var(--fn-blue);
color:#fff;
font-weight:700;
font-size:12px;
text-transform:uppercase;
letter-spacing:.3px;
padding:13px 16px;
border-radius:10px;
margin-top:22px;
transition:background .3s ease, transform .3s ease;
}
.fn-journey-cta:hover{
background:var(--fn-blue-dark);
transform:translateY(-2px);
color:#fff;
}
.fn-journey-bar{
display:flex;
flex-wrap:wrap;
background:#ffffff;
border:1px solid var(--fn-border);
border-radius:18px;
padding:24px 30px;
}
.fn-journey-bar-item{
flex:1;
min-width:0;
display:flex;
align-items:center;
gap:12px;
padding:0 14px;
border-right:1px solid #e2e8f4;
}
.fn-journey-bar-item:last-child{ border-right:none; }
.fn-journey-bar-item .ic{
flex:none;
width:46px; height:46px;
border-radius:50%;
background:linear-gradient(135deg,#eaf0ff,#dde9ff);
color:var(--fn-blue);
display:flex;
align-items:center;
justify-content:center;
font-size:21px;
transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.fn-journey-bar-item:hover .ic{ transform:translateY(-3px) scale(1.06); }
.fn-journey-bar-item p{
font-size:12px;
line-height:1.45;
color:var(--fn-text);
font-weight:600;
margin:0;
}
@media (max-width:1300px){
.fn-journey-panel{ flex:0 0 200px; }
.fn-journey-head{ flex:0 0 210px; }
}
@media (max-width:1199px){
.fn-journey-flow{ flex-wrap:wrap; }
.fn-journey-head{ flex:1 1 100%; margin-bottom:20px; }
.fn-journey-panel{ flex:1 1 100%; margin-top:20px; }
.fn-journey-bar{ flex-wrap:wrap; gap:20px; }
.fn-journey-bar-item{ flex:1 1 40%; border-right:none; }
}
@media (max-width:767px){
.fn-journey-steps{ flex-wrap:wrap; }
.fn-journey-step{ flex:1 1 40%; margin-bottom:20px; }
.fn-journey-arrow{ display:none; }
}
@media (max-width:575px){
.fn-journey-card{ padding:28px 20px; }
.fn-journey-step{ flex:1 1 100%; }
.fn-journey-bar-item{ flex:1 1 100%; }
}
/* ================= FERnest Cockpit Hero Section (index.html) ================= */
.fn-hcockpit{
background:#ffffff;
padding:0 0 60px;
overflow:hidden;
position:relative;
}
.fn-hcockpit *{ box-sizing:border-box; }
.fn-hcockpit .container-fluid{ position:relative; z-index:2; max-width:1600px; padding:0 40px; margin:0 auto; }
.fn-hcockpit-bg{
position:absolute;
inset:0;
z-index:0;
}
.fn-hcockpit-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; display:block; }
.fn-hcockpit-fade{
position:absolute;
inset:0;
z-index:1;
background:linear-gradient(90deg, #fff 0%, #fff 22%, rgba(255,255,255,.85) 32%, rgba(255,255,255,.4) 44%, rgba(255,255,255,0) 58%);
}
.fn-hcockpit-grid{
position:relative;
display:flex;
align-items:center;
gap:40px;
margin-bottom:0;
}
/* -- Left column -- */
.fn-hcockpit-left{ position:relative; z-index:2; flex:0 0 400px; min-width:320px; }
.fn-hcockpit-brand{ margin-bottom:12px; }
.fn-hcockpit-logo{ height:38px; width:auto; display:block; }
.fn-hcockpit-slogan{
display:flex;
align-items:flex-start;
gap:8px;
font-size:11px;
font-weight:700;
letter-spacing:.3px;
text-transform:uppercase;
color:var(--fn-muted);
margin:0 0 26px;
padding-bottom:20px;
border-bottom:1px solid var(--fn-border);
}
.fn-hcockpit-slogan .dot{ width:6px; height:6px; border-radius:50%; background:var(--fn-blue); flex:none; margin-top:4px; }
.fn-hcockpit-title{
font-size:33px;
line-height:1.28;
font-weight:800;
color:var(--fn-text);
margin:0 0 20px;
}
.fn-hcockpit-title span{
background:linear-gradient(120deg,var(--fn-blue),#5b9dff);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.fn-hcockpit-rule{
display:block;
width:56px; height:4px;
border-radius:4px;
background:var(--fn-blue);
margin:0 0 20px;
}
.fn-hcockpit-lead{
font-size:16px;
font-weight:700;
color:var(--fn-blue);
line-height:1.5;
margin:0 0 14px;
}
.fn-hcockpit-desc{
font-size:14px;
line-height:1.75;
color:var(--fn-muted);
margin:0 0 28px;
}
.fn-hcockpit-desc b{ color:var(--fn-text); }
.fn-hcockpit-checklist{
display:flex;
align-items:flex-start;
gap:16px;
background:var(--fn-bg-soft);
border-radius:16px;
padding:20px;
}
.fn-hcockpit-checklist-ic{
flex:none;
width:44px; height:44px;
border-radius:14px;
background:linear-gradient(135deg,var(--fn-blue),var(--fn-blue-dark));
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
box-shadow:0 10px 20px -10px rgba(40,113,255,.5);
}
.fn-hcockpit-checklist ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.fn-hcockpit-checklist li{ font-size:13.5px; font-weight:600; color:var(--fn-text); display:flex; align-items:center; gap:8px; }
.fn-hcockpit-checklist li i{ color:var(--fn-blue); font-size:16px; }
/* -- Right column : cockpit stage -- */
.fn-hcockpit-right{ position:relative; z-index:2; flex:1; min-width:0; }
.fn-hcockpit-stage{
position:relative;
width:100%;
aspect-ratio:1000/780;
}
.fn-hcockpit-lines{ position:absolute; inset:0; width:100%; height:100%; z-index:2; }
.fn-hcockpit-lines path{ stroke:#b9cdfa; stroke-width:.3; stroke-dasharray:1.6 1.8; fill:none; }
.fn-hcockpit-center{
position:absolute;
top:20%; left:39%;
width:16%; aspect-ratio:1;
border-radius:50%;
background:radial-gradient(circle at 30% 30%, #3a82ff, #12336b);
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 0 0 10px rgba(255,255,255,.75), 0 20px 45px -15px rgba(20,60,150,.5);
z-index:3;
}
.fn-hcockpit-center span{ color:#fff; font-weight:800; font-size:16px; }
.fn-hcockpit-center span em{ font-style:normal; font-weight:600; }
.fn-hcockpit-node{
position:absolute;
width:7%; aspect-ratio:1;
border-radius:50%;
background:#fff;
color:var(--fn-blue);
display:flex;
align-items:center;
justify-content:center;
font-size:16px;
box-shadow:0 10px 22px -10px rgba(20,40,90,.35);
z-index:3;
}
.fn-hcockpit-node-eco{ top:10.5%; left:32.5%; }
.fn-hcockpit-node-comm{ top:11.5%; left:60.5%; }
.fn-hcockpit-node-agents{ top:34.5%; left:29.5%; }
.fn-hcockpit-node-prod{ top:34.5%; left:63.5%; }
/* -- Floating cards -- */
.fn-hcockpit-card{
position:absolute;
background:#fff;
border-radius:16px;
padding:16px 13px 13px;
box-shadow:0 20px 45px -20px rgba(20,40,90,.25);
z-index:4;
transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;
}
.fn-hcockpit-live{
display:inline-block;
width:6px; height:6px;
border-radius:50%;
background:#17c99a;
box-shadow:0 0 0 rgba(23,201,154,.6);
animation:fnLivePulse 2s infinite;
margin-left:2px;
}
@keyframes fnLivePulse{
0%{ box-shadow:0 0 0 0 rgba(23,201,154,.55); }
70%{ box-shadow:0 0 0 7px rgba(23,201,154,0); }
100%{ box-shadow:0 0 0 0 rgba(23,201,154,0); }
}
.fn-hcockpit-card:hover{
transform:translateY(-4px);
box-shadow:0 28px 55px -20px rgba(20,40,90,.35);
z-index:5;
}
.fn-hcockpit-card h4{
display:flex;
align-items:center;
gap:8px;
font-size:12.5px;
font-weight:800;
color:var(--fn-text);
margin:0 0 7px;
}
.fn-hcockpit-card h4 .ic{
flex:none;
width:22px; height:22px;
border-radius:7px;
background:linear-gradient(135deg,var(--fn-blue),var(--fn-blue-dark));
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:11px;
box-shadow:0 6px 14px -6px rgba(40,113,255,.5);
}
.fn-hcockpit-card ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px; }
.fn-hcockpit-card ul li{ display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--fn-text); line-height:1.25; }
.fn-hcockpit-card > p{ font-size:10.5px; color:var(--fn-muted); margin:6px 0 0; display:flex; align-items:center; gap:5px; line-height:1.35; }
.fn-hcockpit-card .dot{ width:7px; height:7px; border-radius:50%; flex:none; }
.fn-hcockpit-card .dot-blue{ background:var(--fn-blue); }
.fn-hcockpit-card .dot-green{ background:#17c99a; }
.fn-hcockpit-card .dot-purple{ background:var(--fn-purple); }
.fn-hcockpit-card .dot-orange{ background:var(--fn-orange); }
.fn-hcockpit-card .dot-red{ background:var(--fn-red); }
.fn-hcockpit-card .dot-teal{ background:#14b8a6; }
.fn-hcockpit-card .dot-pink{ background:#ec4899; }
.fn-hcockpit-card-highlight{
display:inline-block;
font-size:9px;
font-weight:700;
color:var(--fn-blue);
background:#eaf0ff;
padding:2px 8px;
border-radius:20px;
margin-bottom:5px;
}
.fn-hcockpit-card-stats{ top:3%; left:22%; width:54%; }
.fn-hcockpit-stats-grid{ display:flex; gap:10px; flex-wrap:wrap; }
.fn-hcockpit-stats-grid > div{ flex:1; min-width:65px; }
.fn-hcockpit-stats-grid b{ display:block; font-size:15px; font-weight:800; color:var(--fn-text); }
.fn-hcockpit-stats-grid span{ display:block; font-size:9.5px; color:var(--fn-muted); margin:2px 0 3px; }
.fn-hcockpit-stats-grid em{ font-style:normal; font-size:9.5px; font-weight:700; color:#17c99a; }
.fn-hcockpit-card-community{ top:5%; left:78%; width:22%; }
.fn-hcockpit-card-eco{ top:16%; left:0; width:19%; }
.fn-hcockpit-card-agents{ top:47%; left:0; width:19%; }
.fn-hcockpit-card-prod{ top:33%; left:78%; width:22%; }
.fn-hcockpit-flow{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.fn-hcockpit-flow span{ font-size:10.5px; font-weight:700; color:var(--fn-text); }
.fn-hcockpit-flow i{ color:var(--fn-blue); font-size:11px; margin-left:2px; }
.fn-hcockpit-card-visiofact{ top:65%; left:78%; width:22%; }
.fn-hcockpit-checkul li{ color:var(--fn-text); }
.fn-hcockpit-checkul i{ color:#17c99a; }
.fn-hcockpit-card-market{ top:80%; left:39%; width:22%; }
/* -- Bottom pillars bar -- */
.fn-hcockpit-pillars{
position:relative;
z-index:3;
display:flex;
flex-wrap:wrap;
background:linear-gradient(160deg, var(--fn-navy) 0%, var(--fn-navy-2) 100%);
border-radius:22px;
padding:30px 20px;
margin-top:-16px;
margin-bottom:22px;
}
.fn-hcockpit-pillar{
flex:1;
min-width:0;
display:flex;
align-items:center;
gap:14px;
padding:0 16px;
border-right:1px solid rgba(255,255,255,.1);
}
.fn-hcockpit-pillar:last-child{ border-right:none; }
.fn-hcockpit-pillar .ic{
flex:none;
width:42px; height:42px;
border-radius:50%;
background:linear-gradient(135deg,var(--fn-blue),var(--fn-blue-dark));
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
box-shadow:0 8px 16px -6px rgba(40,113,255,.5);
transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.fn-hcockpit-pillar:hover .ic{ transform:translateY(-3px) scale(1.08); }
.fn-hcockpit-pillar b{ display:block; font-size:13px; font-weight:700; color:#fff; margin-bottom:3px; }
.fn-hcockpit-pillar p{ font-size:11px; line-height:1.4; color:rgba(255,255,255,.62); margin:0; }
/* -- Tagline row -- */
.fn-hcockpit-tagline{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:14px;
text-align:center;
font-size:11px;
font-weight:700;
letter-spacing:1px;
color:var(--fn-muted);
text-transform:uppercase;
}
.fn-hcockpit-tagline .dot{ width:4px; height:4px; border-radius:50%; background:var(--fn-blue); flex:none; }
@media (max-width:1400px){
.fn-hcockpit-card{ padding:14px 16px; }
.fn-hcockpit-card h4{ font-size:12px; }
.fn-hcockpit-card ul li{ font-size:11.5px; }
}
@media (max-width:1199px){
.fn-hcockpit-grid{ flex-direction:column; align-items:stretch; }
.fn-hcockpit-left{ flex:1 1 100%; margin-bottom:40px; }
.fn-hcockpit-stage{ aspect-ratio:auto; min-height:900px; }
}
@media (max-width:991px){
.fn-hcockpit .container-fluid{ padding:0 20px; }
.fn-hcockpit-stage{ position:static; min-height:0; display:flex; flex-direction:column; gap:16px; }
.fn-hcockpit-lines, .fn-hcockpit-center, .fn-hcockpit-node{ display:none; }
.fn-hcockpit-bg, .fn-hcockpit-fade{ display:none; }
.fn-hcockpit-card{ position:static; width:100% !important; }
.fn-hcockpit-pillars{ flex-wrap:wrap; }
.fn-hcockpit-pillar{ flex:1 1 45%; border-right:none; margin-bottom:16px; }
}
@media (max-width:575px){
.fn-hcockpit-title{ font-size:26px; }
.fn-hcockpit-pillar{ flex:1 1 100%; }
}
/* ================= FERnest Groupe de Cabinets Section (index.html) ================= */
.fn-groupcab{
background:#ffffff;
position:relative;
padding:70px 0;
}
.fn-groupcab *{ box-sizing:border-box; }
.fn-groupcab .container{ max-width:1400px; }
.fn-groupcab-split{
display:flex;
align-items:center;
gap:56px;
flex-wrap:wrap;
margin-bottom:40px;
}
.fn-groupcab-left{
flex:1 1 460px;
min-width:300px;
}
.fn-groupcab-right{ flex:1.15 1 480px; min-width:320px; text-align:center; margin-top:40px; }
.fn-groupcab-photo{
max-width:640px;
margin:0 auto;
border-radius:20px;
overflow:hidden;
filter:drop-shadow(0 35px 55px rgba(10,20,50,.35));
}
.fn-groupcab-photo img{
width:100%;
height:auto;
display:block;
transition:transform .5s ease;
}
.fn-groupcab-photo:hover img{ transform:scale(1.04); }
.fn-groupcab-brand{ margin-bottom:10px; }
.fn-groupcab-logo{ height:40px; width:auto; display:block; }
.fn-groupcab-tag{
font-size:11px;
font-weight:700;
letter-spacing:.6px;
text-transform:uppercase;
color:var(--fn-muted);
margin:0 0 26px;
padding-bottom:18px;
border-bottom:1px solid var(--fn-border);
max-width:340px;
}
.fn-groupcab-title{
font-size:32px;
line-height:1.28;
font-weight:800;
color:var(--fn-text);
margin:0 0 18px;
max-width:460px;
}
.fn-groupcab-title span{
background:linear-gradient(120deg,var(--fn-blue),#5b9dff);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.fn-groupcab-rule{
display:block;
width:56px; height:4px;
border-radius:4px;
background:var(--fn-blue);
margin:0 0 20px;
}
.fn-groupcab-desc{
font-size:15px;
line-height:1.75;
color:var(--fn-muted);
max-width:440px;
margin:0 0 28px;
}
.fn-groupcab-checklist{ margin-bottom:32px; max-width:460px; }
.fn-groupcab-check{
display:flex;
align-items:center;
gap:16px;
padding:16px 12px;
margin:0 -12px;
border-radius:14px;
border-bottom:1px solid var(--fn-border);
transition:background .3s ease;
}
.fn-groupcab-check:first-child{ padding-top:0; margin-top:0; }
.fn-groupcab-check:last-child{ border-bottom:none; padding-bottom:0; }
.fn-groupcab-check:hover{ background:var(--fn-bg-soft); }
.fn-groupcab-check .ic{
flex:none;
width:52px; height:52px;
border-radius:50%;
background:linear-gradient(135deg,#eaf0ff,#dde9ff);
color:var(--fn-blue);
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.fn-groupcab-check:hover .ic{ transform:scale(1.08); }
.fn-groupcab-check b{ display:block; font-size:14.5px; font-weight:700; color:var(--fn-text); margin-bottom:3px; }
.fn-groupcab-check p{ font-size:12.5px; line-height:1.5; color:var(--fn-muted); margin:0; }
.fn-groupcab-check .check{ flex:none; margin-left:auto; color:var(--fn-blue); font-size:20px; }
.fn-groupcab-cta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.fn-groupcab-btn-primary{
display:inline-flex;
align-items:center;
gap:8px;
background:var(--fn-blue);
color:#fff;
font-weight:700;
font-size:14px;
padding:14px 24px;
border-radius:10px;
transition:background .3s ease, transform .3s ease;
}
.fn-groupcab-btn-primary:hover{ background:var(--fn-blue-dark); color:#fff; transform:translateY(-2px); }
.fn-groupcab-btn-primary i{ transition:transform .3s ease; }
.fn-groupcab-btn-primary:hover i{ transform:translateX(4px); }
.fn-groupcab-btn-outline{
display:inline-flex;
align-items:center;
gap:8px;
background:transparent;
color:var(--fn-blue);
font-weight:700;
font-size:14px;
padding:14px 24px;
border-radius:10px;
border:1.5px solid var(--fn-blue);
transition:background .3s ease, color .3s ease;
}
.fn-groupcab-btn-outline:hover{ background:var(--fn-blue); color:#fff; }
.fn-groupcab-bar{
position:relative;
z-index:2;
display:flex;
flex-wrap:wrap;
max-width:640px;
margin:-60px auto 0;
text-align:left;
background:#ffffff;
border:1px solid var(--fn-border);
border-radius:20px;
padding:12px 16px;
box-shadow:0 20px 40px -20px rgba(20,40,90,.3);
}
.fn-groupcab-bar-item{
flex:1 1 46%;
min-width:180px;
display:flex;
align-items:center;
gap:8px;
padding:6px 10px;
}
.fn-groupcab-bar-item .ic{
flex:none;
width:38px; height:38px;
border-radius:11px;
background:linear-gradient(135deg,#eaf0ff,#dde9ff);
color:var(--fn-blue);
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.fn-groupcab-bar-item:hover .ic{ transform:translateY(-2px) scale(1.08); }
.fn-groupcab-bar-item b{ display:block; font-size:12px; font-weight:700; color:var(--fn-text); margin-bottom:2px; }
.fn-groupcab-bar-item p{ font-size:10.5px; line-height:1.35; color:var(--fn-muted); margin:0; }
@media (max-width:767px){
.fn-groupcab-bar{ flex-direction:column; padding:20px; }
.fn-groupcab-bar-item{ border-right:none; border-bottom:1px solid #e2e8f4; padding:16px 0; }
.fn-groupcab-bar-item:last-child{ border-bottom:none; }
}
@media (max-width:575px){
.fn-groupcab-title{ font-size:26px; }
.fn-groupcab-check{ flex-wrap:wrap; }
}
/* ================================================================
Notre Ecosysteme Section (index.html)
Self-contained component — variables, layout, cards, responsive.
No external libraries, icons are inline SVG, circle is an ![]()
.
================================================================ */
.ecosystem{
--primary:#2871ff;
--secondary:#eaf1ff;
--text:#0a1224;
--muted:#5a6478;
--white:#ffffff;
--shadow:0 20px 45px -20px rgba(20,40,90,.22);
--agents:#17c99a;
--agents-bg:#e7faf4;
--production:#8b5cf6;
--production-bg:#f2ecff;
--communities:#f5a623;
--communities-bg:#fff3e2;
position:relative;
overflow:hidden;
background:linear-gradient(180deg,#eef3ff 0%, #f8faff 55%, #ffffff 100%);
padding:clamp(48px,8vw,100px) 0;
}
.ecosystem *{ box-sizing:border-box; }
.ecosystem__container{ max-width:1400px; margin:0 auto; padding:0 clamp(20px,4vw,40px); }
/* -- Row: content + visual -- */
.ecosystem__row{
display:flex;
align-items:center;
gap:clamp(24px,4vw,60px);
flex-wrap:wrap;
}
.ecosystem__content{ flex:1 1 380px; min-width:300px; max-width:480px; }
.ecosystem__badge{
display:inline-flex;
align-items:center;
gap:10px;
font-size:12px;
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--primary);
margin-bottom:20px;
}
.ecosystem__badge::before, .ecosystem__badge::after{
content:"";
width:5px; height:5px;
border-radius:50%;
background:var(--primary);
flex:none;
}
.ecosystem__title{
font-size:clamp(28px,3.4vw,40px);
line-height:1.18;
font-weight:800;
color:var(--text);
margin:0 0 22px;
}
.ecosystem__title span{ color:var(--primary); }
.ecosystem__text{
font-size:clamp(14px,1.1vw,16px);
line-height:1.75;
color:var(--muted);
margin:0 0 32px;
max-width:440px;
}
.ecosystem__cta{
display:inline-flex;
align-items:center;
gap:10px;
background:var(--primary);
color:var(--white);
font-weight:700;
font-size:15px;
padding:16px 26px;
border-radius:12px;
box-shadow:0 16px 30px -12px rgba(40,113,255,.5);
transition:transform .3s ease, box-shadow .3s ease;
}
.ecosystem__cta svg{ width:18px; height:18px; transition:transform .3s ease; }
.ecosystem__cta:hover{ transform:translateY(-2px); box-shadow:0 20px 36px -12px rgba(40,113,255,.55); color:var(--white); }
.ecosystem__cta:hover svg{ transform:translateX(4px); }
/* -- Visual (right) : circle + dashed lines + dots + 5 cards -- */
.ecosystem__visual{
position:relative;
flex:1 1 480px;
min-width:320px;
max-width:760px;
width:100%;
aspect-ratio:1/0.92;
margin:40px auto 0;
}
.ecosystem__circle{
position:absolute;
top:50%; left:50%;
transform:translate(-50%,-50%);
width:66%;
height:auto;
z-index:1;
pointer-events:none;
}
.ecosystem__card{
position:absolute;
width:clamp(200px,27%,290px);
background:var(--white);
border-radius:22px;
box-shadow:var(--shadow);
padding:16px 22px;
text-align:left;
z-index:4;
transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;
}
.ecosystem__card:hover{ transform:translateY(-6px); box-shadow:0 28px 55px -20px rgba(20,40,90,.32); }
.ecosystem__card--top{ top:-9%; left:50%; transform:translateX(-50%); }
.ecosystem__card--top:hover{ transform:translateX(-50%) translateY(-6px); }
.ecosystem__card--left{ top:20%; left:0; }
.ecosystem__card--right{ top:20%; right:0; }
.ecosystem__card--bl{ top:54%; left:4%; }
.ecosystem__card--br{ top:54%; right:4%; }
.ecosystem__icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:42px; height:42px;
border-radius:13px;
background:var(--accent-bg);
color:var(--accent);
margin-bottom:10px;
font-size:20px;
}
.ecosystem__icon svg{ width:22px; height:22px; }
.ecosystem__card-title{
font-size:16px;
font-weight:800;
color:var(--accent);
margin:0 0 6px;
}
.ecosystem__divider{
display:block;
width:32px; height:3px;
border-radius:3px;
background:var(--accent);
margin:0 0 8px;
}
.ecosystem__desc{
font-size:13px;
line-height:1.6;
color:var(--muted);
margin:0;
}
/* -- Bottom strip : 4 trust items -- */
.ecosystem__strip{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:clamp(16px,2vw,28px);
background:var(--white);
border-radius:20px;
box-shadow:var(--shadow);
padding:clamp(20px,2.5vw,30px);
margin-top:clamp(40px,6vw,70px);
}
.ecosystem__strip-item{ display:flex; align-items:flex-start; gap:14px; }
.ecosystem__strip-icon{
flex:none;
display:flex;
align-items:center;
justify-content:center;
width:44px; height:44px;
border-radius:50%;
background:var(--secondary);
color:var(--primary);
}
.ecosystem__strip-icon svg{ width:22px; height:22px; }
.ecosystem__strip-item b{ display:block; font-size:14px; font-weight:700; color:var(--text); margin-bottom:3px; }
.ecosystem__strip-item p{ font-size:12.5px; line-height:1.4; color:var(--muted); margin:0; }
/* -- Responsive : tablet cards move closer to the circle -- */
@media (max-width:1199px){
.ecosystem__card--left{ left:-2%; }
.ecosystem__card--right{ right:-2%; }
.ecosystem__card--bl{ left:1%; }
.ecosystem__card--br{ right:1%; }
}
@media (max-width:991px){
.ecosystem__row{ flex-direction:column; }
.ecosystem__content{ max-width:640px; text-align:center; }
.ecosystem__text{ margin-left:auto; margin-right:auto; }
.ecosystem__visual{ max-width:560px; }
.ecosystem__card{ width:clamp(170px,32%,230px); padding:12px 16px; }
.ecosystem__icon{ width:36px; height:36px; font-size:17px; }
.ecosystem__icon svg{ width:18px; height:18px; }
.ecosystem__card-title{ font-size:14.5px; }
.ecosystem__desc{ font-size:11.5px; }
.ecosystem__strip{ grid-template-columns:repeat(2,1fr); }
}
/* -- Mobile : circle stays on top, cards stack in a column -- */
@media (max-width:767px){
.ecosystem__visual{
position:static;
aspect-ratio:auto;
display:flex;
flex-direction:column;
align-items:center;
gap:16px;
}
.ecosystem__circle{ display:none; }
.ecosystem__card{ position:static; width:100%; transform:none !important; }
.ecosystem__strip{ grid-template-columns:1fr; }
}
/* ================================================================
Vos Experts IA Specialises Section (index.html)
Self-contained component — HTML5/CSS3 only, no framework.
Avatars are real images (img/features/*_2.png), icons are
Line Awesome (already loaded on the page as glyphs).
================================================================ */
.aiexperts{
--primary:#1E5BFF;
--dark:#0B1F5B;
--bg-light:#F7F9FC;
--bg-lighter:#EEF3FF;
--white:#FFFFFF;
--muted:#5a6478;
--shadow-soft:0 10px 30px -12px rgba(11,31,91,.12);
--shadow-hover:0 26px 50px -16px rgba(11,31,91,.24);
font-family:'Inter', sans-serif;
background:var(--white);
box-shadow:0 1px 0 rgba(11,31,91,.04);
padding:clamp(56px,8vw,110px) 0;
}
.aiexperts *{ box-sizing:border-box; }
.aiexperts__container{ max-width:1400px; margin:0 auto; padding:0 clamp(20px,4vw,40px); }
.aiexperts__row{
display:flex;
align-items:flex-start;
gap:clamp(28px,4vw,64px);
flex-wrap:wrap;
margin-bottom:clamp(36px,5vw,56px);
}
/* -- Left side -- */
.aiexperts__side{ flex:0 0 300px; min-width:260px; margin-top:190px; }
.aiexperts__brand{ margin-bottom:10px; }
.aiexperts__logo{ height:36px; width:auto; display:block; }
.aiexperts__tag{
display:flex;
align-items:center;
gap:8px;
font-size:11px;
font-weight:700;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--muted);
margin:0 0 26px;
padding-bottom:18px;
border-bottom:1px solid var(--fn-border);
}
.aiexperts__tag .dot, .aiexperts__badge .dot{ width:5px; height:5px; border-radius:50%; background:var(--primary); flex:none; }
.aiexperts__title{
font-size:clamp(24px,2.4vw,30px);
line-height:1.28;
font-weight:800;
color:var(--dark);
margin:0 0 18px;
}
.aiexperts__title span{ color:var(--primary); }
.aiexperts__desc{
font-size:14px;
line-height:1.75;
color:var(--muted);
margin:0 0 26px;
}
.aiexperts__cta{
display:inline-flex;
align-items:center;
gap:10px;
background:var(--primary);
color:var(--white);
font-weight:700;
font-size:15px;
padding:15px 24px;
border-radius:12px;
box-shadow:0 14px 26px -12px rgba(30,91,255,.5);
transition:transform .3s ease, box-shadow .3s ease;
margin-bottom:22px;
}
.aiexperts__cta svg{ width:18px; height:18px; transition:transform .3s ease; }
.aiexperts__cta:hover{ transform:translateY(-2px); box-shadow:0 18px 32px -12px rgba(30,91,255,.55); color:var(--white); }
.aiexperts__cta:hover svg{ transform:translateX(4px); }
.aiexperts__security{
display:flex;
align-items:flex-start;
gap:14px;
background:var(--white);
border:1px solid var(--fn-border);
border-radius:16px;
padding:18px;
margin-top:24px;
box-shadow:var(--shadow-soft);
transition:transform .3s ease, box-shadow .3s ease;
}
.aiexperts__security:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover); }
.aiexperts__security-ic{
flex:none;
width:52px; height:52px;
border-radius:10px;
background:transparent;
color:var(--primary);
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
}
.aiexperts__security b{ display:block; font-size:13.5px; font-weight:700; color:var(--dark); margin-bottom:3px; }
.aiexperts__security p{ font-size:12px; line-height:1.5; color:var(--muted); margin:0; }
/* -- Right side : heading + grid -- */
.aiexperts__main{ flex:1 1 640px; min-width:300px; }
.aiexperts__badge{
display:inline-flex;
align-items:center;
gap:10px;
font-size:12px;
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--primary);
margin:0 0 14px;
}
.aiexperts__heading{
font-size:clamp(28px,3vw,38px);
line-height:1.2;
font-weight:800;
color:var(--dark);
margin:0 0 12px;
}
.aiexperts__heading span{ color:var(--primary); }
.aiexperts__subtitle{
font-size:15px;
color:var(--muted);
margin:0 0 32px;
padding-bottom:16px;
border-bottom:2px solid var(--bg-lighter);
max-width:520px;
}
.aiexperts__grid{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:22px;
}
.aiexperts__card{
flex:0 1 calc((100% - 66px) / 4);
min-width:220px;
background:var(--white);
border-radius:24px;
box-shadow:var(--shadow-soft);
padding:16px 20px;
text-align:left;
transition:transform .3s ease, box-shadow .3s ease;
}
.aiexperts__card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-hover); }
.aiexperts__ic{
display:inline-flex;
align-items:center;
justify-content:center;
width:40px; height:40px;
border-radius:50%;
background:var(--accent-bg);
color:var(--accent);
font-size:19px;
margin-bottom:8px;
}
.aiexperts__avatar{
width:100%;
max-width:130px;
margin:0 auto 10px;
}
.aiexperts__avatar img{ width:100%; height:auto; display:block; }
.aiexperts__name{ font-size:16px; font-weight:800; color:var(--dark); margin:0 0 2px; }
.aiexperts__role{ font-size:12.5px; font-weight:700; color:var(--accent); margin:0 0 6px; }
.aiexperts__rule{ display:block; width:28px; height:3px; border-radius:3px; background:var(--accent); margin:0 0 8px; }
.aiexperts__card-desc{ font-size:12px; line-height:1.5; color:var(--muted); margin:0 0 10px; }
.aiexperts__tag-pill{
display:inline-flex;
align-items:center;
gap:6px;
font-size:10.5px;
font-weight:700;
color:var(--accent);
background:var(--accent-bg);
padding:6px 10px;
border-radius:9px;
}
/* -- Bottom strip : 6 benefits -- */
.aiexperts__strip{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:clamp(14px,2vw,24px);
background:var(--white);
border:1px solid var(--fn-border);
border-radius:24px;
box-shadow:var(--shadow-soft);
padding:clamp(20px,2.5vw,30px);
}
.aiexperts__strip-item{ display:flex; align-items:flex-start; gap:12px; }
.aiexperts__strip-item .ic{
flex:none;
display:flex;
align-items:center;
justify-content:center;
width:44px; height:44px;
border-radius:12px;
background:linear-gradient(135deg,#eaf0ff,#dde9ff);
color:var(--primary);
font-size:20px;
transition:transform .3s ease;
}
.aiexperts__strip-item:hover .ic{ transform:scale(1.08) rotate(-4deg); }
.aiexperts__strip-item b{ display:block; font-size:13px; font-weight:700; color:var(--dark); margin-bottom:2px; }
.aiexperts__strip-item p{ font-size:11px; line-height:1.4; color:var(--muted); margin:0; }
/* -- Responsive -- */
@media (max-width:1199px){
.aiexperts__card{ flex-basis:calc((100% - 44px) / 3); }
.aiexperts__strip{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:991px){
.aiexperts__row{ flex-direction:column; }
.aiexperts__side{ max-width:640px; }
.aiexperts__card{ flex-basis:calc((100% - 22px) / 2); }
.aiexperts__strip{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:575px){
.aiexperts__card{ flex-basis:100%; }
.aiexperts__strip{ grid-template-columns:1fr; }
.aiexperts__cta{ width:100%; justify-content:center; }
}
/* ================= FERnest Suite Section (ecosysteme.html only — new "Des solutions interconnectées") ================= */
.fn-suite{
background:#ffffff;
padding:100px 0;
}
.fn-suite *{ box-sizing:border-box; }
.fn-suite .container{ max-width:1400px; }
.fn-suite-tag{
display:flex; align-items:center; justify-content:center; gap:10px;
font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
color:var(--fn-blue); text-align:center; margin:0 0 16px;
}
.fn-suite-tag .dot{ width:5px; height:5px; border-radius:50%; background:var(--fn-blue); flex:none; }
.fn-suite-title{
font-size:44px; font-weight:800; line-height:1.15; text-align:center; color:var(--fn-text); margin:0 0 14px;
}
.fn-suite-title span{ color:var(--fn-blue); }
.fn-suite-subtitle{ font-size:17px; color:var(--fn-muted); text-align:center; margin:0 0 50px; }
.fn-suite-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
margin-bottom:44px;
}
.fn-suite-card{
background:#fff;
border-radius:20px;
overflow:hidden;
box-shadow:0 4px 16px -6px rgba(20,40,90,.06), 0 20px 45px -28px rgba(20,40,90,.14);
transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;
display:flex;
flex-direction:column;
}
.fn-suite-card:hover{ transform:translateY(-6px); box-shadow:0 28px 55px -20px rgba(20,40,90,.22); }
.fn-suite-photo{
position:relative;
height:200px;
}
.fn-suite-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.fn-suite-ic{
position:absolute;
bottom:-30px; left:24px;
width:66px; height:66px;
border-radius:50%;
background:#fff;
color:var(--fn-blue);
display:flex; align-items:center; justify-content:center;
font-size:24px;
box-shadow:0 8px 20px -8px rgba(20,40,90,.3);
}
.fn-suite-ic img{ width:96%; height:96%; object-fit:contain; }
.fn-suite-body{
padding:44px 24px 28px;
flex:1;
display:flex;
flex-direction:column;
}
.fn-suite-body h3{
font-size:20px; font-weight:800; color:var(--fn-text); margin:0 0 10px;
}
.fn-suite-body h3 span{ color:var(--fn-blue); }
.fn-suite-desc{ font-size:13.5px; line-height:1.6; color:var(--fn-muted); margin:0 0 16px; }
.fn-suite-list{ list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:8px; flex:1; }
.fn-suite-list li{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--fn-text); }
.fn-suite-list i{ color:var(--fn-blue); font-size:16px; }
.fn-suite-more{
display:inline-flex; align-items:center; gap:8px;
font-size:13.5px; font-weight:700; color:var(--fn-blue);
transition:gap .3s ease;
}
.fn-suite-more:hover{ gap:12px; color:var(--fn-blue-dark); }
.fn-suite-more i{ font-size:14px; }
.fn-suite-cta{ text-align:center; }
.fn-suite-btn{
display:inline-flex; align-items:center; gap:10px;
background:var(--fn-blue); color:#fff; font-weight:700; font-size:16px;
padding:16px 32px; border-radius:12px;
box-shadow:0 16px 32px -14px rgba(40,113,255,.5);
transition:transform .3s ease, box-shadow .3s ease;
}
.fn-suite-btn:hover{ transform:translateY(-2px); color:#fff; box-shadow:0 20px 38px -14px rgba(40,113,255,.55); }
.fn-suite-tagline{ margin:18px 0 0; font-size:14px; color:var(--fn-muted); }
@media (max-width:1199px){
.fn-suite-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:575px){
.fn-suite-grid{ grid-template-columns:1fr; }
.fn-suite-title{ font-size:30px; }
}
/* ================================================================
FERnest CTA band + Footer (index.html)
================================================================ */
.fn-cta{ padding:0 24px; }
.fn-cta .container{ max-width:1400px; padding:0; }
.fn-cta-card{
position:relative;
isolation:isolate;
overflow:hidden;
background:linear-gradient(120deg,#eef3ff 0%,#f7f9fd 55%,#ffffff 100%);
border-radius:28px 28px 0 0;
padding:56px 60px;
box-shadow:0 -18px 40px -28px rgba(20,40,90,.18);
}
.fn-cta-decor{
position:absolute;
top:0; right:0; bottom:0;
width:46%;
pointer-events:none;
overflow:hidden;
z-index:0;
}
.fn-cta-decor span{
position:absolute;
font-weight:800;
color:var(--fn-blue);
opacity:.06;
white-space:nowrap;
}
.fn-cta-decor span:nth-child(1){ top:-18px; right:20px; font-size:120px; }
.fn-cta-decor span:nth-child(2){ top:100px; right:220px; font-size:64px; }
.fn-cta-decor span:nth-child(3){ bottom:-30px; right:60px; font-size:150px; }
.fn-cta-decor span:nth-child(4){ top:30px; right:0; font-size:40px; }
.fn-cta-grid{
position:relative;
z-index:1;
display:flex;
align-items:center;
justify-content:space-between;
gap:32px;
flex-wrap:wrap;
}
.fn-cta-text{ flex:1 1 460px; min-width:280px; }
.fn-cta-title{
font-size:clamp(24px, 3.2vw, 34px);
font-weight:800;
line-height:1.25;
color:var(--fn-navy);
margin:0 0 12px;
}
.fn-cta-title span{ color:var(--fn-blue); }
.fn-cta-desc{ font-size:15.5px; line-height:1.6; color:var(--fn-muted); margin:0; max-width:480px; }
.fn-cta-action{ flex:none; }
.fn-cta-btn{
display:inline-flex;
align-items:center;
gap:10px;
background:var(--fn-blue);
color:#fff;
font-weight:700;
font-size:15px;
padding:17px 30px;
border-radius:12px;
white-space:nowrap;
box-shadow:0 18px 34px -14px rgba(40,113,255,.55);
transition:background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.fn-cta-btn i{ transition:transform .3s ease; }
.fn-cta-btn:hover{ background:var(--fn-blue-dark); color:#fff; transform:translateY(-2px); box-shadow:0 22px 40px -14px rgba(40,113,255,.65); }
.fn-cta-btn:hover i{ transform:translateX(4px); }
@media (max-width:991px){
.fn-cta-card{ padding:48px 36px; }
}
@media (max-width:767px){
.fn-cta-card{ padding:40px 28px; text-align:center; }
.fn-cta-grid{ flex-direction:column; align-items:center; text-align:center; }
.fn-cta-desc{ margin:0 auto; }
}
@media (max-width:480px){
.fn-cta-card{ padding:32px 20px; border-radius:20px 20px 0 0; }
.fn-cta-btn{ width:100%; justify-content:center; padding:15px 24px; }
}
/* ---- Footer ---- */
.fn-footer{
background:linear-gradient(160deg, var(--fn-navy) 0%, var(--fn-navy-2) 100%);
border-radius:0 0 0 0;
padding:64px 0 0;
}
.fn-footer .container{ max-width:1400px; }
.fn-footer-grid{
display:grid;
grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;
gap:32px;
padding-bottom:44px;
}
.fn-footer-logo img{ width:210px; height:auto; display:block; margin:0 0 16px -6px; }
.fn-footer-rule{ display:block; width:40px; height:3px; border-radius:3px; background:var(--fn-blue); margin-bottom:18px; }
.fn-footer-claim{ font-size:clamp(16px, 2vw, 19px); font-weight:700; line-height:1.4; color:#fff; margin:0 0 14px; }
.fn-footer-claim span{ color:var(--fn-blue); }
.fn-footer-desc{ font-size:13.5px; line-height:1.7; color:#93a2c2; margin:0; max-width:340px; }
.fn-footer-col-head{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.fn-footer-col-ic{
flex:none;
width:34px; height:34px;
border-radius:50%;
border:1.5px solid rgba(40,113,255,.5);
color:#5b9dff;
display:flex; align-items:center; justify-content:center;
font-size:15px;
}
.fn-footer-col-head h4{ font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#fff; margin:0; }
.fn-footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.fn-footer-col ul li a{
display:flex; align-items:center; gap:8px;
font-size:13.5px; font-weight:500; color:#a7b2cc;
text-decoration:none;
transition:color .25s ease;
}
.fn-footer-col ul li a i{ font-size:11px; color:var(--fn-blue); flex:none; }
.fn-footer-col ul li a:hover{ color:#fff; }
.fn-footer-social-list{ gap:14px !important; }
.fn-footer-social-list li a{ align-items:center; gap:12px; }
.fn-footer-social-ic{
flex:none;
width:34px; height:34px;
border-radius:9px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.12);
color:#fff;
display:flex; align-items:center; justify-content:center;
font-size:15px;
transition:background .25s ease, color .25s ease;
}
.fn-footer-social-list li a:hover .fn-footer-social-ic{ background:var(--fn-blue); color:#fff; }
.fn-footer-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
flex-wrap:wrap;
border-top:1px solid rgba(255,255,255,.12);
padding:22px 0;
}
.fn-footer-bottom p{ margin:0; font-size:12.5px; color:#8592ae; }
.fn-footer-bottom-center{ flex:1; text-align:center; }
.fn-footer-bottom-right{ text-align:right; }
.fn-footer-bottom-right strong{ color:#c3cde3; font-weight:700; }
@media (max-width:1199px){
.fn-footer-grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; gap:24px; }
.fn-footer-brand{ grid-column:1 / -1; }
}
@media (max-width:991px){
.fn-footer-grid{ grid-template-columns:1fr 1fr; }
.fn-footer-brand{ grid-column:1 / -1; }
}
@media (max-width:767px){
.fn-footer{ padding-top:48px; }
.fn-footer-bottom{ flex-direction:column; text-align:center; gap:8px; }
.fn-footer-bottom-center, .fn-footer-bottom-right{ text-align:center; }
}
@media (max-width:480px){
.fn-footer-grid{ grid-template-columns:1fr; gap:36px; }
.fn-footer-logo img{ margin-left:0; }
}