/* ==========================================================================
   OUAZZANI FOOTER — "Clean teal commerce"
   Scoped strictly to .footer-template. Keeps the existing WHITE background
   and every link/image/text from Elementor template 16246 untouched.

   Design direction
     One signature: the trust-badge feature bar (Livraison / Garantie / Cash /
     Assistance) reads as a connected set of cards with gradient teal tiles.
     Everything else stays quiet and disciplined — minimal contact rows,
     understated nav links with a single teal marker, teal social circles.

   Elements are targeted by their exact Elementor element IDs so the contact
   lists and the nav lists never get the same treatment.

   Brand tokens (derived from the footer's own design)
     teal      #109DA9   identity / accent
     teal-2    #09B9C0   secondary teal
     ink       #2B3138   text
   ========================================================================== */

.footer-template {
	--ozf-icon: 24px;        /* contact glyph size */
	--ozf-social-icon: 30px; /* social glyph size */
	--ozf-teal: #109da9;
	--ozf-teal-2: #09b9c0;
	--ozf-teal-deep: #0b7a83;
	--ozf-ink: #2b3138;
	--ozf-muted: #737d86;
	--ozf-soft: rgba(16, 157, 169, 0.08);
	--ozf-soft-2: rgba(16, 157, 169, 0.13);
	--ozf-line: #e8ecef;
	--ozf-radius: 16px;
}

/* ==========================================================================
   1) SIGNATURE — TRUST-BADGE FEATURE BAR
   Redesigned as a calm retail reassurance strip: flat cards, one hairline
   border, a quiet teal icon chip (no gradient, no glow), tight two-line type.
   Hover is a single restrained move — the chip fills teal. No rotate/lift.
   The four icon-boxes are the only icon-box widgets in the footer.
   ========================================================================== */
.footer-template .elementor-widget-icon-box,
.footer-template .elementor-widget-icon-box .elementor-icon-box-wrapper {
	height: 100%;
}
.footer-template .elementor-widget-icon-box .elementor-icon-box-wrapper {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid var(--ozf-line);
	border-radius: 14px;
	box-shadow: none;
	transition: border-color .2s ease, background .2s ease;
}
.footer-template .elementor-widget-icon-box:hover .elementor-icon-box-wrapper {
	border-color: var(--ozf-teal);
	background: var(--ozf-soft);
}

/* quiet teal icon chip — flat tint, fills on hover */
.footer-template .elementor-icon-box-icon {
	margin: 0 !important;
	flex: 0 0 auto;
}
.footer-template .elementor-icon-box-icon .elementor-icon {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 48px !important;
	height: 48px !important;
	border-radius: 12px !important;
	border: 0 !important;
	background: var(--ozf-soft-2) !important;
	color: var(--ozf-teal) !important;
	box-shadow: none;
	transition: background .2s ease;
}
.footer-template .elementor-icon-box-icon .elementor-icon svg {
	width: 24px !important;
	height: 24px !important;
}
.footer-template .elementor-icon-box-icon .elementor-icon svg,
.footer-template .elementor-icon-box-icon .elementor-icon svg path {
	fill: var(--ozf-teal) !important;
	transition: fill .2s ease;
}
.footer-template .elementor-widget-icon-box:hover .elementor-icon {
	background: var(--ozf-teal) !important;
}
.footer-template .elementor-widget-icon-box:hover .elementor-icon svg,
.footer-template .elementor-widget-icon-box:hover .elementor-icon svg path {
	fill: #fff !important;
}

/* text — title fits on one line where it can; tight leading when it wraps */
.footer-template .elementor-icon-box-content { text-align: left; }
.footer-template .elementor-icon-box-title {
	margin-bottom: 2px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	color: var(--ozf-ink) !important;
}
.footer-template .elementor-icon-box-description {
	margin: 0 !important;
	color: var(--ozf-muted) !important;
	font-size: 12.5px !important;
	line-height: 1.45 !important;
}

/* ==========================================================================
   2) LOGO
   ========================================================================== */
.footer-template .elementor-widget-image img {
	transition: transform .3s ease;
}

/* ==========================================================================
   3) CONTACT LISTS  (address #63e58224, email+phones #e470dbd)
   Quiet rows: a rounded teal icon puck + text. No heavy fill bars.
   ========================================================================== */
.footer-template .elementor-element-63e58224 .elementor-icon-list-item,
.footer-template .elementor-element-e470dbd .elementor-icon-list-item {
	align-items: center;
	padding: 7px 0;
	margin: 0;
	transition: transform .2s ease;
}
.footer-template .elementor-element-63e58224 .elementor-icon-list-item:hover,
.footer-template .elementor-element-e470dbd .elementor-icon-list-item:hover {
	transform: translateX(3px);
}
.footer-template .elementor-element-63e58224,
.footer-template .elementor-element-e470dbd {
	/* Elementor sizes the list SVGs from this var; set it so width & height
	   scale together (overriding svg width directly loses to the flex layout). */
	--e-icon-list-icon-size: var(--ozf-icon) !important;
}
.footer-template .elementor-element-63e58224 .elementor-icon-list-icon,
.footer-template .elementor-element-e470dbd .elementor-icon-list-icon {
	display: inline-flex !important; align-items: center; justify-content: center;
	width: var(--ozf-icon) !important; height: var(--ozf-icon) !important;
	background: none;
	margin-right: 13px !important;
	padding: 0 !important;
	flex: 0 0 auto;
	line-height: 0;
}
/* Icons are normalised to a uniform 0 0 24 24 square grid (see functions.php),
   so a square render box keeps every glyph crisp and centered. */
.footer-template .elementor-element-63e58224 .elementor-icon-list-icon svg,
.footer-template .elementor-element-e470dbd .elementor-icon-list-icon svg {
	display: block;
	width: var(--ozf-icon) !important;
	height: var(--ozf-icon) !important;
	flex: 0 0 auto;      /* keep the glyph square; don't let flex squash width */
}
.footer-template .elementor-element-63e58224 .elementor-icon-list-text,
.footer-template .elementor-element-e470dbd .elementor-icon-list-text {
	color: var(--ozf-ink) !important;
	font-weight: 500;
}

/* ==========================================================================
   4) NAV LINK LISTS  (Menu #38564641, Marques #57339a48)
   Plain text links with a single teal marker that slides in on hover.
   No background bars.
   ========================================================================== */
.footer-template .elementor-element-38564641 .elementor-icon-list-item,
.footer-template .elementor-element-57339a48 .elementor-icon-list-item {
	padding: 0;
	margin-bottom: 6px;
	background: none;
	border: 0;
}
.footer-template .elementor-element-38564641 .elementor-icon-list-item a,
.footer-template .elementor-element-57339a48 .elementor-icon-list-item a {
	position: relative;
	display: inline-block;
	padding: 4px 0 4px 0;
	font-weight: 500;
	color: var(--ozf-ink) !important;
	transition: color .2s ease, padding-left .2s ease;
}
.footer-template .elementor-element-38564641 .elementor-icon-list-item a::before,
.footer-template .elementor-element-57339a48 .elementor-icon-list-item a::before {
	content: "";
	position: absolute; left: 0; top: 50%;
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--ozf-teal);
	transform: translateY(-50%) scale(0);
	transition: transform .22s ease;
}
.footer-template .elementor-element-38564641 .elementor-icon-list-item a:hover,
.footer-template .elementor-element-57339a48 .elementor-icon-list-item a:hover {
	color: var(--ozf-teal) !important;
	padding-left: 17px;
}
.footer-template .elementor-element-38564641 .elementor-icon-list-item a:hover::before,
.footer-template .elementor-element-57339a48 .elementor-icon-list-item a:hover::before {
	transform: translateY(-50%) scale(1);
}

/* ==========================================================================
   5) COLUMN HEADINGS  (Menu / Marques / S'abonnez — h6)
   A short teal underline that encodes "section start".
   ========================================================================== */
.footer-template .elementor-widget-heading h6.elementor-heading-title {
	position: relative;
	display: inline-block;
	padding-bottom: 12px;
	margin-bottom: 10px !important;
	font-weight: 800 !important;
}
.footer-template .elementor-widget-heading h6.elementor-heading-title::after {
	content: "";
	position: absolute; left: 0; bottom: 0;
	width: 42px; height: 3px; border-radius: 3px;
	background: linear-gradient(90deg, var(--ozf-teal), var(--ozf-teal-2));
}

/* ==========================================================================
   6) NEWSLETTER TEXT  (S'abonnez description #17bf93f)
   ========================================================================== */
.footer-template .elementor-element-17bf93f {
	padding-right: 8px;
}
.footer-template .elementor-widget-text-editor p {
	color: var(--ozf-muted) !important;
	line-height: 1.7;
	overflow-wrap: break-word;
}

/* ==========================================================================
   7) SOCIAL ICONS  (inline icon-list #c23b971)
   Teal-tinted circles that fill with the brand gradient on hover.
   ========================================================================== */
.footer-template .elementor-element-c23b971 {
	/* Drive the glyph size through Elementor's own var (see contact note). */
	--e-icon-list-icon-size: var(--ozf-social-icon) !important;
}
/* Elementor's widget container clips with overflow:hidden, cropping the
   social glyphs (notably the Instagram corner dot). Let them show. */
.footer-template .elementor-element-c23b971 .elementor-widget-container {
	overflow: visible !important;
}
.footer-template .elementor-element-c23b971 .elementor-icon-list-items {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0;
	padding: 0;
}
.footer-template .elementor-element-c23b971 .elementor-icon-list-item {
	margin: 0 !important;
	padding: 0 !important;
}
.footer-template .elementor-element-c23b971 .elementor-icon-list-item a {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: var(--ozf-social-icon); height: var(--ozf-social-icon);
	padding: 0 !important;
	background: none;
	transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
/* The empty label span still occupies layout width and pushes the glyph
   off-center — collapse it. */
.footer-template .elementor-element-c23b971 .elementor-icon-list-text {
	display: none !important;
}
.footer-template .elementor-element-c23b971 .elementor-icon-list-icon {
	margin: 0 !important;
	padding: 0 !important;
	line-height: 0;
	width: var(--ozf-social-icon) !important;
	height: var(--ozf-social-icon) !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
/* Icons are normalised to a uniform 0 0 24 24 square grid (see functions.php).
   color drives currentColor (Instagram uses stroke); path fill covers the
   solid glyphs (Facebook / TikTok). overflow:visible avoids edge clipping. */
.footer-template .elementor-element-c23b971 .elementor-icon-list-icon svg {
	display: block;
	overflow: visible;
	color: var(--ozf-teal);
	width: var(--ozf-social-icon) !important;
	height: var(--ozf-social-icon) !important;
	margin: 0 !important;   /* drop Elementor's right margin so it centers */
	flex: 0 0 auto;         /* don't let the flex layout squash the glyph width */
	transition: color .25s ease;
}
.footer-template .elementor-element-c23b971 .elementor-icon-list-icon svg path {
	fill: var(--ozf-teal) !important;
}
.footer-template .elementor-element-c23b971 .elementor-icon-list-item a:hover {
	transform: translateY(-3px);
}
.footer-template .elementor-element-c23b971 .elementor-icon-list-item a:hover svg {
	color: var(--ozf-teal-deep);
}
.footer-template .elementor-element-c23b971 .elementor-icon-list-item a:hover svg path {
	fill: var(--ozf-teal-deep) !important;
}

/* ==========================================================================
   8) COPYRIGHT BAR
   ========================================================================== */
.footer-template .elementor-widget-heading h2.elementor-heading-title {
	color: var(--ozf-muted) !important;
	font-weight: 600 !important;
	letter-spacing: .03em;
}

/* ==========================================================================
   9) Quality floor — visible focus + reduced motion
   ========================================================================== */
.footer-template a:focus-visible {
	outline: 2px solid var(--ozf-teal);
	outline-offset: 3px;
	border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
	.footer-template * { transition: none !important; }
}