@charset "UTF-8";
@import url(main.css);
/* ========================================================================== SOMMAIRE : 00. RÈGLES GLOBALES CMS 01. NAV BAR 02. ACCUEIL : BLOC VIDÉO (HERO SECTION) 03. ACCUEIL : PRÉSENTATION "DONNEZ VIE À VOS PROJETS" 04. ACCUEIL : MÉTHODE & ÉTAPES (TIMELINE) 04b. SECTION "NOS PRESTATIONS" 05. BLOCS GLOBAUX : IMAGE + TEXTE 06. BLOCS GLOBAUX : CALL TO ACTION (CTA) 07. MODULES : AVANT / APRÈS 08. MODULES : GALERIE RÉALISATIONS (AVEC FILTRES) 09. MODULES : SHOWROOM CARROUSEL INFINI 10. PAGE : CONTACT & CARTE 11. PAGES INTÉRIEURES : BLOC TEXTE CENTRÉ 12. BLOC : LIGNE DES ÉTAPES (MÉTHODES & EXPERTISES) ========================================================================== */
/* ========================================================================== 00. RÈGLES GLOBALES CMS ========================================================================== */
#fullHeight > div > div.bloc-slider-homepage.text-center > div.titleText.text-white.text-center.fs-2.mb-4.mt-lg-5.titles > h1:nth-child(1) { margin-bottom: 10px !important; }

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

/* ========================================================================== 01. NAV BAR ========================================================================== */
#navbarSupportedContent > div > a.button-header-telephone { border: 3px solid #FFEB4E !important; color: #FFEB4E !important; background-color: transparent !important; padding: 0.5rem 1.5rem !important; border-radius: 50px !important; transition: all 0.3s ease; }

#navbarSupportedContent > div > a.button-header-telephone:hover { background-color: #FFEB4E !important; color: #202C39 !important; }

ul.dropdown-menu.text-color-fourth.show { background-color: #1f2c39 !important; }

a.dropdown-item.text-color-fourth { color: white !important; }

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

h2.display-6.fw-bold.p-3.pt-lg-3.m-0.titles { color: #202c39; }

/* ========================================================================== 02. ACCUEIL : BLOC VIDÉO (HERO SECTION) ========================================================================== */
.video-background-holder { border-radius: 0rem 0rem 5rem 5rem !important; }

h1, .h1 { margin-bottom: 1.2rem !important; }

#phone-analytics-tag-video-bloc { padding: 1.2em 3rem !important; border: 3px solid #FFEB4E !important; background-color: transparent !important; border-radius: 50px; text-decoration: none; transition: all 0.3s ease; }

#phone-analytics-tag-video-bloc span { color: #FFEB4E !important; font-size: 1.1rem; transition: color 0.3s ease; }

#phone-analytics-tag-video-bloc:hover { background-color: #FFEB4E !important; border-color: #FFEB4E !important; }

#phone-analytics-tag-video-bloc:hover span { color: #202C39 !important; }

@media (max-width: 768px) { #phone-analytics-tag-video-bloc { padding: 1em 2rem !important; } }

/* ========================================================================== 03. ACCUEIL : PRÉSENTATION "DONNEZ VIE À VOS PROJETS" ========================================================================== */
.presentation-jimmy-bloc { background-color: #1f2c39; padding: 80px 20px; width: 100%; box-sizing: border-box; border-radius: 5rem !important; margin-top: 7rem; }

.presentation-jimmy-container { max-width: 1200px; margin: 0 auto; display: flex; gap: 5rem; align-items: center; }

.presentation-jimmy-text { flex: 1; }

.presentation-jimmy-text h2 { font-family: 'Arial Black', Arial, sans-serif !important; font-size: 3rem; color: #ffeb4e; margin-bottom: 30px; line-height: 1.1; }

.presentation-jimmy-text p { font-family: 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif !important; font-size: 1.1rem; line-height: 1.6; margin-bottom: 15px; color: #fff; }

.presentation-jimmy-divider { width: 150px; height: 1px; background-color: #fff; margin: 25px 0; }

/* ========================================= NOUVEAU CONTENEUR DES BOUTONS ========================================= */
.presentation-jimmy-buttons { display: flex; flex-wrap: wrap; /* Permet aux boutons de passer à la ligne s'il n'y a pas assez de place */ gap: 15px; /* L'espace entre les deux boutons */ margin-top: 20px; }

/* ========================================= STYLE DES BOUTONS (Remplaçant l'ancien ID) ========================================= */
.presentation-jimmy-bloc .presentation-jimmy-btn { display: inline-block; padding: 1.2em 3rem !important; /* J'ai légèrement réduit de 5rem à 3rem pour que les deux rentrent bien */ border: 3px solid #ffeb4e !important; background-color: transparent !important; border-radius: 50px; cursor: pointer; text-align: center; text-decoration: none; transition: all 0.3s ease; font-family: 'Arial Black', Arial, sans-serif !important; }

.presentation-jimmy-bloc .presentation-jimmy-btn span { color: #ffeb4e !important; font-size: 1.1rem; transition: color 0.3s ease; }

.presentation-jimmy-bloc .presentation-jimmy-btn:hover { background-color: #FFEB4E !important; border-color: #FFEB4E !important; }

.presentation-jimmy-bloc .presentation-jimmy-btn:hover span { color: #202C39 !important; }

/* ========================================= RESPONSIVE (Boutons sur mobile) ========================================= */
@media (max-width: 768px) { .presentation-jimmy-bloc .presentation-jimmy-btn { padding: 1em 2rem !important; width: 100%; /* Sur téléphone, les boutons prendront toute la largeur, l'un sous l'autre */ box-sizing: border-box; } }

.presentation-jimmy-images { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 250px 250px; gap: 15px; }

.presentation-jimmy-images img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 3rem !important; }

.img-tall { grid-row: span 2; }

@media (max-width: 992px) { .presentation-jimmy-container { flex-direction: column; } .presentation-jimmy-images { width: 100%; } }

@media (max-width: 768px) { /* 1. On empile les boutons et on les centre */ .presentation-jimmy-buttons { flex-direction: column; align-items: center; gap: 15px; /* Garde un bel espace entre les deux */ } /* 2. On ajuste la taille des boutons */ .presentation-jimmy-bloc .presentation-jimmy-btn { padding: 1em 2rem !important; width: 80% !important; /* Largeur réduite à 80% */ box-sizing: border-box; } }

/* ========================================================================== 04. ACCUEIL : MÉTHODE & ÉTAPES (TIMELINE) ========================================================================== */
.process-jimmy-section { background-image: linear-gradient(rgba(22, 36, 44, 0.7), rgba(22, 36, 44, 0.8)), url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FHgu99nuiExeminiRkbswfrhu0qZ2%2Fimages%2FDesign_sans_titre_17_2wkn.webp?alt=media&token=d98b74ad-d3e7-4cae-b73f-1ad222425004") !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; background-color: #16242c; color: #ffffff; padding: 80px 20px; display: flex; flex-direction: column; align-items: center; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif !important; overflow: hidden; }

section.process-jimmy-section { margin-top: 0rem !important; margin-bottom: 3rem !important; border-radius: 5rem !important; }

.process-jimmy-header { text-align: center; margin-bottom: 60px; }

.process-jimmy-header h2 { font-family: 'Arial Black', Arial, sans-serif !important; font-size: 2.5rem; color: #FFEB4E; margin-bottom: 10px; }

.process-jimmy-header p { font-size: 2rem; color: #e0e0e0; }

.process-jimmy-timeline { display: flex; flex-direction: column; gap: 25px; max-width: 800px; width: 100%; }

.process-jimmy-step { display: flex; align-items: center; gap: 20px; opacity: 0; animation: fadeInProcess 0.8s ease forwards; }

.process-jimmy-step:nth-child(1) { animation-delay: 0.1s; margin-left: 0; }

.process-jimmy-step:nth-child(2) { animation-delay: 0.3s; margin-left: 40px; }

.process-jimmy-step:nth-child(3) { animation-delay: 0.5s; margin-left: 80px; }

.process-jimmy-step:nth-child(4) { animation-delay: 0.7s; margin-left: 120px; }

.process-jimmy-circle { color: #16242c; width: 60px; height: 60px; background: #FFEB4E; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 26px; flex-shrink: 0; box-shadow: 0 4px 15px rgba(255, 235, 78, 0.2); transition: transform 0.3s ease, box-shadow 0.3s ease !important; font-family: 'Arial Black', Arial, sans-serif !important; }

.process-jimmy-text { background: #fff; border: 3px solid rgba(255, 255, 255, 0.1); padding: 20px 30px; border-radius: 12px; width: 100%; max-width: 550px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); transition: transform 0.3s ease, box-shadow 0.3s ease !important; }

.process-jimmy-text strong { font-family: 'Arial Black', Arial, sans-serif !important; font-size: 1.4rem; display: block; margin-bottom: 8px; color: #16242c; letter-spacing: 0.5px; }

.process-jimmy-text p { font-size: 1.1rem; margin: 0; line-height: 1.5; color: #212C39; }

.process-jimmy-step:hover .process-jimmy-text { transform: translateY(-8px) !important; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3) !important; }

.process-jimmy-step:hover .process-jimmy-circle { transform: translateY(-8px) !important; box-shadow: 0 8px 25px rgba(255, 235, 78, 0.5) !important; }

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

@media (max-width: 768px) { .process-jimmy-step:nth-child(n) { margin-left: 0; } .process-jimmy-header h2 { font-size: 2rem; } .process-jimmy-step { flex-direction: column; text-align: center; gap: 15px; } }

/* ========================================================================== 04b. SECTION "NOS PRESTATIONS" ========================================================================== */
section.services-fabulet { border-radius: 5rem 5rem 0rem 0rem !important; }

.services-fabulet { width: 100% !important; padding: 80px 20px !important; background-color: #fff; box-sizing: border-box !important; }

.services-fabulet-container { max-width: 1200px !important; margin: 0 auto !important; padding: 0 50px; }

.services-fabulet-header { text-align: center; margin-bottom: 60px; }

.services-fabulet-title { font-family: 'Arial Black', Arial, sans-serif !important; font-size: 2.5rem !important; color: #202C39 !important; margin-bottom: 15px !important; }

.services-fabulet-subtitle { font-family: 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif !important; font-size: 1.2rem !important; line-height: 1.6 !important; color: #202C39 !important; max-width: 850px; margin: 0 auto !important; }

.services-fabulet-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 40px !important; }

.services-fabulet-card { display: flex !important; flex-direction: column !important; position: relative !important; }

.services-fabulet-card-image { position: relative !important; width: 100% !important; aspect-ratio: 4 / 5 !important; overflow: hidden !important; z-index: 1 !important; border-radius: 2rem !important; display: block; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important; transition: transform 0.3s ease, box-shadow 0.3s ease !important; }

.services-fabulet-card-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

.services-fabulet-card-image:hover { transform: translateY(-8px) !important; }

.services-fabulet-card-content { background: #fff !important; padding: 30px 20px !important; margin: -60px auto 0 !important; width: 85% !important; text-align: center !important; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important; position: relative !important; z-index: 2 !important; border-radius: 2rem !important; }

.services-fabulet-card-title { font-family: 'Arial Black', Arial, sans-serif !important; font-size: 1.1rem !important; letter-spacing: 0.5px !important; color: #202C39 !important; margin-bottom: 10px !important; margin-top: 0 !important; }

.services-fabulet-card-text { font-family: 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif !important; color: #202C39 !important; line-height: 1.5 !important; margin: 0 !important; }

@media (max-width: 992px) { .services-fabulet-grid { grid-template-columns: repeat(2, 1fr) !important; } }

@media (max-width: 768px) { .services-fabulet-grid { grid-template-columns: 1fr !important; gap: 60px !important; } .services-fabulet-container { padding: 0 20px !important; } }

/* Masque le titre photo uniquement s'il contient un paragraphe vide ou sans texte */
.photoTitleText:has(p:empty) { display: none !important; }

/* ========================================================================== 05. BLOCS GLOBAUX : IMAGE + TEXTE ========================================================================== */
.photoTitleText .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 { justify-content: flex-start !important; }

.photoText-div .shadow-lg { box-shadow: none !important; justify-content: left !important; }

.photoText-div .col-lg-6.p-lg-4 { padding: 0 !important; text-align: left !important; }

.photoText-div .titles.p-4 { padding: 0 !important; }

@media (min-width: 992px) { .photoText-div .col-lg-5.m-2 { margin: 0.5rem 0.5rem 0.5rem 5rem !important; border-radius: 3rem !important; } }

@media (max-width: 991px) { .photoText-div .col-lg-5.m-2 { margin: 0.5rem !important; border-radius: 3rem !important; } .photoTitleText { padding: 0rem !important; padding-top: 3rem !important; } }

/* ========================================================================== 06. BLOCS GLOBAUX : CALL TO ACTION (CTA) ========================================================================== */
.cta_banner .background-image-div-opacity { border-radius: 3rem !important; }

.cta_banner { margin-top: 5rem !important; }

.cta_banner.py-5 { padding-top: 7rem !important; padding-bottom: 7rem !important; border-radius: 3rem !important; }

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

.cta_banner .ctaLinks-button { border: 3px solid #FFEB4E !important; padding-left: 4rem !important; padding-right: 4rem !important; transition: all 0.3s ease !important; }

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

.cta_banner .ctaLinks-button:hover span { color: #202C39 !important; }

/* ========================================================================== 07. MODULES : AVANT / APRÈS ========================================================================== */
@media (min-width: 992px) { div:has(> .row > .before-after-images-column) { padding-top: 3rem !important; } }

.image-before-after-container { border-radius: 3rem !important; overflow: hidden !important; }

.image-before-after-container .before-image-gallery, .image-before-after-container .after-image-gallery { border-radius: 3rem !important; }

/* ========================================================================== 08. MODULES : GALERIE RÉALISATIONS (AVEC FILTRES) ========================================================================== */
.realisations-section { background: #FFFFFF; padding: 60px 20px; }

.realisations-section p { margin-bottom: 0 !important; }

.overlay { max-width: 1600px; margin: 0 auto; padding: 40px 20px; }

.realisations-main-title { text-align: center; font-family: 'Arial Black', Arial, sans-serif !important; font-size: 2.8rem; font-weight: bold; color: #212C39; margin-bottom: 32px; }

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

.filter-btn { background: #f0f0f0; border: none; color: #333; font-size: 1.1rem; padding: 12px 24px; border-radius: 30px; cursor: pointer; font-weight: 600; display: flex; align-items: center; justify-content: center; min-height: 52px; line-height: 1.2; transition: background 0.2s; text-align: center; }

.filter-btn.active, .filter-btn:hover { background: #FFEB4E; color: #212C39; }

.realisations-grid { display: grid; grid-template-columns: repeat(4, 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 { display: none; position: fixed; z-index: 1000; inset: 0; background-color: rgba(0, 0, 0, 0.85); align-items: center; justify-content: center; }

.modal-content { max-width: 500px; max-height: 70vh; 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: #FFEB4E; }

@media (max-width: 900px) { .filter-tabs { gap: 8px; } .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%; } }

/* ========================================================================== 09. MODULES : SHOWROOM CARROUSEL INFINI ========================================================================== */
.showroom-wrapper { overflow: hidden; width: 100%; padding: 3.5rem 0; position: relative; }

.showroom-gallery { display: flex; gap: 16px; width: max-content; animation: showroom-scroll 25s linear infinite; }

.showroom-gallery:hover { animation-play-state: paused; }

.showroom-item { width: 500px; height: 450px; flex-shrink: 0; border-radius: 12px; overflow: hidden; cursor: pointer; }

.showroom-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }

.showroom-item:hover img { transform: scale(1.1); }

@keyframes showroom-scroll { 0% { transform: translateX(0); }
  100% { transform: translateX(calc(-33.333% - 5.33px)); } }

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

.showroom-modal-content { max-width: 90%; max-height: 80vh; border-radius: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); }

.showroom-modal-close { position: absolute; top: 20px; right: 35px; color: #fff; font-size: 40px; font-weight: bold; cursor: pointer; }

.showroom-modal-close:hover { color: #FFEB4E; }

/* ========================================================================== 10. PAGE : CONTACT & CARTE ========================================================================== */
#contact .background-image-div-opacity { background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FHgu99nuiExeminiRkbswfrhu0qZ2%2Fimages%2FDesign_sans_titre_17_2wkn.webp") !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; background-attachment: fixed !important; opacity: 1 !important; }

div#contact { padding-top: 7rem !important; }

.py-5 { padding-top: 7rem !important; padding-bottom: 7rem !important; }

.maps-section { padding-top: 3rem !important; padding-bottom: 7rem !important; }

div.titleText.titles { margin-bottom: 6rem !important; }

/* ========================================================================== 11. HEADER FAÇADE ========================================================================== */
.carousel-inner.carousel-inner-homepage { border-radius: 0rem 0rem 5rem 5rem !important; }

/* ========================================================================== BLOC TEXTE CENTRÉ (PAGES INTÉRIEURES : FAÇADES / TOITURES) ========================================================================== */
.presentation-interne-bloc { background-color: #1f2c39; padding: 80px 20px; width: 100%; box-sizing: border-box; border-radius: 5rem; }

.presentation-interne-container { max-width: 900px; /* Largeur réduite pour que le texte soit facile à lire */ margin: 0 auto; display: flex; flex-direction: column; align-items: center; }

.presentation-interne-text { width: 100%; display: flex; flex-direction: column; align-items: center; /* Centre le contenu (titre, texte, bouton) */ }

/* TYPOGRAPHIE ET COULEURS EXACTES DE VOTRE ACCUEIL */
.presentation-interne-text h2 { font-family: 'Arial Black', Arial, sans-serif !important; font-size: 3rem; color: #FFEB4E; margin-bottom: 30px; line-height: 1.1; text-align: center; }

.presentation-interne-text p { font-family: 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif !important; font-size: 1.1rem; line-height: 1.6; margin-bottom: 15px; color: #fff; text-align: center; }

/* LA LIGNE DE SÉPARATION (Centrée avec 'auto') */
.presentation-interne-divider { width: 150px; height: 1px; background-color: #1f2c39; margin: 25px auto; }

/* ========================================= NOUVEAU CONTENEUR DES BOUTONS (PAGES INTÉRIEURES) ========================================= */
.presentation-interne-buttons { display: flex; flex-wrap: wrap; justify-content: center; /* Centre les boutons horizontalement sur ordinateur */ gap: 15px; margin-top: 20px; width: 100%; }

/* ========================================= STYLE DES BOUTONS (Remplaçant l'ancien ID) ========================================= */
.presentation-interne-bloc .presentation-interne-btn { display: inline-block; padding: 1.2em 3rem !important; border: 3px solid #FFEB4E !important; background-color: transparent !important; border-radius: 50px; cursor: pointer; text-align: center; text-decoration: none; transition: all 0.3s ease; }

.presentation-interne-bloc .presentation-interne-btn span { font-family: 'Arial Black', Arial, sans-serif !important; /* Typo d'origine conservée ! */ color: #FFEB4E !important; font-size: 1.1rem; transition: color 0.3s ease; }

.presentation-interne-bloc .presentation-interne-btn:hover { background-color: #FFEB4E !important; border-color: #FFEB4E !important; }

.presentation-interne-bloc .presentation-interne-btn:hover span { color: #202C39 !important; }

/* ========================================= RESPONSIVE (Boutons à 80% et centrés) ========================================= */
@media (max-width: 768px) { .presentation-interne-bloc { padding: 60px 20px; } .presentation-interne-text h2 { font-size: 2.2rem; } /* 1. On empile les boutons et on les centre */ .presentation-interne-buttons { flex-direction: column; align-items: center; } /* 2. On applique la largeur de 80% */ .presentation-interne-bloc .presentation-interne-btn { padding: 1em 2rem !important; width: 80% !important; box-sizing: border-box; } }

/* RESPONSIVE POUR MOBILE */
@media (max-width: 768px) { .presentation-interne-bloc { padding: 60px 20px; } .presentation-interne-text h2 { font-size: 2.2rem; /* Réduit un peu le titre sur téléphone */ } .presentation-interne-bloc #phone-analytics-tag-video-bloc { padding: 1em 2rem !important; } }

/* ========================================================================== 12. BLOC : LIGNE DES ÉTAPES (MÉTHODES & EXPERTISES) ========================================================================== */
.facade-steps-line { background-color: #ffffff; padding: 60px 20px; width: 100%; box-sizing: border-box; }

.facade-steps-container { max-width: 1200px; margin: 0 auto; display: grid; gap: 30px; text-align: center; }

/* Grille spécifique pour 4 étapes (Page Façades) */
.facade-4-cols { grid-template-columns: repeat(5, 1fr); }

.facade-step-item { display: flex; flex-direction: column; align-items: center; padding: 0 10px; /* Un peu d'air sur les côtés */ }

/* Le Numéro */
.facade-step-number { font-family: 'Arial Black', Arial, sans-serif !important; font-size: 3.5rem; color: #1f2c39; line-height: 1; margin-bottom: 15px; position: relative; }

/* Petit trait décoratif jaune */
.facade-step-number::after { content: ''; display: block; width: 60px; height: 4px; background-color: #FFEB4E; margin: 10px auto 0 auto; border-radius: 2px; }

/* Titre de l'étape */
.facade-step-title { font-family: 'Arial Black', Arial, sans-serif !important; font-size: 1.3rem; color: #1f2c39; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; }

/* Texte descriptif */
.facade-step-text { font-family: 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif !important; font-size: 1.2rem; color: #1f2c39; line-height: 1.5; margin: 0; }

/* Grille spécifique pour 5 étapes (Page Façades) */
.facade-5-cols { grid-template-columns: repeat(5, 1fr) !important; }

/* ========================================= 📱 RESPONSIVE POUR LES 5 ÉTAPES ========================================= */
@media (max-width: 992px) { /* Sur tablette : on passe à 3 colonnes (sur 2 lignes) */ .facade-5-cols { grid-template-columns: repeat(3, 1fr) !important; gap: 50px 20px !important; } }

@media (max-width: 768px) { /* Sur grand téléphone : on passe à 2 colonnes */ .facade-5-cols { grid-template-columns: repeat(2, 1fr) !important; } }

@media (max-width: 576px) { /* Sur petit téléphone : on passe à 1 colonne */ .facade-5-cols { grid-template-columns: 1fr !important; gap: 40px !important; } }

/* ========================================================================== BLOC : LIGNE DES ÉTAPES (MÉTHODES & EXPERTISES) ========================================================================== */
.facade-steps-line { background-color: #ffffff; padding: 60px 20px; width: 100%; box-sizing: border-box; }

.facade-steps-container { max-width: 1200px; margin: 0 auto; display: grid; gap: 30px; text-align: center; }

/* Grille spécifique pour 4 étapes (Page Façades) */
.facade-4-cols { grid-template-columns: repeat(5, 1fr); }

.facade-step-item { display: flex; flex-direction: column; align-items: center; padding: 0 10px; /* Un peu d'air sur les côtés */ }

/* Le Numéro */
.facade-step-number { font-family: 'Arial Black', Arial, sans-serif !important; font-size: 3.5rem; color: #1f2c39; line-height: 1; margin-bottom: 15px; position: relative; }

/* Petit trait décoratif jaune */
.facade-step-number::after { content: ''; display: block; width: 60px; height: 4px; background-color: #FFEB4E; margin: 10px auto 0 auto; border-radius: 2px; }

/* Titre de l'étape */
.facade-step-title { font-family: 'Arial Black', Arial, sans-serif !important; font-size: 1.3rem; color: #1f2c39; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; }

/* Texte descriptif */
.facade-step-text { font-family: 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif !important; font-size: 1.2rem; color: #1f2c39; line-height: 1.5; margin: 0; }

/* Grille spécifique pour 5 étapes (Page Façades) */
.facade-5-cols { grid-template-columns: repeat(5, 1fr) !important; }

/* ========================================= 📱 RESPONSIVE POUR LES 5 ÉTAPES ========================================= */
@media (max-width: 992px) { /* Sur tablette : on passe à 3 colonnes (sur 2 lignes) */ .facade-5-cols { grid-template-columns: repeat(3, 1fr) !important; gap: 50px 20px !important; } }

@media (max-width: 768px) { /* Sur grand téléphone : on passe à 2 colonnes */ .facade-5-cols { grid-template-columns: repeat(2, 1fr) !important; } }

@media (max-width: 576px) { /* Sur petit téléphone : on passe à 1 colonne */ .facade-5-cols { grid-template-columns: 1fr !important; gap: 40px !important; } }

/* ========================================= GRILLE SPÉCIFIQUE POUR 4 ÉTAPES (PAGE TOITURES) ========================================= */
.facade-4-cols { grid-template-columns: repeat(4, 1fr) !important; }

@media (max-width: 992px) { /* Sur tablette : on passe à 2 colonnes */ .facade-4-cols { grid-template-columns: repeat(2, 1fr) !important; gap: 50px 20px !important; } }

@media (max-width: 576px) { /* Sur téléphone : on passe à 1 seule colonne */ .facade-4-cols { grid-template-columns: 1fr !important; gap: 40px !important; } }

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