@charset "UTF-8";
@import url(main.css);
a.nav-link.fs-6.dropdown-toggle.px-0.text-color-secondary.text-center { font-family: Arvo; font-weight: 700 !important; }

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

h2.display-6.fw-bold.p-3.pt-lg-3.titles { color: white; }

h2.display-6.fw-bold.p-3.pt-lg-3.m-0.titles { color: black !important; }

img.rounded-lg-3 { max-height: 450px; }

/* ============================================================ SYSTÈME DE BLOCS UNIFIÉ (Héritage du Hero) ============================================================ */
.bloc-a7f3-wrapper { display: flex; min-height: 100vh; overflow: hidden; }

.bloc-a7f3-halfscreen { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; transition: flex 0.6s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; }

/* Application des effets de clip-path (le style "diagonale" du Hero) */
.bloc-a7f3-halfscreen:nth-child(1) { z-index: 1; clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%); }

.bloc-a7f3-halfscreen:nth-child(2) { z-index: 2; margin-left: -3%; clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%); }

/* Effet de zoom au survol */
.bloc-a7f3-halfscreen:hover { flex: 1.4; }

/* Image de fond avec transition */
.bloc-a7f3-background { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; transform: scale(1); transition: transform 0.8s ease; background-blend-mode: overlay; background-color: rgba(0, 0, 0, 0.3); /* Filtre d'opacité */ }

.bloc-a7f3-halfscreen:hover .bloc-a7f3-background { transform: scale(1.05); }

/* Contenu central */
.bloc-a7f3-content { z-index: 2; padding: 2rem; display: flex; flex-direction: column; align-items: center; text-align: center; color: white; }

/* Logo avec animation */
.bloc-a7f3-logo-container { width: 250px; height: 250px; display: flex; justify-content: center; align-items: center; margin: 0 auto 20px auto; overflow: hidden; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important; }

.bloc-a7f3-halfscreen:hover .bloc-a7f3-logo-container { transform: scale(1.1) !important; }

.bloc-a7f3-logo { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.2)); border-radius: 8rem; }

/* Bouton style Héritage */
.bloc-a7f3-button { display: inline-block; padding: 15px 40px; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; text-decoration: none; border: 2px solid #ffffff; background-color: transparent; color: #ffffff; border-radius: 0.5rem !important; transition: all 0.3s ease; margin-top: 20px; font-family: 'Arvo'; }

.bloc-a7f3-button:hover { background-color: #ffffff; color: #2b2d42; transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); }

/* Responsive Mobile */
@media (max-width: 768px) { div#fullHeight { margin-top: 5rem !important; } .bloc-a7f3-logo-container.d-flex.justify-content-center.mx-auto { margin-top: 2rem; } .photoTitleText { padding: 5%; } .container.my-5.col-lg-11.photoText-div { margin-top: 0px !important; } .bloc-a7f3-wrapper { flex-direction: column; height: auto; } .bloc-a7f3-halfscreen { height: 50vh; flex: none; width: 100%; clip-path: none !important; margin-left: 0 !important; } /* 1. Réduction de la taille du conteneur de logo */ .bloc-a7f3-logo-container { width: 150px !important; height: 150px !important; margin-bottom: 10px !important; } /* 2. Réduction de la taille du titre */ .bloc-a7f3-title .display-5 { font-size: 1.5rem !important; } /* 3. Réduction de la taille du texte de description */ .bloc-a7f3-content .fs-5 { font-size: 0.9rem !important; padding: 0 1rem !important; } /* 4. Réduction du bouton */ .bloc-a7f3-button { padding: 10px 20px !important; font-size: 0.8rem !important; margin-top: 10px !important; } }

/* ============================================================ TABLE DES MATIÈRES ============================================================ 1. NAVBAR (Navigation) 2. HERO HOMEPAGE (Double Screen) 3. HERO PAGES INTERNES (Thomas & Clément) 4. SECTION PRÉSENTATION 5. SECTION DIVISIONS 6. SECTION MAPS 7. SECTION CTA BANNER 8. SECTION PICTOS 9. SECTION PRESTATIONS 10. SECTION CONTACT 11. SECTION SEO 12. ANIMATIONS GLOBALES 13. RESPONSIVE GÉNÉRAL ============================================================ */
body > main > div.py-0.my-0.bg-thirdColor > nav { display: none !important; }

body > main > div.py-0.my-0.bg-thirdColor > nav { display: none !important; }

/* ============================================================ 1. NAVBAR - NAVIGATION ============================================================ */
/* ===== STYLES DE BASE (TOUS ÉCRANS) ===== */
/* Boutons téléphone - Style commun */
.navbar a.button-header-telephone { display: inline-block !important; padding: 10px 25px !important; text-transform: uppercase; font-weight: 700; text-decoration: none !important; background-color: transparent !important; border-radius: 0.5rem !important; transition: all 0.3s ease !important; font-family: 'Arvo', serif; }

/* Bouton Thomas (Bleu) */
.navbar div.d-flex a.button-header-telephone:nth-child(1) { border: 2px solid #2b2d42 !important; color: #2b2d42 !important; }

.navbar div.d-flex a.button-header-telephone:nth-child(1):hover { background-color: #2b2d42 !important; border-color: #2b2d42 !important; color: #ffffff !important; transform: translateY(-3px) !important; box-shadow: 0 5px 15px rgba(43, 45, 66, 0.2) !important; }

/* Bouton Clément (Rouge) */
.navbar div.d-flex a.button-header-telephone:nth-child(2) { border: 2px solid #ef233c !important; color: #ef233c !important; }

.navbar div.d-flex a.button-header-telephone:nth-child(2):hover { background-color: #ef233c !important; border-color: #ef233c !important; color: #ffffff !important; transform: translateY(-3px) !important; box-shadow: 0 5px 15px rgba(239, 35, 60, 0.2) !important; }

/* Navigation principale */
#navigation-bar-hide > div > a { display: flex !important; align-items: center !important; position: relative !important; }

/* Logo Clément (pseudo-élément ::after) - BASE */
.navbar .navbar-brand::after { content: "" !important; display: inline-block !important; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FuArjLFNg6XSzUdTqzssjGaLdLN03%2Fimages%2FLOGOS_REDOIS_copie_4_ui2u.webp") !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; }

/* ===== MOBILE (PAR DÉFAUT) ===== */
@media (max-width: 991px) { /* Navbar : hauteur propre et alignement vertical */ .navbar, #navigation-bar-hide { min-height: 65px !important; overflow: visible !important; } .navbar .container-fluid { display: flex !important; align-items: center !important; justify-content: space-between !important; min-height: 65px !important; } /* Conteneur des deux logos */ .navbar .navbar-brand, #navigation-bar-hide > div > a { display: flex !important; align-items: center !important; gap: 6px !important; height: 55px !important; max-height: 55px !important; max-width: 180px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } /* Logo principal du CMS (Thomas) */ .navbar .navbar-brand .logo_nav { display: block !important; width: auto !important; max-width: 78px !important; max-height: 50px !important; height: auto !important; object-fit: contain !important; } /* Logo Clément (::after) sur MOBILE */ .navbar .navbar-brand::after { flex: 0 0 47px !important; width: 72px !important; height: 45px !important; max-height: 45px !important; margin-left: 0 !important; } /* Bouton burger bien centré */ .navbar .navbar-toggler { margin-left: auto !important; align-self: center !important; } }

@media (min-width: 992px) { /* Container navbar avec les deux logos côte à côte */ .navbar .container-fluid { position: relative !important; display: flex !important; justify-content: flex-start !important; align-items: center !important; } /* Logo Thomas (navbar-brand) - Premier logo à gauche */ .navbar-brand { display: flex !important; align-items: center !important; height: 8vh !important; /* Plus grand sur desktop */ margin-right: 0 !important; padding: 0 !important; } .navbar-brand .logo_nav { max-height: 8vh !important; width: auto !important; height: auto !important; object-fit: contain !important; } /* Logo Clément (::after) sur DESKTOP - TAILLE AUGMENTÉE */ .navbar .navbar-brand::after { width: 110px !important; /* ⚠️ AUGMENTÉ : 110px au lieu de 65px */ height: 8vh !important; /* ⚠️ HARMONISÉ : 8vh comme le logo Thomas */ max-height: 8vh !important; margin-left: 0px !important; /* Plus d'espace entre les deux logos sur desktop */ flex: 0 0 110px !important; /* Empêche le flex de rétrécir le logo */ } }

/* ============================================================ 2. HERO HOMEPAGE - DOUBLE SCREEN ============================================================ */
.homepage-double-screen { display: flex; min-height: 100vh; overflow: hidden; }

.halfScreen { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; transition: flex 0.6s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; }

.halfScreen1 { z-index: 1; clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%); }

.halfScreen2 { z-index: 2; margin-left: -3%; clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%); }

/* Image de fond */
.background-image-div-opacity { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; z-index: 0; background-blend-mode: overlay; transform: scale(1); transition: transform 0.8s ease; }

.halfScreen:hover .background-image-div-opacity { transform: scale(1.05); }

/* Conteneur de contenu */
.content-container { z-index: 2; padding: 2rem; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }

/* Logos du Header (250x250) */
.logoContainer { width: 250px; height: 250px; display: flex; justify-content: center; align-items: center; margin: 0 auto 20px auto; overflow: hidden; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important; transform: scale(1); will-change: transform; }

.halfScreen:hover .logoContainer { transform: scale(1.1) !important; }

.logoDoubleScreen { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.2)); border-radius: 8rem; transition: none !important; transform: scale(1) !important; }

/* Texte description - Animation */
.homepage-double-screen .fs-5 { max-height: 0; opacity: 0; overflow: hidden; padding: 0 !important; margin: 0 !important; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); }

.halfScreen:hover .fs-5 { max-height: 200px; opacity: 1; padding: 20px 0 !important; }

.homepage-double-screen .fs-5 p { margin: 0 !important; }

/* Boutons Homepage */
a.button_homepageScreen { display: inline-block; padding: 15px 40px; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; text-decoration: none; border: 2px solid #ffffff; background-color: transparent; color: #ffffff; border-radius: 0.5rem !important; transition: all 0.3s ease; margin-top: 20px; font-family: 'Arvo'; }

.halfScreen1 a.button_homepageScreen:hover { background-color: #2b2d42 !important; border-color: #2b2d42 !important; color: #ffffff; transform: translateY(-5px) !important; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important; }

.halfScreen2 a.button_homepageScreen:hover { background-color: #ef233c !important; border-color: #ef233c !important; color: #ffffff; transform: translateY(-5px) !important; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important; }

/* ============================================================ 3. HERO PAGES INTERNES - THOMAS & CLÉMENT ============================================================ */
/* Style commun aux deux sections */
#thomas #carouselWithFeatures, #clement #carouselWithFeatures { position: relative !important; overflow: hidden !important; min-height: 550px !important; height: 550px !important; }

#thomas #carouselWithFeatures .bd-placeholder-img, #clement #carouselWithFeatures .bd-placeholder-img { height: 550px !important; width: 100% !important; background-size: cover !important; background-position: center center !important; }

/* Overlay fixe */
#thomas #carouselWithFeatures::after, #clement #carouselWithFeatures::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 2 !important; pointer-events: none !important; }

/* Carousel inner */
#thomas #carouselWithFeatures .carousel-inner, #clement #carouselWithFeatures .carousel-inner { position: relative !important; z-index: 1 !important; }

/* Caption centrée */
#thomas #carouselWithFeatures .fixed-caption, #clement #carouselWithFeatures .fixed-caption { position: absolute !important; z-index: 3 !important; top: 40% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 100% !important; max-width: 1200px !important; padding: 0 40px !important; text-align: center !important; }

/* Logo */
#thomas #carouselWithFeatures .slider-with-features-carousel-logo, #clement #carouselWithFeatures .slider-with-features-carousel-logo { display: block !important; max-width: 180px !important; height: auto !important; margin: 0 auto !important; filter: drop-shadow(0 8px 25px rgba(0, 0, 0, 0.4)) !important; }

/* Ligne blanche sous logo */
#thomas #carouselWithFeatures .my-2::after, #clement #carouselWithFeatures .my-2::after { content: "" !important; display: block !important; width: 150px !important; height: 2px !important; background-color: #ffffff !important; margin: 25px auto 0 auto !important; }

/* STYLE SPÉCIFIQUE THOMAS (BLEU) */
#thomas #carouselWithFeatures { background-color: #2b2d42 !important; }

#thomas #carouselWithFeatures::after { background-color: rgba(43, 45, 66, 0.65) !important; }

#thomas #carouselWithFeatures .slider-with-features-carousel-logo { content: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FuArjLFNg6XSzUdTqzssjGaLdLN03%2Fimages%2FClement_copie_kyql.webp") !important; border-radius: 50% !important; }

/* STYLE SPÉCIFIQUE CLÉMENT (ROUGE) */
#clement #carouselWithFeatures { background-color: #ef233c !important; }

#clement #carouselWithFeatures::after { background-color: rgba(217, 4, 41, 0.55) !important; }

#clement #carouselWithFeatures .slider-with-features-carousel-logo { content: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FuArjLFNg6XSzUdTqzssjGaLdLN03%2Fimages%2FLOGOS_REDOIS_copie_2_4vxg.webp") !important; border-radius: 0 !important; }

/* ============================================================ 4. SECTION PRÉSENTATION ============================================================ */
/* Masquage titre dupliqué */
.col-lg-6.p-3.p-lg-4.pt-lg-2.position-relative.z-1 { padding-left: 0px !important; }

.row.p-4.pb-0.pe-lg-0.pt-lg-5.pb-lg-5.rounded-3.shadow-lg.justify-content-center.position-relative.bg-primaryColor.text-color-primary { align-items: center; }

.container.my-5.col-lg-11.photoText-div { max-width: 1400px !important; }

body > main > div.wrapper > div > section > div.bloc-a7f3-division-head { padding-bottom: 2rem; }

/* Titre avec carré rouge */
.photoText-div h2 { position: relative !important; padding-left: 35px !important; font-family: 'Arvo', serif; font-weight: 700; font-size: 2.5rem; color: #2b2d42; margin-bottom: 20px; text-transform: uppercase; }

.photoText-div h2::before { content: "" !important; position: absolute !important; left: 0 !important; top: 15px !important; width: 18px !important; height: 18px !important; background-color: #ef233c !important; }

/* Liste des expertises */
.photoText-div .lead ul { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 15px 30px !important; list-style: none !important; padding: 0 !important; margin-top: 30px !important; }

.photoText-div .lead ul li { position: relative !important; padding-left: 20px !important; }

.photoText-div .lead ul li p { margin: 0 !important; display: inline-block !important; }

.photoText-div .lead ul li::before { content: "+" !important; position: absolute !important; left: 0 !important; top: -2px !important; color: #2b2d42 !important; font-weight: bold !important; }

/* Cadre décoratif image */
.photoText-div .col-lg-5 { position: relative; z-index: 1; overflow: visible !important; }

.photoText-div .col-lg-5::after { content: ""; position: absolute; top: 50px; right: -56px; width: 100%; height: 84% !important; border: 6px solid #ef233c; z-index: -1; pointer-events: none; }

/* Suppression ombres */
.shadow-lg, .photoText-div .row, .photoText-div .rounded-3 { box-shadow: none !important; -webkit-box-shadow: none !important; filter: none !important; }

/* ============================================================ 5. SECTION DIVISIONS ============================================================ */
.divisions { padding: 80px 0; background-color: #f8f9fa; }

.division-head h2 { font-family: 'Arvo', serif; font-weight: 700; font-size: 2.8rem; color: #2b2d42; margin-bottom: 20px; letter-spacing: -1px; }

.text-red { color: #ef233c !important; }

.division-container { display: flex; gap: 100px; max-width: 1400px; margin: 0 auto; padding: 0 20px; }

.division { flex: 1; position: relative; min-height: 470px; display: flex; align-items: center; justify-content: center; overflow: hidden; text-decoration: none; background-color: #2b2d42; }

.div-thomas { background: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FuArjLFNg6XSzUdTqzssjGaLdLN03%2Fimages%2F1_copie_2_74lj.webp") center/cover; }

.div-clement { background: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FuArjLFNg6XSzUdTqzssjGaLdLN03%2Fimages%2F2_copie_2_1rl7.webp") center/cover; }

.division-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; transition: background-color 0.5s ease; }

.div-thomas .division-overlay { background-color: rgba(43, 45, 66, 0.65); }

.div-clement .division-overlay { background-color: rgba(217, 4, 41, 0.55); }

.div-thomas:hover .division-overlay { background-color: rgba(43, 45, 66, 0.95); }

.div-clement:hover .division-overlay { background-color: rgba(239, 35, 60, 0.95); }

.division-content { position: relative; z-index: 2; padding: 40px; text-align: center; color: #ffffff; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); }

.division:hover .division-content { transform: translateY(-20px); }

.division-content img { max-width: 45% !important; }

.division-line { width: 150px; height: 2px; background-color: #ffffff; margin: 0 auto 25px; }

.div-title { font-family: 'Arvo', serif; font-size: 1.8rem; font-weight: 700; margin-bottom: 15px; }

.div-desc { font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 1rem; line-height: 1.5; max-width: 380px; margin: 0 auto; }

/* ============================================================ 6. SECTION MAPS ============================================================ */
.maps-section { background-color: #ffffff !important; }

.maps-section .informations-list { max-width: 1400px !important; margin: 0 !important; width: 100%; }

.maps-section .background-image-div-opacity, .maps-section .item-content { display: none !important; }

.maps-section .content .titles, .maps-section .content .titles p, .maps-section .content .titles span { text-align: left !important; line-height: 20px; }

.maps-section .titles h4 { text-align: left !important; line-height: 37px !important; }

.maps-section .titles h4::after { content: ""; display: block; width: 250px; height: 3px; background-color: #ef233c !important; margin: 25px 0 !important; }

/* ============================================================ 7. SECTION CTA BANNER ============================================================ */
.cta_banner { display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center !important; padding: 80px 0 !important; background-color: #2B2D42 !important; min-height: 750px; }

.cta_banner .background-image-div-opacity { position: relative !important; flex: 0 0 50% !important; width: 50% !important; height: 650px !important; opacity: 1 !important; background-attachment: scroll !important; background-size: cover; z-index: 1; }

.cta_banner .content { flex: 0 0 50% !important; width: 50% !important; background-color: #ffffff !important; padding: 60px !important; margin-left: -60px; z-index: 2 !important; box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.3); }

.cta_banner .ctaLinks-title p { color: #2B2D42 !important; font-family: 'Arvo', serif; font-size: 2.2rem !important; position: relative; padding-left: 35px; margin: 0 !important; }

.cta_banner .ctaLinks-title p::before { content: ""; position: absolute; left: 0; top: 12px; width: 18px; height: 18px; background-color: #ef233c; }

.cta_banner .lead { color: #333333 !important; padding: 25px 0 !important; font-size: 1.1rem !important; text-align: left !important; }

.cta_banner .ctaLinks-button { background-color: transparent !important; border: 2px solid #2B2D42 !important; color: #2B2D42 !important; border-radius: 0.5rem !important; padding: 15px 35px !important; font-family: 'Arvo', serif; font-weight: 700; }

.cta_banner .ctaLinks-button:hover { background-color: #ef233c !important; border-color: #ef233c !important; color: #ffffff !important; }

/* ============================================================ 8. SECTION PICTOS ============================================================ */
.row.row-cols-1.row-cols-lg-3.d-flex.g-3.px-3.my-5.position-relative.justify-content-center { margin-top: 5rem !important; margin-bottom: 2rem !important; }

.svg-picto-card::before { content: ""; display: block; width: 160px; height: 160px; margin: 0 auto 15px auto; background-size: contain; background-repeat: no-repeat; background-position: center; transition: transform 0.3s ease; }

.col:hover .svg-picto-card::before { transform: scale(1.1); }

.row > .col:nth-child(1) .svg-picto-card::before { background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FuArjLFNg6XSzUdTqzssjGaLdLN03%2Fimages%2F2_gkyt.webp"); }

.row > .col:nth-child(2) .svg-picto-card::before { background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FuArjLFNg6XSzUdTqzssjGaLdLN03%2Fimages%2F1_6u96.webp"); }

.row > .col:nth-child(3) .svg-picto-card::before { background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FuArjLFNg6XSzUdTqzssjGaLdLN03%2Fimages%2F3_ec60.webp"); }

.svg-picto-card h6 { font-family: 'Arvo', serif; font-weight: 700; margin-bottom: 15px; text-transform: uppercase; font-size: 1.1rem; }

.svg-picto-card p { font-family: 'Roboto', sans-serif; font-size: 0.95rem; line-height: 1.5; color: #2B2D42; }

/* ============================================================ 9. SECTION PRESTATIONS ============================================================ */
.row.row-cols-1.g-0.row-cols-lg-3.align-items-stretch.minimum-height.bg-primaryColor { margin: 0 3rem 5rem 3rem !important; align-items: center !important; }

body > main > div.wrapper > div > div.row.row-cols-1.g-0.row-cols-lg-3.align-items-stretch.minimum-height.bg-primaryColor > div:nth-child(1), body > main > div.wrapper > div > div.row.row-cols-1.g-0.row-cols-lg-3.align-items-stretch.minimum-height.bg-primaryColor > div:nth-child(3) { height: 400px !important; padding: 0 10px !important; }

body > main > div.wrapper > div > div.row.row-cols-1.g-0.row-cols-lg-3.align-items-stretch.minimum-height.bg-primaryColor > div:nth-child(2) { z-index: 2 !important; box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.3) !important; }

/* ============================================================ 10. SECTION CONTACT ============================================================ */
div#contact { padding-top: 4rem !important; }

/* Formulaire */
#contact #formContact { background-color: rgba(43, 45, 66, 0.85) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; border-radius: 15px !important; padding: 40px !important; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important; color: #ffffff !important; }

/* Champs input */
#contact #formContact .form-control { background-color: transparent !important; border: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important; border-radius: 0 !important; color: #ffffff !important; padding-left: 5px !important; padding-right: 5px !important; transition: border-color 0.3s ease !important; }

#contact #formContact .form-floating label { color: #fff !important; padding-left: 5px !important; }

#contact #formContact textarea.form-control { border: 1px solid rgba(255, 255, 255, 0.4) !important; border-radius: 6px !important; background-color: rgba(255, 255, 255, 0.05) !important; padding: 15px !important; margin-top: 15px; }

/* Focus états */
#contact #formContact .form-control:focus { border-bottom-color: #ef233c !important; box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.15) !important; }

#contact #formContact textarea.form-control:focus { border-color: #ef233c !important; box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.15) !important; }

/* Checkbox RGPD */
#contact #formContact .checkbox label { color: rgba(255, 255, 255, 0.8) !important; font-size: 0.9rem; }

#contact #formContact .checkbox a { color: #ffffff !important; text-decoration: underline !important; }

/* Bouton fichier */
#contact #formContact input[type="file"]::file-selector-button { background-color: transparent !important; color: #ffffff !important; border: 1px solid #ffffff !important; border-radius: 4px !important; padding: 8px 16px !important; margin-right: 15px !important; cursor: pointer !important; transition: all 0.3s ease !important; }

#contact #formContact input[type="file"]::file-selector-button:hover { background-color: #ffffff !important; color: #2b2d42 !important; }

/* Bouton submit */
#contact #formContact button[type="submit"] { background-color: transparent !important; border: 2px solid #ffffff !important; color: #ffffff !important; font-family: 'Arvo', serif !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 2px !important; padding: 15px !important; border-radius: 0.5rem !important; margin-top: 20px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; display: inline-block !important; }

#contact #formContact button[type="submit"]:hover { background-color: #ef233c !important; border-color: #ef233c !important; color: #ffffff !important; transform: translateY(-5px) !important; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3) !important; }

/* Colonne gauche */
#contact .col-lg-6:first-child { text-align: left !important; position: relative !important; padding-left: 150px !important; padding-top: 40px !important; padding-bottom: 40px !important; }

/* Rectangle décoratif */
#contact .col-lg-6:first-child::before { content: "" !important; position: absolute !important; top: 0 !important; left: 91px !important; width: 301px !important; height: 100% !important; border-top: 5px solid #ef233c !important; border-bottom: 5px solid #ef233c !important; border-left: 5px solid #ef233c !important; border-right: none !important; z-index: 0 !important; pointer-events: none !important; }

#contact .col-lg-6:first-child::after { content: "" !important; position: absolute !important; left: calc(91px + 301px) !important; top: 0 !important; width: 5px !important; height: 100% !important; background-image: linear-gradient(to bottom, #ef233c 25px, transparent 25px, transparent calc(100% - 25px), #ef233c calc(100% - 25px)) !important; z-index: 0 !important; pointer-events: none !important; }

/* Titles */
#contact .titles { position: relative !important; z-index: 1 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; }

#contact .titles h1 span { line-height: 1.2 !important; display: block; color: #ffffff !important; }

#contact .titles > p { font-family: 'Roboto', sans-serif !important; font-size: 1.1rem !important; line-height: 1.6 !important; color: #cbd5e1 !important; margin-bottom: 20px !important; }

/* Pastille blanche */
#contact .titles ul { list-style: none !important; padding: 20px 30px !important; margin: 10px 0 0 40px !important; display: inline-block !important; background-color: #ffffff !important; border-radius: 6px !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important; }

#contact .titles ul li { margin-bottom: 12px !important; position: relative !important; padding-left: 20px !important; color: #2b2d42 !important; }

#contact .titles ul li:last-child { margin-bottom: 0 !important; }

#contact .titles ul li p { margin: 0 !important; font-size: 1.1rem !important; color: #2b2d42 !important; display: inline-block !important; }

#contact .titles ul li:nth-child(1)::before { content: "•" !important; position: absolute; left: 0; top: -2px; color: #2b2d42 !important; font-size: 1.5rem; line-height: 1; }

#contact .titles ul li:nth-child(2)::before { content: "•" !important; position: absolute; left: 0; top: -2px; color: #ef233c !important; font-size: 1.5rem; line-height: 1; }

#contact .titles ul li a { text-decoration: none !important; transition: opacity 0.2s ease; }

#contact .titles ul li a:hover { color: #d90429 !important; }

/* ============================================================ 11. SECTION SEO ============================================================ */
div.titles.mb-5.first-activity-title, div.titles.mb-5.second-activity-title, div.titles.mb-5.third-activity-title { margin-bottom: 0px !important; }

.col-lg-5.col-12.mx-auto, span h1 { margin: 40px 0px 0px !important; width: fit-content; }

/* ============================================================ 12. ANIMATIONS GLOBALES ============================================================ */
/* Animation lévitation sur tous les boutons */
a.button_homepageScreen, .ctaLinks-button, .btn-cta-global, .button_homepageDoubleScreen { display: inline-block; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease !important; }

a.button_homepageScreen:hover, .ctaLinks-button:hover, .btn-cta-global:hover, .button_homepageDoubleScreen:hover { transform: translateY(-5px) !important; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important; }

/* ============================================================ 13. RESPONSIVE GÉNÉRAL ============================================================ */
/* Desktop - Navbar */
@media (min-width: 992px) { .navbar-brand { display: flex !important; /* 'flex' permet d'aligner l'image et son éventuel contenu */ height: 7vh !important; margin-right: 15px !important; /* Espace entre les deux logos */ } .navbar .container-fluid { position: relative !important; display: flex !important; justify-content: flex-start !important; } .halfScreen:hover { flex: 1.4; } .maps-section .informations-list { display: flex !important; align-items: center !important; justify-content: center !important; } .maps-section .content { flex: 0 0 45% !important; max-width: 45% !important; padding-right: 75px !important; } .maps-section .map-content { flex: 0 0 55% !important; max-width: 40% !important; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FuArjLFNg6XSzUdTqzssjGaLdLN03%2Fimages%2FCARTE_REDOIS_COUVREUR_CHARPENTE_4zis.webp") !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: left center !important; min-height: 550px !important; } }

/* Tablette */
@media (max-width: 991px) { .division-container { flex-direction: column; gap: 20px; } .division { min-height: 400px; } .division-head h2, .photoText-div h2 { font-size: 2.2rem; } .photoText-div h2::before { top: 12px !important; } .photoText-div .col-lg-5::after { top: 15px; right: 15px; width: 95%; } .cta_banner { flex-direction: column !important; padding: 0 !important; } .cta_banner .background-image-div-opacity { width: 100% !important; flex: 0 0 100% !important; height: 400px !important; } .cta_banner .content { width: 100% !important; flex: 0 0 100% !important; margin-left: 0; padding: 40px 25px !important; } .maps-section .content, .maps-section .map-content { flex: 0 0 100% !important; max-width: 100% !important; text-align: center !important; } .maps-section .content .titles h4, .maps-section .content .titles p { text-align: center !important; } .maps-section .titles h4::after { margin: 20px auto !important; } .maps-section .map-content { min-height: 350px !important; background-position: center !important; margin-top: 20px; } #contact .col-lg-6:first-child { text-align: center !important; padding-left: 20px !important; padding-right: 20px !important; margin-bottom: 50px; } #contact .titles { align-items: center !important; } #contact .col-lg-6:first-child::before { left: 5% !important; width: 90% !important; border-right: 5px solid #ef233c !important; } #contact .col-lg-6:first-child::after { display: none !important; } #contact .titles ul { text-align: left !important; } .row.row-cols-1.g-0.row-cols-lg-3 { display: flex !important; flex-direction: column !important; align-items: center !important; margin: 0 1rem 3rem 1rem !important; } .row.row-cols-1.g-0.row-cols-lg-3 > .col { width: 100% !important; height: 300px !important; } body > main > div.wrapper > div > div.row.row-cols-1.g-0.row-cols-lg-3 > div:nth-child(2) { order: -1 !important; margin: 20px 0 !important; box-shadow: none !important; } body > main > div.wrapper > div > div.row.row-cols-1.g-0.row-cols-lg-3.align-items-stretch.minimum-height.bg-primaryColor > div:nth-child(1), body > main > div.wrapper > div > div.row.row-cols-1.g-0.row-cols-lg-3.align-items-stretch.minimum-height.bg-primaryColor > div:nth-child(3) { height: 300px !important; } }

/* Mobile */
@media (max-width: 768px) { .navbar .navbar-brand::after { margin-left: -5px !important; } /* Deuxième logo ajouté en ::after */ .navbar .navbar-brand::after { content: "" !important; display: block !important; flex: 0 0 47px !important; width: 72px !important; height: 45px !important; max-height: 45px !important; margin-left: 0px !important; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FuArjLFNg6XSzUdTqzssjGaLdLN03%2Fimages%2FLOGOS_REDOIS_5kp7.webp") !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; } .halfScreen:hover .fs-5 { max-height: 0 !important; opacity: 0 !important; padding: 0 !important; } .homepage-double-screen { flex-direction: column; height: auto; } .logoDoubleScreen { max-width: 85% !important; } .logoContainer.d-flex.justify-content-center.mx-auto { margin-top: 3rem; margin-bottom: 0px; } .halfScreen { height: 50vh; flex: none; width: 100%; clip-path: none !important; } .halfScreen2 { margin-left: 0 !important; } .logoContainer { width: 180px; height: 180px; } .content-container { padding: 1rem; } .photoText-div h2 { position: relative !important; font-size: 1.9rem !important; margin-bottom: 20px; text-align: center; } .photoText-div .lead ul { gap: 10px !important; margin: 0px; } .bloc-a7f3-division-head > p { padding: 14px 28px; } body > main > div.wrapper > div > div.container.my-5.col-lg-11.photoText-div > div > div.col-lg-6.p-3.p-lg-4.pt-lg-2.position-relative.z-1 > div > p:nth-child(2) { text-align: center; } body > main > div.wrapper > div > div.container.my-5.col-lg-11.photoText-div > div > div.col-lg-6.p-3.p-lg-4.pt-lg-2.position-relative.z-1 > div > p:nth-child(3) { text-align: center; } #thomas #carouselWithFeatures, #clement #carouselWithFeatures, #thomas #carouselWithFeatures .bd-placeholder-img, #clement #carouselWithFeatures .bd-placeholder-img { min-height: 700px !important; height: 700px !important; } #thomas #carouselWithFeatures .slider-with-features-carousel-logo, #clement #carouselWithFeatures .slider-with-features-carousel-logo { max-width: 90% !important; width: 130px !important; margin-top: 30px !important; } #thomas #carouselWithFeatures .fixed-caption, #clement #carouselWithFeatures .fixed-caption { top: 40% !important; } #carouselWithFeatures > div.container > div > div.col-lg-5.col-12.mx-auto > div.mx-5 { margin: 0px !important; } .cta_banner .lead { text-align: center !important; } .maps-section .map-content { flex: 0 0 100% !important; max-width: 100% !important; background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FuArjLFNg6XSzUdTqzssjGaLdLN03%2Fimages%2FCARTE_REDOIS_COUVREUR_CHARPENTE_4zis.webp) !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; margin-top: 0px !important; } .col-sm-12.col-lg-6.col-xl-4.py-5.content.text-color-sixth { padding-bottom: 0px !important; } .col-lg-12.mx-auto { text-align: center; } .cta_banner .ctaLinks-title p { font-size: 1.7rem !important; } #contact .col-lg-6:first-child::before { display: none !important; } .spacer { display: none; } #carouselWithFeatures > div.carousel-inner > div:nth-child(2) > div { heigth: 700px !important; } #contact .titles ul { margin: Opx !important; } }

@media (max-width: 991px) { /* 1. On transforme la ligne en colonne */ .row.row-cols-1.g-0.row-cols-lg-3 { flex-direction: column !important; margin: 2rem 1rem !important; /* Réduit les marges sur mobile */ } body > main > div.wrapper > div > div.row.row-cols-1.g-0.row-cols-lg-3 > div:nth-child(2) { height: auto !important; /* Laisse le texte s'adapter à son contenu */ margin-bottom: 2rem !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important; /* Ombre douce */ padding: 10px !important; background: white !important; } body > main > div.wrapper > div > div.row.row-cols-1.g-0.row-cols-lg-3.align-items-stretch.minimum-height.bg-primaryColor > div:nth-child(2) > div.d-flex.flex-column.px-5.py-5.h-100.position-relative { padding: 10px !important; } /* 3. Ajustement des images latérales sur mobile */ body > main > div.wrapper > div > div.row.row-cols-1.g-0.row-cols-lg-3 > div:nth-child(1), body > main > div.wrapper > div > div.row.row-cols-1.g-0.row-cols-lg-3 > div:nth-child(3) { height: 250px !important; /* Réduit la hauteur des images pour le mobile */ width: 100% !important; } }

/* ============================================================ CORRECTIF MOBILE - 2 LOGOS DANS LA NAVBAR ============================================================ */
@media (max-width: 991px) { /* Navbar : hauteur propre et alignement vertical */ .navbar, #navigation-bar-hide { min-height: 65px !important; overflow: visible !important; } .navbar .container-fluid { display: flex !important; align-items: center !important; justify-content: space-between !important; min-height: 65px !important; } /* Conteneur des deux logos */ .navbar .navbar-brand, #navigation-bar-hide > div > a { display: flex !important; align-items: center !important; gap: 6px !important; height: 55px !important; max-height: 55px !important; max-width: 180px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } /* Logo principal du CMS */ .navbar .navbar-brand .logo_nav { display: block !important; width: auto !important; max-width: 78px !important; max-height: 50px !important; height: auto !important; object-fit: contain !important; } /* Bouton burger bien centré */ .navbar .navbar-toggler { margin-left: auto !important; align-self: center !important; } .navbar-brand { display: flex !important; align-items: center !important; height: 8vh !important; /* Un peu plus grand */ } .navbar-brand .logo_nav { max-height: 8vh !important; width: auto !important; } /* Augmente spécifiquement la taille du logo Clément (le ::after) */ .navbar .navbar-brand::after { width: 100px !important; /* Augmenté de 65px à 100px */ height: 8vh !important; /* Harmonisé avec le logo Thomas */ } }

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