@charset "UTF-8";
@import url(main.css);
.animated-border-button:after { background-color: #596ca0; }

.spacer { display: none !important; }

/**************************************************AJUSTEMENTS SEO****************************************************/
div:has(> .first-activity-div) { margin: 150px 50px; background: #f5f7ff !important; border-radius: 2rem; padding: 50px 0; position: relative; }

div:has(> .first-activity-div)::before { content: ""; position: absolute; width: 450px; height: 450px; background: #0a48ed; opacity: .05; border-radius: 50%; top: -200px; left: -200px; }

div:has(> .first-activity-div)::after { content: ""; position: absolute; width: 350px; height: 350px; background: #596ca0; opacity: .08; border-radius: 50%; bottom: -150px; right: -150px; }

div.first-activity-div, div.second-activity-div, div.third-activity-div { box-shadow: none !important; color: #090A35 !important; background-color: transparent; margin: 0 auto !important; }

@media (max-width: 1100px) { div:has(> .first-activity-div) { width: 98%; margin: 150px auto; } }

#navbarSupportedContent > ul > li.dropdown.px-4 > div > a:nth-child(1) { font-size: 0.8em !important; }

#navbarSupportedContent > ul > li.dropdown.px-4 > div > ul a { transition: all 0.5s ease; }

#bandeau-title-seo .titles { width: 80%; margin: auto !important; font-size: 0.8em; }

#photo-text-seo-page h2.titles { width: 80%; font-size: 0.6em; }

#seo-text-images h2.titles { font-size: 1.6em; }

.first-banner-seo-page .background-image-div-opacity { background-image: url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FWFQzxbMVJZQhK5EF3DnQ2wf7Ujc2%2Fimages%2FCharte_graphique_1_d43i.webp?alt=media&token=5005ba6b-37b7-4c86-a55f-c608318c6e83") !important; }

/* ========================================================= VARIABLES ========================================================= */
.voltales-container { width: 90%; max-width: 1300px; margin: 0 auto; }

.voltales-button { display: inline-flex; align-items: center; justify-content: center; background: #0a48ed; color: #ffffff; font-weight: 600 !important; padding: 15px 18px; text-decoration: none; border-radius: 0; transition: .3s ease; gap: 12px; }

.voltales-button svg { width: 20px !important; }

.voltales-button:hover { background: #090A35; color: white !important; }

a.button_header, a.button_homepageScreen, a.button_homepageDoubleScreen, a.phone-number-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #0a48ed !important; color: #ffffff !important; padding: 15px 18px !important; text-decoration: none !important; border-radius: 0 !important; transition: .3s ease !important; gap: 12px !important; font-weight: 600 !important; }

a.button_header svg, a.button_homepageScreen svg, a.button_homepageDoubleScreen svg, a.phone-number-button svg { width: 20px !important; }

/* ========================================================= HERO ========================================================= */
.voltales-hero { height: 100vh; width: 100%; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }

.voltales-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.voltales-hero__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9, 10, 53, 0.85), rgba(9, 10, 53, 0.65)); }

.voltales-hero__content { position: relative; z-index: 2; width: 90%; max-width: 900px; text-align: center; color: white; }

.voltales-hero__logo { max-width: 450px; margin-bottom: 20px; }

.voltales-hero h1 { margin-bottom: 20px; color: white; text-shadow: 3px 3px 0px #090a35; }

.voltales-hero h1 span:last-child { letter-spacing: -1px; }

.voltales-hero p { margin: 0 auto 20px; max-width: 700px; }

/* ========================================================= INTRO CARTES MODERNES ========================================================= */
.voltales-intro { position: relative; padding: 120px 0; background: #f5f7ff; overflow: hidden; }

.voltales-intro::before { content: ""; position: absolute; width: 450px; height: 450px; background: #0a48ed; opacity: .05; border-radius: 50%; top: -200px; left: -200px; }

.voltales-intro::after { content: ""; position: absolute; width: 350px; height: 350px; background: #596ca0; opacity: .08; border-radius: 50%; bottom: -150px; right: -150px; }

.voltales-intro__cards { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }

.voltales-intro__card { position: relative; background: white; padding: 45px 30px; border-radius: 30px; text-align: center; box-shadow: 0 20px 50px rgba(9, 10, 53, 0.08); overflow: hidden; opacity: 0; transform: translateY(60px); transition: opacity .7s ease, transform .7s ease, box-shadow .3s ease; }

/* animation déclenchée par JS */
.voltales-intro__card.is-visible { opacity: 1; transform: translateY(0); }

/* barre bleue décorative */
.voltales-intro__card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: #0a48ed; }

/* cercle icône */
.voltales-intro__card i { display: flex; align-items: center; justify-content: center; width: 75px; height: 75px; margin: 0 auto 30px; background: #090A35; color: white; border-radius: 50%; font-size: 1.7rem !important; }

/* titre */
.voltales-intro__card h3 { color: #090A35; font-size: 1.4rem !important; font-weight: 700 !important; }

/* responsive tablette */
@media (max-width: 1000px) { .voltales-intro__cards { grid-template-columns: repeat(2, 1fr); } }

/* responsive mobile */
@media (max-width: 600px) { .voltales-intro { padding: 80px 0; } .voltales-intro__cards { grid-template-columns: 1fr; } .voltales-intro__card { padding: 35px 25px; } }

/* ========================================================= ABOUT MODERNE ========================================================= */
.voltales-about { position: relative; padding: 120px 0; background: #090A35; overflow: hidden; }

.voltales-about::before { content: ""; position: absolute; width: 500px; height: 500px; background: #0a48ed; opacity: .15; border-radius: 50%; left: -250px; top: 50%; transform: translateY(-50%); }

.voltales-about__container { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }

/* IMAGE */
.voltales-about__image { position: relative; }

.voltales-about__image::before { content: ""; position: absolute; width: 100%; height: 100%; border: 3px solid #0a48ed; border-radius: 30px; top: 25px; left: -25px; z-index: 0; }

.voltales-about__image img { position: relative; z-index: 2; width: 100%; height: 520px; object-fit: cover; border-radius: 30px; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35); }

/* CONTENU */
.voltales-about__content { color: white; }

.voltales-about__content h2 { color: #ffffff; margin-bottom: 30px; position: relative; padding-bottom: 20px; font-weight: 600 !important; text-transform: uppercase; }

.voltales-about__content h3 { color: #DFE6F7; font-family: Poppins; font-size: 1.6rem !important; font-weight: 700 !important; letter-spacing: -1px; }

.voltales-about__content h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 70px; height: 4px; background: #0a48ed; }

.voltales-about__content p { line-height: 1.8; margin-bottom: 20px; color: #e7e9f5; }

.voltales-about__content .voltales-button { margin-top: 20px; }

/* ANIMATION SCROLL */
.voltales-about__image { opacity: 0; transform: translateY(50px); transition: opacity .8s ease, transform .8s ease; }

.voltales-about__image.is-visible { opacity: 1; transform: translateY(0); }

/* RESPONSIVE TABLETTE */
@media (max-width: 1000px) { .voltales-about__container { grid-template-columns: 1fr; gap: 60px; } .voltales-about__image img { height: 450px; } }

/* RESPONSIVE MOBILE */
@media (max-width: 600px) { .voltales-about { padding: 80px 0; } .voltales-about__image::before { top: 15px; left: -15px; } .voltales-about__image img { height: 350px; } }

/* ========================================================= SERVICES ========================================================= */
.voltales-services { background: #090A35; padding: 100px 0 150px; color: white; }

.voltales-section-header { text-align: center; max-width: 800px; margin: 0 auto 50px; }

.voltales-section-header h2 { color: white; }

.voltales-section-header p { color: white; }

.voltales-services__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; }

.voltales-service-card { height: 320px; position: relative; display: flex; align-items: flex-end; padding: 30px; text-decoration: none; overflow: hidden; border-radius: 20px; background-size: cover; background-position: center; transition: all 0.5s ease; }

.voltales-service-card:hover { transform: translateY(-10px); }

.voltales-service-card__overlay { position: absolute; inset: 0; background: linear-gradient(transparent, rgba(9, 10, 53, 0.9)); }

.voltales-service-card h3 { position: relative; z-index: 2; font-weight: 600 !important; color: #DFE6F7; }

/*************************************************************POP UP************************************************/
/* ========================================================= POPUP SERVICES ========================================================= */
.voltales-popup { position: fixed; inset: 0; z-index: 9999; overflow-y: auto; padding: 30px 0; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: .3s ease; }

.voltales-popup.active { opacity: 1; visibility: visible; }

.voltales-popup__overlay { position: absolute; inset: 0; background: rgba(9, 10, 53, 0.75); backdrop-filter: blur(5px); }

.voltales-popup__content { position: relative; z-index: 2; width: 90%; max-height: 90vh; overflow-y: auto; margin: 20px; max-width: 750px; background: white; padding: 50px; border-radius: 30px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3); transform: translateY(40px); transition: .3s ease; }

.voltales-popup.active .voltales-popup__content { transform: translateY(0); }

.voltales-popup__title { color: #090A35; margin-bottom: 25px; }

.voltales-popup__text { color: #596ca0; line-height: 1.7; margin-bottom: 35px; }

.voltales-popup__close { position: absolute; top: 15px; right: 20px; border: none; background: none; color: #090A35; cursor: pointer; line-height: 1; transition: all 0.5s ease; }

.voltales-popup__close:hover { transform: scale(1.5); }

@media (max-width: 600px) { .voltales-popup__content { padding: 35px 25px; } }

/* ========================================================= VALEURS MODERNES ========================================================= */
.voltales-values { position: relative; padding: 120px 0; background: #9ba7c8; overflow: hidden; }

.voltales-values::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px); background-size: 40px 40px; z-index: 0; pointer-events: none; }

.voltales-values > * { position: relative; z-index: 1; }

.voltales-values .voltales-section-header { position: relative; z-index: 2; text-align: center; margin-bottom: 60px; }

.voltales-values .voltales-section-header h2 { color: white; }

.voltales-values__grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; }

.voltales-value-card { position: relative; padding: 45px; background: white; border-radius: 30px; overflow: hidden; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2); opacity: 0; transform: translateY(60px); transition: opacity .7s ease, transform .7s ease; }

.voltales-value-card.is-visible { opacity: 1; transform: translateY(0); }

.voltales-value-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: #0a48ed; }

.voltales-value-card::after { content: ""; position: absolute; width: 120px; height: 120px; background: #0a48ed; opacity: .05; border-radius: 50%; right: -40px; bottom: -40px; }

.voltales-value-card i { display: flex; align-items: center; justify-content: center; width: 75px; height: 75px; margin: 0 auto 30px; background: #090A35; color: white; border-radius: 50%; font-size: 1.7rem !important; }

.voltales-value-card h3 { color: #090A35; font-size: 1.4rem !important; font-weight: 700 !important; }

.voltales-value-card p { color: #596ca0; line-height: 1.7; position: relative; z-index: 2; }

/* RESPONSIVE TABLETTE */
@media (max-width: 1000px) { .voltales-values__grid { grid-template-columns: 1fr; } }

/* RESPONSIVE MOBILE */
@media (max-width: 600px) { .voltales-values { padding: 80px 0; } .voltales-value-card { padding: 35px 25px; } }

/* ========================================================= PARTENAIRES ========================================================= */
/* ========================================================= AVIS CLIENTS ========================================================= */
.voltales-reviews { padding: 100px 0 150px; }

.voltales-reviews h2 { text-align: center; color: #090A35; margin-bottom: 50px; }

.voltales-reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

.voltales-review-card { padding: 35px; background: white; border-radius: 20px; box-shadow: 0 10px 30px rgba(9, 10, 53, 0.08); }

.voltales-review-card span { color: #596ca0; }

/* ========================================================= BANNIERE CTA ========================================================= */
.voltales-contact { position: relative; padding: 100px 0; }

.voltales-contact__content { position: relative; text-align: center; color: white; }

.voltales-contact h2 { color: white; }

/* ========================================================= RESPONSIVE TABLETTE ========================================================= */
@media (max-width: 1000px) { .voltales-intro__cards { grid-template-columns: repeat(2, 1fr); } .voltales-about__container { grid-template-columns: 1fr; } .voltales-services__grid { grid-template-columns: repeat(2, 1fr); } .voltales-values__grid { grid-template-columns: 1fr; } .voltales-reviews__grid { grid-template-columns: 1fr; } }

/* ========================================================= RESPONSIVE MOBILE ========================================================= */
@media (max-width: 600px) { .voltales-hero__logo { max-width: 300px; } .voltales-intro__cards, .voltales-services__grid { grid-template-columns: 1fr; } .voltales-about, .voltales-services, .voltales-values, .voltales-reviews { padding: 60px 0; } .voltales-service-card { height: 260px; } .voltales-button { padding: 13px 25px; } }

/*# sourceMappingURL=custom.css.map */