@charset "UTF-8";
@import url(main.css);
/* ----------------------------------------------------------- MODIFICATIONS : SEO ----------------------------------------------------------- */
a.nav-link.fs-6.dropdown-toggle.px-0.text-color-secondary.text-center { color: #ffffff !important; }

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

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

a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2 { color: white !important; }

a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2:hover { color: #3f9dcb !important; }

a.fw-bold.fs-6 { color: black; }

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

a.fw-light.grow.button_header.text-color-fourth.rounded-pill.p-2.text-decoration-none.all-activities-button { display: inline-block; background-color: #3f9dcb; color: #ffffff !important; border: 2px solid #3f9dcb !important; border-radius: 15px; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(63, 157, 203, 0.25); }

a.fw-light.grow.button_header.text-color-fourth.rounded-pill.p-2.text-decoration-none.all-activities-button:hover { background-color: transparent !important; color: #3f9dcb !important; box-shadow: 0 8px 25px rgba(63, 157, 203, 0.4); transform: translateY(-3px); }

p.small-font { color: white; }

.col-8.col-md-2.mb-3.text-color-third { color: white !important; }

span.text-color-third { color: white !important; }

p.text-color-third { color: white !important; }

h5.mb-3 { color: white !important; }

h5.mb-4 { color: white; }

p.ms-2 { color: white; }

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

.logo_nav { height: 10vh !important; }

@media (max-width: 990px) { a.navbar-brand { width: 30vw !important; align-content: center !important; } img.logo_nav { height: 100% !important; } }

.row.mb-3.text-center.px-lg-2.justify-content-center.redirectsCards-div { margin-top: 0px !important; }

main a, main a:hover, main a:visited { color: #fff; }

/* ----------------------------------------------------------- BOUTON : Effet hover pour .button_homepageDoubleScreen ----------------------------------------------------------- */
a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2 { display: inline-block; background-color: #3f9dcb; color: #fff; border: 2px solid #3f9dcb; border-radius: 15px; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(63, 157, 203, 0.25); }

/* --- Effet au survol --- */
a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2:hover { background-color: transparent !important; color: #3f9dcb; box-shadow: 0 8px 25px rgba(63, 157, 203, 0.4); transform: translateY(-3px); }

/* --- Effet au clic (pression) --- */
a.button_homepageDoubleScreen.ctaLinks-button.text-color-fourth.p-3.fs-6.fw-bold.m-2:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(63, 157, 203, 0.25); }

img.card-img-top.avatar-google-place.rounded-circle.d-lg-flex.align-items-lg-center.justify-content-center.m-2 { background-color: #2b2b2b; border-radius: 15px !important; }

a#maps-url { background-color: transparent; border: 2px solid #3f9dcb; color: #3f9dcb !important; border-radius: 15px; }

a#maps-url:hover { background-color: #3f9dcb; color: #fff !important; }

/* -------------Navbar affichée------------ */
#navigation-bar-hide { position: fixed !important; top: 0 !important; opacity: 1 !important; transition: none !important; }

a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.p-2.rounded-pill.text-decoration-none.button-header-telephone { background-color: transparent; border-radius: 15px !important; border: 2px solid #3f9dcb; color: #fff !important; }

a.grow.button_header.text-color-fourth.mx-3.mx-lg-2.p-2.rounded-pill.text-decoration-none.button-header-telephone:hover { background: #3f9dcb; color: #fff; }

/* ----------------------------------------------------------- HERO SECTION ----------------------------------------------------------- */
.hero-section { position: relative; background: url("https://storage.googleapis.com/refpro-app-ca244.appspot.com/customers%2FeZRK8tnS8hOdDFhZj6jCoNYl3RY2%2Fimages%2FIdentite_visuelle_Bernaudeau_Batiment_saig.webp") center/cover no-repeat; height: 95vh; display: flex; flex-direction: column; justify-content: center; color: #fff; padding: 0 10%; overflow: visible; }

.hero-section::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.45); z-index: 0; }

.hero-content { position: relative; z-index: 1; max-width: 600px; margin-bottom: 180px; }

.hero-subtitle { font-family: 'Inter', sans-serif; font-size: 1rem; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; color: #eaeaea; }

.hero-content h1 { font-family: 'Chivo', sans-serif; font-size: 4rem; font-weight: 700; line-height: 1.1; margin-bottom: 20px; color: #fff; }

.hero-content h1 span { color: #e46434; }

.hero-btn { display: inline-block; border: 2px solid #3f9dcb; border-radius: 15px !important; color: #fff; padding: 12px 28px; text-decoration: none; text-transform: uppercase; font-family: 'Inter', sans-serif; font-weight: 600; letter-spacing: 1px; transition: all 0.3s ease; }

.hero-btn:hover { background: #3f9dcb; color: #fff; }

/* ----------------------------------------------------------- HERO CARDS ----------------------------------------------------------- */
.hero-cards { position: absolute; bottom: -150px; left: 50%; transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; gap: 70px 60px; width: 90%; z-index: 2; }

.hero-card { background: #fff; color: #333; padding: 60px 35px; text-align: center; border-radius: 14px; flex: 1 1 300px; max-width: 360px; box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15); transition: transform 0.3s ease, box-shadow 0.3s ease; }

.hero-card.dark { background: #2b2b2b; color: #fff; }

.hero-card.dark h3 { color: #3f9dcb; }

.hero-card:hover { transform: translateY(-10px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); }

.hero-card .icon { margin-bottom: 20px; }

.hero-card .icon img { width: 60px; height: 60px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); transition: transform 0.3s ease; }

.hero-card:hover .icon img { transform: scale(1.08); }

.hero-card h3 { font-family: 'Chivo', sans-serif; font-weight: 600; font-size: 1.6rem; margin-bottom: 12px; color: #2b2b2b; }

.hero-card p { font-family: 'Inter', sans-serif; font-size: 1rem; line-height: 1.6; color: #555; }

.hero-card.dark p { color: #ccc; }

/* ----------------------------------------------------------- SERVICES SECTION (NOS DOMAINES D’INTERVENTION) ----------------------------------------------------------- */
.services-section { padding: 260px 10% 100px; /* espace augmenté car hero + cartes */ background-color: #eaeaea; background-image: radial-gradient(circle at 20% 20%, rgba(63, 157, 203, 0.18) 0%, transparent 70%), radial-gradient(circle at 80% 80%, rgba(228, 100, 52, 0.18) 0%, transparent 70%), url("https://www.transparenttextures.com/patterns/rocky-wall.png"); background-size: auto, auto, 300px; background-blend-mode: overlay; }

.services-header { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; margin-bottom: 50px; }

.services-title h2 { font-family: 'Chivo', sans-serif; font-size: 2.5rem; font-weight: 700; text-transform: uppercase; color: #e46434; position: relative; }

.services-title h2::after { content: ""; position: absolute; bottom: -8px; left: 0; width: 60px; height: 3px; background: #3f9dcb; }

.services-intro { max-width: 600px; }

.services-intro p { font-family: 'Inter', sans-serif; color: #444; line-height: 1.6; margin-top: 15px; }

/* GRID - Rectangles 2x2 */
.services-grid { display: grid; grid-template-columns: repeat(2, minmax(350px, 1fr)); gap: 30px; }

.service-card { position: relative; height: 300px; border-radius: 14px; background-size: cover; background-position: center; overflow: hidden; display: flex; align-items: flex-end; justify-content: flex-start; padding: 25px; text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease; }

.service-card .overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); transition: background 0.3s ease, transform 0.3s ease; }

.service-card h3 { position: relative; font-family: 'Chivo', sans-serif; font-size: 1.6rem; font-weight: 600; color: #fff; margin: 0; z-index: 2; }

.service-card:hover { transform: translateY(-6px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); }

.service-card:hover .overlay { background: rgba(228, 100, 52, 0.55); transform: scale(1.05); }

.service-card:active { transform: scale(0.98); }

/* ----------------------------------------------------------- RESPONSIVE DESIGN ----------------------------------------------------------- */
@media (max-width: 900px) { .hero-section { height: 90vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 5%; } .hero-content { margin: 0 auto; text-align: center; max-width: 90%; } .hero-content h1 { font-size: 2.2rem; line-height: 1.2; } .hero-content h1 span { display: block; } .hero-subtitle { font-size: 0.9rem; margin-bottom: 15px; } .hero-btn { margin-top: 25px; font-size: 0.85rem; padding: 10px 22px; } /* on masque les cartes sur mobile */ .hero-cards { display: none; } .services-section { padding: 100px 8% 80px; } .services-header { flex-direction: column; align-items: flex-start; } .services-intro { margin-top: 20px; } .services-grid { grid-template-columns: 1fr; } .service-card { height: 250px; } }

/* ----------------------------------------------------------- ABOUT SECTION — Maçonnier ----------------------------------------------------------- */
.about-section { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; padding: 120px 40px; text-align: center; overflow: hidden; }

/* --- Voile blanc doux pour lisibilité --- */
.about-overlay { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.85); z-index: 1; }

/* --- Contenu principal --- */
.about-content { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; }

/* --- Guillemet décoratif --- */
.quote-icon { position: absolute; right: 80px; top: 50px; font-size: 8rem; color: #e46434; /* Orange principal */ opacity: 0.08; font-family: 'Chivo', sans-serif; z-index: 0; }

/* --- Sous-titre --- */
.about-subtitle { font-family: 'Inter', sans-serif; font-size: 1rem; text-transform: uppercase; letter-spacing: 3px; color: #3f9dcb; /* Bleu secondaire */ margin-bottom: 15px; }

/* --- Titre principal --- */
.about-title { font-family: 'Chivo', sans-serif; font-size: 2.6rem; font-weight: 800; text-transform: uppercase; color: #e46434; margin-bottom: 30px; line-height: 1.2; }

/* --- Texte --- */
.about-text { font-family: 'Inter', sans-serif; font-size: 1.1rem; line-height: 1.8; color: #333; margin-bottom: 40px; font-style: italic; }

/* --- Signature artisan --- */
.about-author h4 { font-family: 'Chivo', sans-serif; font-size: 1.1rem; color: #2b2b2b; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }

.about-author span { font-family: 'Inter', sans-serif; font-size: 0.95rem; color: #555; }

/* ----------------------------------------------------------- RESPONSIVE DESIGN ----------------------------------------------------------- */
@media (max-width: 900px) { .about-section { padding: 80px 25px; } .about-title { font-size: 2rem; } .quote-icon { right: 25px; top: 25px; font-size: 5rem; } .about-text { font-size: 1rem; padding: 0 10px; } }

/* ----------------------------------------------------------- HERO SERVICE — Pour toutes les pages services ----------------------------------------------------------- */
.hero-service { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; height: 80vh; display: flex; align-items: center; padding: 0 10%; color: #fff; overflow: hidden; }

/* --- voile sombre pour lisibilité --- */
.hero-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 1; }

/* --- contenu principal --- */
.hero-service-content { position: relative; z-index: 2; max-width: 650px; text-align: left; }

.hero-service-content h1 { font-family: 'Chivo', sans-serif; font-size: 3.2rem; font-weight: 800; line-height: 1.1; text-transform: uppercase; margin-bottom: 25px; color: #fff; }

.hero-service-content h1 span { color: #e46434; }

.hero-service-content p { font-family: 'Inter', sans-serif; font-size: 1.1rem; line-height: 1.8; color: #eaeaea; margin-bottom: 40px; }

/* --- bouton --- */
.hero-service-btn { display: inline-block; background: transparent; color: #fff; font-family: 'Chivo', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 15px 35px; border-radius: 15px; text-decoration: none; border: 2px solid #3f9dcb; transition: all 0.3s ease; }

.hero-service-btn:hover { background: #3f9dcb; color: #fff; }

/* ----------------------------------------------------------- RESPONSIVE DESIGN ----------------------------------------------------------- */
@media (max-width: 900px) { .hero-service { height: auto; padding: 100px 8%; text-align: left; } .hero-service-content h1 { font-size: 2.2rem; } .hero-service-content p { font-size: 1rem; } }

/* ----------------------------------------------------------- SECTION : PRESTATIONS DE MAÇONNERIE ----------------------------------------------------------- */
.prestations-section { padding: 120px 10%; background-color: #f7f7f7; background-image: radial-gradient(circle at 20% 20%, rgba(63, 157, 203, 0.12) 0%, transparent 70%), radial-gradient(circle at 80% 80%, rgba(228, 100, 52, 0.12) 0%, transparent 70%), url("https://www.transparenttextures.com/patterns/white-wall.png"); background-blend-mode: overlay; }

/* ----------------------------------------------------------- HEADER STYLE — Aligné à gauche ----------------------------------------------------------- */
.prestations-header.styled { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; margin-bottom: 60px; gap: 40px; }

.prestations-header.styled .header-left { flex: 1; min-width: 280px; }

.prestations-header.styled .header-right { flex: 2; min-width: 300px; }

.prestations-header.styled h2 { font-family: 'Chivo', sans-serif; font-size: 2.3rem; font-weight: 800; color: #e46434; text-transform: uppercase; margin-bottom: 10px; }

.prestations-header.styled h2 span { color: #2b2b2b; }

.prestations-header.styled .header-line { width: 50px; height: 3px; background: #3f9dcb; margin-top: 5px; }

.prestations-header.styled p { font-family: 'Inter', sans-serif; font-size: 1.05rem; line-height: 1.8; color: #333; max-width: 650px; }

/* ----------------------------------------------------------- GRILLE DE PRESTATIONS ----------------------------------------------------------- */
.prestations-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; align-items: stretch; /* même hauteur sur chaque ligne */ }

.prestation-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; height: 100%; }

.prestation-card:hover { transform: translateY(-6px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); }

/* --- Image --- */
.prestation-img { height: 200px; background-size: cover; background-position: center; transition: transform 0.4s ease; }

.prestation-card:hover .prestation-img { transform: scale(1.05); }

/* --- Contenu --- */
.prestation-content { flex: 1; padding: 25px; text-align: center; display: flex; flex-direction: column; justify-content: center; /* centrage vertical global */ align-items: center; height: 100%; }

/* --- Titre avec hauteur fixe --- */
.prestation-content h3 { font-family: 'Chivo', sans-serif; font-size: 1.3rem; color: #e46434; margin-bottom: 10px; /* Correction ici */ min-height: 3.2em; /* bloque la zone du titre sur 2 lignes max */ display: flex; align-items: center; justify-content: center; text-align: center; }

/* --- Texte --- */
.prestation-content p { font-family: 'Inter', sans-serif; font-size: 1rem; color: #555; line-height: 1.6; max-width: 90%; }

/* ----------------------------------------------------------- RESPONSIVE DESIGN ----------------------------------------------------------- */
@media (max-width: 1100px) { .prestations-grid { grid-template-columns: repeat(2, 1fr); } .prestations-header.styled { flex-direction: column; align-items: flex-start; } .prestations-header.styled h2 { font-size: 2rem; } }

@media (max-width: 700px) { .prestations-grid { grid-template-columns: 1fr; } .prestations-header.styled h2 { font-size: 1.8rem; } }

/* ----------------------------------------------------------- SECTION : NOTRE APPROCHE — VERSION IMAGE + TEXTE ----------------------------------------------------------- */
.approche-section-alt { display: flex; align-items: stretch; justify-content: space-between; background-color: #fff; overflow: hidden; }

/* --- Image --- */
.approche-image { position: relative; flex: 1; min-height: 480px; overflow: hidden; }

.approche-image img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform 0.5s ease; display: block; }

.approche-image .overlay { position: absolute; inset: 0; background: rgba(228, 100, 52, 0.35); z-index: 1; pointer-events: none; }

.approche-section-alt:hover .approche-image img { transform: scale(1.08); }

/* --- Contenu texte --- */
.approche-content { flex: 1; padding: 100px 80px; background: #fff; z-index: 2; }

.approche-content h2 { font-family: 'Chivo', sans-serif; font-size: 2.4rem; font-weight: 800; color: #e46434; text-transform: uppercase; margin-bottom: 10px; }

.approche-content h2 span { color: #2b2b2b; }

.approche-content .header-line { width: 50px; height: 3px; background: #3f9dcb; margin-bottom: 25px; }

.approche-content .intro { font-family: 'Inter', sans-serif; font-size: 1.1rem; color: #444; line-height: 1.8; margin-bottom: 40px; }

/* --- Points clés --- */
.approche-points { display: flex; flex-direction: column; gap: 25px; }

.point { display: flex; align-items: flex-start; gap: 20px; }

.point img { width: 48px; height: 48px; flex-shrink: 0; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)); }

.point h3 { font-family: 'Chivo', sans-serif; font-size: 1.2rem; color: #e46434; margin-bottom: 5px; }

.point p { font-family: 'Inter', sans-serif; font-size: 1rem; color: #555; line-height: 1.5; }

/* ----------------------------------------------------------- RESPONSIVE DESIGN ----------------------------------------------------------- */
@media (max-width: 1000px) { .approche-section-alt { flex-direction: column; } .approche-image { min-height: 320px; width: 100%; order: -1; } .approche-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: none; } .approche-image .overlay { background: rgba(228, 100, 52, 0.35); } .approche-content { padding: 60px 30px; text-align: center; } .approche-content h2 { font-size: 2rem; } .point { flex-direction: column; align-items: center; text-align: center; } .point img { margin-bottom: 10px; } }

@media (max-width: 600px) { .approche-content { padding: 50px 20px; } .approche-image { min-height: 240px; } .approche-content h2 { font-size: 1.8rem; } .approche-content .intro { font-size: 1rem; } .point h3 { font-size: 1.1rem; } .point p { font-size: 0.95rem; } }

/* ----------------------------------------------------------- CTA — Version centrée avec image de fond personnalisée ----------------------------------------------------------- */
.cta-centered-section { padding: 120px 10%; display: flex; justify-content: center; align-items: center; background-color: #eaeaea; background-image: radial-gradient(circle at 20% 20%, rgba(63, 157, 203, 0.18) 0%, transparent 70%), radial-gradient(circle at 80% 80%, rgba(228, 100, 52, 0.18) 0%, transparent 70%), url("https://firebasestorage.googleapis.com/v0/b/refpro-app-ca244.appspot.com/o/customers%2FeZRK8tnS8hOdDFhZj6jCoNYl3RY2%2Fimages%2FIdentite_visuelle_Bernaudeau_Batiment_1_jsyv.webp?alt=media&token=2bcd2f62-6efd-404f-a809-8abbc78af8b8"); background-size: cover; background-position: center; background-blend-mode: overlay; }

/* --- Boîte encadrée --- */
.cta-centered-box { background: #fff; border: 2px solid rgba(63, 157, 203, 0.15); border-radius: 14px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); padding: 70px 60px; max-width: 800px; width: 100%; text-align: center; transition: box-shadow 0.3s ease, transform 0.3s ease; }

.cta-centered-box:hover { box-shadow: 0 14px 35px rgba(0, 0, 0, 0.18); transform: translateY(-3px); }

/* --- Titre --- */
.cta-centered-box h2 { font-family: 'Chivo', sans-serif; font-size: 2rem; font-weight: 800; color: #e46434; text-transform: uppercase; margin-bottom: 20px; line-height: 1.2; }

/* --- Texte --- */
.cta-centered-box p { font-family: 'Inter', sans-serif; font-size: 1.05rem; color: #444; line-height: 1.8; margin-bottom: 35px; }

/* --- Bouton --- */
.cta-centered-btn { display: inline-block; background: #3f9dcb; color: #fff; font-family: 'Chivo', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 14px 40px; border-radius: 15px; text-decoration: none; border: 2px solid #3f9dcb; transition: all 0.3s ease; }

.cta-centered-btn:hover { background: #fff; color: #3f9dcb; }

/* ----------------------------------------------------------- RESPONSIVE DESIGN ----------------------------------------------------------- */
@media (max-width: 700px) { .cta-centered-box { padding: 50px 30px; } .cta-centered-box h2 { font-size: 1.7rem; } .cta-centered-box p { font-size: 1rem; } }

/* ----------------------------------------------------------- SECTION EXTENSION — photo intégrée ----------------------------------------------------------- */
.extension-section.integrated { background-color: #f7f7f7; padding: 120px 10%; display: flex; justify-content: center; }

.extension-wrapper { display: flex; align-items: stretch; justify-content: space-between; background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); overflow: hidden; max-width: 1200px; width: 100%; }

/* --- Texte --- */
.extension-content { flex: 1; padding: 70px 60px; display: flex; flex-direction: column; justify-content: center; }

.extension-content h2 { font-family: 'Chivo', sans-serif; font-size: 2.3rem; font-weight: 800; text-transform: uppercase; color: #e46434; margin-bottom: 10px; }

.extension-content h2 span { color: #2b2b2b; }

.extension-content .line { width: 60px; height: 3px; background: #3f9dcb; margin-bottom: 25px; }

.extension-content p { font-family: 'Inter', sans-serif; font-size: 1.05rem; line-height: 1.8; color: #444; margin-bottom: 25px; }

/* --- Liste --- */
.extension-list { list-style: none; padding: 0; margin: 0; }

.extension-list li { position: relative; font-family: 'Inter', sans-serif; font-size: 1rem; color: #333; margin-bottom: 10px; padding-left: 25px; }

.extension-list li::before { content: "▹"; color: #3f9dcb; font-weight: bold; position: absolute; left: 0; top: 0; }

/* --- Image intégrée --- */
.extension-image { flex: 1; position: relative; }

.extension-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }

.extension-wrapper:hover .extension-image img { transform: scale(1.05); }

/* ----------------------------------------------------------- RESPONSIVE ----------------------------------------------------------- */
@media (max-width: 1100px) { .extension-section.integrated { padding: 90px 5%; } .extension-content { padding: 60px 40px; } }

@media (max-width: 900px) { .extension-wrapper { flex-direction: column; } .extension-image { height: 280px; } .extension-image img { border-radius: 0 0 14px 14px; } .extension-content { padding: 50px 30px; text-align: center; } .extension-content h2 { font-size: 2rem; } /* Supprimer les tirets (▹) sur mobile */ .extension-list li { padding-left: 0; } .extension-list li::before { content: none; } }

@media (max-width: 600px) { .extension-content { padding: 40px 20px; } .extension-content h2 { font-size: 1.8rem; } .extension-content p { font-size: 1rem; } }

/* ----------------------------------------------------------- SECTION — Étapes du projet d’extension ----------------------------------------------------------- */
.steps-section { background: #fff; padding: 120px 10%; }

.steps-header { text-align: center; margin-bottom: 100px; }

.steps-header h2 { font-family: 'Chivo', sans-serif; font-size: 2.4rem; font-weight: 800; text-transform: uppercase; color: #e46434; margin-bottom: 15px; }

.steps-header p { font-family: 'Inter', sans-serif; color: #444; font-size: 1.1rem; line-height: 1.7; max-width: 700px; margin: 0 auto; }

/* --- Structure des étapes --- */
.step-item { display: flex; align-items: center; justify-content: space-between; margin-bottom: 130px; width: 100%; gap: 40px; }

.step-item:last-child { margin-bottom: 0; }

/* --- Numéro --- */
.step-number { font-family: 'Chivo', sans-serif; font-weight: 800; font-size: 10rem; color: rgba(63, 157, 203, 0.6); flex-shrink: 0; line-height: 0.9; width: auto; text-align: center; margin: 0; display: flex; align-items: center; justify-content: center; }

/* --- Contenu texte --- */
.step-content { flex: 1; }

.step-content h3 { font-family: 'Chivo', sans-serif; font-size: 1.8rem; font-weight: 700; color: #2b2b2b; margin-bottom: 15px; }

.step-content p { font-family: 'Inter', sans-serif; font-size: 1.05rem; color: #444; line-height: 1.8; }

/* --- Alternance gauche / droite --- */
.step-item.left .step-number { order: 1; text-align: left; margin-right: 20px; }

.step-item.left .step-content { order: 2; text-align: left; }

.step-item.right { flex-direction: row-reverse; }

.step-item.right .step-number { text-align: right; margin-left: 20px; }

.step-item.right .step-content { text-align: right; }

/* ----------------------------------------------------------- RESPONSIVE ----------------------------------------------------------- */
@media (max-width: 900px) { .steps-section { padding: 90px 6%; } .step-item { flex-direction: column; align-items: center; text-align: center; margin-bottom: 80px; gap: 20px; } /* Numéro au-dessus du texte */ .step-number { order: -1; font-size: 6rem; margin: 0 0 15px 0; text-align: center; width: 100%; } .step-content { width: 100%; text-align: center; } .step-content h3 { font-size: 1.5rem; } .step-content p { font-size: 1rem; } /* Supprimer les effets gauche/droite */ .step-item.left, .step-item.right { flex-direction: column; } .step-item.left .step-content, .step-item.right .step-content { text-align: center; } }

@media (max-width: 600px) { .step-number { font-size: 4.5rem; } .steps-header h2 { font-size: 2rem; } .steps-header p { font-size: 1rem; } }

/* ----------------------------------------------------------- SECTION : TITRE SIMPLE ----------------------------------------------------------- */
.titre-section { padding: 100px 10%; background-color: #f7f7f7; text-align: center; background-image: radial-gradient(circle at 20% 20%, rgba(63, 157, 203, 0.1) 0%, transparent 70%), radial-gradient(circle at 80% 80%, rgba(228, 100, 52, 0.1) 0%, transparent 70%), url("https://www.transparenttextures.com/patterns/white-wall.png"); background-blend-mode: overlay; }

.titre-wrapper h2 { font-family: 'Chivo', sans-serif; font-size: 2.6rem; font-weight: 800; color: #e46434; text-transform: uppercase; letter-spacing: 1px; position: relative; display: inline-block; }

/* Petite ligne décorative sous le titre */
.titre-wrapper h2::after { content: ""; display: block; width: 60px; height: 4px; background-color: #3f9dcb; margin: 15px auto 0; border-radius: 2px; }

/* Responsive */
@media (max-width: 700px) { .titre-wrapper h2 { font-size: 2rem; } }

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

.logo_nav { height: 11vh !important; }

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