/* SAB theme base */
:root{
  --sab-radius: 1rem;
}

.site-content{ min-height: 50vh; }
.rounded-3{ border-radius: var(--sab-radius) !important; }

.content > *:first-child{ margin-top: 0; }
.content > *:last-child{ margin-bottom: 0; }

/* Gutenberg wide/full alignment when theme doesn't define widths */
.alignwide{ width: 100%; }
.alignfull{ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* =========================
   FONT FAMILY
========================= */
:root {
  --font-main: "Raleway", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

body {
  font-family: var(--font-main);
}

/* =========================
   HEADINGS
========================= */
.h1, h1 {
  font-size: 60px;
  font-weight: 800;
  line-height: 1.05;
}

.h2, h2 {
  font-size: 50px;
  font-weight: 800;
  line-height: 1.1;
}

.h3, h3 {
  font-size: 36px;
  font-weight: 800;
  line-height: 1.15;
}

.h4, h4 {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
}

/* =========================
   BODY TEXT
========================= */
.text-body-lg {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.35;
}

.text-body-md {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.35;
}

.text-body {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.35;
}

.text-body-italic {
  font-size: 18px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.35;
}

/* =========================
   SMALL & CAPTION
========================= */
.text-small {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
}

.text-caption {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  color: rgba(0,0,0,.65);
}

/* =========================
   CTA
========================= */
.text-cta {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* =========================
   RESPONSIVE (MOBILE)
========================= */
@media (max-width: 576px) {
  h1, .h1 { font-size: 36px; }
  h2, .h2 { font-size: 30px; }
  h3, .h3 { font-size: 24px; }
  h4, .h4 { font-size: 20px; }
}

footer {
    background: #F5F5F5;
    margin-left: 14px;
    margin-right: 14px;
	border-radius: 26px 26px 0px 0px;
}

.footer-info-address{
	gap: 30px;
}

.footer-info{
	gap: 80px;
}

.footer-copyright {
    gap: 20px;
	    align-items: center;
}


.footer-logo-droite img{
	mix-blend-mode: multiply;
}

body.admin-bar .site-header.sticky-top,
body.admin-bar header.sticky-top {
  top: 32px;
}
@media (max-width: 782px) {
  body.admin-bar .site-header.sticky-top,
  body.admin-bar header.sticky-top {
    top: 46px;
  }
}
@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1266px;
    }
}
.col-menu-broscrumb{
	gap: 10px;
}
.col-menu-broscrumb .nav a,
.col-menu-broscrumb .nav-link{
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 500;
	font-size: 14px;
	line-height: 16px;
	display: flex;
	align-items: center;
	text-align: center;
	letter-spacing: 0.02em;
	color: #000000;
	    text-decoration: none;
}

.col-menu-broscrumb ul li a:hover .nav-link{
	font-weight: 700;
}

.col-menu-broscrumb .nav li:last-child a,
.col-menu-broscrumb .nav li:last-child a .nav-link{
	color: #2A94F7;
}

/* --- 2. HERO HEADER (Image avec titre) --- */
.single-realisation .realisation-hero {
    position: relative;
	border-radius: 30px;
    height: 620px;
    background-size: cover !important;
    background-position: center !important;
    overflow: hidden;
    margin-bottom: 68px;
    display: flex;
    align-items: end; /* Centrer verticalement */
	background-repeat: no-repeat !important;
	padding: 0px 178px 121px;
}

.single-realisation .realisation-hero .container {
    position: relative;
    z-index: 2;
    color: #fff;
    width: 100%;
}

.single-realisation .realisation-hero h1 {
	width: 618px;
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 700;
	font-size: 60px;
	line-height: 110%;
	text-transform: uppercase;
	color: #FFFFFF;
    margin-bottom: 19px;
}

.single-realisation .realisation-hero .location {
	width: 789px;
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 700;
	font-size: 20px;
	line-height: 130%;
	color: #FFFFFF;
    margin-bottom: 19px;
}

.single-realisation .realisation-hero .intro {
	width: 789px;
    font-family: 'Raleway';
	font-style: normal;
	font-weight: 700;
	font-size: 20px;
	line-height: 130%;
	color: #FFFFFF;
}

.single-realisation .header-forme-rea{
	position: absolute;
	right: 29px;
	bottom: 21px;
}

/* --- 3. INFORMATIONS GÉNÉRALES --- */
.single-realisation .realisation-infos h2,
.single-realisation .realisation-gallery h2,
.single-realisation .related-projects h2{
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 700;
	font-size: 48px;
	line-height: 110%;
	color: #000000;
	text-align: center;
	margin-bottom: 50px;
} 

.single-realisation .infos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 Colonnes */
    gap: 16px 50px;
    max-width: 1 142px;
    margin: 0 auto;
}

.single-realisation .info-card {
	display: flex;
	padding: 16px;
	gap: 16px;
	flex-direction: column;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 15px;
}

.single-realisation .info-card .label {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 700;
	font-size: 20px;
	line-height: 130%;
}

.single-realisation .info-card .value {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 130%;
}

.single-realisation .realisation-infos{
	margin-bottom: 76px;
}

/* --- 4. CITATION CENTRALE --- */
.single-realisation .realisation-quote {
	width: 974px;
	font-family: 'Raleway';
	font-style: normal;
	font-size: 36px;
	line-height: 110%;
	text-align: center;
	color: #000000;
	margin: 76px auto;
}

.single-realisation .realisation-gallery{
	margin: 76px auto;
}

/* --- 5. GALERIE PHOTOS (Grille Masonry simple) --- */
.single-realisation .gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 338px 338px;
    gap: 50px;
}

.single-realisation .gallery-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 25px;
}

/* Faire en sorte que la 1ère image prenne toute la hauteur à gauche (comme sur la photo) */
.single-realisation .gallery-grid img:first-child {
    grid-row: 1 / -1; /* Prend les 2 lignes */
    height: 100%;
}

/* --- 6. CHANTIERS (Footer) --- */
.single-realisation .related-projects .projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    text-align: center;
}

.single-realisation .related-projects img {
    border-radius: 25px;
    margin-bottom: 44px;
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
	height: 300px;
}

.single-realisation .related-projects h3 {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 700;
	font-size: 30px;
	line-height: 25px;
	text-align: center;
	color: #000000;
}

.single-realisation .related-projects p {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 400;
	font-size: 20px;
	line-height: 25px;
	text-align: center;
	color: #000000;
}

.single-realisation .related-projects a {
    text-decoration: none;
}

#breadcrumbs span,
#breadcrumbs span a{
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 500;
	font-size: 13px;
	line-height: 173%;
	color: #7B7B7B;
}

#breadcrumbs span a{
	text-decoration: none;
}

#breadcrumbs strong{
	    text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: auto;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
		font-weight: 700;
}

#menu-menu-footer a .nav-link{
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 293%;
	letter-spacing: 0.04em;
	text-decoration-line: underline;
	text-transform: uppercase;
	color: #000000;
}

.navbar-brand {
    flex-direction: column;
	gap: 7px;
}

.navbar-brand span{
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 500;
	font-size: 8px;
	line-height: 167%;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #000000;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
	.main-container{
		padding-top: 0px !important;
	}
    .infos-grid, 
    .gallery-grid,
    .related-projects .projects-grid {
        grid-template-columns: 1fr; /* Tout en 1 colonne sur mobile */
    }
    
    .gallery-grid img:first-child {
        grid-row: auto; /* Annule l'effet masonry sur mobile */
        height: 250px;
    }
    
    .realisation-hero h1 {
        font-size: 2rem;
    }
	
	.navbar-brand img{
		width: 105px;
		height: 27px;
	}
	
	.footer-logo-droite{
		display: none;
	}
	
	.footer-info{
		flex-wrap: wrap;
		        justify-content: center;
				gap: 18px;
	}
	
	footer {
		background: #FFF;
		margin-left: 20px;
		margin-right: 20px;
		border-radius: 0px;
		border-top: 1px solid #C3C3C3;
		padding-left: 20px;
        padding-right: 20px;
	}
	
	.footer-info-address>a{
		margin: 0 auto;
		margin: 0 auto;
        width: 100%;
        text-align: center;
        display: block;
		margin-bottom: 18px;
	}
	.footer-info-address>a svg path{
		fill: #0084FF;
	}
	.footer-info p{
		font-family: 'Raleway';
		font-style: normal;
		font-weight: 500;
		font-size: 14px;
		letter-spacing: 0.04em;
		color: #000000;
	}
	.footer-copyright {
		font-family: 'Raleway';
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		letter-spacing: 0.04em;
		color: #000000;
	}
	
	.footer-info img{
		width: 100px;
		height: 104px;
		border-radius: 8px;
	}
	
	.mobileMenuContainer.show{
		    position: absolute;
		top: 100%;
		        width: 100%;
		        height: calc(100vh - 85px);
		background-color: #fff;
	}
	
	.mobileMenuContainer a{
		font-family: 'Raleway';
		font-style: normal;
		font-weight: 700;
		font-size: 32px;
		line-height: 110%;
		color: #0084FF;
	}
	
	.mobileMenuContainer ul li:not(:last-child) a{
		text-decoration: none;
		color: #28439B;
	}
	
	.mobileMenuContainer ul li{
		position: relative;
	}
	
	.mobileMenuContainer ul li:not(:last-child):after{
		content: '';
		width: 100%;
		height: 1px;
		border: 1px solid #F5F5F5;
		position:absolute;
		bottom: -30px;
		left: 50%;
		transform: translateX(-50%);
	}
	
	.mobileMenuContainer ul {
		gap: 60px !important;
	}
	
	.btn-open-mobile[aria-expanded="true"] svg{
		    rotate: 90deg;
	}
	
	.navbar-brand span{
		width: 176px;
		        white-space: break-spaces;
				font-size: 8px;
				line-height: 167%;
		letter-spacing: 0.2em;
	}
	
	.navbar-brand {
		flex-direction: row;
		gap: 25px;
		
		
	}
	.single-realisation .realisation-hero {
		padding: 200px 30px;
		align-items: flex-start;
		height: 600px;
		margin-bottom: 68px;
    
}
.single-realisation .realisation-hero h1 {
    width: 100%;
    font-size: 32px;
	line-height: 110%;
    margin-bottom: 0px !important;
}
.single-realisation .intro{
	 width: 100% !important;
	font-size: 18px !important;
	line-height: 130% !important;
	margin-bottom: 50px !important;
}
.single-realisation .header-forme-rea {
    position: absolute;
    right: 30px;
    bottom: 30px;
    width: 107px;
    height: 66px;
}
.single-realisation .realisation-infos h2, .single-realisation .realisation-gallery h2, .single-realisation .related-projects h2 {
    font-size: 26px;
line-height: 110%;
    margin-bottom: 45px;
}
.single-realisation .gallery-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
            grid-template-rows: 413px;
    gap: 50px;
}
.single-realisation .gallery-grid img,
.single-realisation .gallery-grid img:first-child {
   height: 413px;    

}
    .single-realisation .gallery-grid img, .single-realisation .gallery-grid img:first-child {
       grid-row: auto;
    }
	.single-realisation .related-projects .projects-grid {

    grid-template-columns: repeat(1, 1fr);

}
.single-realisation .infos-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
    max-width: 100%;
    margin: 0 auto;
}
.single-realisation .realisation-quote {
    width: 100%;
    font-size: 22px;
	line-height: 110%;
    margin: 50px auto;
}
.single-realisation .related-projects h3 {
    font-size: 20px;
line-height: 120%;
}
.single-realisation .info-card-1{    order: 1;}
.single-realisation .info-card-2{    order: 4;}
.single-realisation .info-card-3{    order: 2;   }
.single-realisation .info-card-4{    order: 5;}
.single-realisation .info-card-5{    order: 3;}	.single-realisation .realisation-hero .location {
    width: auto;

}
}

@media (max-width: 1499px) and (min-width: 769px) {
    
    /* 1. Scale Typography */
    .single-realisation .realisation-hero h1 {
        font-size: 48px; /* Reduced from 60px */
    }

    .single-realisation .realisation-infos h2, 
    .single-realisation .realisation-gallery h2, 
    .single-realisation .related-projects h2 {
        font-size: 36px; /* Reduced from 48px */
        margin-bottom: 40px;
    }

    .single-realisation .realisation-quote {
        font-size: 28px;
    }

    /* 2. Compact Info Grid */
    .single-realisation .infos-grid {
        gap: 15px;
    }
    
    .single-realisation .info-card {
        padding: 20px;
        min-height: 180px;
    }

    /* 3. Gallery */
    .single-realisation .gallery-grid img {
        height: 350px; /* Reduced height */
    }

}