/**
 * Footer RollerGrill - Styles personnalisés
 */

/* Import Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ==========================================================================
   Variables
   ========================================================================== */
:root {
	--footer-bg: #FAF6F2;
	--footer-bg-bottom: #555758;
	--footer-text-main: #3a3a3a;
	--footer-text-bottom: #ffffff;
	--footer-text-muted: #6a6a6a;
	--footer-text-muted-bottom: #b0b0b0;
	--footer-link-hover: #c8102e;
}

/* Assurer que le body prend toute la hauteur */
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

#site-content,
.site-content,
.elementor,
main {
	flex: 1 0 auto;
}

/* ==========================================================================
   Footer Main
   ========================================================================== */
.rollergrill-footer {
	font-family: 'Poppins', sans-serif;
	font-feature-settings: 'liga' off, 'clig' off;
	color: var(--footer-text-main);
	margin-top: auto;
	margin-bottom: 0;
}

.rollergrill-footer__main {
	background: var(--footer-bg);
	padding: 3rem 2rem;
}

.rollergrill-footer__container {
	max-width: 1200px;
	margin: 0 auto;
}

.rollergrill-footer__main .rollergrill-footer__container {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 3rem;
}

/* ==========================================================================
   Footer Columns
   ========================================================================== */
.footer-col__title {
	font-size: 18px;
	font-weight: 600;
	color: var(--footer-text-main);
	margin: 0 0 1.5rem;
	letter-spacing: 0.18px;
}

/* Colonne Info (Logo + Coordonnées) */
.footer-col--info {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.footer-logo img {
	max-width: 150px;
	height: auto;
}

.footer-contact {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.footer-contact__item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: 14px;
	line-height: 1.6;
	color: var(--footer-text-muted);
	margin: 0;
}

.footer-contact__item svg,
.footer-contact__item .footer-icon {
	flex-shrink: 0;
	margin-top: 0.2rem;
	color: var(--footer-text-muted);
	width: 24px;
	height: 24px;
}

.footer-address-link {
	color: var(--footer-text-muted);
	text-decoration: none;
	transition: color 0.3s ease;
}

.footer-address-link:hover {
	color: var(--footer-text-main);
}

/* Social Icons */
.footer-social {
	display: flex;
	gap: 0.75rem;
}

.footer-social__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--footer-text-main);
	transition: all 0.3s ease;
}

.footer-social__link:hover {
	color: #ffffff;
	transform: scale(1.05);
	transition: all 0.3s ease;
}

.footer-social__link svg,
.footer-social__link img {
	object-fit: cover;
}

/* Menu Columns */
.footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.footer-menu li {
	margin: 0;
}

.footer-menu a {
	color: var(--footer-text-muted);
	text-decoration: none;
	font-size: 14px;
	transition: color 0.3s ease;
}

.footer-menu a:hover {
	color: var(--footer-text-main);
}

/* Contact List */
.footer-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.footer-contact-list li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 14px;
	color: var(--footer-text-muted);
	margin: 0;
}

.footer-contact-list svg,
.footer-contact-list .footer-icon {
	flex-shrink: 0;
	color: var(--footer-text-muted);
	width: 24px;
	height: 24px;
}

.footer-contact-list a {
	color: var(--footer-text-muted);
	text-decoration: none;
	transition: color 0.3s ease;
}

.footer-contact-list a:hover {
	color: var(--footer-text-main);
}

/* ==========================================================================
   Footer Bottom
   ========================================================================== */
.rollergrill-footer__bottom {
	background: var(--footer-bg-bottom);
	padding: 0.5rem 2rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.rollergrill-footer__bottom .rollergrill-footer__container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
}

.footer-bottom__copyright {
	font-size: 14px;
	color: var(--footer-text-muted-bottom);
}

.footer-bottom__copyright a {
	color: #FAF6F2;
	text-decoration: none;
	transition: color 0.3s ease;
}

.footer-bottom__copyright a:hover {
	color: var(--footer-text-bottom);
}

.footer-bottom__menu {
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.footer-bottom__menu a {
	font-size: 14px;
	color: #FAF6F2;
	text-decoration: none;
	transition: color 0.3s ease;
}

.footer-bottom__menu a:hover {
	color: var(--footer-text-bottom);
}

/* Logo Solead */
.solead-logo {
	display: inline-block;
	width: 12px;
	height: 16px;
	vertical-align: middle;
	margin: 0 0.25rem;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
	.rollergrill-footer__main .rollergrill-footer__container {
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
	}
	
	.footer-col--info {
		grid-column: 1 / -1;
	}
}

@media (max-width: 768px) {
	.rollergrill-footer__main {
		padding: 2rem 1rem;
	}
	
	.rollergrill-footer__main .rollergrill-footer__container {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	
	/* Centrer tous les éléments du footer sur mobile */
	.footer-col {
		text-align: center;
	}
	
	.footer-col--info {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.footer-logo {
		display: flex;
		justify-content: center;
	}
	
	.footer-contact {
		align-items: center;
	}
	
	.footer-contact__item {
		justify-content: center;
		text-align: center;
	}
	
	.footer-social {
		justify-content: center;
	}
	
	.footer-menu {
		align-items: center;
	}
	
	.footer-contact-list {
		align-items: center;
	}
	
	.footer-contact-list li {
		justify-content: center;
	}
	
	.rollergrill-footer__bottom .rollergrill-footer__container {
		flex-direction: column;
		text-align: center;
	}
	
	.footer-bottom__menu {
		justify-content: center;
	}
}

@media (max-width: 480px) {
	.footer-bottom__menu {
		flex-direction: column;
		gap: 0.75rem;
	}
}