@charset "UTF-8";
@import url(main.css);
div.shadow-lg { box-shadow: none !important; }

/* ===== SECTION ENTÊTE 2 TEXTES ===== */
.entete-2-textes-section { position: relative; display: flex; align-items: center; justify-content: space-between; height: 100vh; /* plein écran */ padding: 0 60px; /* espace horizontal */ background-image: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2F8HcNs4OlraQn1Y3ZOURtodiICcn1%2Fimages%2Faccueil_noir_8er8.webp"); /* 👉 ton image ici */ background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; /* ✅ le fond reste fixe pendant le scroll */ color: #ffffff; overflow: hidden; }

/* Voile sombre pour lisibilité */
.entete-2-textes-section::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 0; }

/* Bloc gauche (logo + H1 + bouton) */
.entete-2-textes-gauche { position: relative; z-index: 1; flex: 1; min-width: 280px; max-width: 45%; font-family: inherit; display: flex; flex-direction: column; align-items: center; /* 👉 centre horizontalement logo, H1 et bouton */ justify-content: center; /* 👉 centre verticalement le tout */ text-align: center; /* 👉 centre le texte */ }

.entete-2-textes-logo { max-width: 300px; margin-bottom: 30px; display: block; }

.entete-2-textes-gauche h1 { font-size: 2.8rem; font-weight: 700; line-height: 1.3; margin: 0 0 25px 0; color: #ffffff; }

.entete-2-textes-bouton { display: inline-block; background-color: #107d42; color: #ffffff; padding: 10px 25px; border-radius: 25px; font-weight: 600; text-decoration: none; font-size: 1.1rem; transition: all 0.3s ease; font-family: inherit; }

.entete-2-textes-bouton:hover { background-color: #0E6C41; transform: scale(1.05); }

/* Bloc droit (H3 + texte) */
.entete-2-textes-droite { position: relative; z-index: 1; flex: 1; min-width: 280px; max-width: 45%; font-family: inherit; display: flex; flex-direction: column; align-items: center; /* 👉 centre horizontalement le H3 et le texte */ justify-content: center; /* 👉 centre verticalement dans le bloc */ text-align: center; /* 👉 centre le texte */ background: rgba(0, 0, 0, 0); backdrop-filter: blur(20px) saturate(120%); -webkit-backdrop-filter: blur(20px) saturate(120%); border-radius: 20px; padding: 20px 0px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); color: #fff; transition: all 0.3s ease; }

/* 💫 Survol : un léger effet de profondeur */
.entete-2-textes-droite:hover { background: rgba(0, 0, 0, 0.1); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); }

.entete-2-textes-droite h3 { font-size: 1.6rem; margin-bottom: 15px; color: #a65727; }

.entete-2-textes-droite p { font-size: 1.05rem; max-width: 500px; color: #f0f0f0; line-height: 1.6; margin: 0 auto; /* 👉 centre le paragraphe */ }

/* ===== Responsive ===== */
@media (max-width: 900px) { .entete-2-textes-section { flex-direction: column; text-align: center; height: auto; /* sur mobile, on laisse défiler */ padding: 80px 30px; background-attachment: scroll; } .entete-2-textes-bouton { margin-bottom: 40px; /* 👉 espace entre le bouton et le texte du dessous */ } .entete-2-textes-gauche, .entete-2-textes-droite { max-width: 100%; text-align: center; } .entete-2-textes-droite p { margin-left: auto; margin-right: auto; } .entete-2-textes-logo { margin: 0 auto 20px auto; } .entete-2-textes-gauche h1 { font-size: 2.2rem; } }

.gpj-card-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; padding: 40px 20px; background-color: #EEDCD5; box-sizing: border-box; }

.gpj-card { flex: 1 1 calc(25% - 20px); /* Au lieu de 33.333% */ max-width: calc(25% - 20px); /* 4 cartes par ligne sur écran large */ aspect-ratio: 2.8 / 2.8; /* Cartes un peu moins hautes */ border: 2px solid #B16B5E; border-radius: 30px; padding: 10px; /* Réduit le padding interne */ background: transparent; box-sizing: border-box; }

.gpj-card-inner { width: 100%; height: 100%; position: relative; border-radius: 20px; overflow: hidden; }

.gpj-card-inner img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; display: block; }

.gpj-card-text { position: absolute; bottom: 20px; left: 0; width: 100%; text-align: center; color: white; padding: 0 20px; box-sizing: border-box; transition: transform 0.4s ease; }

.gpj-card-text h3 { font-size: 1.4rem; margin-bottom: 10px; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); }

.gpj-hover-content { transform: translateY(100%); opacity: 0; transition: all 0.4s ease; }

.gpj-card-inner:hover .gpj-card-text { transform: translateY(-40px); }

.gpj-card-inner:hover .gpj-hover-content { transform: translateY(0); opacity: 1; }

.gpj-hover-content p { font-size: 1.0rem; margin-bottom: 15px; background: rgba(20, 20, 20, 0.6); padding: 10px; border-radius: 10px; }

.gpj-hover-content button { background: linear-gradient(to right, #EAADA1, #AC6146); border: none; padding: 10px 20px; color: white; font-weight: bold; border-radius: 20px; cursor: pointer; transition: background-color 0.3s ease; }

.gpj-hover-content button:hover { background: linear-gradient(to right, #AC6146, #EAADA1); }

/* Responsive layout */
@media (max-width: 1024px) { .gpj-card { flex: 1 1 calc(33.333% - 20px); max-width: calc(33.333% - 20px); } }

@media (max-width: 768px) { .gpj-card { flex: 1 1 calc(50% - 20px); max-width: calc(50% - 20px); } }

@media (max-width: 480px) { .gpj-card { flex: 1 1 100%; max-width: 100%; } }

.section-verte { background-color: #698265; /* ton vert Floréart */ width: 100vw; /* prend toute la largeur de l’écran */ margin-left: calc(-50vw + 50%); /* s’aligne sur les bords même si dans un wrapper */ padding: 0px 0; /* espace vertical */ color: #fff; }

#textegaucheimagedroit, #textedroitimagegauche { width: 100vw; margin-left: calc(-50vw + 50%); padding: 60px 0; color: #fff; margin-top: 0 !important; margin-bottom: 0 !important; border-radius: 0 !important; /* supprime les coins arrondis */ }

/* ✅ supprime la fine ligne entre les deux (cas rare : arrondi ou antialiasing) */
#textegaucheimagedroit + #textedroitimagegauche { margin-top: -1px; }

/* 🌿 Supprime les marges Bootstrap internes */
#textegaucheimagedroit .mx-auto, #textedroitimagegauche .mx-auto { margin-top: 0 !important; margin-bottom: 0 !important; }

#textegaucheimagedroit .button_homepageScreen, #textedroitimagegauche .button_homepageScreen { margin: 40px 0; /* 40px en haut et en bas */ padding: 14px 36px; }

a.button_homepageScreen.button_homepageScreen { background-color: #FDF8ED !important; /* 🌿 Beige clair naturel */ color: #A65727 !important; /* Terre cuite / brun chaud pour le texte */ border: none; margin: 40px 0; /* Espace autour du bouton */ padding: 14px 36px; /* Taille du bouton */ border-radius: 30px; /* Bords arrondis doux */ font-weight: 600; font-family: inherit; /* Utilise la police du site */ text-decoration: none; transition: all 0.3s ease; display: inline-block; }

/* 🎨 Effet au survol */
a.button_homepageScreen.button_homepageScreen:hover { background-color: #EBE2CC !important; /* Beige un peu plus soutenu */ color: #A65727 !important; /* Couleur du texte identique */ transform: scale(1.05); /* Petit zoom fluide */ }

#textegaucheimagedroit .col-lg-7 { display: flex; flex-direction: column; justify-content: center; text-align: right; /* ✅ le texte est à droite */ align-items: flex-end; /* ✅ le bloc s’aligne à droite */ }

#textegaucheimagedroit .button_homepageScreen { align-self: flex-end; /* ✅ le bouton suit l’alignement du texte */ }

/* 🌿 Responsive : redevient centré sur mobile */
@media (max-width: 991px) { #textegaucheimagedroit .col-lg-7 { text-align: center; align-items: center; } #textegaucheimagedroit .button_homepageScreen { align-self: center; } }

/* Cacher les images sur mobile */
@media (max-width: 768px) { #textegaucheimagedroit .col-lg-5, #textedroitimagegauche .col-lg-5 { display: none !important; /* cache l’image sur smartphone */ } }

.row.px-3.my-5.position-relative.justify-content-center { margin: 0 !important; /* enlève les marges extérieures */ padding: 40px 60px !important; /* ajoute de l’espace interne (haut/bas, gauche/droite) */ }

#beforeafterpaysagiste { background-color: #fdf8ed !important; margin: 0 !important; /* supprime les marges extérieures vertes */ padding: 20px 20px 40px 20px !important; /* top | right | bottom | left */ }

.navbar-brand { height: 9vh !important; width: 11vw !important; }

.logo_nav { height: 8vh !important; }

/* ------------------------------------------------------------Boutons socials */
.social-buttons { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 1000; }

.social-button { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border: 2px solid #107d42; border-radius: 50%; background-color: transparent; transition: transform 0.3s ease, box-shadow 0.3s ease; }

.social-button img { width: 60%; height: 60%; object-fit: contain; }

.social-button:hover { transform: scale(1.1); }

.facebook:hover { box-shadow: 0 0 10px #ebe2cc, 0 0 20px #ebe2cc; }

.bloc-titre-principal { padding: 40px 10px 20px; text-align: center; background-color: #fdf8ed; }

.titre-section { font-size: 2rem; font-weight: 700; margin: 0; }

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

#textepourquoicestavantageux .h2 { margin-bottom: 2rem !important; /* choisis la valeur que tu veux */ }

#textepourquoicestavantageux .col-lg-7 { text-align: right !important; }

#textepourquoicestavantageux .row { margin-top: 1rem !important; }

#map iframe, #map .map-content { max-width: 200px; /* la valeur que tu veux */ margin: 0 auto; }

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