/* ============================================================
   HEITZ PEINTURE - Stylesheet Principal
   Design extrait de source-landing/index.php
   Phase 2 - Migration CSS
   ============================================================ */

/* ============================================================
   1. VARIABLES CSS CUSTOM
   ============================================================ */
:root {
	--heitz-dark: #0b1222;
	--heitz-ink: #0f172a;
	--heitz-blue: #1e3a8a;
	--heitz-red: #c01818;
	--heitz-red2: #ff2b2b;
	--heitz-light: #f4f7fb;
	--heitz-white: #ffffff;
	--heitz-muted: #3e4755;
	--radius: 18px;
	--radius-sm: 12px;
	--shadow: 0 18px 60px rgba(2,6,23,.12);
	--shadow-soft: 0 10px 30px rgba(2,6,23,.10);
}

/* ============================================================
   2. BASE & TYPOGRAPHIE
   ============================================================ */
html {
	scroll-behavior: smooth;
}

body {
	font-family: 'Open Sans', sans-serif;
	color: #243042;
	overflow-x: hidden;
	background: var(--heitz-white);
}

h1, h2, h3, h4, h5, .logo-text, .nav-quick a {
	font-family: 'Montserrat', sans-serif;
}

::selection {
	background: rgba(192,24,24,.25);
}

/* ============================================================
   3. UTILITAIRES
   ============================================================ */
.section-padding {padding: 5.5rem 0;}
.shadow-soft {box-shadow: var(--shadow-soft);}
.text-heitz-red {color: var(--heitz-red) !important;}
.text-heitz-blue {color: var(--heitz-blue) !important;}
.bg-heitz-light {background: var(--heitz-light) !important;}
.bg-heitz-dark {background: var(--heitz-dark) !important;}
.lazy-section{opacity:0;transition:opacity .3s}
.obfuscated-email::after {content: attr(data-user) "@" attr(data-domain);white-space: nowrap;unicode-bidi: bidi-override;direction: ltr;}
.obfuscated-phone::after {content: attr(data-num);white-space: nowrap;unicode-bidi: bidi-override;direction: ltr;}

main {overflow: hidden;}
/* Espace réservé pour navbar sur pages CMS (toutes pages sauf accueil) */
body:not(.page-accueil) main {padding-top: 71px;}
@media (max-width: 991px) {
body:not(.page-accueil) main {padding-top: 80px;}
}
/* ============================================================
   3.5. SYSTÈME DE GRILLE
   ============================================================ */
.grid-container {display: grid;grid-template-columns: repeat(12, 1fr);gap: 1rem;}

.grid-col-1 {grid-column: span 1;}
.grid-col-2 {grid-column: span 2;}
.grid-col-3 {grid-column: span 3;}
.grid-col-4 {grid-column: span 4;}
.grid-col-5 {grid-column: span 5;}
.grid-col-6 {grid-column: span 6;}
.grid-col-7 {grid-column: span 7;}
.grid-col-8 {grid-column: span 8;}
.grid-col-9 {grid-column: span 9;}
.grid-col-10 {grid-column: span 10;}
.grid-col-11 {grid-column: span 11;}
.grid-col-12 {grid-column: span 12;}

/* Grid responsive */
@media (max-width: 767px) {
	.sm\:grid-col-1 {grid-column: span 1;}
	.sm\:grid-col-2 {grid-column: span 2;}
	.sm\:grid-col-3 {grid-column: span 3;}
	.sm\:grid-col-4 {grid-column: span 4;}
	.sm\:grid-col-5 {grid-column: span 5;}
	.sm\:grid-col-6 {grid-column: span 6;}
	.sm\:grid-col-7 {grid-column: span 7;}
	.sm\:grid-col-8 {grid-column: span 8;}
	.sm\:grid-col-9 {grid-column: span 9;}
	.sm\:grid-col-10 {grid-column: span 10;}
	.sm\:grid-col-11 {grid-column: span 11;}
	.sm\:grid-col-12 {grid-column: span 12;}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.md\:grid-col-1 {grid-column: span 1;}
	.md\:grid-col-2 {grid-column: span 2;}
	.md\:grid-col-3 {grid-column: span 3;}
	.md\:grid-col-4 {grid-column: span 4;}
	.md\:grid-col-5 {grid-column: span 5;}
	.md\:grid-col-6 {grid-column: span 6;}
	.md\:grid-col-7 {grid-column: span 7;}
	.md\:grid-col-8 {grid-column: span 8;}
	.md\:grid-col-9 {grid-column: span 9;}
	.md\:grid-col-10 {grid-column: span 10;}
	.md\:grid-col-11 {grid-column: span 11;}
	.md\:grid-col-12 {grid-column: span 12;}
}

@media (min-width: 1024px) {
	.lg\:grid-col-1 {grid-column: span 1;}
	.lg\:grid-col-2 {grid-column: span 2;}
	.lg\:grid-col-3 {grid-column: span 3;}
	.lg\:grid-col-4 {grid-column: span 4;}
	.lg\:grid-col-5 {grid-column: span 5;}
	.lg\:grid-col-6 {grid-column: span 6;}
	.lg\:grid-col-7 {grid-column: span 7;}
	.lg\:grid-col-8 {grid-column: span 8;}
	.lg\:grid-col-9 {grid-column: span 9;}
	.lg\:grid-col-10 {grid-column: span 10;}
	.lg\:grid-col-11 {grid-column: span 11;}
	.lg\:grid-col-12 {grid-column: span 12;}
}

/* ============================================================
   4. BOUTONS
   ============================================================ */

/* Bouton principal (rouge dégradé) */
.btn-heitz {
	background: linear-gradient(135deg, var(--heitz-red), var(--heitz-red2));
	color: #fff;
	padding: .95rem 1.3rem;
	border-radius: 999px;
	font-weight: 800;
	font-family: 'Montserrat', sans-serif;
	transition: all .25s ease;
	border: 0;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	text-transform: uppercase;
	font-size: .82rem;
	letter-spacing: .08em;
	box-shadow: 0 14px 30px rgba(192,24,24,.22);
}

.btn-heitz:hover {
	transform: translateY(-2px);
	filter: saturate(1.05);
	box-shadow: 0 18px 38px rgba(192,24,24,.28);
	color: #fff;
}

/* Bouton outline blanc (hero) */
.btn-outline-white {
	border: 1px solid rgba(255,255,255,.55);
	color: #fff;
	padding: .95rem 1.3rem;
	border-radius: 999px;
	font-weight: 800;
	text-decoration: none;
	transition: all .25s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-transform: uppercase;
	font-size: .82rem;
	letter-spacing: .08em;
	background: rgba(255,255,255,.08);
	backdrop-filter: blur(10px);
}

.btn-outline-white:hover {
	background: #fff;
	color: var(--heitz-ink);
	transform: translateY(-2px);
}

/* Bouton ghost (transparent) */
.btn-ghost {
	border: 1px solid rgba(15,23,42,.14);
	color: var(--heitz-ink);
	padding: .9rem 1.1rem;
	border-radius: 999px;
	font-weight: 800;
	text-decoration: none;
	transition: all .2s ease;
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	background: rgba(255,255,255,.65);
	backdrop-filter: blur(8px);
}

.btn-ghost:hover {
	transform: translateY(-2px);
	border-color: rgba(192,24,24,.35);
	color: var(--heitz-red);
}

/* Variante petite taille */
.btn-heitz.btn-sm,
.btn-outline-white.btn-sm,
.btn-ghost.btn-sm {
	padding: .65rem 1rem;
	font-size: .75rem;
}

/* ============================================================
   5. NAVIGATION
   ============================================================ */

/* Navbar principale */
.navbar {
	transition: all .35s ease;
	padding: 1.1rem 0;
	z-index: 1050;
}

/* Navbar scrollée ou sur pages CMS (fond blanc fixe) */
.navbar.scrolled,
nav.page-cms {
	background: rgba(255,255,255,.92);
	backdrop-filter: blur(12px);
	padding: .75rem 0;
	box-shadow: 0 10px 30px rgba(2,6,23,.08);
	border-bottom: 1px solid rgba(2,6,23,.06);
}

/* Logo */
.logo-container {
	line-height: 1;
}

.logo-text {
	font-size: 1.55rem;
	font-weight: 900;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.logo-sub {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	display: block;
	margin-top: 4px;
	color: rgba(255,255,255,.75);
}

/* Couleurs logo selon scroll */
.navbar:not(.scrolled):not(.page-cms) .logo-text {
	color: #fff;
}

.navbar:not(.scrolled):not(.page-cms) .logo-sub {
	color: rgba(255,255,255,.78);
}

.navbar.scrolled .logo-text,
nav.page-cms .logo-text {
	color: var(--heitz-ink);
}

.navbar.scrolled .logo-sub,
nav.page-cms .logo-sub {
	color: var(--heitz-ink);
}

/* Navigation rapide */
.nav-quick a {
	text-decoration: none;
	font-weight: 900;
	font-size: .8rem;
	text-transform: uppercase;
	padding: .45rem .9rem;
	border-radius: 999px;
	transition: all .2s ease;
	letter-spacing: .08em;
}

.navbar:not(.scrolled):not(.page-cms) .nav-quick a {
	color: rgba(255,255,255,.92);
}

.navbar.scrolled .nav-quick a,
nav.page-cms .nav-quick a {
	color: var(--heitz-ink);
}

.nav-quick a:hover {
	color: var(--heitz-red) !important;
	background: rgba(192,24,24,.10);
}

/* Téléphone */
.nav-phone {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	font-weight: 900;
	text-decoration: none;
	border-radius: 999px;
	padding: .55rem 1rem;
	transition: all .2s ease;
	font-size: .9rem;
	letter-spacing: .02em;
}

.navbar:not(.scrolled):not(.page-cms) .nav-phone {
	background: rgba(255,255,255,.12);
	color: #fff;
	border: 1px solid rgba(255,255,255,.22);
	backdrop-filter: blur(12px);
}

.navbar.scrolled .nav-phone,
nav.page-cms .nav-phone {
	background: rgba(15,23,42,.06);
	color: var(--heitz-ink);
	border: 1px solid rgba(15,23,42,.08);
}

.nav-phone:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 24px rgba(2,6,23,.10);
}

/* Téléphone dans le footer */
.footer .nav-phone {
	background: rgba(255,255,255,.12);
	color: #fff;
	border: 1px solid rgba(255,255,255,.22);
}

.footer .nav-phone:hover {
	background: rgba(255,255,255,.18);
	border-color: rgba(255,255,255,.32);
}

/* ============================================================
   6. MENU BURGER & FULLSCREEN OVERLAY
   ============================================================ */

/* Bouton burger */
.menu-btn {
	width: 46px;
	height: 46px;
	border: none;
	background: transparent;
	cursor: pointer;
	position: relative;
	padding: 0;
	outline: none;
	border-radius: 999px;
}

.menu-btn:focus-visible {
	box-shadow: 0 0 0 4px rgba(192,24,24,.25);
}

.menu-btn span {
	display: block;
	width: 26px;
	height: 2px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	background: #fff;
	transition: all .25s ease-in-out;
	border-radius: 2px;
	opacity: .95;
}

.navbar.scrolled .menu-btn span,
nav.page-cms .menu-btn span {
	background: var(--heitz-ink);
}

.menu-btn span:nth-child(1) {
	top: 15px;
}

.menu-btn span:nth-child(2) {
	top: 22px;
}

.menu-btn span:nth-child(3) {
	top: 29px;
}

/* Menu fullscreen overlay */
.full-menu-overlay {
	position: fixed;
	inset: 0;
	background:
		radial-gradient(1200px 600px at 10% 10%, rgba(255,43,43,.18), transparent 60%),
		radial-gradient(900px 450px at 90% 20%, rgba(30,58,138,.26), transparent 55%),
		linear-gradient(180deg, rgba(11,18,34,.96), rgba(11,18,34,.98));
	z-index: 1900;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: all .32s ease;
	transform: translateY(-10px);
}

.full-menu-overlay.active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.menu-link {
	font-family: 'Montserrat', sans-serif;
	font-size: clamp(1.8rem, 4.6vw, 3.2rem);
	font-weight: 900;
	color: #fff;
	text-decoration: none;
	display: block;
	margin: .55rem 0;
	transition: all .2s ease;
	text-align: center;
	letter-spacing: .02em;
}

.menu-link:hover {
	color: var(--heitz-red2);
	transform: translateX(10px);
}

.menu-mini {
	display: flex;
	gap: .8rem;
	justify-content: center;
	margin-top: 1.2rem;
	flex-wrap: wrap;
}

.menu-chip {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .6rem .9rem;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,.18);
	color: rgba(255,255,255,.85);
	text-decoration: none;
	font-weight: 800;
	font-size: .85rem;
	background: rgba(255,255,255,.06);
	backdrop-filter: blur(10px);
	transition: all .2s ease;
}

.menu-chip:hover {
	border-color: rgba(255,43,43,.35);
	color: #fff;
	transform: translateY(-1px);
}

/* États du menu ouvert */
body.menu-open {
	overflow: hidden;
}

body.menu-open #mainNav {
	z-index: 2005 !important;
}

body.menu-open .menu-btn span {
	background: #fff !important;
}

body.menu-open .menu-btn span:nth-child(1) {
	top: 22px;
	transform: translateX(-50%) rotate(45deg);
}

body.menu-open .menu-btn span:nth-child(2) {
	opacity: 0;
}

body.menu-open .menu-btn span:nth-child(3) {
	top: 22px;
	transform: translateX(-50%) rotate(-45deg);
}

body.menu-open .navbar {
	background: transparent !important;
	backdrop-filter: none !important;
	box-shadow: none !important;
	border: none !important;
}

body.menu-open .logo-text,
body.menu-open .logo-sub {
	color: #fff !important;
}

body.menu-open #mainNav .navbar-brand,
body.menu-open #mainNav .nav-quick,
body.menu-open #mainNav .nav-phone {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

body.menu-open #mainNav [data-menu-toggle] {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
}

body.menu-open #mainNav .container {
	pointer-events: none;
}

body.menu-open #mainNav [data-menu-toggle] {
	pointer-events: auto;
}

body.menu-open .full-menu-overlay {
	z-index: 2100 !important;
}

body.menu-open #mainNav {
	z-index: 2200 !important;
}

/* ============================================================
   7. HERO SECTION
   ============================================================ */
.hero-section {
	min-height: 92vh;
	position: relative;
	display: flex;
	align-items: center;
	color: #fff;
	overflow: hidden;
	padding-top: 92px;
}

.hero-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: opacity 1.1s ease-in-out;
	z-index: -3;
	transform: scale(1.03);
}

.hero-overlay {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(900px 520px at 20% 20%, rgba(255,43,43,.20), transparent 60%),
		linear-gradient(90deg, rgba(11,18,34,.92), rgba(30,58,138,.55));
	z-index: -2;
}

.hero-noise {
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: .16;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
	mix-blend-mode: overlay;
	pointer-events: none;
}

.hero-tag {
	background: rgba(192,24,24,.92);
	padding: 7px 14px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	margin-bottom: 1.2rem;
	font-weight: 900;
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	box-shadow: 0 12px 26px rgba(192,24,24,.22);
}

.hero-title {
	font-weight: 900;
	letter-spacing: -.02em;
	line-height: 1.05;
}

.hero-sub {
	color: rgba(255,255,255,.78);
	max-width: 720px;
}

.hero-list {
	display: flex;
	flex-wrap: wrap;
	gap: .7rem;
	margin-top: 1.2rem;
}

.hero-pill {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .55rem .9rem;
	border-radius: 999px;
	background: rgba(255,255,255,.10);
	border: 1px solid rgba(255,255,255,.16);
	font-size: .92rem;
	font-weight: 800;
	backdrop-filter: blur(10px);
}

.hero-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0,1fr));
	gap: 12px;
	margin-top: 1.25rem;
}

.hero-card {
	background: rgba(255,255,255,.10);
	border: 1px solid rgba(255,255,255,.16);
	border-radius: var(--radius);
	padding: 14px 14px;
	backdrop-filter: blur(12px);
	box-shadow: 0 16px 40px rgba(2,6,23,.22);
}

.hero-card .k {
	font-weight: 900;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.1rem;
}

.hero-card .s {
	color: rgba(255,255,255,.75);
	font-weight: 700;
	font-size: .9rem;
}

.hero-badge-right {
	position: absolute;
	right: 20px;
	bottom: 20px;
	background: rgba(255,255,255,.10);
	border: 1px solid rgba(255,255,255,.16);
	backdrop-filter: blur(12px);
	border-radius: var(--radius);
	padding: 14px 16px;
	display: flex;
	gap: 12px;
	align-items: center;
	box-shadow: 0 16px 40px rgba(2,6,23,.25);
}

.hero-badge-right .dot {
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--heitz-red), var(--heitz-red2));
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 16px 30px rgba(192,24,24,.22);
}

.hero-badge-right .t1 {
	font-weight: 900;
	line-height: 1.1;
}

.hero-badge-right .t2 {
	color: rgba(255,255,255,.75);
	font-weight: 700;
	font-size: .92rem;
}

/* Badge Maître Peintre avec logo */
.hero-badge-right .dot-logo {
	width: 70px;
	height: 70px;
	background: rgba(255,255,255,.95);
	border-radius: 12px;
	padding: 4px;
	box-shadow: 0 16px 30px rgba(2,6,23,.20);
}

.hero-badge-right .dot-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Fix desktop badge */
@media (min-width:992px) {
	.hero-badge-right {
		position: relative;
		right: auto;
		bottom: auto;
		margin-left: auto;
		max-width: 360px;
	}
}

/* ============================================================
   8. SERVICES SECTION
   ============================================================ */
.section-title {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .8rem;
	margin-bottom: 2.7rem;
	text-align: center;
}

.section-title .line {
	width: 72px;
	height: 5px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--heitz-red), var(--heitz-red2));
	box-shadow: 0 12px 26px rgba(192,24,24,.18);
}

.service-card {
	background: #fff;
	border: 1px solid rgba(15,23,42,.08);
	border-radius: var(--radius);
	overflow: hidden;
	transition: all .25s ease;
	height: 100%;
	box-shadow: 0 10px 24px rgba(2,6,23,.05);
}

.service-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow);
	border-color: rgba(192,24,24,.18);
}

.service-thumb {
	height: 220px;
	overflow: hidden;
	position: relative;
}

.service-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
}

.service-card:hover .service-thumb img {
	transform: scale(1.06);
}

.service-icon-box {
	position: absolute;
	bottom: 14px;
	left: 14px;
	width: 54px;
	height: 54px;
	background: rgba(255,255,255,.14);
	border: 1px solid rgba(255,255,255,.22);
	backdrop-filter: blur(10px);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.35rem;
	border-radius: 16px;
	box-shadow: 0 16px 30px rgba(2,6,23,.18);
}

.service-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin: 1.5rem auto 0;
	background: linear-gradient(135deg, var(--heitz-red), var(--heitz-red2));
	border-radius: 20px;
	color: #fff;
	font-size: 1.8rem;
	box-shadow: 0 16px 30px rgba(192,24,24,.22);
	transition: all .3s ease;
}

.service-card:hover .service-icon {
	transform: scale(1.08) translateY(-4px);
	box-shadow: 0 20px 36px rgba(192,24,24,.32);
}

.service-body {
	padding: 1.45rem 1.25rem 1.25rem;
	text-align: center;
}

.service-badge {
	font-size: .72rem;
	font-weight: 900;
	text-transform: uppercase;
	color: var(--heitz-ink);
	background: rgba(15,23,42,.06);
	padding: 4px 10px;
	border-radius: 999px;
	letter-spacing: .08em;
}

/* ============================================================
   9. ABOUT SECTION
   ============================================================ */
.about-img-frame {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
}

.about-img-frame img {
	display: block;
}

.about-badge {
	position: absolute;
	width: 70%;
	bottom: 16px;
	left: 40px;
	right: 16px;
	background: rgba(255,255,255,.92);
	padding: 14px 16px;
	border-radius: var(--radius);
	box-shadow: 0 16px 34px rgba(2,6,23,.12);
	border: 1px solid rgba(2,6,23,.06);
	display: flex;
	align-items: center;
	gap: 12px;
}

.about-badge .icon {
	width: 54px;
	height: 54px;
	border-radius: 18px;
	background: linear-gradient(135deg, var(--heitz-red), var(--heitz-red2));
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 14px 26px rgba(192,24,24,.20);
}

.philo-card{position:relative;border-radius:28px;background:linear-gradient(180deg,#ffffff,rgba(255,255,255,.94));border:1px solid rgba(2,6,23,.08);box-shadow:0 24px 60px rgba(2,6,23,.10);padding:2.2rem 2rem;overflow:hidden;}
.philo-card:before{content:"";position:absolute;inset:-60px -60px auto auto;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(192,24,24,.18),rgba(192,24,24,0) 70%);}
.philo-quote{font-weight:700;color:var(--heitz-ink);line-height:1.75;}
.philo-quote p{margin:0 0 1rem 0;color:var(--heitz-muted);font-weight:700;}
.philo-quote p.leadline{color:var(--heitz-ink);font-weight:800;}
.philo-quote p:last-child{margin-bottom:0;}
.philo-mark{position:absolute;left:22px;top:18px;font-size:64px;line-height:1;color:rgba(192,24,24,.18);font-family:Georgia,serif;pointer-events:none;}
.philo-footer{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-top:1.25rem;color:var(--heitz-muted);font-weight:800;}
.philo-pill{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .75rem;border-radius:999px;background:rgba(192,24,24,.08);color:var(--heitz-ink);font-weight:900;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;}

/* ============================================================
   10. SWIPER SLIDER (RÉALISATIONS)
   ============================================================ */
.swiper-wrap {
	border-radius: 24px;
	overflow: hidden;
	box-shadow: var(--shadow);
	position: relative;
}

.swiper-section {
	height: 520px;
	position: relative;
}

.swiper-slide {
	position: relative;
	height: 100%;
	background: #000;
}

.swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .92;
	transform: scale(1.02);
}

.swiper-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 3.2rem 2.1rem 2rem;
	background: linear-gradient(to top, rgba(11,18,34,.92), rgba(11,18,34,.15), transparent);
	color: #fff;
}

.swiper-caption .place {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .45rem .75rem;
	border-radius: 999px;
	background: rgba(255,255,255,.10);
	border: 1px solid rgba(255,255,255,.16);
	font-weight: 900;
	font-size: .85rem;
	backdrop-filter: blur(10px);
}

.swiper-button-prev,
.swiper-button-next {
	width: 52px;
	height: 52px;
	background: rgba(255,255,255,.14);
	backdrop-filter: blur(10px);
	border-radius: 999px;
	color: #fff;
	transition: .2s;
	border: 1px solid rgba(255,255,255,.18);
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
	background: linear-gradient(135deg, var(--heitz-red), var(--heitz-red2));
	border-color: rgba(255,255,255,.0);
}

.swiper-button-prev:after,
.swiper-button-next:after {
	font-size: 1.15rem;
	font-weight: 900;
}

.swiper-pagination-bullet {
	background: rgba(255,255,255,.45);
	opacity: 1;
}

.swiper-pagination-bullet-active {
	background: var(--heitz-red2) !important;
}

/* Layout réalisations split desktop */
.realisations-split {
	display: block;
}

@media (min-width:992px) {
	.realisations-split {
		display: grid;
		grid-template-columns: minmax(0,420px) minmax(0,1fr);
		gap: 32px;
		align-items: stretch;
	}

	.realisations-left {
		position: sticky;
		top: 110px;
		align-self: start;
		padding-right: 6px;
	}

	.realisations-right .swiper-section {
		height: 520px;
	}
}

/* ============================================================
   11. GRILLE MOSAÏQUE (RÉALISATIONS)
   ============================================================ */
.grid-mosaic {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 12px;
	height: 520px;
}

@media (min-width:768px) {
	.grid-mosaic {
		grid-template-columns: repeat(4,1fr);
		height: 520px;
	}
}

.grid-item {
	position: relative;
	overflow: hidden;
	border-radius: 18px;
	cursor: pointer;
	background: #e5e7eb;
	box-shadow: 0 10px 24px rgba(2,6,23,.06);
}

.grid-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .55s ease;
}

.grid-item:hover img {
	transform: scale(1.07);
}

.grid-item .overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(11,18,34,.92), rgba(11,18,34,.18), transparent);
	opacity: 0;
	transition: opacity .25s;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 16px;
}

.grid-item:hover .overlay {
	opacity: 1;
}

.grid-item.big {
	grid-column: span 2;
	grid-row: span 2;
}

/* ============================================================
   12. CONTACT SECTION
   ============================================================ */
.contact-box {
	background: #fff;
	border-radius: 26px;
	box-shadow: var(--shadow);
	overflow: hidden;
	border: 1px solid rgba(2,6,23,.06);
}

.contact-info-side {
	background:
		radial-gradient(900px 420px at 10% 10%, rgba(255,43,43,.18), transparent 60%),
		radial-gradient(900px 420px at 90% 10%, rgba(30,58,138,.22), transparent 60%),
		linear-gradient(180deg, rgba(11,18,34,.98), rgba(11,18,34,.95));
	color: #fff;
	padding: 3.2rem 2.6rem;
	position: relative;
	overflow: hidden;
}

/* ============================================================
   13. FOOTER
   ============================================================ */
.footer {
	background: linear-gradient(180deg, var(--heitz-dark), #060a14);
	color: #c6d7f2;
	border-top: 1px solid rgba(255,255,255,.10);
}

.footer h5 {
	color: #fff;
}

.footer a {
	color: #c6d7f2;
	text-decoration: none;
	transition: .2s;
}

.footer a:hover {
	color: #fff;
}

.footer-top {
	border-bottom: 1px solid rgba(255,255,255,.10);
	padding-bottom: 2.2rem;
	margin-bottom: 2rem;
}

.blog-card {
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.10);
	border-radius: 18px;
	overflow: hidden;
	transition: all .2s ease;
	height: 100%;
}

.blog-card:hover {
	transform: translateY(-4px);
	border-color: rgba(255,43,43,.22);
}

.blog-card img {
	width: 100%;
	height: 140px;
	object-fit: cover;
	transition: transform .3s ease;
}

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

.blog-card .p {
	padding: 14px 14px 16px;
}

.blog-card a {
	color: inherit;
	text-decoration: none;
}

.blog-card h6 a:hover {
	color: var(--heitz-red2) !important;
}

.blog-tag {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-weight: 900;
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	padding: 4px 10px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--heitz-red), var(--heitz-red2));
}

/* ============================================================
   13. BLOG ARTICLES
   ============================================================ */
.blog-article {
	background: #fff;
	border: 1px solid rgba(15,23,42,.08);
	border-radius: var(--radius);
	overflow: hidden;
	transition: all .3s ease;
	display: flex;
	flex-direction: column;
}

.blog-article:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow);
	border-color: rgba(192,24,24,.15);
}

.blog-article-img {
	position: relative;
	display: block;
	overflow: hidden;
	height: 220px;
}

.blog-article-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.blog-article:hover .blog-article-img img {
	transform: scale(1.08);
}

.blog-article-date {
	position: absolute;
	top: 14px;
	right: 14px;
	background: rgba(255,255,255,.95);
	backdrop-filter: blur(10px);
	color: var(--heitz-ink);
	font-weight: 900;
	font-size: .75rem;
	padding: 6px 12px;
	border-radius: 12px;
	box-shadow: 0 8px 20px rgba(2,6,23,.12);
	text-transform: uppercase;
	letter-spacing: .05em;
}

.blog-article-body {
	padding: 1.25rem;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.blog-category {
	display: inline-flex;
	align-items: center;
	font-size: .75rem;
	font-weight: 700;
	color: var(--heitz-red);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: .08em;
	transition: color .2s ease;
}

.blog-category:hover {
	color: var(--heitz-red2);
}

.blog-meta {
	font-size: .75rem;
	color: var(--heitz-muted);
	font-weight: 700;
}

.blog-article-title {
	font-size: 1.1rem;
	font-weight: 700;
	margin-bottom: .75rem;
	line-height: 1.4;
}

.blog-article-title a {
	color: var(--heitz-ink);
	text-decoration: none;
	transition: color .2s ease;
}

.blog-article-title a:hover {
	color: var(--heitz-red);
}

.blog-article-excerpt {
	color: var(--heitz-muted);
	font-size: .9rem;
	line-height: 1.6;
	margin-bottom: auto;
}

.blog-read-more {
	display: inline-flex;
	align-items: center;
	font-size: .85rem;
	font-weight: 700;
	color: var(--heitz-red);
	text-decoration: none;
	transition: all .2s ease;
}

.blog-read-more:hover {
	color: var(--heitz-red2);
	gap: .5rem;
}

.blog-read-more i {
	transition: transform .2s ease;
}

.blog-read-more:hover i {
	transform: translateX(4px);
}

.blog-stat {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .8rem;
	color: var(--heitz-muted);
	font-weight: 700;
}

.blog-stat i {
	color: var(--heitz-red);
	font-size: .75rem;
}

/* ============================================================
   13.1 BLOG SIDEBAR
   ============================================================ */
.blog-sidebar {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.sidebar-widget {
	background: #fff;
	border: 1px solid rgba(15,23,42,.08);
	border-radius: var(--radius);
	padding: 1.5rem;
	transition: all .2s ease;
}

.sidebar-widget:hover {
	border-color: rgba(15,23,42,.12);
	box-shadow: 0 8px 20px rgba(2,6,23,.06);
}

.sidebar-widget-title {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--heitz-ink);
	margin-bottom: 1rem;
	padding-bottom: .75rem;
	border-bottom: 2px solid rgba(192,24,24,.15);
	display: flex;
	align-items: center;
}

.sidebar-widget-title i {
	color: var(--heitz-red);
}

/* Categories Widget */
.sidebar-category-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sidebar-category-list li {
	margin-bottom: .5rem;
}

.sidebar-category-link {
	display: flex;
	align-items: center;
	padding: .65rem .75rem;
	color: var(--heitz-ink);
	text-decoration: none;
	border-radius: 10px;
	font-weight: 600;
	font-size: .9rem;
	transition: all .2s ease;
	background: rgba(15,23,42,.02);
}

.sidebar-category-link:hover {
	background: rgba(192,24,24,.08);
	color: var(--heitz-red);
	transform: translateX(4px);
}

.sidebar-category-link.active {
	background: linear-gradient(135deg, var(--heitz-red), var(--heitz-red2));
	color: #fff;
}

.sidebar-category-link.active:hover {
	transform: translateX(4px);
}

.sidebar-category-link i {
	font-size: .75rem;
	transition: transform .2s ease;
}

.sidebar-category-link:hover i {
	transform: translateX(2px);
}

/* Recent Posts Widget */
.sidebar-recent-posts {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.sidebar-post {
	display: flex;
	gap: .75rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid rgba(15,23,42,.06);
}

.sidebar-post:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

.sidebar-post-img {
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	border-radius: 12px;
	overflow: hidden;
	position: relative;
}

.sidebar-post-img::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, transparent 0%, rgba(192,24,24,.4) 100%);
	opacity: 0;
	transition: opacity .3s ease;
}

.sidebar-post:hover .sidebar-post-img::after {
	opacity: 1;
}

.sidebar-post-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}

.sidebar-post:hover .sidebar-post-img img {
	transform: scale(1.1);
}

.sidebar-post-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.sidebar-post-title {
	font-size: .9rem;
	font-weight: 700;
	margin-bottom: .35rem;
	line-height: 1.4;
}

.sidebar-post-title a {
	color: var(--heitz-ink);
	text-decoration: none;
	transition: color .2s ease;
}

.sidebar-post-title a:hover {
	color: var(--heitz-red);
}

.sidebar-post-meta {
	font-size: .75rem;
	color: var(--heitz-muted);
	font-weight: 700;
}

/* Tags Widget */
.sidebar-tags {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.sidebar-tag {
	display: inline-block;
	padding: .45rem .85rem;
	background: rgba(15,23,42,.04);
	color: var(--heitz-ink);
	text-decoration: none;
	border-radius: 999px;
	font-size: .8rem;
	font-weight: 700;
	border: 1px solid rgba(15,23,42,.08);
	transition: all .2s ease;
}

.sidebar-tag:hover {
	background: rgba(192,24,24,.1);
	color: var(--heitz-red);
	border-color: rgba(192,24,24,.2);
	transform: translateY(-2px);
}

.sidebar-tag.active {
	background: linear-gradient(135deg, var(--heitz-red), var(--heitz-red2));
	color: #fff;
	border-color: transparent;
}

/* CTA Widget */
.sidebar-cta {
	background: linear-gradient(135deg, var(--heitz-red), var(--heitz-red2));
	border: none;
	position: relative;
	overflow: hidden;
}

.sidebar-cta::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(255,255,255,.1) 0%, transparent 70%);
	pointer-events: none;
}

.sidebar-cta:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 30px rgba(192,24,24,.3);
}

.sidebar-cta-content {
	position: relative;
	z-index: 1;
	text-align: center;
}

.sidebar-cta-icon {
	width: 60px;
	height: 60px;
	margin: 0 auto 1rem;
	background: rgba(255,255,255,.15);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 1.5rem;
	border: 2px solid rgba(255,255,255,.2);
}

.sidebar-cta-title {
	font-size: 1.1rem;
	font-weight: 700;
	color: #fff;
	margin-bottom: .5rem;
}

.sidebar-cta-text {
	color: rgba(255,255,255,.9);
	font-size: .9rem;
	margin-bottom: 1rem;
	font-weight: 600;
}

/* ============================================================
   13.2 ARTICLE DETAIL
   ============================================================ */
/* Article Hero */
.article-hero {
	position: relative;
	min-height: 60vh;
	display: flex;
	align-items: center;
	padding: 5rem 0 3rem;
	overflow: hidden;
}

.article-hero-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.article-hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(15,23,42,.92), rgba(2,6,23,.88));
	z-index: 1;
}

.article-hero .container {
	z-index: 2;
}

.article-hero-breadcrumb {
	font-size: .9rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
	color: rgba(255,255,255,.7);
}

.article-hero-breadcrumb a {
	color: rgba(255,255,255,.9);
	text-decoration: none;
	transition: color .2s ease;
}

.article-hero-breadcrumb a:hover {
	color: #fff;
}

.article-hero-title {
	font-size: 2.5rem;
	font-weight: 700;
	color: #fff;
	margin-bottom: 1.5rem;
	line-height: 1.2;
}

.article-hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.article-hero-meta-item {
	display: flex;
	align-items: center;
	gap: .5rem;
	color: rgba(255,255,255,.8);
	font-weight: 600;
	font-size: .9rem;
}

.article-hero-meta-item i {
	color: var(--heitz-red2);
}

.article-hero-meta-item a {
	color: rgba(255,255,255,.9);
	text-decoration: none;
	transition: color .2s ease;
}

.article-hero-meta-item a:hover {
	color: #fff;
}

/* Article Detail */
.article-detail {
	background: #fff;
}

.article-content {
	color: var(--heitz-ink);
	font-size: 1.05rem;
	line-height: 1.8;
	margin-bottom: 2rem;
}

.article-content h2,
.article-content h3,
.article-content h4 {
	color: var(--heitz-ink);
	font-weight: 700;
	margin-top: 2rem;
	margin-bottom: 1rem;
}

.article-content h2 {
	font-size: 1.8rem;
}

.article-content h3 {
	font-size: 1.5rem;
}

.article-content h4 {
	font-size: 1.25rem;
}

.article-content p {
	margin-bottom: 1.25rem;
}

.article-content ul,
.article-content ol {
	margin-bottom: 1.25rem;
	padding-left: 1.5rem;
}

.article-content li {
	margin-bottom: .5rem;
}

.article-content a {
	color: var(--heitz-red);
	text-decoration: underline;
	transition: color .2s ease;
}

.article-content a:hover {
	color: var(--heitz-red2);
}

.article-content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius);
	margin: 1.5rem 0;
}

.article-content blockquote {
	border-left: 4px solid var(--heitz-red);
	padding-left: 1.5rem;
	margin: 1.5rem 0;
	font-style: italic;
	color: var(--heitz-muted);
}

/* Article Keywords */
.article-keywords {
	padding: 1.5rem 0;
	border-top: 1px solid rgba(15,23,42,.08);
	margin-top: 2rem;
}

.article-keywords-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--heitz-ink);
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
}

.article-keywords-title i {
	color: var(--heitz-red);
}

.article-keywords-list {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.article-keyword {
	display: inline-block;
	padding: .5rem 1rem;
	background: rgba(192,24,24,.08);
	color: var(--heitz-red);
	border-radius: 999px;
	font-size: .85rem;
	font-weight: 700;
	transition: all .2s ease;
}

.article-keyword:hover {
	background: var(--heitz-red);
	color: #fff;
	transform: translateY(-2px);
}

/* Article Actions (Like Button) */
.article-actions {
	padding: 1.5rem 0;
	border-top: 1px solid rgba(15,23,42,.08);
	margin-top: 1.5rem;
}

.like-button {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	padding: .85rem 1.5rem;
	background: linear-gradient(135deg, var(--heitz-red), var(--heitz-red2));
	color: #fff;
	border: none;
	border-radius: 999px;
	font-weight: 700;
	font-size: .95rem;
	cursor: pointer;
	transition: all .3s ease;
	box-shadow: 0 8px 20px rgba(192,24,24,.25);
}

.like-button:hover:not(:disabled) {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(192,24,24,.35);
}

.like-button:disabled {
	opacity: .6;
	cursor: not-allowed;
}

.like-button i {
	font-size: 1.1rem;
}

.article-like-count {
	padding: 2px 8px;
	background: rgba(255,255,255,.2);
	border-radius: 999px;
	font-size: .85rem;
}

/* Article Share */
.article-share {
	padding: 1.5rem;
	background: rgba(15,23,42,.02);
	border-radius: var(--radius);
	margin-top: 2rem;
}

.article-share-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--heitz-ink);
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
}

.article-share-title i {
	color: var(--heitz-red);
}

.article-share-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

.article-share-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	color: #fff;
	text-decoration: none;
	transition: all .3s ease;
	font-size: 1.1rem;
}

.article-share-btn:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgba(0,0,0,.2);
}

.article-share-btn.facebook {
	background: #1877F2;
}

.article-share-btn.twitter {
	background: #1DA1F2;
}

.article-share-btn.linkedin {
	background: #0A66C2;
}

.article-share-btn.pinterest {
	background: #E60023;
}

/* ============================================================
   14. RESPONSIVE - MOBILE
   ============================================================ */
@media (max-width:991.98px) {
	#mainNav {
		padding: 10px 0 !important;
	}

	.hero-section {
		min-height: 92vh;
		padding-top: 84px;
	}

	.hero-badge-right {
		display: none;
	}

	.hero-cards {
		grid-template-columns: 1fr;
	}

	.article-hero {
		min-height: 50vh;
		padding: 3rem 0 2rem;
	}

	.article-hero-title {
		font-size: 1.75rem;
	}

	.article-hero-meta {
		gap: 1rem;
		font-size: .85rem;
	}

	.article-content {
		font-size: 1rem;
	}

	.swiper-section {
		height: 380px;
	}

	.section-padding {
		padding: 4.3rem 0;
	}

	#mainNav .nav-phone {
		display: none;
	}

	.navbar:not(.scrolled):not(.page-cms) .logo-text {
		color: #fff;
	}
}

@media (max-width:360px) {
	.full-menu-overlay nav {
		padding-top: 55px;
	}
}

/* ============================================================
   15. SCROLL TO TOP BUTTON
   ============================================================ */
#scrollToTop {
	position: fixed;
	z-index: 1000;
	display: flex;
	justify-content: center;
	align-items: center;
	bottom: -60px;
	right: 20px;
	width: 50px;
	height: 50px;
	background: linear-gradient(135deg, var(--heitz-red), var(--heitz-red2));
	color: #fff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	opacity: 0;
	transition: all .35s ease;
	box-shadow: 0 8px 24px rgba(192,24,24,.25);
}

#scrollToTop:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px rgba(192,24,24,.35);
}

#scrollToTop.show {
	bottom: 20px;
	opacity: 1;
}

#scrollToTop svg {
	width: 22px;
	height: 22px;
}

/* ============================================================
   16. CLASSES UTILITAIRES (remplacement styles en ligne)
   ============================================================ */

/* Couleurs texte */
.text-heitz-ink {color: var(--heitz-ink) !important;}
.text-heitz-muted {color: var(--heitz-muted) !important;}

/* Font weights au-delà de Bootstrap */
.fw-800 {font-weight: 800 !important;}
.fw-900 {font-weight: 900 !important;}

/* Letter spacing */
.ls-wide {letter-spacing: .12em;}
.ls-form {letter-spacing: .08em;text-transform: uppercase;}
.ls-footer {letter-spacing: .1em;}

/* Description section (sous-titre section-title) */
.section-desc {max-width: 720px;font-weight: 700;}

/* Bordures subtiles */
.border-top-subtle {border-top: 1px solid rgba(2,6,23,.08);}
.border-top-light {border-top: 1px solid rgba(255,255,255,.14);}

/* Avatar initiale (signature gérant) */
.avatar-initial {
	width: 52px;height: 52px;border-radius: 18px;
	background: linear-gradient(135deg,var(--heitz-red),var(--heitz-red2));
	box-shadow: 0 16px 30px rgba(192,24,24,.18);
	display: flex;align-items: center;justify-content: center;color: #fff;
}

/* Icône ronde rouge dégradé (engagements) */
.icon-circle-red {
	width: 64px;height: 64px;border-radius: 50%;
	background: linear-gradient(135deg,var(--heitz-red),var(--heitz-red2));
	color: #fff;font-size: 1.5rem;
	display: inline-flex;align-items: center;justify-content: center;
}

/* Icône carrée rouge (services) */
.icon-box-red {
	width: 48px;height: 48px;border-radius: 12px;
	background: var(--heitz-red);color: #fff;
	display: flex;align-items: center;justify-content: center;
}

/* Icône ronde bleue (cookies) */
.icon-circle-blue {
	width: 48px;height: 48px;border-radius: 50%;
	background: var(--heitz-blue);color: #fff;
	display: inline-flex;align-items: center;justify-content: center;
}

/* Variantes hero-pill */
.hero-pill-light {border-color: rgba(255,255,255,.12);}
.hero-pill-light-2 {border-color: rgba(255,255,255,.2);}

/* Encadrés alertes (pages légales) */
.alert-box-red {
	background: rgba(192,24,24,.06);
	border-left: 4px solid var(--heitz-red);
	border-radius: var(--radius-sm);
}
.alert-box-blue {
	background: rgba(30,58,138,.06);
	border-left: 4px solid var(--heitz-blue);
	border-radius: var(--radius-sm);
}

/* Cartes fond clair (pages légales / données personnelles) */
.card-light {background: var(--heitz-light);border-radius: var(--radius);}
.card-light-sm {background: var(--heitz-light);border-radius: var(--radius-sm);}

/* Overlay hero pages internes */
.page-hero-overlay-dark {
	background: linear-gradient(135deg,rgba(15,23,42,.92),rgba(2,6,23,.92));
	z-index: 1;
}
.page-hero-overlay-red {
	background: linear-gradient(135deg,rgba(192,24,24,.95),rgba(116,16,16,.95));
	z-index: 1;
}
.z-1 {z-index: 1;}
.z-2 {z-index: 2;}

/* Sidebar sticky */
.sticky-sidebar {position: sticky;top: 100px;}

/* Cadre image */
.img-frame {border-radius: var(--radius);box-shadow: var(--shadow);overflow: hidden;}

/* Carte / iframe (a-propos, contact) */
.map-frame {border-radius: var(--radius);overflow: hidden;box-shadow: var(--shadow);}
.map-iframe {border: 0;min-height: 400px;width: 100%;}

/* Page 404 */
.error-icon {font-size: 5rem;color: var(--heitz-red);opacity: .8;}
.error-code {font-size: clamp(5rem,15vw,10rem);color: var(--heitz-ink);line-height: 1;}
.error-section {min-height: 80vh;display: flex;align-items: center;}

/* États vides */
.empty-state-icon {font-size: 3rem;color: var(--heitz-muted);opacity: .3;}
.empty-state-icon-lg {font-size: 4rem;color: var(--heitz-muted);opacity: .3;}
.empty-state-icon-sm {font-size: 2rem;opacity: .3;}

/* Modale rappel */
.modal-heitz {border-radius: var(--radius);border: 0;overflow: hidden;}
.modal-header-heitz {background: var(--heitz-ink);color: #fff;border: 0;}

/* Encart devis flottant (services) */
.devis-floating {border-radius: var(--radius);box-shadow: var(--shadow);max-width: 280px;}

/* Footer */
.footer-text-subtle {color: #b9c2d3;font-weight: 700;}
.footer-legal {color: #9aa6ba;border-top: 1px solid rgba(255,255,255,.10);font-weight: 700;}
.footer-legal a {color: #9aa6ba;}

/* Bandeau maintenance */
.maintenance-bar {background: #c01818;color: #fff;}

/* Label formulaire */
.form-label-heitz {letter-spacing: .08em;text-transform: uppercase;}

/* Input captcha */
.captcha-input {max-width: 150px;}

/* Logo Acronet */
.acronet-logo {height: auto;width: 180px;}

/* ============================================================
   17. GALERIE RÉALISATIONS (lightbox + filtres)
   ============================================================ */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.5rem;
}

.gallery-item {
	position: relative;overflow: hidden;border-radius: var(--radius);
	cursor: pointer;background: #fff;
	box-shadow: 0 10px 24px rgba(2,6,23,.05);
	transition: all .3s ease, opacity .3s ease, transform .3s ease;
}
.gallery-item:hover {transform: translateY(-6px);box-shadow: var(--shadow);}
.gallery-item img {width: 100%;height: 300px;object-fit: cover;display: block;transition: transform .4s ease;}
.gallery-item:hover img {transform: scale(1.08);}
.gallery-item.hidden {display: none;}

.gallery-item-overlay {
	position: absolute;top: 0;left: 0;width: 100%;height: 100%;
	background: linear-gradient(180deg, transparent 0%, rgba(2,6,23,.7) 100%);
	opacity: 0;transition: opacity .3s ease;
	display: flex;align-items: flex-end;padding: 1rem;
}
.gallery-item:hover .gallery-item-overlay {opacity: 1;}

.gallery-item-name {color: #fff;font-weight: 700;font-size: .9rem;text-transform: capitalize;}

/* Lightbox */
.lightbox {
	display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;
	background: rgba(2,6,23,.95);z-index: 9999;
	align-items: center;justify-content: center;
}
.lightbox.active {display: flex;}
.lightbox-content {position: relative;max-width: 90%;max-height: 90%;}
.lightbox-content img {max-width: 100%;max-height: 90vh;object-fit: contain;border-radius: var(--radius);}
.lightbox-close {
	position: absolute;top: -50px;right: 0;
	background: var(--heitz-red);border: none;color: #fff;
	width: 44px;height: 44px;border-radius: 50%;cursor: pointer;
	font-size: 1.4rem;display: flex;align-items: center;justify-content: center;
	transition: all .2s ease;
}
.lightbox-close:hover {background: var(--heitz-red2);transform: rotate(90deg);}
.lightbox-nav {
	position: absolute;top: 50%;transform: translateY(-50%);
	background: rgba(255,255,255,.1);backdrop-filter: blur(10px);
	border: 1px solid rgba(255,255,255,.2);color: #fff;
	width: 50px;height: 50px;border-radius: 50%;cursor: pointer;
	font-size: 1.4rem;display: flex;align-items: center;justify-content: center;
	transition: all .2s ease;
}
.lightbox-nav:hover {background: rgba(255,255,255,.2);}
.lightbox-prev {left: 20px;}
.lightbox-next {right: 20px;}
.lightbox-counter {
	position: absolute;bottom: -50px;left: 50%;transform: translateX(-50%);
	color: #fff;font-weight: 700;font-size: .9rem;
}

/* Filtres galerie */
.gallery-filters {display: flex;flex-wrap: wrap;gap: .75rem;justify-content: center;margin-bottom: 2.5rem;}
.filter-btn {
	padding: .6rem 1.4rem;border: 2px solid var(--heitz-border);
	background: #fff;color: var(--heitz-ink);font-weight: 700;font-size: .9rem;
	border-radius: 50px;cursor: pointer;transition: all .25s ease;
}
.filter-btn:hover {border-color: var(--heitz-red);color: var(--heitz-red);}
.filter-btn.active {background: var(--heitz-red);border-color: var(--heitz-red);color: #fff;}
.filter-btn .filter-count {
	display: inline-block;background: rgba(0,0,0,.1);
	padding: .1rem .5rem;border-radius: 20px;font-size: .75rem;margin-left: .4rem;
}
.filter-btn.active .filter-count {background: rgba(255,255,255,.2);}

@media (max-width: 768px) {
	.gallery-grid {grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));gap: 1rem;}
	.gallery-item img {height: 220px;}
	.lightbox-nav {width: 40px;height: 40px;font-size: 1.2rem;}
	.lightbox-prev {left: 10px;}
	.lightbox-next {right: 10px;}
	.gallery-filters {gap: .5rem;}
	.filter-btn {padding: .5rem 1rem;font-size: .8rem;}
}