@charset "UTF-8";
@import url(main.css);
.nav-link { color: #009acb !important; }

.mx-auto.col-lg-11.px-4.py-4.mb-5.mt-5.text-color-primary.rounded-3.shadow-lg.bg-primaryColor.position-relative { box-shadow: 0 0rem 0rem rgba(0, 0, 0, 0.175) !important; }

.col-md-10.d-flex.justify-content-center.col-lg-6 { padding-top: 5rem !important; }

h5.mb-4 { font-family: 'Playfair Display'; }

#carte.mx-auto.col-lg-11.px-4.py-4.mb-5.mt-5.text-color-primary.rounded-3.shadow-lg.bg-primaryColor.position-relative { margin: 0 !important; width: 100%; margin-bottom: 4rem !important; }

.mx-auto.third-activity-div.col-lg-11.px-4.py-4.mb-4.mt-5.bg-primaryColor.text-color-primary.rounded-3.shadow-lg.position-relative { box-shadow: none !important; border: 1px solid #009acb; border-radius: 50px !important; margin-bottom: 4rem !important; }

.mx-auto.second-activity-div.col-lg-11.px-4.py-4.mb-5.mt-5.rounded-3.shadow-lg.bg-primaryColor.text-color-primary.position-relative { box-shadow: none !important; border: 1px solid #009acb; border-radius: 50px !important; margin-bottom: 4rem !important; }

.mx-auto.first-activity-div.col-lg-11.px-4.py-4.mb-5.mt-5.bg-primaryColor.text-color-primary.rounded-3.shadow-lg.position-relative { box-shadow: none !important; border: 1px solid #009acb; border-radius: 50px !important; margin-bottom: 4rem !important; }

h1 { text-shadow: 2px 2px 2px #316978 !important; }

.spacer { margin-top: 0vh; }

primaryColor.position-relative { box-shadow: none !important; }

/*-------------------bouton nav--------------------------*/
/* 🎯 Style bouton bleu contour */
a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.p-2.rounded-pill.text-decoration-none.button-header-telephone { display: inline-block; border: 2px solid #009acb; /* 🔵 contour bleu */ border-radius: 30px; padding: 10px 28px; color: #009acb !important; /* 🔵 texte bleu */ font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.3s ease; background: transparent !important; /* 🔹 fond transparent par défaut */ text-decoration: none; text-shadow: none !important; }

/* 🌊 Effet au survol, focus, clic */
a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.p-2.rounded-pill.text-decoration-none.button-header-telephone:hover, a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.p-2.rounded-pill.text-decoration-none.button-header-telephone:focus, a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.p-2.rounded-pill.text-decoration-none.button-header-telephone:active { background-color: #009acb !important; /* 🔵 fond plein bleu */ color: #fff !important; /* ⚪ texte blanc */ box-shadow: 0 6px 18px rgba(0, 154, 203, 0.3); text-shadow: none !important; }

/* 🩵 Bonus : si le bouton contient un span / strong / svg */
a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.p-2.rounded-pill.text-decoration-none.button-header-telephone:hover span, a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.p-2.rounded-pill.text-decoration-none.button-header-telephone:hover strong, a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.p-2.rounded-pill.text-decoration-none.button-header-telephone:hover svg { color: #fff !important; fill: #fff !important; }

/*-------------------bouton accueil--------------------------*/
/* 🎯 Style du bouton personnalisé */
a#phone-analytics-tag-video-bloc { display: inline-block; border: 2px solid #fff; border-radius: 30px; padding: 10px 28px; color: #fff !important; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.3s ease; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); text-decoration: none; background: transparent !important; /* ✅ bloque les styles par défaut */ }

/* 🌊 Effet au survol, focus ou clic */
a#phone-analytics-tag-video-bloc:hover, a#phone-analytics-tag-video-bloc:focus, a#phone-analytics-tag-video-bloc:active { background-color: #fff !important; color: #009acb !important; box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3) !important; text-shadow: none !important; }

/* 🩵 Bonus : si le bouton contient du texte ou des icônes dans des balises internes */
a#phone-analytics-tag-video-bloc:hover span, a#phone-analytics-tag-video-bloc:hover strong, a#phone-analytics-tag-video-bloc:hover svg { color: #009acb !important; fill: #009acb !important; }

/*-------------------bouton cta--------------------------*/
/* 🎯 Style du bouton personnalisé */
a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2 { display: inline-block; border: 2px solid #fff; border-radius: 30px; padding: 10px 28px; color: #fff !important; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.3s ease; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); text-decoration: none; background: transparent !important; /* bloque les couleurs par défaut */ }

/* 🌊 Effet au survol, focus ou clic */
a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2:hover, a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2:focus, a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2:active { background-color: #fff !important; color: #009acb !important; box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3) !important; text-shadow: none !important; }

/* 🩵 Bonus : si le texte du bouton est dans un span ou strong */
a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2:hover span, a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2:hover strong { color: #009acb !important; fill: #009acb !important; }

h1 { padding-bottom: 4rem; }

/*-------------------Services pages--------------------------*/
/* 🌿 Bloc Services - David Guion */
.services-cards-guion { background-color: #d9ebf5; padding: 100px 20px; font-family: "Poppins", "Segoe UI", sans-serif; color: #fff; }

.services-cards__container { max-width: 1200px; margin: 0 auto; text-align: center; }

/* 🟦 Titre principal adaptatif */
.services-cards__title { font-size: 2.4rem; font-weight: 700; color: #009acb; margin-bottom: 120px; text-transform: uppercase; letter-spacing: 0.5px; position: relative; display: inline-block; }

/* Barre bleue responsive */
.services-cards__title::after { content: ""; display: block; width: 60%; /* 🔵 s’adapte à la largeur du titre */ max-width: 400px; height: 4px; background-color: #009acb; border-radius: 3px; margin: 12px auto 0; transition: width 0.3s ease; }

/* 🔹 Grille fluide */
.services-cards__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 60px; justify-content: center; margin-top: 20px; }

/* 💎 Carte avec relief marqué */
.services-cards__card { position: relative; border-radius: 22px; padding: 90px 30px 50px; text-align: center; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FZIZCpdQJR6QbqP9X179iPKhyT9H3%2Fimages%2F20251028_1525_Abstract_Blue_Topographic_Background_remix_01k8nk8mjqe7navvj61yr3360n_vke5.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; /* ✨ Ombres avec plus de relief et profondeur */ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.05) inset; overflow: visible; transition: box-shadow 0.3s ease; }

/* ✅ Voile bleu translucide */
.services-cards__card::before { content: ""; position: absolute; inset: 0; border-radius: 22px; background: linear-gradient(to bottom right, rgba(0, 50, 80, 0.6), rgba(0, 154, 203, 0.6)); z-index: 1; }

/* ✅ Contenu par-dessus le voile */
.services-cards__card h3, .services-cards__card p { position: relative; z-index: 2; }

/* 🟡 Image ronde */
.services-cards__img { position: absolute; top: -70px; left: 50%; transform: translateX(-50%); width: 200px; height: 200px; border-radius: 50%; overflow: hidden; border: 5px solid #fff; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); z-index: 3; }

.services-cards__img img { width: 100%; height: 100%; object-fit: cover; }

/* Contenu texte */
.services-cards__card h3 { margin-top: 90px; font-size: 1.35rem; font-weight: 600; color: #fff; margin-bottom: 12px; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); }

.services-cards__card p { font-size: 0.95rem; color: #f1f1f1; line-height: 1.45; /* 🔹 plus compact pour meilleure lisibilité */ padding: 0 10px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); max-width: 95%; margin: 0 auto; }

/* 📱 Responsive */
@media (max-width: 992px) { .services-cards__title::after { width: 70%; max-width: 250px; /* 🔹 barre qui rétrécit harmonieusement */ } }

@media (max-width: 768px) { .services-cards__title { font-size: 2rem; margin-bottom: 100px; } .services-cards__grid { gap: 45px; } .services-cards__img { width: 140px; height: 140px; top: -60px; } .services-cards__card h3 { margin-top: 80px; } .services-cards__card { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.05) inset; } }

/*-------------------Icones blocs--------------------------*/
/* ===== Bloc Avantages fixes - David Guion ===== */
.atout-guion { background-image: url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FZIZCpdQJR6QbqP9X179iPKhyT9H3%2Fimages%2F20251028_1525_Abstract_Blue_Topographic_Background_remix_01k8nk8mjqe7navvj61yr3360n_vke5.webp?alt=media&token=22566ddb-53f6-46f5-9559-be59b62c7bb6"); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 25px; padding: 80px 20px; color: #fff; position: relative; overflow: hidden; margin: 70px auto; max-width: 1200px; }

/* Légère surcouche pour améliorer la lisibilité */
.atout-guion::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.15); }

.atout-guion__container { position: relative; z-index: 1; text-align: center; }

.atout-guion__subtitle { text-transform: uppercase; font-size: 0.85rem; letter-spacing: 2px; color: #cdefff; margin-bottom: 8px; }

.atout-guion__title { font-size: 2.2rem; font-weight: 700; color: #ffffff; margin-bottom: 12px; }

.atout-guion__text { font-size: 1rem; color: rgba(255, 255, 255, 0.85); margin-bottom: 55px; line-height: 1.5; }

/* Grille fluide */
.atout-guion__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 40px; justify-items: center; }

/* Élément individuel sans fond ni hover */
.atout-guion__item { text-align: center; }

/* Icônes rondes fixes sur fond clair */
.atout-guion__icon { width: 110px; height: 110px; border-radius: 50%; background-color: #f5f3ef; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px auto; }

.atout-guion__icon img { width: 70px; height: 70px; object-fit: contain; }

/* Titres et texte */
.atout-guion__item h3 { font-size: 1.15rem; font-weight: 600; color: #fff; margin-bottom: 10px; }

.atout-guion__item p { font-size: 0.95rem; color: rgba(255, 255, 255, 0.9); line-height: 1.4; max-width: 240px; margin: 0 auto; }

/* Responsive */
@media (max-width: 768px) { .atout-guion { padding: 60px 15px; } .atout-guion__title { font-size: 1.8rem; } .atout-guion__grid { gap: 35px; } .atout-guion__icon { width: 90px; height: 90px; } .atout-guion__icon img { width: 55px; height: 55px; } }

/*-------------------Services blocs--------------------------*/
/* 🌊 Section globale */
.servicesguion-bloc { position: relative; background: linear-gradient(to bottom right, #d9ebf5, #d9ebf5); padding: 100px 20px; overflow: hidden; }

/* Texture subtile */
.servicesguion-bloc::before { content: ""; position: absolute; inset: 0; background: url("https://www.transparenttextures.com/patterns/white-diamond.png"); opacity: 0.05; }

/* Titre principal */
.servicesguion-bloc__title { font-size: 2.6rem; font-weight: 700; text-align: center; color: #009acb; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 120px; position: relative; }

.servicesguion-bloc__title::after { content: ""; display: block; width: clamp(120px, 50%, 300px); height: 4px; background-color: #009acb; border-radius: 3px; margin: 12px auto 0; }

/* Grille */
.servicesguion-bloc__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 60px; justify-content: center; }

/* 🟦 Carte principale */
.servicesguion-bloc__item { position: relative; overflow: hidden; border-radius: 26px; text-decoration: none; height: 420px; box-shadow: 0 25px 45px rgba(0, 0, 0, 0.15); transition: transform 0.5s ease, box-shadow 0.5s ease; }

.servicesguion-bloc__item:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2); }

/* Image de fond */
.servicesguion-bloc__image { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.6s ease; }

.servicesguion-bloc__item:hover .servicesguion-bloc__image { transform: scale(1.1); }

/* Voile renforcé */
.servicesguion-bloc__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.35)); z-index: 1; transition: opacity 0.4s ease; }

/* Contenu centré */
.servicesguion-bloc__content { position: relative; z-index: 2; color: #fff; text-align: center; padding: 30px; top: 50%; transform: translateY(-50%); }

/* Icône circulaire */
.servicesguion-bloc__icon { width: 100px; height: 100px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15); transition: transform 0.4s ease, background 0.4s ease; }

.servicesguion-bloc__icon img { width: 60%; height: auto; filter: brightness(1.2); }

.servicesguion-bloc__item:hover .servicesguion-bloc__icon { transform: scale(1.1); background: rgba(255, 255, 255, 0.25); }

/* Titres et texte avec ombre visible */
.servicesguion-bloc__content h3 { font-size: 1.9rem; font-weight: 700; margin-bottom: 8px; text-transform: uppercase; text-shadow: 0 3px 10px rgba(0, 0, 0, 0.5); }

.servicesguion-bloc__content p { font-size: 1rem; line-height: 1.5; color: #f4f9fb; max-width: 90%; margin: 0 auto 25px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }

/* CTA */
.servicesguion-bloc__cta { display: inline-block; border: 2px solid #fff; border-radius: 30px; padding: 10px 28px; color: #fff; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.3s ease; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }

.servicesguion-bloc__cta:hover { background-color: #fff; color: #009acb; box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3); text-shadow: none; }

/* Responsive */
@media (max-width: 768px) { .servicesguion-bloc__title { font-size: 2rem; margin-bottom: 90px; } .servicesguion-bloc__item { height: 380px; } .servicesguion-bloc__icon { width: 80px; height: 80px; } .servicesguion-bloc__content h3 { font-size: 1.5rem; } }

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