/* =========================================================================
   Batiself — Site footer
   Three bands: newsletter (dark blue strip) / main 5-column grid (primary
   blue) / bottom strip (slightly darker).

   TYPOGRAPHY: every text element consumes a role from tokens.css.
   Roles in use here:
     - h2       → .bs-footer-news__title
     - h3       → .bs-footer__brand-text
     - h4       → .bs-footer__col-title
     - body-sm  → .bs-footer-news__intro, .bs-footer__menu a, .bs-footer__tagline,
                  .bs-footer__contact, .bs-footer-news__form input
     - button   → .bs-footer-news__btn 
     - caption  → .bs-footer-bottom__copy, .bs-footer-bottom__menu a 
   ========================================================================= */

/* Single Dark Blue background for the whole footer; the three bands
   (newsletter / main columns / bottom strip) are separated by a thin white
   rule rather than by a color change. */
.bs-footer {
	background: var(--bs-color-primary-dark);
	color: #fff;
	font-family: var(--bs-font-family);
}

/* border-box everywhere in the footer — without it the newsletter card's
   padding adds to its max-width, pushing it past the viewport on mobile and
   creating a horizontal scroll. */
.bs-footer,
.bs-footer *,
.bs-footer *::before,
.bs-footer *::after {
	box-sizing: border-box;
}

.bs-footer__inner {
	width: 100%;
	max-width: var(--bs-container-w);
	margin: 0 auto;
	padding: 0 var(--bs-container-pad);
}

.bs-footer a {
	color: inherit;
	text-decoration: none;
	transition: color .15s ease;
}

/* ---------- 1. Newsletter band — subtle light-blue featured card ------ */
.bs-footer__news {
	background: transparent;   /* inherits the unified Dark Blue from .bs-footer */
	/* Band carries the side gutter so the card keeps clean edges on mobile. */
	padding: 48px var(--bs-container-pad);
}
.bs-footer-news {
	max-width: var(--bs-container-w);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	align-items: center;
	gap: 48px;
	/* Soft Blue tint over the Dark Blue footer — the newsletter gently
	   stands out as a premium card without a harsh contrast. White text
	   stays fully readable. */
	background: rgba(0, 91, 167, .18);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 0;
	padding: 40px clamp(24px, 4vw, 56px);
}

/* Newsletter title — role: h2 (white on dark blue, with Yellow accent on <strong>) */
.bs-footer-news__title {
	margin: 0 0 10px;
	color: #fff;
	font-size:      var(--bs-type-h2-size);
	font-weight:    var(--bs-type-h2-weight);
	line-height:    var(--bs-type-h2-leading);
	letter-spacing: var(--bs-type-h2-tracking);
	text-transform: var(--bs-type-h2-case);
}
.bs-footer-news__title strong {
	font-weight: var(--bs-weight-black);
	color: var(--bs-color-accent);   /* Yellow — harmonizes with the CTA button below */
}

/* Newsletter intro — role: body-sm */
.bs-footer-news__intro {
	margin: 0;
	max-width: 520px;
	color: rgba(255, 255, 255, .85);
	font-size:      var(--bs-type-body-sm-size);
	font-weight:    var(--bs-type-body-sm-weight);
	line-height:    var(--bs-type-body-sm-leading);
	letter-spacing: var(--bs-type-body-sm-tracking);
}
.bs-footer-news__form {
	display: flex;
	align-items: stretch;
	gap: 8px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 999px;
	padding: 6px 6px 6px 4px;
}

/* Newsletter input — role: body-sm */
.bs-footer-news__form input[type="email"] {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: 0;
	outline: 0;
	padding: 12px 22px;
	color: #fff;
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-type-body-sm-size);
	font-weight:    var(--bs-type-body-sm-weight);
	line-height:    var(--bs-type-body-sm-leading);
	letter-spacing: var(--bs-type-body-sm-tracking);
}
.bs-footer-news__form input::placeholder { color: rgba(255, 255, 255, .6); }

/* Newsletter submit — role: button */
.bs-footer-news__btn {
	flex: 0 0 auto;
	background: var(--bs-color-accent);
	color: var(--bs-color-text);
	border: 0;
	border-radius: 999px;
	padding: 12px 26px;
	cursor: pointer;
	transition: filter .15s;
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-type-button-size);
	font-weight:    var(--bs-type-button-weight);
	line-height:    var(--bs-type-button-leading);
	letter-spacing: var(--bs-type-button-tracking);
	text-transform: var(--bs-type-button-case);
}
.bs-footer-news__btn:hover { filter: brightness(.95); }

/* ---------- 2. Main columns — separated from newsletter by white rule -- */
.bs-footer__main {
	background: transparent;
	padding: 64px 0 48px;
	border-top: 1px solid rgba(255, 255, 255, .12);
}
.bs-footer__cols {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1.4fr;
	gap: 48px;
	align-items: start;
}

/* Column title — role: h4. Yellow accent rule above ties it visually to the
   newsletter title <strong> (also Yellow). Same h4 treatment for all 5 cols. */
.bs-footer__col-title {
	position: relative;
	margin: 0 0 18px;
	padding-top: 14px;
	color: #fff;
	font-size:      var(--bs-type-h4-size);
	font-weight:    var(--bs-type-h4-weight);
	line-height:    var(--bs-type-h4-leading);
	letter-spacing: var(--bs-type-h4-tracking);
	text-transform: var(--bs-type-h4-case);
}
.bs-footer__col-title::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 32px;
	height: 3px;
	background: var(--bs-color-accent);   /* Yellow */
}

.bs-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Menu item — role: body-sm (white translucent) */
.bs-footer__menu a {
	color: rgba(255, 255, 255, .85);
	font-size:      var(--bs-type-body-sm-size);
	font-weight:    var(--bs-type-body-sm-weight);
	line-height:    var(--bs-type-body-sm-leading);
	letter-spacing: var(--bs-type-body-sm-tracking);
}
.bs-footer__menu a:hover { color: var(--bs-color-accent); }

/* ---- Brand column ---- */
.bs-footer__col--brand .bs-footer__logo img,
.bs-footer__col--brand .bs-footer__logo .custom-logo {
	height: 40px;
	width: auto;
	filter: brightness(0) invert(1);
}

/* Brand wordmark — role: h3 */
.bs-footer__brand-text {
	color: #fff;
	font-size:      var(--bs-type-h3-size);
	font-weight:    var(--bs-weight-black);            /* h3 weight override */
	line-height:    var(--bs-type-h3-leading);
	letter-spacing: var(--bs-tracking-tight);          /* h3 tracking override */
}

/* Tagline — role: body-sm */
.bs-footer__tagline {
	margin: 18px 0 24px;
	max-width: 340px;
	color: rgba(255, 255, 255, .85);
	font-size:      var(--bs-type-body-sm-size);
	font-weight:    var(--bs-type-body-sm-weight);
	line-height:    var(--bs-type-body-sm-leading);
	letter-spacing: var(--bs-type-body-sm-tracking);
}

/* ---- Socials ---- */
.bs-footer__socials {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 10px;
}
.bs-footer__social {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .1);
	border-radius: 50%;
	color: #fff;
	transition: background .15s, color .15s;
}
.bs-footer__social:hover {
	background: var(--bs-color-accent);
	color: var(--bs-color-text);
}

/* ---- Contact column ---- role: body-sm */
.bs-footer__contact {
	font-style: normal;
	color: rgba(255, 255, 255, .85);
	font-size:      var(--bs-type-body-sm-size);
	font-weight:    var(--bs-type-body-sm-weight);
	line-height:    var(--bs-type-body-sm-leading);
	letter-spacing: var(--bs-type-body-sm-tracking);
}
.bs-footer__contact p { margin: 0 0 6px; }
.bs-footer__contact a:hover { color: var(--bs-color-accent); }
.bs-footer__hours {
	margin-top: 12px !important;
	color: rgba(255, 255, 255, .7);
}

/* "Page contact" entry-point — sits below the address block as a clear CTA
   pointing at /contact/. Visually distinct (Yellow accent + arrow) from the
   plain links above so the user spots it quickly. */
.bs-footer__contact-cta {
	margin-top: 14px !important;
}
.bs-footer__contact-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--bs-color-accent);
	font-size:      var(--bs-type-button-size);
	font-weight:    var(--bs-type-button-weight);
	letter-spacing: var(--bs-type-button-tracking);
	text-transform: var(--bs-type-button-case);
	text-decoration: none;
}
.bs-footer__contact-link svg {
	transition: transform .25s ease;
}
.bs-footer__contact-link:hover {
	color: #fff;
}
.bs-footer__contact-link:hover svg {
	transform: translateX(3px);
}

/* ---------- 3. Stores band — separated from main by white rule -------- */
.bs-footer__stores-band {
	background: transparent;
	padding: 40px 0;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

/* Band title — role: h4, same Yellow-rule treatment as column titles. */
.bs-footer__stores-title {
	position: relative;
	margin: 0 0 24px;
	padding-top: 14px;
	color: #fff;
	font-size:      var(--bs-type-h4-size);
	font-weight:    var(--bs-type-h4-weight);
	line-height:    var(--bs-type-h4-leading);
	letter-spacing: var(--bs-type-h4-tracking);
	text-transform: var(--bs-type-h4-case);
}
.bs-footer__stores-title::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 32px;
	height: 3px;
	background: var(--bs-color-accent);
}

.bs-footer__stores {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}
.bs-footer-store {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* Store name — role: body, with the pin glyph. White, Yellow on hover. */
.bs-footer-store__name {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: #fff !important;
	font-size:      var(--bs-type-body-size);
	font-weight:    var(--bs-weight-bold);
	line-height:    var(--bs-leading-snug);
}
.bs-footer-store__name svg { color: var(--bs-color-accent); flex-shrink: 0; }
.bs-footer-store__name:hover { color: var(--bs-color-accent) !important; }

/* Store address / hours — role: body-sm, translucent white. */
.bs-footer-store__address,
.bs-footer-store__hours {
	color: rgba(255, 255, 255, .7);
	font-size:      var(--bs-type-body-sm-size);
	line-height:    var(--bs-type-body-sm-leading);
}
.bs-footer-store__phone {
	color: rgba(255, 255, 255, .9) !important;
	font-size:      var(--bs-type-body-sm-size);
	font-weight:    var(--bs-weight-semibold);
	line-height:    var(--bs-type-body-sm-leading);
}
.bs-footer-store__phone:hover { color: var(--bs-color-accent) !important; }

/* ---------- 4. Bottom strip — separated by white rule ----------------- */
.bs-footer__bottom {
	background: transparent;
	padding: 18px 0;
	border-top: 1px solid rgba(255, 255, 255, .12);
}
.bs-footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
}

/* Copyright — role: caption (translucent white, no tracking) */
.bs-footer-bottom__copy {
	margin: 0;
	color: rgba(255, 255, 255, .7);
	font-size:      var(--bs-text-xs);                 /* caption uses 10px, here we want 11px (xs) */
	font-weight:    var(--bs-type-body-sm-weight);
	line-height:    var(--bs-type-body-sm-leading);
}
.bs-footer-bottom__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
}

/* Legal menu item — role: caption */
.bs-footer-bottom__menu a {
	color: rgba(255, 255, 255, .7);
	font-size:      var(--bs-text-xs);
	font-weight:    var(--bs-type-body-sm-weight);
	line-height:    var(--bs-type-body-sm-leading);
}
.bs-footer-bottom__menu a:hover { color: #fff; }

/* ---------- Responsive ------------------------------------------------- */
@media (max-width: 1100px) {
	.bs-footer__cols {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}
	.bs-footer__col--brand,
	.bs-footer__col--contact {
		grid-column: 1 / -1;
	}
	.bs-footer__stores { grid-template-columns: 1fr 1fr; gap: 28px; }
	.bs-footer-news { grid-template-columns: 1fr; gap: 24px; }
}
/* Mobile + small tablet → footer fully stacked (no grid), each block in a
   clean single column. */
@media (max-width: 900px) {
	.bs-footer__main { padding: 48px 0 32px; }
	/* Keep a 2-column grid on mobile (client request): brand + contact span
	   the full width, Navigation + Liens utiles sit side by side as columns. */
	.bs-footer__cols {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 30px 24px;
	}
	.bs-footer__col { margin-bottom: 0; }
	.bs-footer__col--brand,
	.bs-footer__col--contact { grid-column: 1 / -1; }
	.bs-footer__stores {
		display: block;
	}
	.bs-footer-store { margin-bottom: 24px; }
	.bs-footer-store:last-child { margin-bottom: 0; }
	.bs-footer-bottom {
		flex-direction: column;
		align-items: flex-start;
	}
	.bs-footer-news__form { flex-direction: column; background: transparent; border: 0; padding: 0; }
	.bs-footer-news__form input[type="email"] {
		background: rgba(255, 255, 255, .08);
		border: 1px solid rgba(255, 255, 255, .2);
		border-radius: 999px;
	}
}

/* =========================================================================
   COMPANY / LEGAL INFO — incorporated into existing sections (no new band)
   ---------------------------------------------------------------------------
   Siège social + TVA / RCS → inside the "Nous contacter" column (stacked
   labelled blocks). Phone / e-mail are NOT repeated (already in that column).
   ========================================================================= */

/* Siège social block inside the contact column. */
.bs-footer__contact-hq { margin-top: 18px; }
.bs-footer__contact-hq-label {
	margin: 0 0 4px;
	color: rgba(255, 255, 255, .6);
	font-size:      var(--bs-type-eyebrow-size);
	font-weight:    var(--bs-weight-bold);
	letter-spacing: var(--bs-tracking-wide);
	text-transform: uppercase;
	line-height: var(--bs-leading-tight);
}
.bs-footer__contact-hq-addr {
	font-style: normal;
	color: rgba(255, 255, 255, .85);
	font-size:      var(--bs-type-body-sm-size);
	font-weight:    var(--bs-type-body-sm-weight);
	line-height:    var(--bs-type-body-sm-leading);
	letter-spacing: var(--bs-type-body-sm-tracking);
}

/* ECOMLUX agency signature — sits inline with the copyright. The logo is
   forced to pure white via `brightness(0) invert(1)` (same trick as the
   store-card logos) so it reads on the dark-blue footer regardless of the
   PNG's source colors. */
.bs-footer-bottom__signature {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
}
.bs-footer-bottom__sep {
	margin: 0 10px;
	color: rgba(255, 255, 255, .3);
}
.bs-footer-bottom__ecomlux {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}
.bs-footer-bottom__ecomlux img {
	height: 16px;
	width: auto;
	filter: brightness(0) invert(1);   /* pure white */
	opacity: .8;
	transition: opacity .2s ease;
}
.bs-footer-bottom__ecomlux:hover img { opacity: 1; }