/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Canvas: Cleaner
	Version: 1.0
-----------------------------------------------------------------*/

:root {
	--cnvs-themecolor: #335EEE;
	--cnvs-themecolor-rgb: 51,94,238;
	--cnvs-secondcolor: #EFE33F;

	--cnvs-body-font: 'Heebo', sans-serif;;
	--cnvs-primary-font: var(--cnvs-body-font);
	--cnvs-secondary-font: var(--cnvs-body-font);
}

#header {
	--cnvs-header-height: 80px;
	--cnvs-primary-menu-font-size: 0.825rem;
	--cnvs-primary-menu-ls: 1px;
	--cnvs-primary-menu-tt: uppercase;
	--cnvs-primary-menu-font-weight: 700;
}

#top-bar {
	--cnvs-topbar-font-transform: uppercase;
	--cnvs-topbar-font-size: 0.75rem;
}

.second-color { color: var(--cnvs-secondcolor) !important; }
.second-bg-color { background-color: var(--cnvs-secondcolor) !important; }

/* Topbar
-----------------------------------------------------------------*/
.top-links li a img {
	position: relative;
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 20px;
	top: -1px;
	margin-right: 8px;
	border: 1px solid rgba(255, 255, 255, 0.7);
}

/* Header
-----------------------------------------------------------------*/
#primary-menu ul li > a {
	text-transform: none;
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0;
}

.svg-separator {
	position: absolute;
	width: 100%;
	height: 20px;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: center;
	flex-direction: column;
	z-index: 1;
}

.svg-separator.top {
	top: -1px;
	bottom: auto;
}


.form-process {
	top: 0;
	left: 0;
}

.hero-diagonal { position: relative; }

.hero-diagonal::before {
	content: '';
	position: absolute;
	top: -50px;
	left: 0;
	width: 100%;
	height: calc(100% + 100px);
	-webkit-clip-path: polygon(0 9%, 100% 0%, 100% 91%, 0 100%);
	clip-path: polygon(0 9%, 100% 0%, 100% 91%, 0 100%);
	background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.4)), url('../images/lsmi/IMGL3810.JPG');
	background-position: center center;
	background-size: cover;
}

.feature-box.fbox-plain:not(.fbox-small) .fbox-icon img { width: 50px; }

.negetive-margin { margin-top: -230px; }

#cleaner-carousel .owl-item {
	opacity: 0;
	transform: translateY(20px);
	transition: all .4s .1s ease-out;
}

#cleaner-carousel .owl-item.active {
	opacity: 1;
	transform: translateY(0);
}

.total-price {
	font-size: 54px;
	letter-spacing: 0;
}

.btn-check:checked + .btn-outline-secondary,
.btn-check:active +
.btn-outline-secondary,
.btn-outline-secondary:active,
.btn-outline-secondary.active,
.btn-outline-secondary.dropdown-toggle.show {
	background-color: var(--cnvs-themecolor);
	border-color: var(--cnvs-themecolor);
}

.toggle .toggleta i {
	color: var(--cnvs-themecolor);
}

.section:not(.nobg) .fancy-title h4 { background-color: #F9F9F9; }

.testimonials-carousel:before {
	content: "\F6B0";
	font-family: 'bootstrap-icons';
	position: absolute;
	top: -8px;
	left: 50px;
	font-size: 100px;
	color: rgba(51,94,238, 0.02);
	color: rgba(var(--cnvs-themecolor-rgb), 0.08);
}

.header-misc .button {
	background-color: var(--cnvs-secondcolor);
	margin: 0;
	padding: 29px 16px;
}

/* Responsive Device more than 992px (.device-md >)
-----------------------------------------------------------------*/
@media (min-width: 992px) {
	.header-misc .button {
		padding: 29px 34px;
	}

	.slider-title h1 {
		font-size: 40px;
		line-height: 1.3;
		font-weight: 700;
	}

	.feature-box .fbox-img img {
		z-index: 3;
		position: relative;
		background-color: #FFF;
	}

	[class^=col-]:not(:last-child) .feature-box .fbox-img:before {
		content: '';
    	position: absolute;
		top: 50%;
		left: 100%;
		width: 150%;
    	border-top: 1px dashed var(--cnvs-themecolor);
		transform: translateY(-50%);
		z-index: 0;
	}

	#oc-testi.owl-carousel .owl-dots {
		position: absolute;
	    bottom: 45px;
	    right: 40px;
	}

	#oc-testi.owl-carousel .owl-dots .owl-dot { margin-top: 0; }

}


/* Beige color updated to #ebe2d6 */
#banniereServices {
	background-color: var(--lsmi-beige);
}

.beigeBackground {
	background-color: var(--lsmi-beige) !important;
}

.brown {
	background-color: rgb(57, 42, 21) !important;
}

/* Apply Sanchez as the site default via body (no !important so icon fonts can override) */
body {
	font-family: var(--cnvs-body-font);
}

/* Side-header submenu modal (appear to the right of the hovered menu item) */
.is-expanded-menu.side-header .primary-menu .menu-item {
	position: relative; /* so the sub-menu can be positioned to the right of each item */
}

.is-expanded-menu.side-header .primary-menu .menu-item .sub-menu-container {
	position: absolute;
	left: 100%;
	top: 0;
	min-width: 220px;
	background: var(--cnvs-contrast-0, #fff);
	padding: 8px 12px;
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.12);
	display: none; /* hidden by default, shown on hover via .menu-item-hover or :hover */
	opacity: 0;
	transform: translateX(8px) translateY(0);
	transition: opacity 180ms ease, transform 180ms ease;
	z-index: 9999;
}

.is-expanded-menu.side-header .primary-menu .menu-item.menu-item-hover > .sub-menu-container,
.is-expanded-menu.side-header .primary-menu .menu-item:hover > .sub-menu-container {
	display: block;
	opacity: 1;
	transform: translateX(0) translateY(0);
}

/* sub items: remove default list style and adjust spacing */
.is-expanded-menu.side-header .primary-menu .sub-menu-container .menu-container {
	display: block;
	padding: 0;
	margin: 0;
	list-style: none;
}
.is-expanded-menu.side-header .primary-menu .sub-menu-container .menu-item > .menu-link > div { padding: 6px 8px; white-space: nowrap; }

/* prevent content clipping (header wrap should allow visible overflow) */
.is-expanded-menu.side-header #header-wrap { overflow: visible; }

/* Ensure header and sub-menu are above the slider/hero image (apply generally for side-header)
   We raise the z-index high enough to override slider layers (e.g. RevSlider z-index +2000)
   and force overflow visible on the header/its wrap so the submenu can escape the header element. */
.side-header #header { overflow: visible !important; z-index: 3000 !important; }
.side-header #header-wrap { overflow: visible !important; z-index: 3000 !important; }
.side-header .primary-menu .sub-menu-container { z-index: 3010 !important; }

/* Menu hover and active styles */
:root {
	/* Beige color variables */
	--lsmi-beige: #ebe2d6;
	--lsmi-beige-rgb: 235, 226, 214;
	--lsmi-menu-hover-bg: rgba(var(--lsmi-beige-rgb), 0.24); /* hover uses rgba of beige */
	--lsmi-menu-active-underline: rgba(57,42,21,0.9);
}

/* General menu link hover */
.primary-menu .menu-link,
.primary-menu .menu-link > div {
	transition: background 180ms ease, color 180ms ease, transform 120ms ease;
}

.primary-menu .menu-item:hover > .menu-link,
.primary-menu .menu-link:hover,
.primary-menu .menu-item:focus > .menu-link,
.primary-menu .menu-link:focus,
.side-header .primary-menu .menu-item:hover > .menu-link,
.side-header .primary-menu .menu-link:hover,
.side-header .primary-menu .menu-item:focus > .menu-link,
.side-header .primary-menu .menu-link:focus {
	background: var(--lsmi-menu-hover-bg) !important;
	color: var(--cnvs-contrast-900) !important;
	padding-left: 8px; padding-right: 8px; border-radius: 6px; /* make the hover visible */
}

/* Ensure inner DIV doesn't get its own background—use the anchor background for hover so color is unified */
.primary-menu .menu-link > div,
.side-header .primary-menu .menu-link > div {
	background: transparent !important; /* inner div is transparent so the parent anchor bg shows through */
}

/* For side-header, add a left indicator on hover and active */
.side-header .primary-menu .menu-link:hover,
.side-header .primary-menu .menu-item:hover > .menu-link {
	border-left: 3px solid var(--lsmi-menu-active-underline) !important;
	padding-left: 12px !important;
}

/* Sub-menu items should also have the hover background */
.sub-menu-container .menu-link:hover,
.sub-menu-container .menu-item:hover > .menu-link,
.side-header .sub-menu-container .menu-link:hover,
.side-header .sub-menu-container .menu-item:hover > .menu-link {
	background: var(--lsmi-menu-hover-bg) !important;
	padding-left: 6px; padding-right: 6px; border-radius: 6px;
}

/* Active / Current menu item: bold + underline */
.primary-menu .menu-item.current > .menu-link > div,
.primary-menu .menu-link.current > div,
.primary-menu .menu-item.current > .menu-link,
.primary-menu .menu-link.current,
.side-header .primary-menu .menu-item.current > .menu-link > div,
.side-header .primary-menu .menu-link.current > div,
.side-header .primary-menu .menu-item.current > .menu-link,
.side-header .primary-menu .menu-link.current {
	font-weight: 700 !important;
	color: #000 !important; /* force black for active menu links */
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	text-decoration-color: var(--lsmi-menu-active-underline) !important;
	text-underline-offset: 4px !important;
}

.side-header .primary-menu .menu-item.current > .menu-link,
.side-header .primary-menu .menu-link.current {
	border-left: 3px solid var(--lsmi-menu-active-underline) !important;
	padding-left: 12px !important;
}

/* Ensure underline doesn't collapse with other transforms */
.primary-menu .menu-item.current > .menu-link > div,
.primary-menu .menu-link.current > div { display: inline-block; }

.sanchez-regular {
  font-family: "Sanchez", serif !important;
  font-weight: 400;
  font-style: normal;
}

.sanchez-regular-italic {
  font-family: "Sanchez", serif;
  font-weight: 400;
  font-style: italic;
}

/* Same rules as above but without requiring the is-expanded-menu class
   so the submenu appears correctly even if .is-expanded-menu is not present
   (e.g., desktop pages where the theme doesn't toggle that class). */
.side-header .primary-menu .menu-item {
	position: relative;
}
.side-header .primary-menu .menu-item .sub-menu-container {
	position: absolute;
	left: calc(100% + 8px);
	top: 0;
	min-width: 220px;
	background: var(--cnvs-contrast-0, #fff);
	padding: 8px 12px;
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.12);
	display: none;
	opacity: 0;
	transform: translateX(8px) translateY(0);
	transition: opacity 180ms ease, transform 180ms ease;
	pointer-events: auto;
}
.side-header .primary-menu .menu-item.menu-item-hover > .sub-menu-container,
.side-header .primary-menu .menu-item:hover > .sub-menu-container {
	display: block;
	opacity: 1;
	transform: translateX(0) translateY(0);
}

/* Accessible keyboard focus: show submenu when focused inside menu item */
.side-header .primary-menu .menu-item:focus-within > .sub-menu-container {
	display: block;
	opacity: 1;
	transform: translateX(0) translateY(0);
	pointer-events: auto;
}

/* Ensure the inner div doesn't show its own bg when item is current */
.primary-menu .menu-item.current > .menu-link > div,
.primary-menu .menu-link.current > div,
.side-header .primary-menu .menu-item.current > .menu-link > div,
.side-header .primary-menu .menu-link.current > div {
	background: transparent !important;
}

/* TARIIFS PAGE: Pricing card styling overrides */

/* Scoped override only for the '#section-price' section on tarifs.html to avoid affecting other pages */
#section-price .pricing-box.text-center {
	border-radius: 1.5rem 1.5rem 0 0 !important; /* round top corners only */
	background-color: #ffffff !important;
	overflow: hidden;
	border: 1px solid rgba(0,0,0,0.06) !important;
}

#section-price .pricing-box.text-center .pricing-title.text-uppercase.title-sm {
	background-color: #000 !important;
	border-top-left-radius: 1.5rem !important;
	border-top-right-radius: 1.5rem !important;
	padding-top: 1rem !important; /* increase top padding */
	padding-bottom: 1rem !important; /* increase bottom padding */
}

#section-price .pricing-box.text-center .pricing-title.text-uppercase.title-sm h3,
#section-price .pricing-box.text-center .pricing-title.text-uppercase.title-sm .h3 {
	color: #fff !important;
}

/* align list items to the left and increase bi-check icon size inside pricing-features */
#section-price .pricing-features.text-align-left ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#section-price .pricing-features.text-align-left li {
	display: flex;
	align-items: center;
	gap: 0.5rem; /* spacing between icon and text */
	text-align: left; /* ensure left alignment */
	padding-left: 0; /* reset any inherited padding */
}

#section-price .pricing-features.text-align-left {
	padding: 40px 25px !important; /* vertical 40px, horizontal 25px */
}

#section-price .pricing-features.text-align-left li i.bi-check,
#section-price .pricing-features.text-align-left li i.bi-check-circle-fill,
#section-price .pricing-features.text-align-left li i.bi-plus-circle-fill {
	font-size: 1.25rem !important; /* larger icon size */
	line-height: 1;
	min-width: 1.25rem; /* keep layout stable */
}

/* reduce the padding for the pricing price area */
#section-price .pricing-box.text-center .pricing-price {
	padding: 6px 0 !important; /* tighten the price spacing */
}

/* ALSO update the earlier pricing block in the tarifs page: .section.bg-contrast-200 */
.section.bg-contrast-200 .pricing-box.text-center {
	border-radius: 1.5rem 1.5rem 0 0 !important; /* round top corners only */
	background-color: #ffffff !important;
	overflow: hidden;
	border: 1px solid rgba(0,0,0,0.06) !important;
}

.section.bg-contrast-200 .pricing-box.text-center .pricing-title.text-uppercase.title-sm {
	background: #000 !important; /* stronger specificity */
	border-top-left-radius: 1.5rem !important;
	border-top-right-radius: 1.5rem !important;
	padding-top: 1rem !important;
	padding-bottom: 1rem !important;
	border-bottom: 0 !important; /* remove the thin border under the title so it's fully black */
}

.section.bg-contrast-200 .pricing-box.text-center .pricing-title.text-uppercase.title-sm h3,
.section.bg-contrast-200 .pricing-box.text-center .pricing-title.text-uppercase.title-sm .h3 {
	color: #fff !important;
}

/* align list items to the left and increase bi-check icon size inside the first pricing-features block */
.section.bg-contrast-200 .pricing-features.text-align-left ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.section.bg-contrast-200 .pricing-features.text-align-left li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	text-align: left;
	padding-left: 0;
}

.section.bg-contrast-200 .pricing-features.text-align-left {
	padding: 40px 25px !important; /* vertical 40px, horizontal 25px */
}

.section.bg-contrast-200 .pricing-features.text-align-left ul { width: 100% !important; }
.section.bg-contrast-200 .pricing-features.text-align-left li { justify-content: flex-start; }

.section.bg-contrast-200 .pricing-features.text-align-left li i.bi-check,
.section.bg-contrast-200 .pricing-features.text-align-left li i.bi-check-circle-fill,
.section.bg-contrast-200 .pricing-features.text-align-left li i.bi-plus-circle-fill {
	font-size: 1.4rem !important;
	line-height: 1;
	min-width: 1.25rem;
}

.section.bg-contrast-200 .pricing-box.text-center .pricing-price {
	padding: 6px 0 !important;
}

/* Specific style for tarifs2 page: add margin-top to price unit (visual alignment) */
#section-tarifs2 .pricing-price .price-unit {
	display: block; /* ensure margin-top is applied */
	margin: 15px 0 !important;
}

/* Ensure hero-diagonal in tarifs2 uses the requested image via pseudo-element ::before */
#hero-tarifs2.hero-diagonal::before {
	background-image: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.45)), url('../images/lsmi/IMGL3810.JPG') !important;
	background-position: center center !important;
	background-size: cover !important;
}

/* Mes missions (accueil-telephonique) gutters and spacing cleanup */
#missions-row {
	/* support in case row uses CSS grid/flex that respects gap */
	gap: 1.5rem !important; /* same as g-4 */
	display: flex !important;
	flex-wrap: wrap !important;
	margin-left: -0.75rem !important; /* columns use .col padding, offset negative by half-gutter */
	margin-right: -0.75rem !important;
}

#missions-row > [class*="col-"] {
	padding-left: 0.75rem !important; /* half the 1.5rem gap */
	padding-right: 0.75rem !important;
	margin-bottom: 0.75rem !important; /* add vertical spacing for smaller screens */
}

#missions-row .feature-box { height: 100%; }

.whiteTitle {
	text-shadow: 0 5px 10px black;
  	text-transform: uppercase;
}

.mb-1 {
	margin-bottom: 2rem !important;
}

.mb-2 {
	margin-bottom: 5rem !important;
}