/* ============================================================
   ui-refinements.css — chargé en dernier (priorité maximale)
   1) Espacements de sections resserrés (~40-48px au lieu de 110-120px)
   2) Logos partenaires en couleur + agrandis
   3) Navbar : menu + animations (underline, slide-down, entrée)
   ============================================================ */

/* ---------- 1. Espacement entre sections ---------- */
.hero { padding: 88px 0 56px !important; }
.about-us { padding: 48px 0 !important; }
.energy-partners-section { padding: 44px 0 40px !important; }
.energy-testimonials-section { padding: 48px 0 !important; }
.our-faqs { padding: 48px 0 !important; }

/* Espacement interne resserré */
.section-row { margin-bottom: 34px !important; }
.section-title { margin-bottom: 26px !important; }
.energy-partners-marquee { margin-top: 28px !important; }
.energy-partners-caption { margin-top: 20px !important; }
.energy-engage-head { margin-bottom: 36px !important; }
.energy-engage-cta { margin-top: 30px !important; }
.energy-engage-note { margin-top: 18px !important; }

/* Ancrage : éviter que les titres passent sous le header fixe */
#devis-energie, #about-us, #fournisseurs, #avis-clients, #faq-energie {
	scroll-margin-top: 96px;
}
html { scroll-behavior: smooth; }

/* ---------- 2. Logos partenaires : couleur + plus grands ---------- */
.energy-partner-item {
	width: 200px;
	height: 108px;
}
.energy-partner-item img {
	max-height: 60px !important;
	filter: none !important;       /* couleur d'origine, plus de gris */
	opacity: 1 !important;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.energy-partner-item:hover img,
.energy-partner-item:focus-within img {
	transform: scale(1.07);
}

@media only screen and (max-width: 991px) {
	.energy-partner-item { width: 176px; height: 100px; }
	.energy-partner-item img { max-height: 52px !important; }
	.energy-partners-section { padding: 40px 0 !important; }
	.about-us, .energy-testimonials-section, .our-faqs { padding: 40px 0 !important; }
}
@media only screen and (max-width: 767px) {
	.energy-partner-item { width: 154px; height: 88px; }
	.energy-partner-item img { max-height: 44px !important; }
	.hero { padding: 64px 0 44px !important; }
}

/* ---------- 3. Navbar : menu + animations ---------- */
.main-menu .nav-menu-wrapper > ul#menu {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.main-menu ul#menu li { margin: 0 2px; }

.main-menu ul#menu li a {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	font-size: 15px;
	font-weight: 600;
	color: var(--primary-color);
	padding: 10px 14px !important;
	transition: color 0.25s ease;
}
.main-menu ul#menu li a::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 4px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, #6BCA5A, #358C2B);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.main-menu ul#menu li a:hover,
.main-menu ul#menu li a:focus,
.main-menu ul#menu li a.active {
	color: var(--accent-color);
}
.main-menu ul#menu li a:hover::after,
.main-menu ul#menu li a:focus::after,
.main-menu ul#menu li a.active::after {
	transform: scaleX(1);
	transform-origin: left center;
}

/* Entrée animée des items au chargement (desktop) */
@media only screen and (min-width: 992px) {
	.main-menu ul#menu li {
		opacity: 0;
		animation: navItemIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	}
	.main-menu ul#menu li:nth-child(1) { animation-delay: 0.12s; }
	.main-menu ul#menu li:nth-child(2) { animation-delay: 0.20s; }
	.main-menu ul#menu li:nth-child(3) { animation-delay: 0.28s; }
	.main-menu ul#menu li:nth-child(4) { animation-delay: 0.36s; }
	.main-menu ul#menu li:nth-child(5) { animation-delay: 0.44s; }
}
@keyframes navItemIn {
	from { opacity: 0; transform: translateY(-9px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Header sticky : transition douce + glissement à l'apparition + ombre */
header.main-header .header-sticky {
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
header.main-header .header-sticky.active {
	box-shadow: 0 10px 30px rgba(0, 26, 41, 0.08);
	animation: stickyDown 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes stickyDown {
	from { transform: translateY(-100%); }
	to { transform: translateY(0); }
}

/* Bouton header : micro-lift au survol + pas de retour à la ligne */
.header-btn { gap: 16px !important; }
.header-btn .btn-default { white-space: nowrap; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.header-btn .btn-default:hover { transform: translateY(-2px); }

/* Léger resserrement du menu pour tout faire tenir sur une ligne */
@media (min-width: 992px) and (max-width: 1300px) {
	.main-menu ul#menu li a { padding: 10px 10px !important; font-size: 14.5px; }
	.header-phone span { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.main-menu ul#menu li { opacity: 1; animation: none; }
	header.main-header .header-sticky.active { animation: none; }
	.energy-partner-item img { transition: none !important; }
}

/* ============================================================
   Hero plein écran + contenu enrichi + animations navbar (v2)
   ============================================================ */

/* --- Hero : navbar + hero = 100vh --- */
@media (min-width: 992px) {
	.hero {
		min-height: calc(100vh - var(--header-h, 104px));
		padding: 40px 0 !important;
		display: flex;
		align-items: center;
	}
	.hero > .container { width: 100%; }
}

/* --- Réassurance sous le bouton --- */
.hero-btn { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.hero-btn-note {
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.66);
	line-height: 1.4;
}

/* --- Bandeau de statistiques --- */
.hero-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 36px;
	margin: 30px 0 0;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.hero-stat strong {
	display: block;
	font-family: var(--accent-font);
	font-size: 30px;
	line-height: 1;
	color: #ffffff;
	letter-spacing: -0.01em;
}
.hero-stat span {
	display: block;
	margin-top: 7px;
	font-size: 13px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.72);
	max-width: 160px;
}

/* --- Ligne de confiance --- */
.hero-trustline {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 22px 0 0;
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.72);
}
.hero-trustline svg { color: #6BCA5A; flex: 0 0 auto; }

/* --- Animations navbar supplémentaires --- */
.navbar-brand img { animation: heroLogoIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes heroLogoIn {
	from { opacity: 0; transform: translateX(-16px); }
	to { opacity: 1; transform: translateX(0); }
}

/* Picto téléphone qui « sonne » discrètement */
.header-phone svg { transform-origin: 50% 60%; animation: phoneRing 3.2s ease-in-out infinite; }
@keyframes phoneRing {
	0%, 70%, 100% { transform: rotate(0deg); }
	74% { transform: rotate(-13deg); }
	78% { transform: rotate(11deg); }
	82% { transform: rotate(-8deg); }
	86% { transform: rotate(6deg); }
	90% { transform: rotate(0deg); }
}

/* Icônes sociales : entrée + pulsation douce du contour au survol */
.header-social { animation: socialIn 0.6s ease both; }
.header-social:nth-of-type(1) { animation-delay: 0.5s; }
.header-social:nth-of-type(2) { animation-delay: 0.6s; }
@keyframes socialIn {
	from { opacity: 0; transform: scale(0.6); }
	to { opacity: 1; transform: scale(1); }
}

@media (min-width: 992px) and (max-width: 991px) { }

@media (max-width: 991px) {
	.hero-stat strong { font-size: 26px; }
	.hero-stats { gap: 16px 28px; }
}

@media (prefers-reduced-motion: reduce) {
	.navbar-brand img,
	.header-phone svg,
	.header-social { animation: none !important; }
}

/* --- Resserrement du hero pour tenir en ~100vh (stats sur 1 ligne) --- */
@media (min-width: 992px) {
	.hero-content .section-title { margin-bottom: 16px !important; }
	.hero-feature-list li { margin-bottom: 9px !important; }
	.hero-stats { gap: 10px 20px; margin-top: 20px; padding-top: 16px; flex-wrap: nowrap; }
	.hero-stat span { max-width: 118px; font-size: 12.5px; }
	.hero-stat strong { font-size: 25px; }
	.hero-trustline { margin-top: 14px; }
}

/* ============================================================
   Logo FoyerÉco (carré : emblème + mot-symbole)
   ============================================================ */
.navbar-brand img { height: 60px !important; width: auto !important; }
/* Footer sombre : logo sur pastille blanche pour rester lisible */
.kindi-footer__brand-logo img {
	height: 64px !important;
	width: auto !important;
	background: #ffffff;
	padding: 9px 14px;
	border-radius: 14px;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}
@media (max-width: 991px) { .navbar-brand img { height: 52px !important; } }

/* ============================================================
   Navbar sticky propre (toujours visible, sans JS, sans saut)
   ============================================================ */
header.main-header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 1000;
}
header.main-header .header-sticky {
	box-shadow: 0 4px 20px rgba(0, 26, 41, 0.07);
	transition: box-shadow 0.3s ease;
}
/* on neutralise tout déplacement résiduel de l'ancien comportement */
header.main-header .header-sticky.hide { transform: none !important; }

/* ============================================================
   Icônes sociales sur mobile (Facebook + Instagram)
   ============================================================ */
.mobile-socials { display: none; }
@media (max-width: 991px) {
	.mobile-socials {
		display: inline-flex;
		align-items: center;
		gap: 9px;
		margin-left: auto;
		margin-right: 14px;
	}
	.mobile-socials a {
		display: grid;
		place-items: center;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		border: 1px solid rgba(0, 26, 41, 0.14);
		color: #001A29;
		text-decoration: none;
		transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
	}
	.mobile-socials a svg { width: 18px; height: 18px; }
	.mobile-socials a:hover, .mobile-socials a:focus-visible {
		background: linear-gradient(135deg, #6BCA5A, #358C2B);
		color: #fff;
		border-color: transparent;
		transform: translateY(-2px);
		outline: none;
	}
}

/* ============================================================
   Barre CTA mobile (téléphone + bouton devis) — bas d'écran
   ============================================================ */
.mobile-cta-bar { display: none; }
@media (max-width: 991px) {
	body { padding-bottom: 86px; }
	.mobile-cta-bar {
		display: flex;
		align-items: stretch;
		gap: 10px;
		position: fixed;
		z-index: 1200;
		left: 12px;
		right: 12px;
		bottom: calc(12px + env(safe-area-inset-bottom));
	}
	.mobile-cta-bar__call {
		flex: 0 0 auto;
		width: 58px;
		display: grid;
		place-items: center;
		background: #ffffff;
		color: #358C2B;
		border: 1px solid rgba(0, 26, 41, 0.12);
		border-radius: 16px;
		box-shadow: 0 12px 30px rgba(0, 26, 41, 0.18);
	}
	.mobile-cta-bar__call svg { width: 23px; height: 23px; }
	.mobile-cta-bar__quote {
		flex: 1 1 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 9px;
		min-height: 58px;
		background: linear-gradient(135deg, #6BCA5A 0%, #4AAB3D 55%, #358C2B 100%);
		color: #ffffff;
		font-weight: 800;
		font-size: 15px;
		text-decoration: none;
		border-radius: 16px;
		box-shadow: 0 14px 32px -8px rgba(74, 171, 61, 0.55);
	}
	.mobile-cta-bar__quote svg { width: 18px; height: 18px; }
}