/* MG Studio MSS : feuille de style du site (ex « CSS additionnel » de WordPress).
 * Chargée par le plugin mg-studio-mss-salses-corbieres, sur tout le front.
 * Ordre des règles conservé à l'identique de l'original : la cascade ne change pas.
 * Les URLs d'images sont relatives à la racine du site (valables en local comme en production). */

/* CLASSES ATOMIQUES */

body {
	color: #707070;
}

.container-flex {
	display: flex;
}

.flex-col {
	flex-direction: column;
}

.jc-space-between {
	justify-content: space-between;
}

.h2-underline-small h2:after {
	content: '';
	display: block;
	width: 6%;
	height: 2px;
	margin-top: 10px;
}

.h2-underline-small h1:after {
	content: '';
	display: block;
	width: 6%;
	height: 4px;
	margin-top: 10px;
}

.h2-underline-small-blue h2:after {
	background-color: #465f9d;
}

.h2-underline-small-green h2:after {
	background-color: #99C00F;
}

.h2-underline-small-violet h2:after {
	background-color: #D9358A;
}

.h2-underline-small-blue h1:after {
	background-color: #465f9d;
}

.h2-underline-small-green h1:after {
	background-color: #99C00F;
}

.h2-underline-small-violet h1:after {
	background-color: #D9358A;
}

.white-shade-sides::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 30%;
	background: linear-gradient(to bottom, white 0%, rgba(255, 255, 255, 0.76) 20%, transparent 70%, transparent 87%, transparent 100%) !important;
}

.white-shade-sides::after {
	content: "";
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 30%;
	background: linear-gradient(to top, white 0%, rgba(255, 255, 255, 0.76) 20%, transparent 70%, transparent 87%, transparent 100%) !important;
}

.white-shade-sides-big::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 65%;
	background: linear-gradient(to bottom, white 0%, rgba(255, 255, 255, 0.76) 30%, transparent 70%, transparent 87%, transparent 100%) !important;
}

.white-shade-sides-big::after {
	content: "";
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 65%;
	background: linear-gradient(to top, white 0%, rgba(255, 255, 255, 0.76) 30%, transparent 70%, transparent 87%, transparent 100%) !important;
}

.backdrop-bg {
	backdrop-filter: blur(25px) brightness(1.25);
}

.title-big {
	font-size: clamp(48px, 3dvw, 58px);
	font-weight: 600;
	margin-right: 10px;
}

.title-medium {
	font-size: clamp(30px, 2dvw, 38px);
	font-weight: 500;
}

.letter-color-b {
	color: #465f9d;
}

.letter-color-o {
	color: #e4794a;
}

.letter-color-g {
	color: #99C00F;
}

/* HEADER */

header {
	position: relative;
	z-index: 100;
}

/* .home-sect-1 h1 {
	font-size: clamp(30px, 2dvw, 38px) !important;
} */

/* .home-sect-1 h1.small-title-h1 {
	font-size: clamp(20px, 1.7dvw, 36px) !important;
	font-weight: 600!important;
	letter-spacing: 0.6vw!important;
	margin-top: 0.8vw;
} */

/* .home h2 {
	font-size: clamp(23px, 1.8vw, 38px)!important;
} */

.msp-home .et_pb_main_blurb_image {
	margin-bottom: -30px!important;
}

.msp-home .et_pb_blurb_container {
	margin-top: -1vh;
}

.msp-home .et_pb_blurb_container h4 {
	margin-bottom: 2vh;
}

.actualites-list,
.actualites-similaires {
	display: flex;
	justify-content: center;
	gap: 4vw;
}

.actualite-item {
	width: calc(33.333% - 30px);
	background: #f8f8f840;
	padding-bottom: 2vh;
	border: 1px solid;
	text-align: justify;
	box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
	backdrop-filter: blur(5px);
}

.actualite-image {
	max-width: 100%;
	width: 100%;
	height: auto;
}

.actualite-title {
	font-size: 18px;
	margin: 3vh auto 20px;
	text-transform: uppercase!important;
	max-width: 85%;
}

.actualite-content {
	font-size: 14px;
	line-height: 1.3rem!important;
	color: #666;
	max-width: 85%;
	margin: 10px auto;
}

.actualites-list .actualite-button {
	display: inline-block;
	margin-top: 10px;
	margin-right: 10%;
	text-decoration: none;
	transition: all 0.2s linear;
	float: inline-end;
}

.actualite-button:hover {
	transform: scale(1.1);
	background: none!important;
}

.actu-image-wrapper {
	max-height: 280px;
	overflow: hidden;
}

.picto-col {
	display: flex;
	align-items: center;
}

/* DETAIL ATELIER */

.picto-hexa-bg .picto-col {
	display: flex;
	width: 50vw;
	max-width: 50vw;
	color: #465f9d;
	position: absolute;
	top: -30vh;
	left: -10vw;
	opacity: 0.1;
}

/* PAGE ACTUALITES LISTE */

.actualite-image {
	max-width: 100%;
	height: auto;
}

.actualite-content {
	font-size: 14px;
	color: #666;
	word-wrap: break-word;
}

/* GALERIE */

.gallery {
	display: grid;
	align-items: stretch;
	grid-template-columns: repeat(6, 1fr);
	gap: 10px;
	padding: 3%;
	max-width: 1600px;
	margin: auto;
}

.gallery8 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery img {
	width: 100%;
	height: auto;
	max-height: 25vh;
	cursor: pointer;
	transition: transform 0.3s ease-in-out;
	border: 1px solid #cecece;
}

.gallery img:hover {
	transform: scale(1.05);
}

.lightbox {
	display: none;
	position: fixed;
	z-index: 30;
	top: 10%;
	left: 0;
	width: 100%;
	height: 90%;
	background: rgba(0, 0, 0, 0.8);
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.lightbox img {
	max-width: 90%;
	max-height: 80%;
}

.close {
	position: absolute;
	top: 25px;
	right: 25px;
	font-size: 40px;
	color: white;
	cursor: pointer;
}

.prev {
	position: absolute;
	color: white;
	left: 20px;
	cursor: pointer;
}

.next {
	position: absolute;
	color: white;
	right: 20px;
	cursor: pointer;
}

/* PAGES LÉGALES, SLIDERS ET SECTIONS DIVERSES */

.contact-infos .et_pb_blurb_content {
	display: flex!important;
	max-width: initial!important;
	justify-content: center;
}

.contact-infos .et_pb_blurb_container,
.contact-infos .et_pb_blurb_container h4 {
	display: inline!important;
}

.cmplz-terms-conditions .et_pb_section_0,
.cmplz-document .et_pb_section_0,
.page-id-3 .et_pb_section_0 {
	background-image: url('/wp-content/uploads/2025/02/image-contact-white.jpg');
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-attachment: fixed;
	min-height: 100vh;
}

.cmplz-terms-conditions .et_pb_section_0 .et_pb_row_0,
.cmplz-document .et_pb_section_0 .et_pb_row_0,
.page-id-3 .et_pb_section_0 .et_pb_row_0 {
	padding: 2%;
	backdrop-filter: blur(7px) brightness(1.1);
	border: 1px solid #e4794a;
}

#cmplz-document,
.editor-styles-wrapper .cmplz-unlinked-mode {
	max-width: 100%;
}

.privacy-policy h1,
.privacy-policy h2 {
	font-size: 20px !important;
}

.atelier-slide {
	gap: 2vh;
	box-sizing: border-box;
	padding: 18px 14px;
	/* même carte que les listes de l'accueil : bande de couleur en haut, coins arrondis, fond clair */
	border: 1px solid #ddd;
	border-top: 4px solid var(--mssa-color, #465f9d);
	border-radius: 10px;
	background: rgba(255, 255, 255, .78);
	min-height: 190px;
	display: flex!important;
	flex-direction: column;
	align-items: center!important;
	justify-content: center!important;
	backdrop-filter: blur(20px) brightness(1.1);
	text-decoration: none;
	transition: box-shadow .2s ease, border-color .2s ease;
}

.atelier-slide:hover,
.atelier-slide:focus-visible {
	border-color: var(--mssa-color, #465f9d);
	box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
}

.atelier-slide h3 {
	font-size: 1rem!important;
	text-transform: uppercase!important;
	text-align: center;
	padding-bottom: 0!important;
}

.atelier-slide span.picto-col svg {
	width: 70px;
	height: 70px;
}

.landing-section-mss {
	background-image: url('/wp-content/uploads/2025/03/top-view-measuring-tape-with-weights-jump-rope-1-2-scaled.jpg');
	background-size: auto 114vh;
	background-position: top right;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

.image-present-cust img {
	width: 100%;
}

.actualite-button {
	padding: 20px;
}

input[type="hidden"] {
	display: none!important;
}

.backdrop-bg-after:after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	backdrop-filter: blur(20px) brightness(1.2);
	border: 1px solid #cfcece;
}

.section-actualites-home .et_parallax_bg_wrap .et_parallax_bg {
	height: 100%!important;
	bottom: 40%!important;
}

.contact-section .et_parallax_bg_wrap .et_parallax_bg {
	background-size: 100%;
}

.values-section-home:before,
.values-section-home:after {
	height: 110%;
}

/* Carrousel des ateliers (Swiper). Le conteneur porte la classe legacy « swiper-container », sans style avec Swiper 11 :
   tant que le JS (CDN, chargé en bas de page) n'a pas initialisé le carrousel, les diapositives s'alignent et font
   défiler la page latéralement (~9 900 px). On coupe le débordement dès le premier rendu. */

.ateliers-carousel {
	overflow: hidden;
	max-width: 100%;
}

/* Filet de sécurité : aucun élément (menu déroulant masqué, tiroir hors écran, etc.) ne doit créer de défilement latéral.
   `clip` plutôt que `hidden` : ne crée pas de conteneur de défilement et laisse fonctionner position: sticky. */
html,
body {
	overflow-x: clip;
}

.logo-mss-svg {
	max-width:100%
}

/* RESPONSIVE */

@media (max-width: 1024px) {
	.gallery {
		grid-template-columns: repeat(3, 1fr);

	}
}

@media screen and (min-width: 982px) and (max-width:1024px) {
	.home-landing {
		max-width: 85vw;

	}

	.home-landing .et_pb_text_0 {
		margin-left: 20%!important;

	}

	.home-landing .et_pb_row_0.et_pb_row {
		padding-top: 4vh!important;

	}

	.home-landing.et_pb_row_1.et_pb_row {
		max-width: 85vw!important;
		padding-bottom: 0!important;
		padding-top: 10vh !important;

	}

	.home-landing .et_pb_row_0.et_pb_row {
		padding-top: 4vh!important;

	}

	.home-landing .small-title-h1 {
		margin-top: 0vh!important;

	}
}

@media (max-width:981px) {
	.post-1533 .et_pb_row_6 .et_pb_column {
		margin-left: 0!important;

	}

	.atelier-slide {
		min-width: 30%;
		justify-content: center!important;

	}
}

@media (max-width:767px) {
	.actualites-list,
	.actualites-similaires {
		flex-wrap: wrap;

	}

	.actualite-item {
		width: 100%;

	}

	footer .et_pb_blurb_content,
	.contact-infos .et_pb_blurb_content {
		flex-direction: column;
		align-items: center;

	}

	footer .et_pb_main_blurb_image,
	.contact-infos .et_pb_main_blurb_image {
		margin-bottom: 10px!important;
		margin-top: 30px!important;

	}

	footer .et_pb_blurb_container,
	.contact-info .et_pb_blurb_container {
		max-width: 50%;
		margin: 0 auto;

	}

	.home-sect-1 h1 {
		padding-bottom: 5px;
		font-size: clamp(22px, 1dvw, 31px) !important;
		line-height: 1.5em !important;

	}

	.title-big {
		display: block;
		width: 100%;
		font-size: clamp(30px, 2dvw, 58px);
		margin-bottom: 10px;

	}

	.logo-mss-svg {
		max-width: 150px;
		margin: 0 auto;
	}

	.rep-fr-logo-svg {
		max-width: 200px;
	}
}

@media (max-width: 600px) {
	.gallery {
		grid-template-columns: repeat(2, 1fr);

	}

	.swiper-slide.atelier-slide {
		min-width: 50%!important;

	}

	.atelier-slide h3 {
		font-size: 1rem!important;

	}
}

@media screen and (max-width: 400px) {
	.gallery {
		grid-template-columns: repeat(1, 1fr);

	}
}