@charset "UTF-8";
@import url(main.css);
#accueil { height: 0 !important; }

.custom-title { text-align: center; text-transform: uppercase; font-weight: 700 !important; color: #2d454f; margin-bottom: 30px; }

.bg-thirdColor:has(footer) { padding-top: 150px; }

/*------------Bloc actu------------------------------*/
#news-posts-bloc { margin-top: 150px !important; margin-bottom: 150px !important; }

/*--------------------------------------------------------------------Ajustements SEO--------------------------------------------------*/
.first-banner-seo-page { background-color: #2d454f !important; }

.first-banner-seo-page h1 { text-transform: uppercase; font-weight: 700; font-size: 0.7em !important; }

.first-banner-seo-page .background-image-div-opacity { background-image: url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FTezDKdvRk5agQo5JGEtYGEz3OEU2%2Fimages%2F480213075_1164831135561487_5360815582571739908_n_6kf9.webp?alt=media&token=f7e5b451-7de9-4a0e-9b99-52ecee4adc32") !important; opacity: 0.1 !important; }

img.logo-seo-page, div#custom-cards .logo_nav { background-color: #2d454f; padding: 10px; }

/*-------------------------------------------------------------------------------Barre de navigation-----------------------------------------------------*/
.animated-border-button { font-weight: 700; }

/*----------------------------------------------------Cartes matériaux----------------------------------------*/
.fenetres-section { padding: 3rem 1.5rem; background-color: #2d454f; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; display: flex; flex-direction: column; align-items: center; }

.fenetres-section .custom-title { text-align: center; margin-bottom: 2rem; color: #ffffff; }

/* ICI : on passe en flex */
.fenetres-grid { display: flex; flex-wrap: wrap; /* permet de faire plusieurs lignes */ justify-content: center; /* centre chaque ligne */ gap: 1.5rem; max-width: 1200px; }

/* largeur des cartes */
.fenetre-card { flex: 0 1 260px; /* base 260px, se réduit si besoin */ background: #ffffff; border-radius: 0.75rem; padding: 1.5rem; border: 1px solid #e5e7eb; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }

.fenetre-card:hover { transform: translateY(-4px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); border-color: #0ea5e9; }

.fenetre-card h3 { font-size: 1.15rem; margin-bottom: 0.5rem; text-transform: uppercase; font-weight: 700 !important; color: #ca0929; }

.fenetre-card p { margin: 0; color: #4b5563; line-height: 1.5; font-size: 0.95rem; }

/* Responsive */
@media (max-width: 640px) { .fenetres-section { padding: 2rem 1rem; } .fenetre-card { flex: 1 1 100%; } }

/*-----------------------------------------------------Bloc avant/après--------------------------------*/
#avant-apres { margin-bottom: 200px !important; }

.image-before-after-container { border-radius: 15px; }

.photoTitleText h2 { position: relative; width: fit-content; z-index: 999; margin-left: auto; margin-right: auto; }

.photoTitleText h2::before { content: ""; position: absolute; left: -20px; top: -10px; width: 75px; height: 25px; background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FTezDKdvRk5agQo5JGEtYGEz3OEU2%2Fimages%2FCarres_de_couleur_2_sfr6.webp); background-size: cover; background-repeat: no-repeat; z-index: -1; }

.photoTitleText h2::after { content: ""; position: absolute; right: -20px; bottom: -10px; width: 75px; height: 25px; background-image: url(https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FTezDKdvRk5agQo5JGEtYGEz3OEU2%2Fimages%2FCarres_de_couleur_tg9j.webp?alt=media&token=c9fe3a8c-62ff-430f-9120-d9bee5e2f38c); background-size: cover; background-repeat: no-repeat; z-index: -1; opacity: 0.7; }

/*-------------------------------------------Ajustements SEO-----------------------------------------*/
div.first-activity-div { margin-top: 150px !important; }

div.third-activity-div { margin-bottom: 150px !important; }

.first-activity-div .titles, .second-activity-div .titles, .third-activity-div .titles { text-transform: uppercase; }

.first-activity-div .titles h2, .first-activity-div .titles h3, .second-activity-div .titles h2, .second-activity-div .titles h3, .third-activity-div .titles h2, .third-activity-div .titles h3 { font-weight: 700 !important; font-size: 1.5rem !important; }

/*----------------------------------------------------Cartes des services--------------------------------------------------*/
.fd-entete-triple { display: grid; grid-template-columns: repeat(3, 1fr); height: 120vh; overflow: hidden; }

.fd-entete-triple h3 { color: white; text-transform: uppercase; font-weight: 700 !important; margin-bottom: 40px; position: relative; width: fit-content; font-size: 1.5rem; }

.fd-entete-triple h3::before { content: ""; position: absolute; left: -20px; top: -10px; width: 75px; height: 25px; background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FTezDKdvRk5agQo5JGEtYGEz3OEU2%2Fimages%2FCarres_de_couleur_2_sfr6.webp); background-size: cover; background-repeat: no-repeat; z-index: -1; }

.fd-entete-triple h3::after { content: ""; position: absolute; right: -20px; bottom: -10px; width: 75px; height: 25px; background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FTezDKdvRk5agQo5JGEtYGEz3OEU2%2Fimages%2FCarres_de_couleur_1_awti.webp); background-size: cover; background-repeat: no-repeat; z-index: -1; }

.fd-entete-box { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; text-decoration: none; color: #f1f2ed; transition: transform 0.6s ease, filter 0.4s ease; margin: 5px; }

.fd-entete-box:hover { transform: scale(1.02); z-index: 2; filter: brightness(1.1); }

/* --- Superposition bleue --- */
.fd-entete-overlay { position: absolute; inset: 0; background: #2d454fc4; transition: background 0.4s ease; }

.fd-entete-box:hover .fd-entete-overlay { background: #7f1010e0; }

/* --- Bloc texte avec fond noir --- */
.fd-entete-content { position: absolute; bottom: 12%; left: 10%; right: 10%; z-index: 2; padding: 20px 25px; text-align: left; }

.fd-entete-content img { width: 80px; height: 80px; margin-bottom: 10px; }

.fd-entete-content h2 { font-size: 1.9rem; margin-bottom: 8px; }

.fd-entete-content p { margin: 0; color: white; }

/* --- Responsive tablette --- */
@media (max-width: 1024px) { .fd-entete-triple { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .fd-entete-box { flex: 0 0 100vw; height: 100vh; scroll-snap-align: start; } .fd-entete-content { bottom: 10%; left: 6%; right: 6%; padding: 18px 20px; } .fd-entete-content h2 { font-size: 1.9rem; } .fd-entete-content p { font-size: 0.95rem; } }

/* --- Responsive mobile --- */
@media (max-width: 600px) { .fd-entete-triple { display: flex; flex-direction: column; height: auto; overflow: visible; } .fd-entete-box { width: 100%; height: 33.33vh; /* chaque bloc occupe 1/3 de la hauteur de l’écran */ flex: none; } .fd-entete-content { bottom: 10%; left: 5%; right: 5%; padding: 12px 16px; } .fd-entete-content h2 { font-size: 1.4rem; } .fd-entete-content p { font-size: 0.85rem; } }

/*------------------------------------------------------------Bloc Maps ---------------------------------*/
.maps-section { background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FTezDKdvRk5agQo5JGEtYGEz3OEU2%2Fimages%2FBannieres_1_4os2.webp); background-size: cover; background-position: center; padding: 50px 30px; background-attachment: fixed; }

.maps-section .content { color: white !important; backdrop-filter: blur(30px); border-radius: 20px !important; }

.maps-section h2 { text-transform: uppercase; font-weight: 700 !important; font-size: 2rem; padding: 20px; text-align: left; }

.maps-section iframe { border-radius: 20px; }

/*---------------------------------------------------------------------------------------------------------Bannière vidéo Accueil----------------------------*/
#fullHeight h2 { text-transform: uppercase; font-weight: 400 !important; width: fit-content; position: relative; z-index: 1; font-size: 1.5rem !important; }

/* Carré gauche */
#fullHeight h2::before, .secondaires h1::before { content: ""; position: absolute; left: -20px; top: -10px; width: 100px; height: 30px; background-image: url(https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FTezDKdvRk5agQo5JGEtYGEz3OEU2%2Fimages%2FCarres_de_couleur_2_sfr6.webp); background-size: cover; background-repeat: no-repeat; z-index: -1; }

/* Carré haut droite */
#fullHeight h2::after, .secondaires h1::after { content: ""; position: absolute; right: -20px; bottom: -10px; width: 100px; height: 30px; background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FTezDKdvRk5agQo5JGEtYGEz3OEU2%2Fimages%2FCarres_de_couleur_1_awti.webp"); background-size: cover; background-repeat: no-repeat; z-index: -1; }

.image-video-logo { width: 40% !important; margin-bottom: 15vh; }

@media only screen and (max-width: 500px) { .image-video-logo { width: 50% !important; } }

.videoTitle { width: 100% !important; }

.video-background-holder { position: relative; /* important pour positionner l'image dedans */ z-index: 1020; }

.ms-header__title { font-size: 3rem !important; }

.ms-slider__word { font-size: 3rem !important; }

@media (max-width: 760px) { .ms-header__title { font-size: 1.5rem !important; } .ms-slider__word { font-size: 1.5rem !important; } }

/*----------------------------------------------------------Bannières vidéo pages secondaires---------------------------------*/
.secondaires img { width: 80px; height: 80px; margin-top: -30px; }

.secondaires h1 { text-transform: uppercase; font-weight: 700; font-size: 1.7em; width: fit-content; position: relative; }

/*----------------------------------------------------------------------------------Animation de texte-------------------------------*/
.ms-header { display: flex; align-items: center; justify-content: center; }

.ms-header__title { flex: 1 1 100%; width: 100%; text-align: left; font-size: 3rem; color: white; text-transform: uppercase; font-weight: 700; }

.ms-slider { display: inline-block; height: 1.5em; overflow: hidden; vertical-align: middle; mask-image: linear-gradient(transparent, white, white, white, transparent); mask-type: luminance; mask-mode: alpha; }

.ms-slider__words { display: inline-block; margin: 0; padding: 0; list-style: none; animation-name: wordSlider; animation-timing-function: ease-out; animation-iteration-count: infinite; animation-duration: 30s; }

.ms-slider__word { display: block; color: white; font-size: 3rem; letter-spacing: normal; text-align: left; padding: 2px 2px 2px 10px; }

@keyframes wordSlider { 0%, 9% { transform: translateY(0%); }
  11%, 20% { transform: translateY(-10%); }
  22%, 31% { transform: translateY(-20%); }
  33%, 42% { transform: translateY(-30%); }
  44%, 53% { transform: translateY(-40%); }
  55%, 64% { transform: translateY(-50%); }
  66%, 75% { transform: translateY(-60%); }
  77%, 86% { transform: translateY(-70%); }
  88%, 97% { transform: translateY(-80%); }
  100% { transform: translateY(-90%); } }

@media only screen and (max-width: 775px) { .ms-slider { transform: none; transform-origin: unset; margin-top: 0; } .ms-slider__word { text-align: center; padding: 2px; } .ms-header__title { font-size: 2rem; } }

/*--------------------------------------------------------------------------------------------------Blog card-------------------------------------*/
.separator { display: flex; gap: 8px; align-items: center; justify-content: center; margin-bottom: 20px; }

.separator img { width: 50px; height: 50px; }

/*----------------Arrière plan--------------------------*/
.bg-skincare { background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FTezDKdvRk5agQo5JGEtYGEz3OEU2%2Fimages%2FDesign_sans_titre_xzhl.webp"); padding: 13rem 0 !important; display: flex; width: 100%; flex-wrap: wrap; justify-content: center; gap: 40px; background-attachment: fixed; background-size: cover; background-position: center; }

.blog-card { width: 70vw; height: 600px; position: relative; color: #fff; top: 20%; right: 0; left: 0; overflow: hidden; border-radius: 10px; box-shadow: 0px 10px 20px -9px rgba(0, 0, 0, 0.5) !important; text-align: center; transition: all 0.4s; background-size: cover !important; }

.blog-card a { text-decoration: none; transition: all 1s; }

.blog-card .color-overlay { background: #2d454fc4; width: 70vw; height: 600px; position: absolute; z-index: 10; top: 0; left: 0; transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1); }

.blog-card .gradient-overlay { background-image: linear-gradient(transparent, #37386799); width: 70vw; height: 600px; position: absolute; top: 350px; left: 0; z-index: 15; }

/* HOVER + HOVER JS */
.blog-card:hover, .blog-card.is-hover { box-shadow: 0px 18px 20px -9px rgba(0, 10, 30, 0.75); }

.blog-card:hover .card-info, .blog-card.is-hover .card-info { opacity: 1; bottom: 5%; }

.blog-card:hover .color-overlay, .blog-card.is-hover .color-overlay { background: #7f1010e0; }

.blog-card:hover .title-content, .blog-card.is-hover .title-content { margin-top: 70px !important; }

.title-content { text-align: center; margin: 170px 0 0 0; position: absolute; z-index: 20; width: 100%; top: 0; left: 0; transition: all 0.6s; }

.blog-card h2 { text-transform: uppercase; font-weight: 700 !important; font-size: 2rem !important; margin: 0 25px !important; }

@keyframes changeLetter { 0% { width: 10%; }
  100% { width: 80%; } }

.intro { width: 100%; margin: 0 auto; color: #ddd; font-style: italic; line-height: 18px; }

.intro a { color: #ddd; pointer-events: none; text-decoration: none; }

.card-info { box-sizing: border-box; padding: 0; width: 100%; position: absolute; bottom: -40px; left: 0; margin: 0 auto; padding: 0 50px; line-height: 1.5; z-index: 20; opacity: 0; transition: bottom 0.64s, opacity 0.63s cubic-bezier(0.33, 0.66, 0.66, 1); }

div.card-info a { margin-left: auto !important; margin-right: auto !important; text-transform: uppercase; font-size: 15px !important; margin-top: 30px; }

/*--------------------RESPONSIVE----------------------------*/
@media (max-width: 800px) { .showroom.blog-card { height: 1320px !important; } .showroom.blog-card .color-overlay, .showroom.blog-card .gradient-overlay { height: 1320px !important; } .blog-card { height: 1100px !important; background-size: cover !important; width: 100%; } .blog-card .color-overlay, .blog-card .gradient-overlay { height: 1100px !important; } }

@media (max-width: 1400px) { .blog-card { width: 70vw !important; } .blog-card .color-overlay { width: 70vw !important; } .blog-card .gradient-overlay { width: 70vw !important; } }

@media (max-width: 1050px) { .blog-card { width: 100vw !important; border-radius: 0 !important; } .blog-card .color-overlay { width: 100vw !important; } .blog-card .gradient-overlay { width: 100vw !important; } .blog-card { box-shadow: 0px 18px 20px -9px rgba(0, 10, 30, 0.75); } .blog-card .card-info { opacity: 1; bottom: 100px; } .blog-card .color-overlay { background: #394b5cc7; } .blog-card .title-content { margin-top: 70px; } }

/*---------------------------------------------------------------------PICTOS CARD----------------------------------------*/
.picto_card { background-color: #2d454f; min-height: 400px; align-content: center; }

.picto_card .row { margin: 0 !important; }

.picto_card p { color: white !important; font-size: 1.3rem !important; }

.picto_card { position: relative; overflow: hidden; }

.picto_card video.bg-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; opacity: 0.5; }

.picto_card > * { position: relative; z-index: 1; }

/*----------------------------------------------------------------------Boutons-----------------------------------------------------*/
a.button_header, a.button_homepageScreen, a.button_homepageDoubleScreen, .filter-btn { display: inline-block !important; transition: all 0.2s ease-in !important; position: relative !important; overflow: hidden !important; z-index: 1 !important; color: #2d454f !important; cursor: pointer !important; font-size: 14px !important; border-radius: 0.5em !important; background-color: #edf1f3 !important; border: 1px solid #edf1f3 !important; font-weight: 700 !important; text-transform: uppercase; }

a.button_header:active, a.button_homepageScreen:active, a.button_homepageDoubleScreen:active, .filter-btn:active { color: #666 !important; box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff !important; }

a.button_header:before, a.button_homepageScreen:before, a.button_homepageDoubleScreen:before, .filter-btn:before { content: "" !important; position: absolute !important; left: 50% !important; transform: translateX(-50%) scaleY(1) scaleX(1.25) !important; top: 100% !important; width: 140% !important; height: 180% !important; background-color: rgba(0, 0, 0, 0.05) !important; border-radius: 50% !important; display: block !important; transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1) !important; z-index: -1 !important; }

a.button_header:after, a.button_homepageScreen:after, a.button_homepageDoubleScreen:after, .filter-btn:after { content: "" !important; position: absolute !important; left: 55% !important; transform: translateX(-50%) scaleY(1) scaleX(1.45) !important; top: 180% !important; width: 160% !important; height: 190% !important; background-color: #b61622 !important; border-radius: 50% !important; display: block !important; transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1) !important; z-index: -1 !important; }

a.button_header:hover, a.button_homepageScreen:hover, a.button_homepageDoubleScreen:hover, .filter-btn:hover { color: #ffffff !important; border: 1px solid #b61622 !important; }

a.button_header:hover:before, a.button_homepageScreen:hover:before, a.button_homepageDoubleScreen:hover:before, .filter-btn:hover:before { top: -35% !important; background-color: #b61622 !important; transform: translateX(-50%) scaleY(1.3) scaleX(0.8) !important; }

a.button_header:hover:after, a.button_homepageScreen:hover:after, a.button_homepageDoubleScreen:hover:after, .filter-btn:hover:after { top: -45% !important; background-color: #b61622 !important; transform: translateX(-50%) scaleY(1.3) scaleX(0.8) !important; }

/*--------------------------------------------------------------------------Galerie photo--------------------------------------*/
.overlay { max-width: 1200px; margin: 0 auto; padding: 40px 20px; }

.filter-tabs { display: flex; justify-content: center; gap: 12px; margin-bottom: 32px; flex-wrap: wrap; }

.filter-btn { padding: 12px 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; min-height: 52px; line-height: 1.2; transition: background 0.2s; text-align: center; }

.filter-btn p { margin-bottom: 0 !important; }

.filter-btn.active { background-color: #b61622 !important; color: white !important; }

.realisations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }

.realisation-card { border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: transform 0.2s; }

.realisation-card:hover { transform: translateY(-4px); }

.realisation-card img { width: 100%; height: 320px; object-fit: cover; display: block; cursor: pointer; }

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

/* Modal pour l’image agrandie */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); align-items: center; justify-content: center; }

.modal-content { max-width: 800px; max-height: 90vh; object-fit: cover; width: auto; height: auto; border-radius: 8px; background: #fff; }

.modal-close { position: absolute; top: 24px; right: 32px; color: #fff; font-size: 36px; font-weight: bold; cursor: pointer; z-index: 1100; }

.modal-close:hover { color: #ffae42; }

@media (max-width: 900px) { .filter-tabs { gap: 8px; font-size: 0.9rem; } .filter-btn { padding: 10px 20px; font-size: 1rem; min-height: 48px; } .realisations-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; } .realisation-card img { height: 240px; } .modal-content { max-width: 90%; max-height: 90%; } }

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