/*
 Theme Name: Thème enfant RemSEO Flexo - 2026
 Description: Un thème enfant décliné du thème parent RemSEO Flexo. Le thème parent intègre la gestion des éléments vitrines + actualités + évènements + lieux d'accueil. Le thème enfant intègre du style CSS + code JS personnalisés et modifie certains gabarits du thème parent. L'ensemble est développé autour d'ACF + Elementor + Gutenberg
 Author: Rémi COLIN
 Template: remseowoocommerce
 Version: 1.0.0
*/

/*------------------------
 ##OVERWRITE Primary HTML
--------------------------*/
:root {
	--main-bg: #ffffff;
	--alt-bg: #ececec;
	--secondary-bg: #23262d; /* ~Black */
	--dark-txt-color: #575756; /* Dark grey */
	--hovered-dark-txt: #868683;
	--light-txt-color: #f5f5f5; /* White ~grey */
	--hovered-light-txt: #E0E0E0;
	--title-color: #575756; /* Dark grey */
	--featured-color: #A3195B; /* ARML Violet */
		--featured-color-50: rgba(163, 25, 91, 0.5);
		--featured-color-90: rgba(163, 25, 91, 0.9);
		--featured-color-darker: #7C1346;
		--featured-color-lighter: #DE2B82;
	--alt-featured-color: #D60B52; /* ARML Rose */
	--ctas-color: #2897D5; /*ARML Blue*/
	--ctas-lighter-color: #54ABDE; /*ARML Blue - Lighter*/
	--cf-submit-color: #95C11F /*ARML Green*/
}

@font-face {
  font-family:'Akrobat';
  src: url('./assets/fonts/Akrobat-Regular.otf') format('OpenType');
	font-display: swap;
}

@font-face {
  font-family:'Akrobat-bold';
  src: url('./assets/fonts/Akrobat-Bold.otf') format('OpenType');
	font-display: swap;
}

@font-face {
  font-family:'Akrobat-light';
  src: url('./assets/fonts/Akrobat-Light.otf') format('OpenType');
	font-display: swap;
}

@font-face {
  font-family:'Muli';
  src: url('./assets/fonts/Muli.ttf') format('OpenType');
	font-display: swap;
}

@font-face {
  font-family:'Muli-Bold';
  src: url('./assets/fonts/Muli-Bold.ttf') format('OpenType');
	font-display: swap;
}

@font-face {
  font-family:'Muli-extraBold';
  src: url('./assets/fonts/Muli-ExtraBold.ttf') format('OpenType');
	font-display: swap;
}

@font-face {
  font-family:'Muli-Black';
  src: url('./assets/fonts/Muli-Black.ttf') format('OpenType');
	font-display: swap;
}

body {font-weight: 400; font-family: 'Akrobat', sans-serif; font-size: 1.20rem;}
h1, h2, h3, h4, h5, h6 {font-family: 'Muli', sans-serif;}

/*---------------------------------
 ##Fixings
-----------------------------------*/
body > div.hiddendiv {display: none !important;}

div.elementor-element.elementor-widget-button.fw-cta div.elementor-button-wrapper > a.elementor-button-link {
  width: 100%;
}

div.elementor-element.elementor-widget-button.fw-cta div.elementor-button-wrapper > a.elementor-button-link span.elementor-button-text:after {
  content: '';
  position: absolute;
  width: 0;
  left: 50%;
  bottom: 34px;
  border-bottom: 1px solid;
  transition: 400ms all ease-in-out;
}
div.elementor-element.elementor-widget-button.fw-cta:hover div.elementor-button-wrapper > a.elementor-button-link span.elementor-button-text:after {
  width: 80%;
  left: 10%;
}

section#builder-content > div.elementor > div.elementor-element.e-con-full.e-flex.e-parent:first-child > div.elementor-element.e-con-full.e-flex.e-child > div.elementor-element.elementor-widget-heading > div.elementor-widget-container > .elementor-heading-title {text-align: center;}

/*---------------------------------
 ##Custom Elementor styles
-----------------------------------*/
/*Add some style for Elementor Tabs*/
.mlnm-onglets-elem .elementor-tab-title {background: initial; color: var(--light-txt-color); background-color: var(--alt-featured-color); transition: 400ms all ease-in-out;}
.mlnm-onglets-elem .elementor-tab-title svg > path {fill: var(--light-txt-color);}
.mlnm-onglets-elem .elementor-tab-title.elementor-active {background-color: var(--featured-color);}

/*Add some style for Elementor Collapse content
#Modify collapse title colors when active*/
.mlnm-collapse-elem .elementor-tab-title {background: initial; color: initial; transition: 400ms all ease-in-out;}
.mlnm-collapse-elem .elementor-tab-title.elementor-active {background-color: #b50b3c; color: #ffffff;}

/*Custom Carousel => Using images legend/description to make a content slider*/
div.elementor-element.custom-content-slider div.elementor-image-carousel.swiper-wrapper div.swiper-slide figure.swiper-slide-inner {
  display: flex;
  justify-content: center;
  align-items: center;
}

div.elementor-element.custom-content-slider div.elementor-image-carousel.swiper-wrapper div.swiper-slide figure.swiper-slide-inner > img.swiper-slide-image {
  margin-right: 36px;
}
div.elementor-element.custom-content-slider div.elementor-image-carousel.swiper-wrapper div.swiper-slide figure.swiper-slide-inner > figcaption.elementor-image-carousel-caption {
  text-align: justify;
  color: var(--dark-txt-color);
  font-size: 18px;
  max-width: 420px;
  max-height: 320px;
  overflow-y: auto;
}

@media all and (max-width: 768px) {
	div.elementor-element.custom-content-slider div.elementor-image-carousel.swiper-wrapper div.swiper-slide figure.swiper-slide-inner {
    flex-direction: column;
  }
  div.elementor-element.custom-content-slider div.elementor-image-carousel.swiper-wrapper div.swiper-slide figure.swiper-slide-inner > img.swiper-slide-image {
    margin-right: 0;
    max-height: 185px;
  }
  div.elementor-element.custom-content-slider div.elementor-image-carousel.swiper-wrapper div.swiper-slide figure.swiper-slide-inner > figcaption.elementor-image-carousel-caption {
    width: 75%;
    margin: 12px auto;
  }
}

/*---------------------------------
 ##PLUGIN | Ajax Search Pro
-----------------------------------*/
.asp_w_container {min-width: 340px !important; margin: 1rem auto;}
.theme-widget.shortcode-section .shortcode-content > .asp_w_container > .ajaxsearchpro.asp_main_container {max-width: 340px; margin: 0 auto;}

/*---------------------------------
 ##PLUGIN | Yoast SEO Breadcrumb
-----------------------------------*/
.breadcrumb .elementor-shortcode span {font-size: 0.9rem; color: var(--light-txt-color);}
.breadcrumb .elementor-shortcode span a {color: var(--light-txt-color);}
.breadcrumb .elementor-shortcode span i {font-size: 1.15rem; padding: 0px 6px;}

/*---------------------------------
 ##PLUGIN | Facebook social feed
-----------------------------------*/
/*Facebook feed container color branded*/
.cff-wrapper {background-color: var(--ctas-color);}

/*Fixing Facebook Feed Plugin - Intro hero image rendering */
.cff-no-consent .cff-header-img {display: none;}
.cff-visual-header .cff-header-hero img {height: 100%; object-fit: contain;}

/*Header image callback*/
.cff-visual-header .cff-header-inner-wrap {
	display: flex !important;
	min-height: 40vh;
	background-image: url("./assets/images/ml_nord_meusien-accueil-ente_feed_facebook.jpg");
	background-size: cover;
	background-position: center 45%;
	background-repeat: no-repeat;
}
/*Header logo callback*/
.cff-visual-header .cff-header-inner-wrap .cff-header-img {
	display: block !important;
	position: relative;
	background-image: url(./assets/images/logo-ml_nord_meusien-horizontal-fond_blanc-opti.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	width: 125px;
	height: 125px;
	top: 8px;
	left: 8px;
}
/*Remove links to FB + FB brand text*/
.cff-visual-header .cff-header-inner-wrap .cff-header-img > a {display: none !important;}
.cff-wrapper .cff-visual-header .cff-header-text {display: none !important;}

/*Ensure Facebook page title is visible + accessible*/
.cff-visual-header .cff-header-text h3 {color: var(--light-txt-color);}

/*Custom posts feed layout/design*/
.cff-item {min-height: 275px !important; background-color: #ececec !important; display: flex !important;flex-direction: column;align-content: center;align-items: flex-start;justify-content: flex-start;justify-items: center;}
.cff-item .cff-post-desc {font-size: 1rem !important;}

@media all and (max-width: 576px) {
	.cff-visual-header .cff-header-inner-wrap {flex-direction: column;}
	.cff-visual-header .cff-header-inner-wrap .cff-header-text {margin-top: 16px;}
}

/*---------------------------
 ## Forminator forms
-----------------------------*/
form.forminator-custom-form > div.forminator-row > div.forminator-field-address.mlnm-forms-address-fields {
  display: flex;
}
form.forminator-custom-form > div.forminator-row > div.forminator-field-address.mlnm-forms-address-fields > div.forminator-row {
  width: 30%;
  margin: 0 1.5%;
}

/*---------------------------
 ## SVG Map ML Nord-Meusien
-----------------------------*/
/*Map default proportions*/
.svg-container {height: 90vh; overflow-y: auto;}
svg#svg-animated-map {height: 100%; width: auto;}
svg#svg-animated-map .cls-1,
svg#svg-animated-map .cls-2,
svg#svg-animated-map .cls-3 {stroke-width: 0px;}

/*Map default colors*/
svg#svg-animated-map .cls-1 {fill: #fff;}
svg#svg-animated-map .cls-2 {fill: #361547;}
svg#svg-animated-map .cls-3 {fill: #A3195B;}

/*Disable path colors*/
svg#svg-animated-map a.disabled-link {cursor: default;}
/* svg#svg-animated-map a.disabled-link .cls-1 {fill: var(--dark-txt-color);}
svg#svg-animated-map a.disabled-link .cls-3 {fill: var(--alt-bg);} */

/*Paths hover animations*/
svg#svg-animated-map g.single:not(.disabled) .cls-3 {transition: 400ms all ease-in-out;}
svg#svg-animated-map g.single:not(.disabled):hover .cls-3 {fill: var(--alt-featured-color);}

/*SVG image mask*/
svg#remseo-img-mask rect.form1 {
	fill: rgba(0,0,0,1);
	transform: rotateZ(-40deg) translateY(40px);
}
svg#remseo-img-mask rect.form2 {
	fill: rgba(0,0,0,1);
	transform: rotateZ(-40deg) translateX(60px) translateY(105px);
}
svg#remseo-img-mask circle.circle1 {
	fill: rgba(0,0,0,1);
	transform: rotateZ(-40deg) translateX(-10px) translateY(88px);
}

/*---------------------
  ## Header
----------------------*/
/*FIX submenu related to featured nav*/
nav.site-navigation div.main-menu li > a {position: relative;}
nav.site-navigation div.main-menu li.menu-item.revert-submenu > ul.sub-menu {margin: 0 0 0 -60px; padding-top: 24px;}
nav.site-navigation div.main-menu li.menu-item.featured-nav {padding: 8px 32px;}
nav.site-navigation div.main-menu li.featured-nav.menu-item-has-children::after {right: 10px;}
nav.site-navigation div.main-menu ul.main-nav > li.featured-nav.menu-item-has-children > ul.sub-menu::before {
  border-left: none;
  border-bottom: none;
}

/*---------------------
  ## Footer
----------------------*/
.main-footer div > img.footer-logo {height: 185px; width: auto; max-width: initial;}