/*
 Theme Name: VoxMilo Vitrine - 2025
 Description: Un thème enfant décliné du thème parent RemSEO Flexo. Le thème enfant intègre des modifications des ressources CSS et Javascript. Certains gabarits PHP sont également modifiés. Le thème intègre une gestion des utilisateurs Front-End et le partage de ressources (=articles) pour les utilisateurs Front-End validés et connectés.
 Author: Rémi COLIN
 Template: remseowoocommerce
 Version: 1.0.0
*/

/*---------------------
    Primary HTML
----------------------*/
:root {
	--main-bg: #ffffff;
	--alt-bg: #ececec;
	--secondary-bg: #23262d; /* Black ~lighter */
	--dark-txt-color: #131313; /* Black */
	--hovered-dark-txt: #868683;
	--light-txt-color: #f5f5f5; /* White ~grey */
	--hovered-light-txt: #E0E0E0;
	--title-color: #000000; /* Black */
	--featured-color: #A3195B; /* Bordeaux (VoxMilo) */
		--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: #000000; /* Black (full) */
	--ctas-color: #A3195B; /* Magenta/Violet (UNML) */
	--ctas-darker-color: #A3195B; /* Magenta/Violet (UNML) */
	--cf-submit-color: #95C11F; /* Green (UNML) */
}

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

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

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

body {
	font-family: 'Akrobat', sans-serif;
}

/* p {color: var(--dark-txt-color);} */

h1 {font-family: 'Muli-Black', sans-serif;}

h2,
h3,
h4,
h5,
h6 {
	font-family: 'Muli-extraBold', sans-serif;
}

[type="checkbox"] + span.forminator-checkbox-box {padding-left: 0 !important;}
div.forminator-field-consent > div.forminator-field div.forminator-consent__label {
	text-align: left;
	color: var(--dark-txt-color);
}
[type="checkbox"] + span.forminator-checkbox-box {padding-left: 0 !important;}
div.forminator-field-consent > div.forminator-field > label {margin-bottom: 16px; font-size: 1rem;}
div.forminator-field-consent > div.forminator-field div.forminator-consent__label > p:first-child {
	margin-top: 0;
}

.material-cta {text-decoration: none !important;}
.material-cta.alt-cta {
	background-color: var(--alt-featured-color);
	background-image: none;
	color: var(--light-txt-color);
	transition: 400ms ease-in all;
}

/*---------------------
  HOTFIX
----------------------*/
body.admin-bar .close-sidebar-profile.opened {top: 36px;}
body.admin-bar .user-datas-sidebar .material-cta:not(.loggout-btn) {margin-top: 36px !important;}
body.admin-bar .user-datas-sidebar .loggout-btn {margin: 48px auto 12px 6px;}
.user-datas-sidebar-content a.profile-data-modif-cta {transition: 400ms all ease-in-out;}
.user-datas-sidebar-content a.profile-data-modif-cta:hover {background-color: rgba(255, 255, 255, 1);}

/*HOTFIX 08/09/2025 | Add an alternative featured nav item style*/
.site-navigation .menu-item.featured-nav-alt {background-color: var(--featured-color); margin-right: 8px; padding: 8px 24px; border: 2px solid var(--featured-color); border-radius: 12px; z-index: 99999; transition: 400ms all ease-in-out;}
.site-navigation .menu-item.featured-nav-alt a {color: var(--light-txt-color); transition: 400ms all ease-in-out;}
.site-navigation .menu-item.featured-nav-alt:hover {background-color: var(--alt-featured-color); border-radius: 24px;}

.site-navigation .social-nav {
	margin-left: 24px;
}

/*
*HOTFIX 15/09/2025
* Convert classic social navigation into floating one on medium/small screens
* to FIX overlap items (specifically on showcase version)
*/
@media all and (max-width: 1280px) and (min-width: 1024px) {
	.main-menu .social-nav.classic {
		position: fixed;
		width: max-content;
		height: max-content;
		right: 0;
		top: 60%;
		z-index: 2;
		flex-direction: column;
	}
}

/*HOTFIX 17/09/2025 | Centering YT thumbs on 1024px and less*/
.voxmilo-yt-container > a.voxmilo-yt-trigger {display: flex; justify-content: center;}
.modal#voxmilo-yt-modal {padding: 12px 24px;}

/*HOTFIX 26/03/2026 | Make complianz accept marketing cookie link visible*/
a.cmplz-show-banner {color: var(--featured-color) !important;}

/*---------------------
  VoxMilo Youtube
----------------------*/
#voxmilo-yt-modal h3.dyn-title {
	color: var(--title-color);
}

#voxmilo-yt-modal p.nocookie-msg {
	display: none;
	color: var(--dark-txt-color);
	text-align: center;
}
#voxmilo-yt-modal p.nocookie-msg.show-msg {
	display: block;
}

.voxmilo-yt-container .voxmilo-yt-trigger {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}
.voxmilo-vid-icon {
	position: absolute;
	top: calc(50% - 2rem);
	left: calc(50% - 2rem);
	font-size: 4rem;
	color: #FF0000;
	z-index: 1;
}
.voxmilo-vid-icon:after {
	content: '';
	position: absolute;
	width: 2rem;
	height: 2rem;
	top: 25%;
	left: 25%;
	background: #ffffff;
	z-index: -1;
}

/*----------------------------------
  Complianz (cookie consent plugin)
------------------------------------*/
.elementor-shortcode .cmplz-blocked-content-container.forminator-g-recaptcha {
	height: 240px !important;
	background-image: none !important;
}

.elementor-shortcode .cmplz-blocked-content-container {
	box-shadow: initial;
}

.elementor-shortcode .cmplz-blocked-content-container.forminator-g-recaptcha .cmplz-blocked-content-notice {

}

/*------------------------------------
  Contact Form (ALL) - Cookie Consent
--------------------------------------*/
form.voxmilo-disable-form {padding: 12px 24px !important;}
form.voxmilo-disable-form:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 5;
	background-color: rgba(0, 0, 0, 0.5);
}
form.voxmilo-disable-form .grecaptcha-disable-msg {z-index: 10; padding: 12px 24px; background-color: rgba(0, 0, 0, 0.25);}
form.voxmilo-disable-form .grecaptcha-disable-msg > p {color: var(--light-txt-color);}
form.voxmilo-disable-form .grecaptcha-disable-msg > a.material-cta {color: var(--light-txt-color); cursor: pointer;}

/*---------------------
  Navigation
----------------------*/
.header-top-line .top-headline {text-align: center; font-style: initial;}
.header-top-line ul.call-to-actions {justify-content: center;}
.header-top-line a.site-branding {display: flex;}
.header-top-line ul.call-to-actions li.item {border: 1px solid var(--title-color);}

@media all and (max-width: 980px) {
	.header-top-line a.site-branding > img.custom-logo:nth-child(2n+0) {margin-left: -45px;}
}

@media all and (max-width: 576px) {
	.header-top-line a.site-branding > img.custom-logo:nth-child(2n+0) {margin-left: initial;}
}

/*--------------------------
  ACF Sliders (parent theme)
----------------------------*/
/*ACF slider controls*/
.acf-block-slider > button.slick-prev,
.acf-block-slider > button.slick-next {
	font-size: initial;
	color: transparent;
	background-color: transparent;
	padding: initial;
	border-radius: initial;
}

/*Featured post(s) slider in home (shortcode)*/
.feat-posts-container .acf-block-slider > button.slick-prev,
.feat-posts-container .acf-block-slider > button.slick-next {
	top: 40%;
}

.voxmilo-feat-posts .elementor-shortcode .feat-posts-container {height: 60vh;}

.voxmilo-feat-posts,
.voxmilo-feat-posts .elementor-shortcode,
.voxmilo-feat-posts .elementor-shortcode .feat-posts-container .acf-block-slider,
.voxmilo-feat-posts .elementor-shortcode .feat-posts-container .acf-block-slider .slick-list,
.voxmilo-feat-posts .elementor-shortcode .feat-posts-container .acf-block-slider .slick-track {height: 100%; width: 100% !important;}

.feat-posts-container .acf-block-slider .panel-post-featured .post-thumbnail,
.feat-posts-container .acf-block-slider .panel-post-featured .post-thumbnail > figure > img {
	height: calc(60vh - 105px);
}
.feat-posts-container .acf-block-slider .panel-post-featured .post-thumbnail > figure {
	max-height: initial;
}

.voxmilo-main-actu {}


/*---------------------
  Elementor
----------------------*/
/*Slider logos correction*/
.voxmilo-elementor-logos .swiper-slide > figure > img.swiper-slide-image {max-height: 175px;}
/*Plain text links style on a specific panel*/
.featured-links-panel > .elementor-element > .elementor-widget-container ul > li {margin: 12px 0;}
.featured-links-panel > .elementor-element > .elementor-widget-container ul > li > a {
	display: inline-block;
	background: rgba(255, 255, 255, 0.35);
	padding: 0 6px;
	border-radius: 8px;
}
/*Video widget*/
.elementor-widget-video.img-disabled .elementor-custom-embed-image-overlay img {opacity: 0}
.elementor-element > .elementor-widget-shortcode > .elementor-widget-container > .elementor-shortcode > .theme-widget {
	padding: 0;
	margin: 0;
}
/*Testimonial widget*/
.elementor-testimonial-wrapper .elementor-testimonial-content {font-size: 1rem; font-style: italic;}
.elementor-counter .elementor-counter-number {
	background: var(--alt-featured-color);
	color: var(--light-txt-color);
	padding: 6px 12px;
	border-radius: 12px;
}
/*Elementor modal management (materialize.css)*/
.elementor > .elementor-element.e-con.e-parent .e-con.e-child.modal {
	display: none;
	width: 55%;
	padding: 0;
	margin: 0 auto;
	overflow-y: auto;
	border-radius: 2px;
}
/*Materialize elementor Tabs*/
.mlnm-onglets-elem .elementor-tab-title {background-color: var(--alt-bg); color: var(--dark-txt-color);}
.mlnm-onglets-elem .elementor-tab-title svg > path {fill: var(--alt-featured-color); transition: 400ms all ease-in-out;}
.mlnm-onglets-elem .elementor-tab-title.elementor-active {color: var(--light-txt-color);}
.mlnm-onglets-elem .elementor-tab-title.elementor-active svg > path {fill: var(--light-txt-color); transition: 400ms all ease-in-out;}

/*Carrousel - Stylink <a> in legend*/
div.elementor-widget-image-carousel div.elementor-image-carousel-wrapper figcaption.elementor-image-carousel-caption {
	margin-bottom: 12px;
}
div.elementor-widget-image-carousel div.elementor-image-carousel-wrapper figcaption.elementor-image-carousel-caption > a.elementor-link-in-legend {
	background: var(--featured-color);
	color: var(--light-txt-color);
	padding: 4px 8px;
	border-radius: 8px;
}

/*Inline <a> links on dark backgrounds*/
div.styling-inline-links > div.elementor-widget-container a {
	color: var(--light-txt-color);
}

/*---------------------
  Footer
----------------------*/