@charset "UTF-8";
@import url(main.css);
.navbar { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12); /* Optionnel : ajoute une ombre subtile */ }

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

.carousel-inner.carousel-inner-homepage { display: none; }

.item-content.mx-5 { color: white; }

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

.b-bloc-divider { height: 40px !important; background-color: transparent !important; border: none !important; box-shadow: none !important; }

#services .background-image-div-opacity { padding-top: 300px; padding-bottom: 200px; filter: brightness(70%); }

div#services { padding-top: 100px !important; }

div#realisations { padding-top: 100px !important; padding-bottom: 100px !important; }

#realisations .background-image-div-opacity { filter: brightness(70%); }

.card.p-2.rounded-3.shadow-lg.px-4.border-0.d-flex.justify-content-lg-between { background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2F59V0zVWtRYMDErHt0wssPZHW8tf1%2Fimages%2FAccueil_49_4y2b.webp"); }

.hero { position: relative; width: 100%; height: 100vh; /* plein écran */ overflow: hidden; display: flex; align-items: center; justify-content: center; }

/* Image de fond */
.hero-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }

@media (max-width: 600px) { .hero-img { content: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2F59V0zVWtRYMDErHt0wssPZHW8tf1%2Fimages%2FAccueil_mobile_m3dd.webp"); /* 👉 remplace par ton URL mobile */ } }

/* Superposition sombre */
.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }

/* Contenu du hero */
.hero-content { position: relative; z-index: 2; text-align: center; color: #fff; max-width: 900px; padding: 0 20px; }

/* Petit titre */
.hero-subtitle { font-family: 'Yesteryear'; font-size: 2rem; color: #ffffff; display: block; margin-bottom: 15px; }

/* H1 principal */
.hero-content h1 { font-family: 'Roboto'; font-size: 2.5rem; line-height: 1.2; color: #fff; margin-bottom: 30px; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); }

/* Responsive */
@media (max-width: 900px) { .hero-content h1 { font-size: 2.5rem; } .hero-subtitle { font-size: 1.3rem; } }

@media (max-width: 600px) { .hero-content h1 { font-size: 2rem; } }

/* Panneau translucide derrière le texte */
.hero-panel { background: #cdcdcd36; /* transparence */ border-radius: 18px; /* coins arrondis */ padding: 22px 28px; /* espace interne */ margin: 0 auto; /* centré */ display: inline-block; /* ajuste au contenu */ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); backdrop-filter: blur(2px); /* léger flou du fond (optionnel) */ }

/* Ajustements responsives du panneau */
@media (max-width: 900px) { .hero-panel { padding: 18px 22px; border-radius: 16px; } }

@media (max-width: 600px) { .hero-panel { padding: 16px 18px; border-radius: 14px; } }

.hero-logo { width: 190px; /* adapte la taille à ton design */ max-width: 90%; margin: 0 auto 0px; /* espace en dessous */ display: block; z-index: 3; /* au-dessus de l’overlay */ position: relative; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3)); /* lisibilité sur fond clair */ }

@media (max-width: 900px) { .hero-logo { width: 130px; margin-bottom: 20px; } }

@media (max-width: 600px) { .hero-logo { width: 110px; } }

/* ============================= 🌸 SECTION RÉSEAUX SOCIAUX (version épurée) ============================= */
.social-section { background-color: #ba1926; /* rose poudré doux */ text-align: center; padding: 100px 40px; }

.social-header { margin-bottom: 50px; }

.social-subtitle { display: block; font-family: 'Yesteryear'; color: #ffffff; font-size: 2rem; margin-bottom: 10px; }

.social-header h2 { font-family: 'Roboto', serif; font-size: 2.2rem; font-weight: 600 !important; color: #ffffff; margin-bottom: 10px; }

/* Liens vers les réseaux */
.social-links { display: flex; justify-content: center; gap: 60px; flex-wrap: wrap; }

.social-item { display: flex; flex-direction: column; align-items: center; text-decoration: none; transition: transform 0.3s ease; }

.social-item img { width: 60px; height: 60px; margin-bottom: 12px; transition: filter 0.3s ease; }

.social-item span { font-family: 'Roboto'; color: #ffffff; font-size: 1rem; font-weight: 600; }

/* Effet au survol */
.social-item:hover { transform: translateY(-5px); }

/* Responsive */
@media (max-width: 768px) { .social-section { padding: 80px 20px; } .social-links { gap: 40px; } .social-header h2 { font-size: 1.8rem; } }

/* === BLOC PRESTATIONS === */
:root { --text: #ffffff; --maxw: 1200px; --gap: 40px; --pad-y: 100px; }

/* Section */
.prestations { position: relative; color: var(--text); background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2F59V0zVWtRYMDErHt0wssPZHW8tf1%2Fimages%2FAccueil_38_lk0z.webp"); background-size: cover; background-position: center; background-attachment: fixed; /* parallax desktop */ padding: var(--pad-y) 20px; text-align: center; isolation: isolate; /* pour que l’overlay reste derrière le contenu */ }

/* Overlay sombre pour lisibilité du texte */
.prestations__overlay { position: absolute; inset: 0; z-index: -1; }

/* Contrainte de largeur */
.prestations__container { max-width: var(--maxw); margin: 0 auto; }

/* Titre */
.prestations__title { margin: 0 0 50px; font-size: 2.5rem; line-height: 1.2; font-family: 'Yesteryear'; }

/* Grille : 4 colonnes fixes sur desktop. Avec 8 éléments, on obtient 4 + 4 */
.prestations__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 colonnes */ gap: var(--gap); justify-items: center; /* centre le contenu de chaque cellule */ align-items: center; }

/* Tuile (statique, non cliquable) */
.prestations__item { display: grid; justify-items: center; text-align: center; }

/* Icône */
.prestations__icon { width: 80px; height: auto; margin-bottom: 15px; display: block; }

/* Libellé */
.prestations__label { margin: 0; font-size: 1.2rem; font-weight: 600 !important; }

.prestations__title .highlight { color: #f9ed31; /* jaune */ background: none !important; }

/* Confort mobile/tablette */
@media (max-width: 1024px) { .prestations { background-attachment: scroll; --gap: 28px; --pad-y: 72px; } }

@media (max-width: 768px) { .prestations__grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }

/* ================== Section globale services ===============*/
.services-section { position: relative; background-color: #ffffff; padding: 60px 40px; overflow: hidden; }

/* === Grands rectangles === */
.services-line { display: flex; justify-content: space-between; gap: 20px; flex-wrap: nowrap; overflow-x: auto; max-width: 1400px; margin: 0 auto; }

.service-rect { position: relative; flex: 1 1 calc(20% - 20px); height: 450px; background-size: cover; background-position: center; border-radius: 10px; overflow: hidden; cursor: pointer; transition: transform 0.4s ease; }

.service-rect::before { content: ""; position: absolute; inset: 0; background: #ba19267a; transition: background 0.4s ease; }

.service-rect:hover { transform: translateY(-5px); }

.service-rect:hover::before { background: #ba1926c4; }

/* --- Contenu texte --- */
.service-content { position: absolute; bottom: 50px; left: 30px; color: #fff; text-align: left; z-index: 2; padding-right: 20px; }

.service-content h4 { font-family: 'Roboto', sans-serif; font-size: 1.4rem; margin-top: 5px; color: #fff !important; }

/* --- Flèche --- */
.arrow-btn { position: absolute; bottom: 20px; right: 20px; width: 38px; height: 38px; border: 1px solid #ffffff; border-radius: 20px; color: #ffffff; display: flex; align-items: center; justify-content: center; z-index: 2; opacity: 1; transform: translateY(0); transition: all 0.3s ease; }

.arrow-btn svg { width: 16px; height: 16px; transition: transform 0.3s ease; }

.service-rect:hover .arrow-btn { background-color: #ba1926; border-color: #ffffff; color: #ffffff; }

.service-rect:hover .arrow-btn svg { transform: translate(2px, -2px); }

/* === Trait sous le titre === */
.section-title::after { content: ""; position: absolute; left: 0; right: 0; bottom: -20px; height: 1px; background-color: #011f5b; opacity: 0.2; z-index: 1; }

.section-title, .services-line, .service-rect { position: relative; z-index: 2; }

/* === Responsive === */
@media (max-width: 1200px) { .service-rect { flex: 1 1 calc(33.33% - 20px); height: 400px; } }

@media (max-width: 900px) { .section-title { flex-direction: column; align-items: flex-start; text-align: left; gap: 20px; } .title-right h2 { font-size: 1.8rem; } .services-line { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; overflow: visible; } .service-rect { flex: none; aspect-ratio: 1 / 1; /* carré parfait */ height: auto; } }

@media (max-width: 600px) { .services-line { grid-template-columns: 1fr; } .service-rect { aspect-ratio: 1 / 1; height: auto; } .service-content { bottom: 20px; left: 20px; } .line { width: 60px; } .arrow-btn { width: 35px; height: 35px; } }

/* ================== Bloc icons pages secondaires ===============*/
.engagements-section { background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2F59V0zVWtRYMDErHt0wssPZHW8tf1%2Fimages%2FAccueil_40_v99c.webp"); background-size: cover; background-position: center; background-attachment: fixed; padding: 60px 20px; position: relative; color: white; text-align: center; }

.engagements-section .overlay { padding: 40px 20px; }

.engagements-section .engagements-title { margin-bottom: 100px; color: white; font-family: 'Yesteryear'; font-size: 3rem; }

.engagements-section .engagements-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; max-width: 1200px; margin: 0 auto; }

.engagements-section .card { background-color: #ba1926a8; background-repeat: no-repeat; background-position: center 20px; background-size: 100px; padding: 120px 20px 30px; box-shadow: 0 0 10px rgba(255, 255, 255, 0.33); width: calc(33.333% - 20px); border-radius: 8px; position: relative; color: white; }

.engagements-section .card h3, .engagements-section .card p { color: white; }

@media (max-width: 992px) { .engagements-section .card { width: calc(50% - 20px); } }

@media (max-width: 600px) { .engagements-section .card { width: 100%; } .engagements-section .engagements-title { margin-bottom: 40px; } }

/* ================== Bloc réalisations ===============*/
.realisations-section { background: #FFFFFF; padding: 60px 20px; }

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

.realisations-main-title { text-align: center; margin-bottom: 32px; }

.font-roboto { font-family: 'Roboto', sans-serif; font-weight: 600 !important; color: #000000; font-size: 2rem; }

.font-alt { font-family: 'Yesteryear'; font-size: 3rem; color: #ba1926; }

.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; box-shadow: none; 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: #ba1926; color: #fff; }

.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: 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: #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%; } }

/* ================== Bloc réalisations ===============*/
.btnDevis { position: fixed; bottom: 20px; right: 0; font-size: 25px; padding: 10px 20px; background: #ba1926; color: white !important; text-decoration: none; border-radius: 30px 0 0 30px !important; z-index: 10; font-family: 'Yesteryear'; }

.btnDevis:hover { background: #AD1421; color: white; }

.btnDevis:visited { color: white !important; }

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