@charset "UTF-8";
@import url(main.css);
/***********************************************POP UP*******************************/
.mc-popup-overlay { position: fixed; inset: 0; z-index: 999999; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(6, 12, 34, 0.83); }

.mc-popup-overlay.active { display: flex; }

.mc-popup-box { position: relative; width: 100%; max-width: 520px; background: #072544; padding: 42px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); font-family: 'Google Sans', sans-serif; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px)); }

.mc-popup-close { position: absolute; top: 16px; right: 18px; width: 38px; height: 38px; border: 2px solid rgba(255, 255, 255, 0.6); background: transparent; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }

.mc-popup-eyebrow { color: #4888c6; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 12px; }

.mc-popup-content h2 { color: #fff; font-size: 30px; line-height: 1.2; margin: 0 0 16px; }

.mc-popup-content p { color: rgba(255, 255, 255, 0.72); font-size: 17px; line-height: 1.6; margin: 0 0 26px; }

.mc-popup-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.mc-popup-actions a { display: inline-flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; border: 2px solid rgba(255, 255, 255, 0.75); padding: 11px 22px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; transition: all 0.3s ease; }

.mc-popup-actions a:hover, .mc-popup-close:hover { color: #89bae5; border-color: #89bae5; box-shadow: 0 8px 26px rgba(37, 153, 212, 0.35); }

@media (max-width: 600px) { .mc-popup-box { padding: 34px 24px; } .mc-popup-actions a { width: 100%; } }

/****************************************AJUSTEMENTS SEO*******************************/
.first-banner-seo-page .background-image-div-opacity { background-image: url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FtmHXaslOZGSh5fwUVbc8224LUGe2%2Fimages%2F1724346010472_ggkj.webp?alt=media&token=da899f5f-9915-4795-89f6-815bee242128") !important; }

#bandeau-title-seo .titles { font-weight: 300 !important; width: 80%; margin: auto !important; }

#photo-text-seo-page h2.titles, #seo-text-images h2.titles { font-weight: 300 !important; }

.first-activity-div .card-cover a, .second-activity-div .card-cover a, .third-activity-div .card-cover a { font-weight: 300 !important; }

#button-seo-page-homepage a.button_homepageDoubleScreen { background-color: #072544 !important; }

div#photo-text-seo-page, div#seo-text-images, #photo-text-seo-page > div, #double-images-text-seo-2 > div > div { background-color: #072544 !important; box-shadow: 0 24px 60px rgba(7, 37, 68, 0.18); clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px)); }

#logo-seo-page + div + #contact { background: #072544 !important; box-shadow: 0 24px 60px rgba(7, 37, 68, 0.18); clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px)); }

/**************************************************************************************/
.spacer { display: none; }

.dropdown-menu.text-color-fourth > li:nth-child(even) { background-color: #c9c9c947; }

.dropdown-menu.text-color-fourth > li.px-4 { margin: 0.4rem 0; padding-right: 1.2rem !important; padding-left: 1.2rem !important; }

nav.navbar { margin: 10px; border-radius: 10px; }

.animated-border-button { color: #214d7a !important; text-decoration: none; background-color: transparent !important; display: flex; flex-direction: column; align-items: center; text-align: center; letter-spacing: 0.1rem; }

.dropdown-toggle { color: #214d7a !important; letter-spacing: 0.1rem; }

.dropdown-menu { background-color: white; min-width: 300px !important; transform: translateX(-50%); left: 50% !important; }

@media (max-width: 999px) { .dropdown-menu { transform: none !important; } }

.logo_nav, .navbar-brand { width: 12vw !important; height: 8vh !important; }

@media screen and (max-width: 870px) { .logo_nav, .navbar-brand { width: 32vw !important; } }

.animated-border-button:after { background-color: #89bae5; }

/*********************************************VALEURS*******************************************/
.values-section { background: #f5f3ef; padding: 0 4rem 6rem; font-family: 'Google Sans', sans-serif; overflow: hidden; }

.values-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

.value-card { position: relative; background: #072544; padding: 2.4rem 2rem; text-align: center; box-shadow: 0 20px 44px rgba(7, 37, 68, 0.16); clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px)); }

.value-card::before { content: ""; position: absolute; top: 3px; right: 3px; width: 0; height: 0; border-top: 20px solid #4888c6; border-left: 20px solid transparent; }

.value-card::after { content: ""; position: absolute; bottom: 3px; left: 3px; width: 0; height: 0; border-bottom: 20px solid #4888c6; border-right: 20px solid transparent; }

.value-icon { width: 88px; height: 88px; margin: 0 auto 1.4rem; display: flex; align-items: center; justify-content: center; color: #89bae5; font-size: 3.5rem; }

.value-card h3 { color: #fff; font-size: 1.35rem; font-weight: 700; line-height: 1.3; margin: 0 0 0.9rem; }

.value-card p { color: rgba(255, 255, 255, 0.68); font-size: 1rem; line-height: 1.65; margin: 0; }

@media (max-width: 900px) { .values-grid { grid-template-columns: 1fr; } }

@media (max-width: 600px) { .values-section { padding: 0 1.5rem 3.5rem; } .value-card { padding: 2rem 1.5rem; } }

/***********************************************MAPS**************************************************/
.find-us-section { background: #f0eadf; padding: 6rem 4rem; font-family: 'Google Sans', sans-serif; }

.find-us-content { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 5rem; }

.find-us-text { flex: 0.9; }

.find-us-address { color: #3a4a5c; font-size: 1.2rem; line-height: 1.7; margin: 0; font-weight: 600; }

.find-us-hours { font-size: 1.1rem; line-height: 1.7; margin: 20px 0; font-weight: 600; color: #8b7312; }

.find-us-map { flex: 1.1; background: #072544; overflow: hidden; box-shadow: 0 24px 60px rgba(7, 37, 68, 0.18); clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 30px 100%, 0 calc(100% - 30px)); }

.find-us-map iframe { display: block; width: 100%; height: 460px; filter: grayscale(0.15); }

@media (max-width: 800px) { .find-us-section { padding: 3.5rem 1.5rem; } .find-us-content { flex-direction: column; gap: 2.5rem; align-items: stretch; } .find-us-map iframe { height: 360px; } }

/***********************************************JOB SECTION*****************************************************/
.job-section { background: #f5f3ef; padding: 3rem 4rem; font-family: 'Google Sans', sans-serif; overflow: hidden; }

.job-carousel { position: relative; max-width: 920px; margin: 0 auto; }

.job-track { position: relative; min-height: 430px; align-content: center; }

.job-slide { display: none; background: #072544; padding: 3rem; color: #fff; box-shadow: 0 24px 60px rgba(7, 37, 68, 0.18); clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 30px 100%, 0 calc(100% - 30px)); }

.job-slide.active { display: block; animation: jobFade 0.45s ease both; }

.job-badge { display: inline-flex; background: #4888c6; color: #fff; font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 16px; margin-bottom: 1.2rem; }

.job-slide h3 { font-size: clamp(26px, 3vw, 40px); line-height: 1.2; margin: 0 0 1.4rem; color: #fff; }

.job-slide p, .job-slide li { color: rgba(255, 255, 255, 0.72); font-size: 1.1rem; line-height: 1.75; }

.job-slide ul { margin: 0; padding-left: 1.2rem; }

.job-slide li::marker { color: #89bae5; }

.job-arrow { position: absolute; top: 50%; z-index: 3; width: 48px; height: 48px; transform: translateY(-50%); background: #072544; color: #fff; border: 2px solid rgba(255, 255, 255, 0.7); font-size: 36px; line-height: 1; cursor: pointer; transition: all 0.3s ease; }

.job-prev { left: -70px; }

.job-next { right: -70px; }

.job-arrow:hover { color: #89bae5; border-color: #89bae5; box-shadow: 0 8px 26px rgba(37, 153, 212, 0.35); }

.job-dots { display: flex; justify-content: center; gap: 8px; margin-top: 0.8rem; }

.job-dot { width: 9px; height: 9px; border: none; background: rgba(7, 37, 68, 0.28); cursor: pointer; transition: all 0.3s ease; }

.job-dot.active { background: #4888c6; transform: scale(1.3); }

.job-btn { margin-top: 1.5rem; }

@keyframes jobFade { from { opacity: 0;
    transform: translateY(12px); }
  to { opacity: 1;
    transform: translateY(0); } }

@media (max-width: 900px) { .job-section { padding: 3.5rem 1.5rem; } .job-track { min-height: auto; } .job-slide { padding: 2rem; } .job-arrow { position: static; transform: none; margin: 1.5rem 0.4rem 0; } .job-carousel { text-align: center; } .job-slide { text-align: left; } }

/**************************************************GALERIE CATEGORIE***************************************/
.realisations-section { background: #f5f3ef; padding: 6rem 4rem; font-family: 'Google Sans', sans-serif; }

.realisations-filters { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.8rem; margin: 0 auto 3rem; max-width: 1100px; }

.realisations-filter { background: transparent; color: #072544; border: 2px solid #072544; padding: 10px 20px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: all 0.35s ease; }

.realisations-filter:hover, .realisations-filter.active { background: #072544; color: #fff; border-color: #072544; box-shadow: 0 8px 24px rgba(7, 37, 68, 0.18); }

.realisations-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; max-width: 1280px; margin: 0 auto; }

.realisation-card { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: none; border-radius: 15px; background: #072544; overflow: hidden; cursor: pointer; transition: transform 0.4s ease, box-shadow 0.4s ease; }

.realisation-card img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.78; transition: transform 0.5s ease, opacity 0.5s ease; }

.realisation-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(7, 37, 68, 0.22); }

.realisation-card:hover img { opacity: 1; transform: scale(1.06); }

.realisation-card.is-hidden { display: none; }

/* Lightbox */
.realisations-lightbox { position: fixed; inset: 0; z-index: 999999; background: rgba(6, 12, 34, 0.92); display: none; align-items: center; justify-content: center; padding: 3rem; }

.realisations-lightbox.active { display: flex; }

.lightbox-img { width: auto; max-width: 90vw; max-height: 82vh; object-fit: contain; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); background: #072544; }

.lightbox-close, .lightbox-arrow { position: absolute; border: 2px solid rgba(255, 255, 255, 0.7); background: transparent; color: #fff; cursor: pointer; transition: all 0.3s ease; }

.lightbox-close { top: 24px; right: 24px; width: 48px; height: 48px; font-size: 34px; line-height: 1; }

.lightbox-arrow { top: 50%; transform: translateY(-50%); width: 54px; height: 54px; font-size: 42px; line-height: 1; padding-bottom: 7px; }

.lightbox-prev { left: 24px; }

.lightbox-next { right: 24px; }

.lightbox-close:hover, .lightbox-arrow:hover { border-color: #89bae5; color: #89bae5; box-shadow: 0 8px 26px rgba(37, 153, 212, 0.35); }

@media (max-width: 1000px) { .realisations-grid { grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 700px) { .realisations-section { padding: 3.5rem 1.5rem; } .realisations-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } .realisations-filter { width: 100%; } .realisations-lightbox { padding: 1.5rem; } .lightbox-arrow { width: 42px; height: 42px; font-size: 32px; } .lightbox-prev { left: 10px; } .lightbox-next { right: 10px; } }

/***************************************************************FOURNISSEURS******************************************/
.brands-section { padding: 1rem 4rem 6rem; font-family: 'Google Sans', sans-serif; overflow: hidden; }

.brands-grid { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1.8rem; max-width: 1380px; margin: 2.5rem auto 0; }

.brand-logo { width: 180px; height: 100px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 1.4rem; box-shadow: 0 18px 40px rgba(7, 37, 68, 0.08); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }

.brand-logo img { max-width: 100%; max-height: 70px; object-fit: contain; opacity: 0.82; }

@media (max-width: 700px) { .brands-section { padding: 3.5rem 1.5rem; } .brand-logo { width: 170px; height: 96px; } .brands-grid { gap: 1rem; } }

/*****************************************************Réseaux sociaux********************************************/
.social-section { background: #072544; padding: 6rem 4rem; font-family: 'Google Sans', sans-serif; }

.social-section .services-h2 { color: #fff; }

.social-section .services-eyebrow { color: #4888c6; }

.social-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; max-width: 1180px; margin: 0 auto; }

.social-card { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }

.social-iframe { width: 100%; background: #072544; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 100%, 26px 100%, 0 calc(100% - 26px)); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22); }

.social-card .btn-decouvrir { background: transparent !important; border-color: rgba(255, 255, 255, 0.8) !important; color: #fff !important; }

.social-card .btn-decouvrir:hover { color: #89bae5 !important; border-color: #89bae5 !important; }

.social-card .btn-decouvrir i { color: #fff; font-size: 1rem; margin-right: 4px; }

.social-card .btn-decouvrir:hover i { color: #89bae5; }

@media (max-width: 800px) { .social-section { padding: 3.5rem 1.5rem; } .social-grid { grid-template-columns: 1fr; } }

/***************************************************CONTACT*******************************************************/
#contact .col-lg-6 { display: none; }

#contact .col-md-10 { width: 100%; }

#contact { background: #f5f3ef !important; padding: 6rem 4rem !important; font-family: 'Google Sans', sans-serif; overflow: hidden; }

#contact .background-image-div-opacity { display: none; }

#contact .row { max-width: 980px; margin: 0 auto; padding-top: 0 !important; }

#contact form#formContact { width: 100%; background: #072544 !important; border: none !important; border-radius: 0 !important; padding: 2.5rem !important; box-shadow: 0 24px 60px rgba(7, 37, 68, 0.18); clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px)); }

#contact .form-control { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 0; color: #fff; font-size: 1rem; min-height: 54px; transition: border-color 0.3s ease, box-shadow 0.3s ease; }

#contact .form-control:focus { background: rgba(255, 255, 255, 0.1); border-color: #89bae5; color: #fff; box-shadow: 0 0 0 0.2rem rgba(137, 186, 229, 0.18); }

#contact .form-control::placeholder { color: transparent; }

#contact .form-floating label { color: rgba(255, 255, 255, 0.62); }

#contact .form-floating > .form-control:focus ~ label, #contact .form-floating > .form-control:not(:placeholder-shown) ~ label { color: #89bae5; }

#contact textarea.form-control { min-height: 150px; padding-top: 1rem; }

#contact .input-group .form-control { color: rgba(255, 255, 255, 0.72); }

#contact .checkbox, #contact .checkbox label { color: rgba(255, 255, 255, 0.68); font-size: 0.95rem; line-height: 1.6; }

#contact .checkbox a { color: #89bae5; font-weight: 700; text-decoration: none; }

#contact .checkbox a:hover { color: #fff; }

#contact input[type="checkbox"] { accent-color: #4888c6; margin-right: 6px; }

#contact button[type="submit"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; color: #fff !important; font-family: 'Google Sans', sans-serif !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; padding: 13px 30px 11px !important; border: 3px solid #fff !important; border-radius: 0 !important; transition: all 0.4s ease !important; }

#contact button[type="submit"]:hover { transform: translateY(-2px); color: #89bae5 !important; border-color: #89bae5 !important; box-shadow: 0 8px 26px rgba(37, 153, 212, 0.35); }

#contact #erase-file { border-radius: 0; }

#contact .modal-content { border-radius: 0; border: none; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }

.contact-services-header { position: relative; z-index: 2; text-align: center; margin: 80px auto 60px !important; max-width: 820px; }

.contact-services-header .services-eyebrow { justify-content: center; }

@media (max-width: 700px) { #contact { padding: 3.5rem 1.5rem !important; } #contact form#formContact { padding: 1.6rem !important; } }

/************************************************FORMULAIRE TALLY***********************************************/
.tally-form-block > .container { background: #072544 !important; box-shadow: 0 24px 60px rgba(7, 37, 68, 0.18); clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px)); }

.tally-form-content { max-width: 1000px; }

.tally-form-title { display: none; }

/*******************************************************HERO SECONDAIRE*******************************************/
.secondary-hero { position: relative; overflow: hidden; background: #072544; padding: 11rem 4rem 5rem; font-family: 'Google Sans', sans-serif; }

.secondary-hero-inner { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 4rem; }

.secondary-hero-logo { width: 36%; max-width: 360px; min-width: 220px; display: block; animation: heroFadeDown 0.7s ease both; }

.secondary-hero-sep { width: 1px; height: 120px; background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.2), transparent); }

.secondary-hero-content { flex: 1; }

.secondary-hero .intro-eyebrow { color: #4888c6; margin-bottom: 1.2rem; }

.secondary-hero-h1 { font-family: 'Google Sans', sans-serif; font-size: 2.3rem; font-weight: 500; color: #fff; line-height: 1.15; margin: 0; max-width: 760px; animation: heroFadeDown 0.8s 0.1s ease both; }

@media (max-width: 650px) { .secondary-hero-h1 { font-size: 1.3rem; } }

@media (max-width: 800px) { .secondary-hero { padding: 6rem 1.5rem 3.5rem; } .secondary-hero-inner { flex-direction: column; text-align: center; gap: 2rem; } .secondary-hero-logo { width: 70%; } .secondary-hero-sep { width: 80px; height: 1px; } .secondary-hero .intro-eyebrow { justify-content: center; } }

/*******************************************************AVIS GOOGLE*********************************************/
#avis-clients + .photoTitleText { background-color: #072544 !important; }

#avis-clients + .photoTitleText h2 { font-weight: 700 !important; font-size: clamp(26px, 3vw, 40px); }

div.mb-5.googleReviews-div > div.container.m-4.mx-auto > div { display: none !important; }

div.googleReviews-div { background-color: #072544; padding-bottom: 50px; margin-bottom: 0 !important; }

div.googleReviews-div .container { margin: 0 !important; }

div.googleReviews-div .owl-nav { color: white !important; }

.avis-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: #072544; color: #fff; font-family: 'Google Sans', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; padding: 14px 26px; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); transition: all 0.4s ease; }

.avis-button:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(37, 153, 212, 0.35); }

.avis-stars { color: #ffd107; font-size: 15px; letter-spacing: 1px; line-height: 1; }

.avis-stars span { display: inline-block; width: 0.5em; overflow: hidden; vertical-align: bottom; }

.avis-text { color: #fff; white-space: nowrap; }

/*************************************************AJUSTEMENTS SEO***********************************************/
div:has(> .first-activity-div) { background: #f5f3ef; padding: 150px 0 50px; }

div.first-activity-div, div.second-activity-div, div.third-activity-div { background-color: #eee9e0 !important; box-shadow: none !important; }

div.first-activity-div h2, div.second-activity-div h2, div.third-activity-div h2 { color: #072544 !important; }

/********************************************************BANNIERE ACCUEIL******************************************************/
.bloc-marquee-gallery { position: relative; width: 100vw; min-height: 100vh; padding-top: 50px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 32px; background: #072544; }

.bloc-marquee-gallery__row { width: 100%; overflow: hidden; display: flex; padding: 12px 0; }

.bloc-marquee-gallery__track { display: flex; gap: 24px; width: max-content; animation: bloc-marquee-gallery-scroll-left 70s linear infinite; animation-play-state: paused; will-change: transform; }

.bloc-marquee-gallery:hover .bloc-marquee-gallery__track { animation-play-state: running; }

.bloc-marquee-gallery__row--reverse .bloc-marquee-gallery__track { animation-name: bloc-marquee-gallery-scroll-right; }

.bloc-marquee-gallery__item { box-sizing: border-box; flex: 0 0 auto; width: clamp(180px, 18vw, 320px); height: clamp(180px, 36vh, 340px); border-radius: 24px; overflow: hidden; transition: transform 0.35s ease, box-shadow 0.35s ease; transform-origin: center; will-change: transform; transform: translateZ(0); }

.bloc-marquee-gallery__item:hover { transform: scale(1.08) translateZ(0); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); z-index: 2; }

.bloc-marquee-gallery__item img { box-sizing: border-box; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; opacity: 0.5; transition: transform 0.35s ease, opacity 0.35s ease; will-change: transform, opacity; }

.bloc-marquee-gallery__item:hover img { transform: scale(1.06); opacity: 1; }

.bloc-marquee-gallery__logo-wrapper { position: absolute; top: 50%; left: 50%; z-index: 10; transform: translate(-50%, -50%); pointer-events: none; }

.bloc-marquee-gallery__logo { display: block; width: clamp(230px, 25vw, 660px); height: auto; }

.bloc-marquee-gallery__zones { position: absolute; inset: 0; z-index: 8; display: flex; pointer-events: none; }

.bloc-marquee-gallery__zone { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 2rem 2rem 3rem; overflow: hidden; pointer-events: none; }

.bloc-marquee-gallery__zone::before { content: ""; position: absolute; inset: 0; opacity: 0.2; transition: opacity 0.45s ease; pointer-events: none; }

.bloc-marquee-gallery__zone--left::before { background: linear-gradient(90deg, #020d19cc, rgba(7, 37, 68, 0)); }

.bloc-marquee-gallery__zone--right::before { background: linear-gradient(270deg, #020d19cc, rgba(7, 37, 68, 0)); }

.bloc-marquee-gallery__zone.is-active::before { opacity: 1; }

.bloc-marquee-gallery__zone-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; pointer-events: none; filter: drop-shadow(5px 5px 10px #26496d); }

.bloc-marquee-gallery__badge { background: #4888c6; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 16px; border-radius: 20px; margin-bottom: 0.8rem; white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity 0.4s ease, transform 0.4s ease; }

.bloc-marquee-gallery__zone.is-active .bloc-marquee-gallery__badge { opacity: 1; transform: translateY(0); }

.bloc-marquee-gallery__zone-label { font-family: 'Google Sans', serif; font-size: 2.5rem; font-weight: 700 !important; letter-spacing: 1.5px; color: #fff; text-align: center; margin: 0 0 1.3rem; line-height: 1.2; text-shadow: 4px 4px 29px rgba(6, 12, 34, 0.83); }

.bloc-marquee-gallery__button { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #fff; font-family: 'Google Sans', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 10px 28px 9px; border: 2px solid rgba(255, 255, 255, 0.6); border-radius: 0; cursor: pointer; text-decoration: none; transition: border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; pointer-events: auto; }

.bloc-marquee-gallery__button:hover { border-color: #89bae5; color: #89bae5; box-shadow: 0 6px 24px rgba(37, 153, 212, 0.35); transform: translateY(-2px); }

.bloc-marquee-gallery__button svg { width: 13px; height: 13px; flex-shrink: 0; }

@keyframes bloc-marquee-gallery-scroll-left { from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 12px)); } }

@keyframes bloc-marquee-gallery-scroll-right { from { transform: translateX(calc(-50% - 12px)); }
  to { transform: translateX(0); } }

@media (max-width: 650px) { .bloc-marquee-gallery__zones { flex-direction: column !important; justify-content: space-between; } .bloc-marquee-gallery__zone { height: fit-content !important; padding: 1rem 0 !important; justify-content: center !important; } .bloc-marquee-gallery__zone-label { font-size: 2rem; } .bloc-marquee-gallery__item img { opacity: 0.75; } }

@media screen and (max-width: 870px) { .bloc-marquee-gallery__zone::before { opacity: 1; } .bloc-marquee-gallery__item { opacity: 0.7 !important; } .bloc-marquee-gallery__track { animation-play-state: running !important; } }

/*********************************************************************************TIMELINE*********************************************************/
.mc-timeline-section { background: #f5f3ef; padding: 6rem 4rem; overflow: hidden; }

.mc-timeline { position: relative; max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 2.2rem; }

.mc-timeline-line { position: absolute; top: 0; bottom: 0; left: 230px; width: 1px; background: linear-gradient(to bottom, transparent, rgba(72, 136, 198, 0.45), transparent); }

.mc-timeline-item { position: relative; display: grid; grid-template-columns: 220px 1fr; gap: 2rem; align-items: stretch; }

.mc-timeline-date { position: relative; z-index: 2; color: #4888c6; font-size: 1.5rem; text-align: right; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding-top: 1.4rem; }

.mc-timeline-date::after { content: ''; position: absolute; top: 1.7rem; right: -2.35rem; width: 13px; height: 13px; background: #4888c6; border: 4px solid #f5f3ef; border-radius: 50%; box-shadow: 0 0 0 6px rgba(72, 136, 198, 0.16); }

.mc-timeline-card { position: relative; background: #072544; padding: 1.8rem 2rem; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); transition: transform 0.4s ease, box-shadow 0.4s ease; }

.mc-timeline-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(7, 37, 68, 0.18); }

.mc-timeline-card h3 { color: #fff; font-size: 1.35rem; font-weight: 700; margin: 0 0 0.8rem; }

.mc-timeline-card p { color: rgba(255, 255, 255, 0.68); font-size: 1.05rem; line-height: 1.7; margin: 0; }

@media (max-width: 700px) { .mc-timeline-section { padding: 3.5rem 1.5rem; } .mc-timeline-line { left: 0; } .mc-timeline-item { grid-template-columns: 1fr; gap: 0.8rem; padding-left: 1.7rem; } .mc-timeline-date { padding-top: 0; text-align: left; } .mc-timeline-date::after { top: 0.25rem; left: -2.08rem; right: auto; } .mc-timeline-card { padding: 1.5rem; } }

/******************************************************************************INTRODUCTION*******************************************************/
/* ══════════════════════════════════════════════ BLOC INTRO ══════════════════════════════════════════════ */
.intro-section { width: 100%; background: #f5f3ef; padding: 10rem; display: flex; gap: 5rem; align-items: center; box-sizing: border-box; }

/* ── TEXTE ── */
.intro-text { flex: 1; min-width: 0; }

.intro-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #4888c6; margin-bottom: 1.2rem; }

.intro-eyebrow::before { content: ''; display: block; width: 28px; height: 2px; background: #4888c6; flex-shrink: 0; }

.intro-h2 { font-size: clamp(26px, 3vw, 40px) !important; font-weight: 700 !important; color: #072544; line-height: 1.2; margin: 0 0 1.8rem; }

.intro-divider { width: 48px; height: 2px; background: #4888c6; border-radius: 2px; margin: 0 0 1.6rem; }

.intro-body { font-size: 1.15rem; line-height: 1.8; color: #3a4a5c; margin: 0 0 1.4rem; }

.intro-entities { display: flex; flex-direction: column; gap: 0.75rem; margin: 0 0 2rem; }

.intro-entity { display: flex; align-items: flex-start; gap: 12px; font-size: 1.25rem; color: #3a4a5c; line-height: 1.5; }

.intro-entity-dot { width: 8px; height: 8px; border-radius: 50%; background: #4888c6; flex-shrink: 0; margin-top: 10px; }

.intro-entity strong { color: #072544; font-weight: 700; }

/* ── CARROUSEL ── */
.intro-carousel { flex: 1; min-width: 0; position: relative; overflow: hidden; aspect-ratio: 1/1; background: #072544; box-shadow: 0 24px 60px rgba(7, 37, 68, 0.18); }

.intro-carousel { clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 30px 100%, 0 calc(100% - 30px)); border-radius: 0; }

.intro-carousel::before, .intro-carousel::after { content: ""; position: absolute; width: 0; height: 0; z-index: 10; pointer-events: none; }

.intro-carousel::before { top: 0; left: -1px; border-top: 50px solid #072544; border-right: 50px solid transparent; }

.intro-carousel::after { right: 0; bottom: 0; border-bottom: 50px solid #072544; border-left: 50px solid transparent; }

.carousel-track { display: flex; height: 100%; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }

.carousel-slide { min-width: 100%; height: 100%; background-size: cover; background-position: center; flex-shrink: 0; }

.carousel-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(7, 37, 68, 0.35) 0%, transparent 50%); pointer-events: none; }

.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; transition: background 0.3s, border-color 0.3s; }

.carousel-btn:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.5); }

.carousel-btn svg { width: 16px; height: 16px; stroke: #fff; }

.carousel-btn--prev { left: 1rem; }

.carousel-btn--next { right: 1rem; }

.carousel-dots { position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 3; }

.carousel-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); cursor: pointer; transition: background 0.3s, transform 0.3s; border: none; padding: 0; }

.carousel-dot.active { background: #fff; transform: scale(1.3); }

@media (max-width: 800px) { .intro-section { flex-direction: column; padding: 3rem 1.5rem; gap: 2.5rem; } .intro-carousel { width: 100%; } }

/***********************************************************************AVANT / APRÈS**************************************************/
.before-after-images-column { position: relative; }

.before-after-images-column:first-of-type { margin-top: 0; }

/* Div parente ciblée via :has() */
div:has(> .row .before-after-images-column) { background: #072544; padding: 6rem 4rem; margin: 0 !important; font-family: 'Google Sans', sans-serif; overflow: hidden; }

div:has(> .row .before-after-images-column) > .row { max-width: 1480px; margin: 0 auto !important; row-gap: 2rem !important; }

.image-before-after-container { position: relative; background: #072544; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.24); clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px)); }

.before-image-gallery, .after-image-gallery { width: 100%; height: 100%; object-fit: cover; }

.slider-before-after-images { background: rgba(7, 37, 68, 0.15); }

.slider-before-after-images::before { background: #89bae5; box-shadow: 0 0 18px rgba(137, 186, 229, 0.45); }

.before-after-slider-button { width: 44px; height: 44px; background: #072544; border: 2px solid #89bae5; border-radius: 50%; color: #fff; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28); }

.before-after-slider-button i { color: #fff; }

.left-arrow-before, .right-arrow-before { color: #fff; }

@media (max-width: 700px) { div:has(> .row .before-after-images-column) { padding: 3.5rem 1.5rem; } .image-before-after-container { aspect-ratio: 4 / 3; } }

#avant-apres .before-after-services-header { position: relative; z-index: 2; text-align: center; max-width: 820px; margin: 0 auto 3.5rem; }

#avant-apres .services-h2 { color: #fff; }

#avant-apres .services-eyebrow { color: #4888c6; }

/********************************************************ZONE INTERVENTION*********************************************/
.zone-section { width: 100%; background: #072544; padding: 6rem 4rem; display: flex; gap: 5rem; align-items: center; box-sizing: border-box; overflow: hidden; }

@media (max-width: 800px) { .zone-section { padding: 3rem 1.5rem; } .zone-stats { flex-direction: column; gap: 0.5rem !important; } .zone-map { transform: scale(2) !important; } }

/* ── CARTE ── */
.zone-map { flex: 1; min-width: 0; position: relative; transform: scale(1.5); }

.zone-map svg { width: 100%; height: auto; display: block; overflow: visible; }

.zone-section:hover g[opacity="0.55"] circle { transform-box: fill-box; transform-origin: center; animation: circlePulse 3.5s ease-in-out infinite; }

g[opacity="0.55"] circle:nth-child(2) { animation-delay: 0.12s; }

g[opacity="0.55"] circle:nth-child(3) { animation-delay: 0.24s; }

g[opacity="0.55"] circle:nth-child(4) { animation-delay: 0.36s; }

g[opacity="0.55"] circle:nth-child(5) { animation-delay: 0.48s; }

g[opacity="0.55"] circle:nth-child(6) { animation-delay: 0.60s; }

g[opacity="0.55"] circle:nth-child(7) { animation-delay: 0.72s; }

g[opacity="0.55"] circle:nth-child(8) { animation-delay: 0.84s; }

g[opacity="0.55"] circle:nth-child(9) { animation-delay: 0.96s; }

g[opacity="0.55"] circle:nth-child(10) { animation-delay: 1.08s; }

@keyframes circlePulse { 0%, 100% { transform: scale(1);
    opacity: 0.55; }
  50% { transform: scale(1.1);
    opacity: 0.85; } }

/* ── TEXTE ── */
.zone-text { flex: 1; min-width: 0; display: flex; flex-direction: column; z-index: 96; }

.zone-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #4888c6; margin-bottom: 1.2rem; }

.zone-eyebrow::before { content: ''; display: block; width: 28px; height: 2px; background: #4888c6; flex-shrink: 0; }

.zone-h2 { font-size: clamp(26px, 3vw, 40px); font-weight: 700 !important; color: #fff; line-height: 1.2; margin: 0 0 1.5rem; }

.zone-divider { width: 48px; height: 2px; background: #4888c6; border-radius: 2px; margin: 0 0 1.6rem; }

.zone-body { font-size: 1.15rem; line-height: 1.8; color: rgba(255, 255, 255, 0.65); margin: 0 0 2.5rem; }

/* ── STATS ── */
.zone-stats { display: flex; gap: 2rem; }

.zone-stat { display: flex; flex-direction: column; gap: 4px; justify-content: flex-end; }

.zone-stat-number { font-size: 4rem; font-weight: 700; color: #fff; line-height: 1; }

.zone-stat-number span { color: #4888c6; }

.zone-stat-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); }

.zone-stat-sep { width: 1px; background: rgba(255, 255, 255, 0.1); align-self: stretch; }

@media (max-width: 800px) { .zone-section { flex-direction: column; padding: 3rem 1.5rem; gap: 2.5rem; } }

/*********************************************************BLOCS SERVICES****************************************************/
.services-section { width: 100%; background: #f5f3ef; padding: 7.5rem 4rem; box-sizing: border-box; }

.services-header { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 3.5rem; }

.services-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #4888c6; margin-bottom: 1rem; }

.services-eyebrow::before, .services-eyebrow::after { content: ''; display: block; width: 28px; height: 2px; background: #4888c6; flex-shrink: 0; }

.services-h2 { font-size: clamp(26px, 3vw, 40px); font-weight: 600 !important; color: #072544; line-height: 1.2; margin: 0; }

/* ── GRILLE ── */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

/* ── CARD ── */
.service-card { position: relative; overflow: visible; text-decoration: none; display: block; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); background: #072544; min-height: 400px; cursor: pointer; transition: transform 0.4s ease; }

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

/* Triangles décoratifs biseaux */
.service-card::before, .service-card::after { content: ''; position: absolute; width: 0; height: 0; z-index: 4; pointer-events: none; transition: border-color 0.4s ease; }

.service-card::before { top: 3px; left: 3px; border-style: solid; border-width: 19px 19px 0 0; border-color: #4888c6 transparent transparent transparent; }

.service-card::after { bottom: 3px; right: 3px; border-style: solid; border-width: 0 0 19px 19px; border-color: transparent transparent #4888c6 transparent; }

.service-card:hover::before, .service-card:hover::after { border-color: #89bae5 transparent transparent transparent; }

.service-card:hover::after { border-color: transparent transparent #89bae5 transparent; }

/* Photo */
.service-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.45; transition: opacity 0.5s ease, transform 0.5s ease; }

.service-card:hover .service-card-bg { opacity: 0.6; transform: scale(1.05); }

/* Dégradé */
.service-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(7, 37, 68, 0.95) 0%, rgba(7, 37, 68, 0.3) 55%, transparent 100%); z-index: 1; }

/* Contenu */
.service-card-content { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.6rem 1.4rem; gap: 0.7rem; }

.service-card-title { font-size: 1.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; line-height: 1.3; margin: 0; }

.service-card-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #4888c6; transition: color 0.3s, gap 0.3s; }

.service-card:hover .service-card-link { color: #89bae5; gap: 10px; }

.service-card-link svg { width: 12px; height: 12px; stroke: currentColor; flex-shrink: 0; }

@media (max-width: 900px) { .services-grid { grid-template-columns: repeat(2, 1fr); } .services-section { padding: 3rem 1.5rem; } }

@media (max-width: 500px) { .services-grid { grid-template-columns: 1fr; } }

/***************************************************CONTACT BANNER**********************************/
.contact-banner { background: #072544; padding: 5rem 1.5rem; text-align: center; margin: 5rem 0; }

.contact-banner-inner { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }

.contact-banner .services-eyebrow { color: #4888c6; margin-bottom: 1rem; }

.contact-banner-title { font-size: 2.3rem; color: #fff; line-height: 1.2; margin: 0; }

.contact-banner .hero-divider { margin: 1.4rem 0 2rem; }

.contact-banner-actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }

.contact-banner .btn-decouvrir { border-color: rgba(255, 255, 255, 0.8) !important; }

@media (max-width: 600px) { .contact-banner { padding: 3.5rem 1.5rem; } .contact-banner-actions { width: 100%; } .contact-banner .btn-decouvrir { width: 100%; } }

/*-----------------------------------------------Galerie infinie-------------------------------------------------------------*/
.infinite-gallery { overflow: hidden; width: 100%; position: relative; margin: 180px 0; }

.gallery-track { display: flex; gap: 20px; width: max-content; animation: scrollGallery 60s linear infinite; }

.gallery-item { clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 30px 100%, 0 calc(100% - 30px)); border-radius: 0; position: relative; }

.gallery-item::before, .gallery-item::after { content: ""; position: absolute; width: 0; height: 0; z-index: 10; pointer-events: none; }

.gallery-item::before { top: 0; left: -1px; border-top: 50px solid #072544; border-right: 50px solid transparent; }

.gallery-item::after { right: 0; bottom: 0; border-bottom: 50px solid #072544; border-left: 50px solid transparent; }

.gallery-item img { max-height: 400px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 15px; display: block; }

/* Animation */
@keyframes scrollGallery { from { transform: translateX(0); }
  to { transform: translateX(-50%); } }

/* Pause au survol (optionnel) */
.infinite-gallery:hover .gallery-track { animation-play-state: paused; }

.lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.9); display: flex; align-items: center; justify-content: center; padding: 40px; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 9999; }

.lightbox.active { opacity: 1; pointer-events: auto; }

.lightbox-image { max-width: 90vw; max-height: 90vh; border-radius: 12px; object-fit: contain; }

.lightbox-close { position: absolute; top: 20px; right: 25px; background: transparent; border: none; color: white; font-size: 40px; cursor: pointer; line-height: 1; }

/********************************************************TOUS LES BOUTONS***************************************************/
a.button_header, a.button_homepageScreen, a.button_homepageDoubleScreen, a.phone-number-button, a.btn-decouvrir, a.bloc-marquee-gallery__button { display: inline-flex !important; align-items: center !important; gap: 8px !important; background: transparent !important; color: #fff !important; font-family: 'Google Sans', sans-serif !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; padding: 11px 30px 9px !important; border-radius: 0 !important; cursor: pointer !important; transition: all 0.5s ease !important; text-decoration: none !important; border: 3px solid white !important; min-width: 210px !important; justify-content: center !important; }

a.button_header { background: #072544 !important; border: none !important; clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }

.btn-decouvrir:hover, a.button_header:hover, a.button_homepageScreen:hover, a.button_homepageDoubleScreen:hover, a.phone-number-button:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 26px rgba(37, 153, 212, 0.5) !important; color: #89bae5 !important; }

.btn-decouvrir svg { width: 14px; height: 14px; }

a.button_header:visited, a.button_homepageScreen:visited, a.button_homepageDoubleScreen:visited, a.phone-number-button:visited, a.btn-decouvrir:visited, a.bloc-marquee-gallery__button { color: white !important; }

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