@charset "UTF-8";
@import url(main.css);
.fondDegradeLogo { max-width: 300px !important; }

@media (max-width: 667px) { .fondDegradeLogo { display: none; } }

@media (max-width: 667px) { .boutons-servcies a.button_homepageScreen { padding: 0.6rem !important; } }

strong { font-size: 1.3em; color: #4E3C03; }

/*----------------------------------------Ajustements SEO--------------------------------------------------*/
img.logo-seo-page { aspect-ratio: auto; object-fit: contain; max-width: none !important; border: none !important; border-radius: 0 !important; background-color: white !important; }

div#bandeau-title-seo h2.titles, div#photo-text-seo-page h2.titles, div#seo-text-images h2.titles { color: #3C2F02 !important; font-weight: 400 !important; }

.maps-section { display: none; }

/*------------------------------------Fournisseurs-----------------------------*/
.brand-strip { padding: 1.25rem 0; }

.brand-strip__grid { list-style: none; display: flex; gap: clamp(1rem, 3vw, 2.25rem); flex-wrap: wrap; align-items: center; justify-content: center; margin: 0; padding: 0; }

.brand-strip__item { flex: 0 1 auto; }

.brand-strip__img { display: block; height: 48px; /* contrôle la hauteur */ width: auto; /* conserve les proportions */ }

@media (max-width: 420px) { .brand-strip__img { height: 40px; } }

/*-----------------------------Barre de navigation------------------------------------*/
.animated-border-button:after { background-color: #839782 !important; }

.navbar-brand { width: 10vw !important; height: 8vh !important; }

img.logo_nav { height: 8vh !important; width: 10vw !important; object-fit: cover !important; }

/* -------------Bloc Espacement-----------------*/
.b-bloc-divider { height: 100px !important; background-color: transparent !important; border: none !important; box-shadow: none !important; }

#accueil { height: 0 !important; }

/* -------------Bloc Avant après et galerie réalisations--------------------------------------------*/
#avant-apres { background-color: #839782; margin-right: 0 !important; margin-left: 0 !important; padding: 0 2rem 150px 2rem; }

#avant-apres .row { margin-top: 0 !important; }

#myGallery img.p-2 { border: 4px solid #4E3C03; border-radius: 25% 75% 28% 72% / 79% 30% 70% 21%; aspect-ratio: 1 / 1; padding: 0 !important; }

#nos-realisations { background-color: #3c2f02; padding-top: 150px; padding-bottom: 150px; }

.image-before-after-container { border: 4px solid white; }

.image-before-after-container { position: relative; /* important pour positionner l'::after */ box-shadow: 0px 13px 10px -7px rgba(0, 0, 0, 0.1); }

/* Petit triangle blanc calé en haut à droite */
.image-before-after-container::after { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; /* triangle : côté haut blanc, côté gauche transparent */ border-top: 30px solid #fff; /* hauteur du triangle */ border-left: 30px solid transparent; /* largeur du triangle */ z-index: 5; /* au-dessus des images, ajuste si besoin */ }

/* ----------------------------------------------carrousel animé --------------------------------------*/
.carrousel-anime { --gap: 25px; --height: 300px; --duration: 20s; overflow: hidden; width: 100%; position: relative; background-color: #3c2f02; padding: 150px 0; }

.carrousel-anime .carrousel-track { display: inline-flex; align-items: center; gap: var(--gap); height: var(--height); will-change: transform; animation: carrousel-scroll var(--duration) linear infinite; }

/* Pause au survol (utile sur desktop) */
.carrousel-anime:hover .carrousel-track { animation-play-state: paused; }

/* Images fluides et uniformes en hauteur */
.carrousel-anime img { height: 100%; width: auto; aspect-ratio: 1 / 1; object-fit: cover; flex: 0 0 auto; border: 4px solid #4E3C03; border-radius: 25% 75% 28% 72% / 79% 30% 70% 21%; display: block; }

/* Animation de translation */
@keyframes carrousel-scroll { from { transform: translateX(0); }
  to { transform: translateX(var(--scroll-end, -50%)); } }

/* Petite amélioration: réduction des mouvements si demandé par l’utilisateur */
@media (prefers-reduced-motion: reduce) { .carrousel-anime .carrousel-track { animation: none; transform: none !important; } }

.lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.8); display: none; align-items: center; justify-content: center; z-index: 9999; }

.lightbox img { max-width: 90%; max-height: 90%; border-radius: 12px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.6); }

.lightbox.active { display: flex; cursor: zoom-out; }

/*-----------------------------------------------------------Paragraphes-----------------------------------------*/
div.shadow-lg { box-shadow: none !important; }

.img-fluid { aspect-ratio: 1 / 1; object-fit: cover; max-width: 430px !important; border: 4px solid #4E3C03; border-radius: 25% 75% 28% 72% / 79% 30% 70% 21%; }

.titles { background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2F5arF18gYh6VNXAXEJWD9igjWRLL2%2Fimages%2FFond_titres_1_e38w.webp); background-size: cover; background-repeat: no-repeat; background-position: center; min-height: 60px; align-content: center; }

.col-12:has(.img-fluid)::after { content: ''; position: absolute; width: 200px; height: 100px; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2F5arF18gYh6VNXAXEJWD9igjWRLL2%2Fimages%2Ffond_traits_1_ey7j.webp"); background-size: contain; background-repeat: no-repeat; background-position: center; bottom: -10px; right: -10px; z-index: 3; opacity: 0.5; }

.col-12:has(.img-fluid) { position: relative; }

/*-----------------------------------------------------------Bloc CTA-----------------------------------------*/
.cta_banner { min-height: 400px; }

#divider-CTA p span { font-weight: 400 !important; }

/*-----------------------------------------------------------Formulaire de contact-----------------------------------------*/
#contact h2 { margin-bottom: 50px; }

#contact .titles { padding: 10px; }

/*-----------------------------------------------------------Boutons-----------------------------------------*/
a.button_homepageScreen, a.button_header, a.button_homepageDoubleScreen { appearance: none; background-color: #FFFFFFB8 !important; border-radius: 0 !important; border: 2px solid #4E3C03 !important; box-sizing: border-box; color: #4E3C03 !important; font-weight: normal !important; cursor: pointer; display: inline-block; line-height: 1em; margin: 0; outline: 0; padding: 1.5em 2.2em !important; position: relative; text-align: center; text-transform: uppercase; transition: opacity 300ms cubic-bezier(0.694, 0, 0.335, 1), color 100ms cubic-bezier(0.694, 0, 0.335, 1); vertical-align: baseline; white-space: nowrap; overflow: hidden; /* pour contenir l’animation */ z-index: 1; /* le texte reste au-dessus */ isolation: isolate; /* crée un contexte propre */ }

#navbarSupportedContent a.button_header { padding: 1.1em 2em !important; }

a.button_homepageScreen::before, a.button_header::before, a.button_homepageDoubleScreen::before { content: ""; position: absolute; inset: 0; background: #839782; /* couleur de base */ clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); transition: clip-path 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); z-index: -1; /* placé derrière le texte */ pointer-events: none; }

a.button_homepageScreen:hover::before, a.button_header:hover::before, a.button_homepageDoubleScreen:hover::before { background: #839782; /* couleur au hover */ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }

a.button_homepageScreen:hover, a.button_header:hover, a.button_homepageDoubleScreen:hover { color: white !important; }

/*--------------------------Cartes de services Custom----------------------*/
.custom-cards-2 { width: 100%; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; padding: 150px 2rem; flex-wrap: wrap; gap: 40px 40px; }

.card__img { visibility: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; width: 100%; height: 235px; border-top-left-radius: 12px; border-top-right-radius: 12px; }

.card__img--hover { transition: 0.2s all ease-out; background-size: cover; background-position: center; background-repeat: no-repeat; width: 100%; position: absolute; height: 235px; top: 0; }

.custom-card-2 { transition: all 0.4s cubic-bezier(0.175, 0.885, 0, 1); background-color: #fff; width: 20%; position: relative; overflow: hidden; box-shadow: 0px 13px 10px -7px rgba(0, 0, 0, 0.1); border: 4px solid white; }

.custom-card-2:hover { box-shadow: 0px 30px 18px -8px rgba(0, 0, 0, 0.1); transform: scale(1.1, 1.1); }

.custom-card-2::after { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; /* triangle : côté haut blanc, côté gauche transparent */ border-top: 30px solid #fff; /* hauteur du triangle */ border-left: 30px solid transparent; /* largeur du triangle */ z-index: 5; /* au-dessus des images, ajuste si besoin */ }

.card__info { z-index: 2; background-color: #fff; padding: 16px 34px 34px 34px; }

.card__title { margin-top: 5px; margin-bottom: 10px; }

.custom-card-2:hover .card__img--hover { height: 100%; opacity: 0.3; }

.custom-card-2:hover .card__info { background-color: transparent; position: relative; }

.custom-card-2:hover .card__info-hover { opacity: 1; }

@media (max-width: 1024px) { .custom-cards-2 { flex-wrap: wrap; /* Permet aux cartes de passer à la ligne */ } .custom-card-2 { width: 48%; /* Deux cartes par ligne sur tablette */ margin-bottom: 20px; } }

@media (max-width: 768px) { .custom-card-2 { width: 100%; /* Une carte par ligne sur mobile */ margin-right: 0; /* Supprime les marges */ } }

/*-----------------------------------Bloc Pictos---------------------------------*/
.picto_card .row { margin-top: 0 !important; margin-bottom: 0 !important; padding: 100px 2rem; }

.svg-picto-card > svg { width: 40% !important; height: 40% !important; }

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