@charset "UTF-8";
@import url(main.css);
.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 { border-radius: 0px !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 { border-radius: 0px !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 { border-radius: 0px !important; }

.d-flex.align-items-center.justify-content-center.px-4.py-5.text-center.cta_banner.bg-sixthColor.position-relative { padding-top: 6rem !important; padding-bottom: 6rem !important; }

.carousel-inner-homepage .carousel-item-homepage > img { animation: none !important; -webkit-animation: none !important; -o-animation: none !important; }

.logo-footer > .logo_nav { height: 15vh !important; }

a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.p-2.rounded-pill.text-decoration-none.button-header-telephone { border-radius: 0px !important; color: #fff !important; }

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

a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2 { border-radius: 0px !important; }

div#fullHeight { height: 85vh; }

a#phone-analytics-tag-video-bloc { border-radius: 0px !important; padding: 15px 60px !important; }

/* 🟢 Force le texte à gauche dans tout le bloc du slider */
.bloc-slider-homepage.text-center { text-align: left !important; }

/* 🟢 Supprime le centrage automatique du logo */
.sliderLogoContainer.mx-auto { margin: 0 !important; }

.sliderLogoContainer { width: 205px !important; }

/* 🟢 Force les titres à gauche aussi */
.titleText.text-white.text-center.fs-2.mb-4.mt-lg-5.titles { text-align: left !important; }

/* 🟢 Bonus : si Bootstrap réapplique .text-center, tu peux écraser globalement */
.bloc-slider-homepage .text-center, .titleText.text-center { text-align: left !important; }

/*-------------------------------------------------------------------ACCUEIL----------------------------------------------------------------*/
.atout-hero-cover, .atout-hero-cover * { box-sizing: border-box; }

.atout-hero-cover { position: relative; width: 100%; min-height: 760px; overflow: hidden; isolation: isolate; background: #000000; font-family: inherit; }

.atout-hero-cover__bg { position: absolute; inset: 0; z-index: 1; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FpHBdmfGTwAYWzbjq6lK3fzGFJNI3%2Fimages%2FAtout_Couvertures_p96n.webp"); background-size: cover; background-position: center right; background-repeat: no-repeat; }

.atout-hero-cover__overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.68) 52%, rgba(0, 0, 0, 0.18) 76%, rgba(0, 0, 0, 0.04) 100%); }

.atout-hero-cover__triangle { position: absolute; top: 0; left: 30%; z-index: 3; width: 56%; height: 100%; background: rgba(0, 0, 0, 0.72); clip-path: polygon(0 0, 70% 0, 28% 100%, 0 100%); pointer-events: none; }

.atout-hero-cover__content { position: relative; z-index: 5; width: 100%; min-height: 760px; margin: 0 auto; padding: 118px clamp(24px, 4vw, 72px) 110px; display: flex; align-items: center; }

.atout-hero-cover__inner { width: 100%; max-width: 760px; margin-left: clamp(18px, 3.2vw, 58px); }

.atout-hero-cover__brand { display: flex; align-items: center; gap: 22px; margin-bottom: 38px; }

.atout-hero-cover__brand img { width: 128px; height: auto; display: block; object-fit: contain; flex: 0 0 auto; }

.atout-hero-cover__brand span { color: #d75128; font-size: 24px; font-weight: 500; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }

.atout-hero-cover h1 { max-width: 720px; margin: 0; color: #ffffff; font-size: 45px; font-weight: 900 !important; line-height: 1.16; letter-spacing: 0.02em; text-transform: uppercase; }

.atout-hero-cover h1 span, .atout-hero-cover h1 strong { display: block; }

.atout-hero-cover h1 strong { color: #d75128; font-style: normal; font-weight: 900 !important; }

.atout-hero-cover h1 em { color: #d75128; font-style: normal; }

.atout-hero-cover p { max-width: 720px; margin: 28px 0 0; color: rgba(255, 255, 255, 0.92); font-size: 19px; font-weight: 400; line-height: 1.55; }

.atout-hero-cover__actions { display: flex; align-items: center; gap: 24px; margin-top: 42px; }

.atout-hero-cover__btn { min-width: 220px; min-height: 62px; padding: 20px 28px; display: inline-flex; align-items: center; justify-content: center; color: #ffffff; font-size: 15px; font-weight: 800 !important; line-height: 1; letter-spacing: 0.03em; text-transform: uppercase; text-decoration: none; transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; }

.atout-hero-cover__btn--primary { background: #d75128; border: 2px solid #d75128; }

.atout-hero-cover__btn--primary:hover { background: #b94422; border-color: #b94422; transform: translateY(-3px); }

.atout-hero-cover__btn--secondary { background: rgba(0, 0, 0, 0.18); border: 2px solid rgba(255, 255, 255, 0.55); }

.atout-hero-cover__btn--secondary:hover { background: #ffffff; border-color: #ffffff; color: #143b45; transform: translateY(-3px); }

@media (min-width: 1400px) { .atout-hero-cover { min-height: 790px; } .atout-hero-cover__content { min-height: 790px; padding-left: 38px; padding-right: 60px; } .atout-hero-cover__inner { max-width: 760px; margin-left: 34px; } .atout-hero-cover__triangle { left: 29%; width: 58%; clip-path: polygon(0 0, 68% 0, 27% 100%, 0 100%); } .atout-hero-cover__bg { background-position: center right; } }

@media (min-width: 1700px) { .atout-hero-cover { min-height: 820px; } .atout-hero-cover__content { min-height: 820px; padding-left: 42px; padding-right: 70px; } .atout-hero-cover__inner { margin-left: 42px; } .atout-hero-cover__bg { background-position: center right; } .atout-hero-cover__triangle { left: 28%; width: 60%; } }

@media (max-width: 1180px) { .atout-hero-cover { min-height: 700px; } .atout-hero-cover__content { min-height: 700px; padding: 96px 30px 88px; } .atout-hero-cover__inner { max-width: 700px; margin-left: 22px; } .atout-hero-cover__triangle { left: 28%; width: 68%; clip-path: polygon(0 0, 78% 0, 34% 100%, 0 100%); } .atout-hero-cover h1 { max-width: 690px; font-size: 42px; } .atout-hero-cover p { max-width: 660px; font-size: 18px; } }

@media (max-width: 900px) { .atout-hero-cover { min-height: auto; } .atout-hero-cover__bg { background-position: 68% center; } .atout-hero-cover__overlay { background: linear-gradient(90deg, rgba(0, 0, 0, 0.97) 0%, rgba(0, 0, 0, 0.91) 58%, rgba(0, 0, 0, 0.62) 100%); } .atout-hero-cover__triangle { left: 16%; width: 95%; opacity: 0.86; clip-path: polygon(0 0, 80% 0, 34% 100%, 0 100%); } .atout-hero-cover__content { min-height: auto; padding: 82px 24px 84px; } .atout-hero-cover__inner { max-width: 660px; margin-left: 0; } .atout-hero-cover__brand { gap: 18px; margin-bottom: 32px; } .atout-hero-cover__brand img { width: 108px; } .atout-hero-cover__brand span { font-size: 19px; } .atout-hero-cover h1 { max-width: 650px; font-size: 38px; line-height: 1.15; } .atout-hero-cover p { max-width: 620px; margin-top: 24px; font-size: 17px; } .atout-hero-cover__actions { gap: 18px; margin-top: 36px; } .atout-hero-cover__btn { min-width: 200px; min-height: 58px; padding: 18px 24px; font-size: 14px; } }

@media (max-width: 680px) { .atout-hero-cover__bg { background-position: 74% center; } .atout-hero-cover__overlay { background: linear-gradient(90deg, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.94) 62%, rgba(0, 0, 0, 0.78) 100%); } .atout-hero-cover__triangle { left: 0; width: 125%; opacity: 0.62; clip-path: polygon(0 0, 76% 0, 38% 100%, 0 100%); } .atout-hero-cover__content { padding: 68px 20px 72px; } .atout-hero-cover__inner { max-width: 100%; margin-left: 0; } .atout-hero-cover__brand { gap: 14px; margin-bottom: 26px; } .atout-hero-cover__brand img { width: 88px; } .atout-hero-cover__brand span { font-size: 15px; letter-spacing: 0.03em; white-space: normal; } .atout-hero-cover h1 { max-width: 100%; font-size: 33px; line-height: 1.14; } .atout-hero-cover p { margin-top: 24px; font-size: 16px; line-height: 1.55; } .atout-hero-cover__actions { width: 100%; flex-direction: column; align-items: stretch; gap: 14px; margin-top: 34px; } .atout-hero-cover__btn { width: 100%; min-width: 0; min-height: 56px; padding: 18px 22px; font-size: 14px; } }

@media (max-width: 460px) { .atout-hero-cover__content { padding: 60px 18px 64px; } .atout-hero-cover__brand { gap: 12px; margin-bottom: 24px; } .atout-hero-cover__brand img { width: 76px; } .atout-hero-cover__brand span { font-size: 13px; } .atout-hero-cover h1 { font-size: 29px; line-height: 1.16; letter-spacing: 0.01em; } .atout-hero-cover p { font-size: 15px; } }

@media (max-width: 360px) { .atout-hero-cover__content { padding: 54px 16px 58px; } .atout-hero-cover__brand img { width: 68px; } .atout-hero-cover h1 { font-size: 26px; } .atout-hero-cover p { font-size: 14px; } .atout-hero-cover__btn { min-height: 54px; font-size: 13px; } }

/*-------------------------------------------------------------------ACCUEIL VIDEO----------------------------------------------------------------*/
.atout-video-hero-cover, .atout-video-hero-cover * { box-sizing: border-box; }

.atout-video-hero-cover { position: relative; width: 100%; min-height: 760px; overflow: hidden; isolation: isolate; background: #000000; font-family: inherit; }

.atout-video-hero-cover__bg { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: hidden; background: #000000 !important; background-image: none !important; }

.atout-video-hero-cover__bg video { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center right; opacity: 0; transition: opacity 0.3s ease; }

.atout-video-hero-cover__bg video.is-loaded { opacity: 1; }

.atout-video-hero-cover__overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.68) 52%, rgba(0, 0, 0, 0.18) 76%, rgba(0, 0, 0, 0.04) 100%); }

.atout-video-hero-cover__triangle { position: absolute; top: 0; left: 30%; z-index: 3; width: 56%; height: 100%; background: rgba(0, 0, 0, 0.72); clip-path: polygon(0 0, 70% 0, 28% 100%, 0 100%); pointer-events: none; }

.atout-video-hero-cover__content { position: relative; z-index: 5; width: 100%; min-height: 760px; margin: 0 auto; padding-top: 118px; padding-right: clamp(24px, 4vw, 72px); padding-bottom: 110px; padding-left: clamp(24px, 4vw, 72px); display: flex; align-items: center; }

.atout-video-hero-cover__inner { width: 100%; max-width: 760px; margin-left: clamp(18px, 3.2vw, 58px); }

.atout-video-hero-cover__brand { display: flex; align-items: center; gap: 22px; margin-bottom: 38px; }

.atout-video-hero-cover__brand img { width: 128px; height: auto; display: block; object-fit: contain; flex: 0 0 auto; }

.atout-video-hero-cover__brand span { color: #d75128; font-size: 24px; font-weight: 500; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }

.atout-video-hero-cover h1 { max-width: 720px; margin: 0; color: #ffffff; font-size: 45px; font-weight: 900 !important; line-height: 1.16; letter-spacing: 0.02em; text-transform: uppercase; }

.atout-video-hero-cover h1 span, .atout-video-hero-cover h1 strong { display: block; }

.atout-video-hero-cover h1 strong { color: #d75128; font-style: normal; font-weight: 900 !important; }

.atout-video-hero-cover h1 em { color: #d75128; font-style: normal; }

.atout-video-hero-cover p { max-width: 720px; margin: 28px 0 0; color: rgba(255, 255, 255, 0.92); font-size: 19px; font-weight: 400; line-height: 1.55; }

.atout-video-hero-cover__actions { display: flex; align-items: center; gap: 24px; margin-top: 42px; }

.atout-video-hero-cover__btn { min-width: 220px; min-height: 62px; padding: 20px 28px; display: inline-flex; align-items: center; justify-content: center; color: #ffffff; font-size: 15px; font-weight: 800 !important; line-height: 1; letter-spacing: 0.03em; text-transform: uppercase; text-decoration: none; transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; }

.atout-video-hero-cover__btn--primary { background: #d75128; border: 2px solid #d75128; }

.atout-video-hero-cover__btn--primary:hover { background: #b94422; border-color: #b94422; transform: translateY(-3px); }

.atout-video-hero-cover__btn--secondary { background: rgba(0, 0, 0, 0.18); border: 2px solid rgba(255, 255, 255, 0.55); }

.atout-video-hero-cover__btn--secondary:hover { background: #ffffff; border-color: #ffffff; color: #143b45; transform: translateY(-3px); }

@media (max-width: 900px) { .atout-video-hero-cover { min-height: auto; } .atout-video-hero-cover__bg video { object-position: 70% center; } .atout-video-hero-cover__overlay { background: linear-gradient(90deg, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.48) 55%, rgba(0, 0, 0, 0.14) 100%); } .atout-video-hero-cover__triangle { left: 0; width: 100%; opacity: 0.18; background: rgba(0, 0, 0, 0.35); clip-path: polygon(0 0, 70% 0, 38% 100%, 0 100%); } .atout-video-hero-cover__content { min-height: auto; padding-top: 82px; padding-right: 24px; padding-bottom: 84px; padding-left: 24px; } .atout-video-hero-cover__inner { max-width: 660px; margin-left: 0; } .atout-video-hero-cover h1, .atout-video-hero-cover p, .atout-video-hero-cover__brand span { text-shadow: 0 4px 22px rgba(0, 0, 0, 0.9); } .atout-video-hero-cover__brand { gap: 18px; margin-bottom: 32px; } .atout-video-hero-cover__brand img { width: 108px; } .atout-video-hero-cover__brand span { font-size: 19px; } .atout-video-hero-cover h1 { max-width: 650px; font-size: 38px; line-height: 1.15; } .atout-video-hero-cover p { max-width: 620px; margin-top: 24px; font-size: 17px; } .atout-video-hero-cover__actions { gap: 18px; margin-top: 36px; } .atout-video-hero-cover__btn { min-width: 200px; min-height: 58px; padding: 18px 24px; font-size: 14px; } }

@media (max-width: 680px) { .atout-video-hero-cover__bg video { object-position: 72% center; } .atout-video-hero-cover__overlay { background: linear-gradient(180deg, rgba(0, 0, 0, 0.36) 0%, rgba(0, 0, 0, 0.5) 42%, rgba(0, 0, 0, 0.66) 100%); } .atout-video-hero-cover__triangle { opacity: 0.10; width: 100%; clip-path: polygon(0 0, 78% 0, 46% 100%, 0 100%); } .atout-video-hero-cover__content { padding-top: 68px; padding-right: 20px; padding-bottom: 72px; padding-left: 20px; } .atout-video-hero-cover__inner { max-width: 100%; margin-left: 0; } .atout-video-hero-cover__brand { gap: 14px; margin-bottom: 26px; } .atout-video-hero-cover__brand img { width: 88px; } .atout-video-hero-cover__brand span { font-size: 15px; letter-spacing: 0.03em; white-space: normal; } .atout-video-hero-cover h1 { max-width: 100%; font-size: 33px; line-height: 1.14; } .atout-video-hero-cover p { margin-top: 24px; font-size: 16px; line-height: 1.55; } .atout-video-hero-cover__actions { width: 100%; flex-direction: column; align-items: stretch; gap: 14px; margin-top: 34px; } .atout-video-hero-cover__btn { width: 100%; min-width: 0; min-height: 56px; padding: 18px 22px; font-size: 14px; } }

@media (max-width: 460px) { .atout-video-hero-cover__bg video { object-position: 74% center; } .atout-video-hero-cover__overlay { background: linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.48) 40%, rgba(0, 0, 0, 0.7) 100%); } .atout-video-hero-cover__triangle { display: none; } .atout-video-hero-cover__content { padding-top: 60px; padding-right: 18px; padding-bottom: 64px; padding-left: 18px; } .atout-video-hero-cover__brand { gap: 12px; margin-bottom: 24px; } .atout-video-hero-cover__brand img { width: 76px; } .atout-video-hero-cover__brand span { font-size: 13px; } .atout-video-hero-cover h1 { font-size: 29px; line-height: 1.16; letter-spacing: 0.01em; } .atout-video-hero-cover p { font-size: 15px; } }

@media (max-width: 360px) { .atout-video-hero-cover__content { padding-top: 54px; padding-right: 16px; padding-bottom: 58px; padding-left: 16px; } .atout-video-hero-cover__brand img { width: 68px; } .atout-video-hero-cover h1 { font-size: 26px; } .atout-video-hero-cover p { font-size: 14px; } .atout-video-hero-cover__btn { min-height: 54px; font-size: 13px; } }

/*-------------------------------------------------------------------INTRO----------------------------------------------------------------*/
.atout-company-focus, .atout-company-focus * { box-sizing: border-box; }

.atout-company-focus { position: relative; width: 100%; padding: 90px 28px; background: #f8f4ef; overflow: hidden; }

.atout-company-focus__container { width: 100%; max-width: 1380px; margin: 0 auto; display: grid; grid-template-columns: minmax(500px, 620px) minmax(0, 1fr); align-items: center; gap: 74px; }

.atout-company-focus__media { position: relative; padding-left: 42px; }

.atout-company-focus__vertical-word { position: absolute; top: 18px; left: 0; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 44px; font-weight: 800 !important; line-height: 1; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(20, 59, 69, 0.08); user-select: none; pointer-events: none; }

.atout-company-focus__image-wrap { position: relative; width: 100%; }

.atout-company-focus__image { display: block; width: 100%; height: 620px; object-fit: cover; border-radius: 0; box-shadow: 0 18px 42px rgba(20, 59, 69, 0.1); }

.atout-company-focus__content { width: 100%; max-width: 690px; }

.atout-company-focus__eyebrow { display: inline-block; margin-bottom: 14px; color: #d75128; font-size: 14px; font-weight: 800 !important; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; }

.atout-company-focus__content h2 { margin: 0; color: #143b45; font-size: 48px; font-weight: 800 !important; line-height: 1.12; letter-spacing: -0.02em; }

.atout-company-focus__intro { margin: 22px 0 0; color: #263238; font-size: 17px; font-weight: 400; line-height: 1.75; }

.atout-company-focus__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 28px; margin-top: 34px; }

.atout-company-focus__item { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: start; gap: 16px; }

.atout-company-focus__item-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; color: #d75128; flex: 0 0 auto; }

.atout-company-focus__item-icon svg { width: 42px; height: 42px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.atout-company-focus__item-text h3 { margin: 0 0 8px; color: #143b45; font-size: 26px; font-weight: 800 !important; line-height: 1.2; }

.atout-company-focus__item-text p { margin: 0; color: #6f7a7d; font-size: 15px; font-weight: 400; line-height: 1.6; }

@media (max-width: 1220px) { .atout-company-focus { padding: 80px 24px; } .atout-company-focus__container { grid-template-columns: minmax(430px, 540px) minmax(0, 1fr); gap: 56px; } .atout-company-focus__image { height: 560px; } .atout-company-focus__content h2 { font-size: 41px; } .atout-company-focus__item-text h3 { font-size: 23px; } }

@media (max-width: 980px) { .atout-company-focus { padding: 70px 22px; } .atout-company-focus__container { grid-template-columns: 1fr; gap: 46px; } .atout-company-focus__media { width: 100%; max-width: 700px; margin: 0 auto; padding-left: 34px; } .atout-company-focus__image { height: 520px; } .atout-company-focus__content { max-width: 100%; } .atout-company-focus__content h2 { font-size: 38px; } }

@media (max-width: 680px) { .atout-company-focus { padding: 58px 18px; } .atout-company-focus__media { padding-left: 22px; } .atout-company-focus__vertical-word { font-size: 28px; top: 8px; letter-spacing: 0.14em; } .atout-company-focus__image { height: 430px; } .atout-company-focus__content h2 { font-size: 32px; } .atout-company-focus__intro { font-size: 16px; line-height: 1.7; } .atout-company-focus__grid { grid-template-columns: 1fr; gap: 22px; margin-top: 28px; } .atout-company-focus__item { grid-template-columns: 46px minmax(0, 1fr); gap: 14px; } .atout-company-focus__item-icon { width: 46px; height: 46px; } .atout-company-focus__item-icon svg { width: 36px; height: 36px; } .atout-company-focus__item-text h3 { font-size: 21px; margin-bottom: 6px; } .atout-company-focus__item-text p { font-size: 14px; } }

@media (max-width: 420px) { .atout-company-focus { padding: 52px 16px; } .atout-company-focus__media { padding-left: 16px; } .atout-company-focus__vertical-word { font-size: 22px; } .atout-company-focus__image { height: 350px; } .atout-company-focus__content h2 { font-size: 28px; } .atout-company-focus__intro { font-size: 15px; } }

/*-------------------------------------------------------------------SERVICES----------------------------------------------------------------*/
.atout-workflow-roofing, .atout-workflow-roofing * { box-sizing: border-box; }

.atout-workflow-roofing { width: 100%; padding: 90px 28px; background: #f8f4ef; overflow: hidden; }

.atout-workflow-roofing__wrap { width: 100%; max-width: 1360px; margin: 0 auto; }

.atout-workflow-roofing__head { max-width: 860px; margin: 0 auto 56px; text-align: center; }

.atout-workflow-roofing__eyebrow { display: inline-block; margin-bottom: 12px; color: #d75128; font-size: 14px; font-weight: 800; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; }

.atout-workflow-roofing__head h2 { margin: 0; color: #143b45; font-size: 56px; font-weight: 800 !important; line-height: 1.15; letter-spacing: -0.03em; }

.atout-workflow-roofing__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px; }

.atout-workflow-roofing__card { position: relative; min-height: 430px; padding: 50px 38px 42px; display: flex; flex-direction: column; background: #ffffff; border: 1px solid #d8cbc0; box-shadow: 0 16px 36px rgba(20, 59, 69, 0.09); color: inherit; text-decoration: none; overflow: hidden; transition: transform 0.28s ease, background-color 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease; }

.atout-workflow-roofing__card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.22), transparent 34%), linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 48%); opacity: 0; pointer-events: none; transition: opacity 0.28s ease; }

.atout-workflow-roofing__icon { position: relative; z-index: 2; width: 96px; height: 96px; margin-bottom: 34px; display: flex; align-items: center; justify-content: center; color: #d75128; transition: color 0.28s ease, transform 0.28s ease; }

.atout-workflow-roofing__icon svg { width: 86px; height: 86px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.atout-workflow-roofing__card h3 { position: relative; z-index: 2; margin: 0; color: #143b45; font-size: 25px; font-weight: 800; line-height: 1.18; letter-spacing: -0.02em; transition: color 0.28s ease; }

.atout-workflow-roofing__line { position: relative; z-index: 2; width: 100%; height: 1px; margin: 40px 0 36px; background: #d8cbc0; transition: background-color 0.28s ease; }

.atout-workflow-roofing__card p { position: relative; z-index: 2; margin: 0; color: #6f7a7d; font-size: 17px; font-weight: 400; line-height: 1.65; transition: color 0.28s ease; }

.atout-workflow-roofing__card:hover, .atout-workflow-roofing__card:focus-visible { background: #d75128; border-color: #d75128; box-shadow: 0 26px 56px rgba(20, 59, 69, 0.18); transform: translateY(-8px); outline: none; }

.atout-workflow-roofing__card:hover::before, .atout-workflow-roofing__card:focus-visible::before { opacity: 1; }

.atout-workflow-roofing__card:hover .atout-workflow-roofing__icon, .atout-workflow-roofing__card:focus-visible .atout-workflow-roofing__icon { color: #ffffff; transform: translateY(-4px); }

.atout-workflow-roofing__card:hover h3, .atout-workflow-roofing__card:hover p, .atout-workflow-roofing__card:focus-visible h3, .atout-workflow-roofing__card:focus-visible p { color: #ffffff; }

.atout-workflow-roofing__card:hover .atout-workflow-roofing__line, .atout-workflow-roofing__card:focus-visible .atout-workflow-roofing__line { background: rgba(255, 255, 255, 0.42); }

@media (max-width: 1320px) { .atout-workflow-roofing { padding: 82px 24px; } .atout-workflow-roofing__head h2 { font-size: 48px; } .atout-workflow-roofing__grid { gap: 28px; } .atout-workflow-roofing__card { min-height: 410px; padding: 42px 30px 36px; } .atout-workflow-roofing__card h3 { font-size: 23px; } .atout-workflow-roofing__card p { font-size: 16px; } }

@media (max-width: 1080px) { .atout-workflow-roofing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .atout-workflow-roofing__card { min-height: 390px; } }

@media (max-width: 760px) { .atout-workflow-roofing { padding: 68px 20px; } .atout-workflow-roofing__head { margin-bottom: 40px; } .atout-workflow-roofing__head h2 { font-size: 38px; } .atout-workflow-roofing__grid { grid-template-columns: 1fr; gap: 22px; } .atout-workflow-roofing__card { min-height: auto; padding: 34px 24px 32px; } .atout-workflow-roofing__icon { width: 78px; height: 78px; margin-bottom: 28px; } .atout-workflow-roofing__icon svg { width: 70px; height: 70px; } .atout-workflow-roofing__card h3 { font-size: 22px; } .atout-workflow-roofing__line { margin: 28px 0 26px; } .atout-workflow-roofing__card p { font-size: 15px; } }

@media (max-width: 480px) { .atout-workflow-roofing { padding: 56px 16px; } .atout-workflow-roofing__head h2 { font-size: 30px; } .atout-workflow-roofing__card { padding: 28px 18px 26px; } .atout-workflow-roofing__icon { width: 68px; height: 68px; margin-bottom: 24px; } .atout-workflow-roofing__icon svg { width: 60px; height: 60px; } .atout-workflow-roofing__card h3 { font-size: 20px; } .atout-workflow-roofing__line { margin: 24px 0 22px; } .atout-workflow-roofing__card p { font-size: 14px; } }

/*-------------------------------------------------------------------INTRO PAGE----------------------------------------------------------------*/
.atout-product-present, .atout-product-present * { box-sizing: border-box; }

.atout-product-present { width: 100%; padding: 80px 28px; background: #f8f4ef; overflow: hidden; }

.atout-product-present__wrap { width: 100%; max-width: 1680px; margin: 0 auto; display: grid; grid-template-columns: minmax(480px, 620px) minmax(0, 1fr); align-items: center; gap: 56px; }

.atout-product-present__media { width: 100%; }

.atout-product-present__image { display: block; width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; object-position: center; background: #efe6dc; }

.atout-product-present__content { width: 100%; max-width: none; padding-right: 0; }

.atout-product-present__title { max-width: 980px; margin: 0 0 24px; color: #143b45; font-size: 58px; font-weight: 800 !important; line-height: 1.02; letter-spacing: -0.035em; }

.atout-product-present__title span { color: #d75128; }

.atout-product-present__title em { color: #6f7a7d; font-style: normal; }

.atout-product-present__text { max-width: 980px; margin: 0 0 18px; color: #6f7a7d; font-size: 18px; font-weight: 400; line-height: 1.72; }

.atout-product-present__text--lead { color: #263238; font-weight: 500; }

.atout-product-present__socials { display: flex; align-items: center; gap: 10px; margin-top: 26px; }

.atout-product-present__social { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; background: #ffffff; border: 2px solid #d75128; color: #143b45; text-decoration: none; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease; }

.atout-product-present__social svg { width: 19px; height: 19px; fill: currentColor; display: block; }

.atout-product-present__social:hover { background: #d75128; border-color: #d75128; color: #ffffff; transform: translateY(-2px); }

@media (max-width: 1280px) { .atout-product-present { padding: 72px 24px; } .atout-product-present__wrap { grid-template-columns: minmax(420px, 520px) minmax(0, 1fr); gap: 42px; } .atout-product-present__title { max-width: 820px; font-size: 50px; } .atout-product-present__text { max-width: 820px; font-size: 17px; } }

@media (max-width: 980px) { .atout-product-present { padding: 65px 24px; } .atout-product-present__wrap { grid-template-columns: 1fr; gap: 36px; } .atout-product-present__media { max-width: 620px; } .atout-product-present__content { max-width: 100%; padding-right: 0; } .atout-product-present__title { max-width: 100%; font-size: 42px; } .atout-product-present__text { max-width: 100%; font-size: 17px; } }

@media (max-width: 640px) { .atout-product-present { padding: 55px 16px; } .atout-product-present__media { max-width: 100%; } .atout-product-present__title { margin-bottom: 18px; font-size: 34px; line-height: 1.08; } .atout-product-present__text { margin-bottom: 14px; font-size: 16px; line-height: 1.68; } .atout-product-present__socials { margin-top: 20px; } .atout-product-present__social { width: 40px; height: 40px; } }

/*-------------------------------------------------------------------SERVICES PAGE----------------------------------------------------------------*/
.atout-interventions-cover, .atout-interventions-cover * { box-sizing: border-box; }

.atout-interventions-cover { width: 100%; padding: 90px 28px; background: #143b45; overflow: hidden; }

.atout-interventions-cover__wrap { width: 100%; max-width: 1500px; margin: 0 auto; }

.atout-interventions-cover__head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr); align-items: start; gap: 80px; margin-bottom: 58px; }

.atout-interventions-cover__title-block { position: relative; }

.atout-interventions-cover__dot { display: block; width: 8px; height: 8px; margin-bottom: 24px; border-radius: 50%; background: #d75128; }

.atout-interventions-cover__eyebrow { display: block; margin-bottom: 14px; color: #e8a17d; font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: 0.22em; text-transform: uppercase; }

.atout-interventions-cover h2 { max-width: 760px; margin: 0; color: #ffffff; font-size: clamp(44px, 5vw, 72px); font-weight: 900; line-height: 1.12; letter-spacing: -0.04em; }

.atout-interventions-cover__head > p { max-width: 560px; margin: 56px 0 0; color: rgba(255, 255, 255, 0.72); font-size: 20px; font-weight: 400; line-height: 1.75; }

.atout-interventions-cover__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px; }

.atout-interventions-cover__card { position: relative; min-height: 520px; padding: 0; overflow: hidden; background: #0f2d35; box-shadow: 0 22px 44px rgba(0, 0, 0, 0.22); }

.atout-interventions-cover__card::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.12) 45%, rgba(0, 0, 0, 0.78) 100%); pointer-events: none; }

.atout-interventions-cover__card img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; object-fit: cover; filter: grayscale(1); transform: scale(1.02); transition: transform 0.45s ease, filter 0.45s ease; }

.atout-interventions-cover__circle { position: absolute; top: 50%; left: 50%; z-index: 3; width: 78%; max-width: 300px; aspect-ratio: 1 / 1; border-radius: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; padding: 28px; background: rgba(215, 81, 40, 0.86); transition: background-color 0.35s ease, transform 0.35s ease; }

.atout-interventions-cover__circle h3 { margin: 0; color: #ffffff; font-size: clamp(24px, 1.8vw, 34px); font-weight: 900; line-height: 1.16; text-align: center; letter-spacing: -0.03em; }

.atout-interventions-cover__card > p { position: absolute; left: 30px; right: 30px; bottom: 32px; z-index: 4; margin: 0; color: rgba(255, 255, 255, 0.86); font-size: 16px; font-weight: 400; line-height: 1.5; }

.atout-interventions-cover__card:hover img { filter: grayscale(0.35); transform: scale(1.08); }

.atout-interventions-cover__card:hover .atout-interventions-cover__circle { background: rgba(215, 81, 40, 0.94); transform: translate(-50%, -50%) scale(1.04); }

@media (max-width: 1280px) { .atout-interventions-cover { padding: 80px 24px; } .atout-interventions-cover__head { gap: 50px; } .atout-interventions-cover__grid { gap: 24px; } .atout-interventions-cover__card { min-height: 480px; } .atout-interventions-cover__card > p { left: 24px; right: 24px; bottom: 28px; font-size: 15px; } }

@media (max-width: 1050px) { .atout-interventions-cover__head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 46px; } .atout-interventions-cover__head > p { max-width: 760px; margin: 0; font-size: 18px; } .atout-interventions-cover__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .atout-interventions-cover__card { min-height: 500px; } }

@media (max-width: 700px) { .atout-interventions-cover { padding: 68px 20px; } .atout-interventions-cover__dot { margin-bottom: 20px; } .atout-interventions-cover__eyebrow { font-size: 13px; letter-spacing: 0.18em; } .atout-interventions-cover h2 { font-size: 40px; } .atout-interventions-cover__head > p { font-size: 16px; line-height: 1.65; } .atout-interventions-cover__grid { grid-template-columns: 1fr; gap: 24px; } .atout-interventions-cover__card { min-height: 460px; } .atout-interventions-cover__circle { width: 74%; max-width: 280px; } }

@media (max-width: 460px) { .atout-interventions-cover { padding: 56px 16px; } .atout-interventions-cover h2 { font-size: 32px; } .atout-interventions-cover__card { min-height: 430px; } .atout-interventions-cover__circle { width: 78%; max-width: 245px; padding: 22px; } .atout-interventions-cover__circle h3 { font-size: 24px; } .atout-interventions-cover__card > p { left: 20px; right: 20px; bottom: 24px; font-size: 14px; } }

/*----------------------------------------------------------------------INFILTRATION--------------------------------------------------------------------*/
.atout-fuite-focus, .atout-fuite-focus * { box-sizing: border-box; }

.atout-fuite-focus { width: 100%; padding: 90px 70px; background: #f8f4ef; overflow: hidden; }

.atout-fuite-focus__wrap { width: 100%; max-width: 1380px; margin: 0 auto; display: grid; grid-template-columns: minmax(340px, 470px) minmax(0, 1fr); align-items: center; gap: 72px; }

.atout-fuite-focus__content { max-width: 430px; }

.atout-fuite-focus__eyebrow { display: inline-block; margin-bottom: 16px; color: #d75128; font-size: 13px; font-weight: 800; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; }

.atout-fuite-focus__title { margin: 0 0 24px; color: #143b45; font-size: 46px; font-weight: 800; line-height: 1.14; letter-spacing: -0.03em; }

.atout-fuite-focus__text { margin: 0 0 18px; color: #263238; font-size: 16px; font-weight: 400; line-height: 1.8; }

.atout-fuite-focus__text:last-of-type { margin-bottom: 34px; }

.atout-fuite-focus__infos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; max-width: 360px; }

.atout-fuite-focus__info { padding: 14px 18px 12px; text-align: center; border-left: 1px solid #d8cbc0; }

.atout-fuite-focus__info:first-child { border-left: none; padding-left: 0; padding-right: 18px; }

.atout-fuite-focus__info:last-child { padding-right: 0; }

.atout-fuite-focus__info-top { display: block; margin-bottom: 10px; color: #6f7a7d; font-size: 12px; font-weight: 500; line-height: 1.2; }

.atout-fuite-focus__info-main { display: block; color: #143b45; font-size: 24px; font-weight: 800; line-height: 1.1; }

.atout-fuite-focus__info-bottom { display: block; margin-top: 6px; color: #6f7a7d; font-size: 12px; font-weight: 500; line-height: 1.2; }

.atout-fuite-focus__visual { position: relative; width: 100%; }

.atout-fuite-focus__frame { position: relative; width: 100%; padding: 16px; border: 1px solid #d8cbc0; background: transparent; }

.atout-fuite-focus__image { display: block; width: 100%; height: 500px; object-fit: cover; object-position: center; }

@media (max-width: 1240px) { .atout-fuite-focus { padding: 80px 48px; } .atout-fuite-focus__wrap { grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); gap: 48px; } .atout-fuite-focus__title { font-size: 40px; } .atout-fuite-focus__image { height: 440px; } }

@media (max-width: 980px) { .atout-fuite-focus { padding: 72px 34px; } .atout-fuite-focus__wrap { grid-template-columns: 1fr; gap: 36px; } .atout-fuite-focus__content { max-width: 100%; } .atout-fuite-focus__infos { max-width: 420px; } .atout-fuite-focus__image { height: 420px; } }

@media (max-width: 640px) { .atout-fuite-focus { padding: 56px 22px; } .atout-fuite-focus__title { font-size: 32px; } .atout-fuite-focus__text { font-size: 15px; line-height: 1.72; } .atout-fuite-focus__infos { max-width: 100%; } .atout-fuite-focus__info { padding-top: 10px; padding-bottom: 10px; } .atout-fuite-focus__info-main { font-size: 20px; } .atout-fuite-focus__frame { padding: 10px; } .atout-fuite-focus__image { height: 300px; } }

@media (max-width: 420px) { .atout-fuite-focus { padding: 52px 18px; } }

/*-------------------------------------------------------------------REALISATIONS---------------------------------------------------------------*/
.realisations-atout, .realisations-atout * { box-sizing: border-box; }

.realisations-atout { width: 100%; padding: 90px 28px; background: #f8f4ef; text-align: center; overflow: hidden; }

.realisations-atout__head { max-width: 860px; margin: 0 auto 56px; }

.realisations-atout__eyebrow { margin-bottom: 12px; color: #d75128; font-size: 13px; font-weight: 800; line-height: 1; letter-spacing: 3px; text-transform: uppercase; }

.realisations-atout__title { margin: 0; color: #143b45; font-size: 48px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }

.realisations-atout__grid { width: 100%; max-width: 1320px; margin: 0 auto 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

.realisations-atout__item { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #efe6dc; border: 1px solid #d8cbc0; box-shadow: 0 16px 34px rgba(20, 59, 69, 0.1); }

.realisations-atout__item::after { content: ""; position: absolute; inset: 0; background: rgba(20, 59, 69, 0.14); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }

.realisations-atout__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease; }

.realisations-atout__item:hover::after { opacity: 1; }

.realisations-atout__item:hover img { transform: scale(1.06); }

.realisations-atout__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 16px 36px; border: 1px solid #d75128; background: transparent; color: #d75128; font-size: 12px; letter-spacing: 2px; font-weight: 800; line-height: 1; text-decoration: none; text-transform: uppercase; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease; }

.realisations-atout__btn:hover { background: #d75128; border-color: #d75128; color: #ffffff; transform: translateY(-2px); }

@media (max-width: 1100px) { .realisations-atout { padding: 80px 24px; } .realisations-atout__title { font-size: 42px; } .realisations-atout__grid { gap: 22px; } }

@media (max-width: 900px) { .realisations-atout { padding: 75px 24px; } .realisations-atout__head { margin-bottom: 44px; } .realisations-atout__title { font-size: 38px; } .realisations-atout__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 42px; } }

@media (max-width: 520px) { .realisations-atout { padding: 60px 16px; } .realisations-atout__head { margin-bottom: 34px; } .realisations-atout__eyebrow { font-size: 12px; letter-spacing: 2px; } .realisations-atout__title { font-size: 30px; } .realisations-atout__grid { grid-template-columns: 1fr; gap: 18px; margin-bottom: 34px; } .realisations-atout__btn { width: 100%; padding: 15px 20px; font-size: 11px; } }

/*------------------------------------------------------------------- Galerie Custom ----------------------------------------------------------------*/
#custom-gallery { padding-top: 40px; }

@media screen and (min-width: 991px) { #custom-gallery { padding: 60px 30px 60px 30px; } }

#custom-gallery .image { height: 400px !important; margin: 20px 0; }

.custom-gallery-title { margin: 0 0 25px; color: #143b45; font-size: 48px; font-family: 'Barlow Condensed', '', 'Arial'; font-weight: 800; line-height: 1.2; text-align: center; }

.custom-gallery-title span { color: #d75128; }

.custom-gallery-title--video { margin-top: 60px; }

@media screen and (max-width: 768px) { .custom-gallery-title { font-size: 28px; } .custom-gallery-title--video { margin-top: 40px; } }

.img-wrapper { position: relative; height: 100%; margin-top: 15px; cursor: pointer; overflow: hidden; }

.img-wrapper img, .img-wrapper video { width: 100%; }

.img-overlay { background: rgba(0, 0, 0, 0.7); width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; opacity: 0; }

.img-overlay i { color: #fff; font-size: 3em; }

#overlay { background: rgba(0, 0, 0, 0.7); width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: none; justify-content: center; align-items: center; z-index: 999; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

#mediaContainer { width: 80%; height: auto; max-height: 90vh; display: flex; justify-content: center; align-items: center; }

#overlay img { margin: 0; width: 100%; height: auto; max-height: 90vh; object-fit: contain; padding: 5%; }

#overlay video { margin: 0; width: auto; height: 88vh; max-width: 90%; max-height: 88vh; object-fit: contain; padding: 0; background: #000000; }

@media screen and (min-width: 768px) { #mediaContainer { width: 60%; } }

@media screen and (min-width: 1200px) { #mediaContainer { width: 50%; } }

#nextButton { color: #fff; font-size: 2em; transition: opacity 0.8s; cursor: pointer; z-index: 1001; }

#prevButton { color: #fff; font-size: 2em; transition: opacity 0.8s; cursor: pointer; z-index: 1001; }

#exitButton { color: #fff; font-size: 2em; transition: opacity 0.8s; position: absolute; top: 15px; right: 15px; cursor: pointer; z-index: 1001; }

#nextButton:hover, #prevButton:hover, #exitButton:hover { opacity: 0.7; }

@media screen and (min-width: 768px) { #nextButton, #prevButton, #exitButton { font-size: 3em; } }

.img-responsive { height: 100% !important; object-fit: cover !important; }

.gallery-video-thumb { background: #000000; }

/*-----------------------------------------------------------------NOS ACTIVITES ----------------------------------------------------------------*/
h1.display-4.fw-bold.bandeauTitre.titles.text-color-seventh { color: black !important; }

.fs-2.fw-700.titles.text-color-sixth { color: black !important; }

/*-------------------------------------------------------------------SERVICES----------------------------------------------------------------*/
/*-------------------------------------------------------------------SERVICES----------------------------------------------------------------*/

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