/* Art Sign - user.css
   © Eric Reboux Software 22/04/2026 */

@font-face
{
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300;
	font-stretch: 100%;
	src: url(../fonts/open_sans.woff2) format('woff2');
	unicode-range: U + 0000-00FF, U + 0131, U + 0152-0153, U + 02BB-02BC, U + 02C6, U + 02DA, U + 02DC, U + 0304, U + 0308, U + 0329, U + 2000-206F, U + 20AC, U + 2122, U + 2191, U + 2193, U + 2212, U + 2215, U + FEFF, U + FFFD;
}

@font-face
{
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	font-stretch: 100%;
	src: url(../fonts/open_sans.woff2) format('woff2');
	unicode-range: U + 0000-00FF, U + 0131, U + 0152-0153, U + 02BB-02BC, U + 02C6, U + 02DA, U + 02DC, U + 0304, U + 0308, U + 0329, U + 2000-206F, U + 20AC, U + 2122, U + 2191, U + 2193, U + 2212, U + 2215, U + FEFF, U + FFFD;
}

@font-face
{
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 600;
	font-stretch: 100%;
	src: url(../fonts/open_sans.woff2) format('woff2');
	unicode-range: U + 0000-00FF, U + 0131, U + 0152-0153, U + 02BB-02BC, U + 02C6, U + 02DA, U + 02DC, U + 0304, U + 0308, U + 0329, U + 2000-206F, U + 20AC, U + 2122, U + 2191, U + 2193, U + 2212, U + 2215, U + FEFF, U + FFFD;
}

@font-face
{
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	font-stretch: 100%;
	src: url(../fonts/roboto.woff) format('woff');
	unicode-range: U + 0000-00FF, U + 0131, U + 0152-0153, U + 02BB-02BC, U + 02C6, U + 02DA, U + 02DC, U + 0304, U + 0308, U + 0329, U + 2000-206F, U + 20AC, U + 2122, U + 2191, U + 2193, U + 2212, U + 2215, U + FEFF, U + FFFD;
}

@font-face
{
	font-family: 'Dosis';
	font-style: normal;
	font-weight: 400;
	src: url(../fonts/dosis.woff) format('woff');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root
{
	--site_color: #f35100;
}

body
{
	background: #f6f6f6;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6
{
	font-family: 'Roboto', sans-serif;
}

h1
{
	font-size: 180%;
	font-weight: 400;
	text-transform: uppercase;
	margin: 24px 0;
	padding-bottom: 4px;
	border-bottom: 4px solid var(--site_color);
	color: var(--site_color);
}

h2
{
	font-size: 150%;
	font-weight: 400;
	text-transform: uppercase;
	margin: 24px 0;
	padding: 8px 15px;
	background: rgba(0,0,0,0.06);
	border-left: 4px solid var(--site_color);
}

h3
{
	font-size: 140%;
	font-weight: 400;
}

h4
{
	font-size : 110%;
	font-weight: 400;
}

h5
{
	font-size : 105%;
	font-weight: 400;
}

h6
{
	font-size: 100%;
	font-weight: 400;
}

a:not(.btn), a:not([class])
{
	color: var(--site_color);
	text-decoration: none;
}

a:not(.btn):hover
{
	color: var(--site_color);
	text-decoration: underline;
}

a.btn.btn-primary, button.btn.btn-primary
{
	background: var(--site_color);
	border: 1px solid var(--site_color);

	&:active
	{
		background: #cc4400;
		border: 1px solid #cc4400;
	}
}

ul
{
	padding-left: 20px;
}

.header
{
	display: flex;
	position: relative;
	justify-content: center;
	align-items: center;
	height: 100px;
	background: #fafafae6;
	border-top: 6px solid var(--site_color);
	box-shadow: 0 4px 20px rgba(0,0,0,0.15);
	backdrop-filter: blur(3px);

	& > .grid-child:has(.navbar-brand)
	{
		position: absolute;
		top: 0;
		left: 0;
		width: initial;
		height: 100%;
		/*background: linear-gradient(to right, #ccc, rgba(255, 255, 255, 0));*/
	}

	.navbar-brand
	{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0;

		.brand-logo
		{
			margin: 0 20px;

			img
			{
				width: 120px;
			}
		}
	}

	.container-nav
	{
		align-items: center;
		width: initial;
		margin: 0 160px;
		padding: 0;

		nav
		{
			margin: 0;

			.navbar-toggler
			{
				padding: 8px;
				color: var(--site_color);
				border: 1px solid var(--site_color);

				.icon-menu:after
				{
					content: "MENU";
					margin-left: 6px;
					font-family: 'Open Sans', sans-serif;
				}
			}

			.mod-menu
			{
				justify-content: center;
				flex-wrap: wrap;
				color: var(--site_color);

				.mm-collapse
				{
					padding: 8px;
					background: #fffe;
					box-shadow: 0 1px 20px #0001;

					li
					{
						padding: 0;

						a
						{
							width: 100%;
						}
					}
				}

				li
				{
					padding: 2px 12px;

					a, button
					{
						padding: 6px 6px 4px 6px;
						color: #f35100;
						font-size: 18px;
						font-weight: 300;
						text-transform: uppercase;
						transition: 0.1s;

						&:hover
						{
							background: #f35100;
							text-decoration: none;
							color: white;
							transition: 0.05s;
						}
					}

					&.active a:after
					{
						background-color: #f35100;
						opacity: 1.0;
					}
				}
			}
		}

		.container-search
		{
			position: absolute;
			top: 0;
			right: 32px;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			margin: 0;

			.social_links .mod-custom
			{
				> p
				{
					display: none;
				}

				ul
				{
					display: flex;
					gap: 20px;
					margin: 0;
					padding: 0;
					list-style: none;
					font-size: 20px;
					color: var(--site_color);
				}
			}
		}
	}
}

.image-text-left
{
	display: flex;
	align-items: center;
	gap: 40px;

	.image-text-image
	{
		width: 60%;

		& > p
		{
			display: none;
		}

		.avPlayerWrapper
		{
			box-shadow: 0 2px 20px #0002;
		}
	}

	&.video-accueil
	{
		margin-top: -40px;

		a
		{
			display: block;
			margin: 16px auto 0 auto;
			padding: 8px 20px;
			letter-spacing: 2px;
			text-align: center;
			text-transform: uppercase;
			transition: 0.3s;

			&:hover
			{
				color: white;
				background: var(--site_color);
				text-decoration: none;
				transition: 0.1s;
			}
		}
	}
}

.image-text-right
{
	display: flex;
	align-items: center;
	gap: 40px;

	.image-text-image
	{
		width: 100%;

		& > p
		{
			display: none;
		}

		.avPlayerWrapper
		{
			box-shadow: 0 2px 20px #0002;
		}
	}
}

.moduletable.banner
{
	position: relative;
	max-height: 450px;
	display: flex;
	align-items: center;
	overflow: hidden;
	min-height: min(33vw,500px);
	margin-bottom: -40px;

	&.mobile
	{
		display: none;
		min-height: 450px;
	}

	.mod-custom
	{
		position: absolute;
		left: 0;
		bottom: 0;

		img
		{
			width: 100vw;
		}
	}
}

.mod-breadcrumbs__wrapper
{
	margin-top: 32px!important;

	.breadcrumb
	{
		padding: 8px 0 0 0!important;
		background: none;

		.float-start
		{
			margin-right: 2px;
		}
	}
}

.slideshowck
{
	.camera_caption
	{
		width: initial;
		padding-bottom: 20px;

		& > div
		{
			padding: 15px 15px 15px 40px;
			background: #0004;

			.camera_caption_title
			{
				font-family: 'Dosis', sans-serif;
				font-size: 30px;
				text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
			}
		}
	}

	.camera_prev > span
	{

	}
}

.com-content-article
{
	margin-bottom: 32px;

	.photos_membres
	{
		display: flex;
		flex-wrap: wrap;
		gap: 24px;
		margin-bottom: 16px;

		img
		{
			box-shadow: 0 2px 16px #0002;
		}
	}

	.joomla-contact-card
	{
		display: inline-block;
		padding: 20px;
		margin: 20px 0;
		background: #f9f9f9;
		border: 1px solid #ddd;
		border-radius: 8px;

		p:last-of-type
		{
			margin-bottom: 0;
		}
	}
}

body.com_contact
{
	h2
	{
		display: none;
	}

	.com-contact__info
	{
		&:before
		{
			content: "Bureau et Siège Social :";
			line-height: 40px;
			font-weight: 600;
		}

		dl.dl-horizontal dd
		{
			padding-left: 8px;
		}
	}

	.contact-form
	{
		position: relative;
		border: 1px solid #ddd;
		padding: 20px;
		margin: 20px 0;
		border-radius: 8px;
		background: #f9f9f9;

		#jform_spacer-lbl
		{
			position: absolute;
			top: 24px;
			right: 24px;
		}

		.control-group:has(#jform_contact_email_copy-lbl)
		{
			display: flex;
			align-items: center;
			gap: 8px;

			.controls
			{
				display: flex;
			}

			.form-check.form-check-inline
			{
				min-height: 16px;
				margin: 0;
				padding: 0;

				.form-check-input
				{
					margin: 0;
					padding: 0;
				}
			}
		}
	}
}

.list_categories .mod-articlescategories
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 50px;

	& > li
	{
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;
		width: clamp(280px, 16vw, 720px);
		padding: 0;

		& > a
		{
			display: flex;
			flex-direction: column-reverse;
			justify-content: center;
			align-items: center;
			gap: 20px;

			&:hover
			{
				text-decoration: none;

				img
				{
					transform: scale(1.05);
					transition: transform 0.18s;
				}

				.title
				{
					text-decoration: none;
				}
			}

			img
			{
				width: 60%;
				margin: 0!important;
				box-shadow: 0 2px 16px #0004;
				transition: transform 0.3s;
			}

			.title
			{
				font-family: 'Roboto', sans-serif;
				font-size: 20px;
			}
		}

		& .items
		{
			& > p:first-of-type
			{
				text-align: center;
			}

			& > p:not(:first-of-type)
			{
				display: none;
			}
		}
	}
}

.list_categories.top .mod-articlescategories
{
	margin: 20px 0;

	& > li.active
	{
		flex-direction: row;
		justify-content: space-around;
		gap: 0;
		width: 40%;
		min-width: 450px;
		border: 1.5px solid var(--site_color);
		border-radius: 8px;
		background: white;
		box-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);

		& > a
		{
			height: 100%;
			background: linear-gradient(to bottom, var(--site_color), rgba(239, 239, 239, 0));
			color: white;
			text-decoration: none;
			pointer-events: none;
		}

		& .items
		{
			width: 75%;
			padding: 8px;
			text-align: center;

			& > p:first-of-type
			{
				display: none;
			}

			& > p:not(:first-of-type)
			{
				display: block;
			}

			& > p a
			{
				display: inline-block;
				font-size: 14px!important;
				font-weight: 400;
				transition: 0.4s;

				&:before
				{
					content: "\f061";
					display: inline-block;
					margin-right: -8px;
					font-family: "Font Awesome 6 Free";
					font-size: inherit;
					text-rendering: auto;
					-webkit-font-smoothing: antialiased;
					-moz-osx-font-smoothing: grayscale;
					color: transparent;
					transition: 0.4s;
				}

				&:hover
				{
					text-decoration: none;
					transition: 0.1s;

					&:before
					{
						margin-right: 4px;
						color: var(--site_color);
						transition: 0.2s;
					}
				}
			}

			& .active a
			{
				font-weight: 600;

				&:before
				{
					content: '• ';
					margin-right: 4px;
					color: var(--site_color);
				}
			}
		}
	}
}

.footer
{
	padding: 20px;
	background: var(--site_color);
	box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.16) inset, 0 -2px 8px rgba(0, 0, 0, 0.12) inset;

	.grid-child
	{
		display: flex!important;
		flex-direction: row!important;
		align-items: flex-start;
		justify-content: center;
		flex-wrap: wrap;
		gap: 40px;
		padding: 10px;
		text-align: center;

		.moduletable
		{
			width: 30%;
			min-width: 200px;

			h3
			{
				padding-bottom: 8px;
				font-weight: 400;
				text-transform: uppercase;
				border-bottom: 1px solid white;
			}

			a
			{
				font-weight: 300;
				transition: 0.4s;

				&:before
				{
					content: "\f061";
					display: inline-block;
					margin-right: -8px;
					font-family: "Font Awesome 6 Free";
					font-size: inherit;
					text-rendering: auto;
					-webkit-font-smoothing: antialiased;
					-moz-osx-font-smoothing: grayscale;
					color: transparent;
					transition: 0.4s;
				}

				&:hover
				{
					font-weight: 400;
					text-decoration: none;
					transition: 0.2s;

					&:before
					{
						margin-right: 4px;
						color: white;
						transition: 0.3s;
					}
				}
			}

			&.contact
			{
				.mod-custom
				{
					display: flex;
					flex-direction: column;
					gap: 8px;

					& > p
					{
						display: none;
					}

					a:before, a:hover:before
					{
						content: "";
						margin: 0;
						transition: 0;
					}

					a:hover
					{
						font-weight: 300;
						text-decoration: underline;
					}

					.header-contact i.fa
					{
						margin-right: 4px;
					}

					.social_logo
					{
						display: flex;
						justify-content: center;
						align-items: center;
						gap: 40px;

						.social_links
						{
							p
							{
								display: none;
							}

							ul
							{
								display: flex;
								gap: 20px;
								margin: 0;
								padding: 0;
								font-size: 20px;
								list-style: none;
							}
						}

						.logo
						{
							width: 80px;
							filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));

							a
							{
								display: flex;
							}
						}
					}
				}
			}
		}
	}
}

.copyright_block
{
	position: relative;
	padding: 30px;
	font-size: 14px;

	.mod-custom
	{
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		padding: 0 10px;

		& > p
		{
			display: none;
		}

		.left
		{
			margin-right: auto;
		}

		.center
		{
			margin: 0 auto;
		}

		.right
		{
			margin-left: auto;
		}

		#ers
		{
			display: flex;
			align-items: center;
			gap: 4px;
			font-size: 13px;
			color: #aaa;

			&:hover
			{
				color: #444;
				text-decoration: none;
			}

			img
			{
				width: 44px;
			}
		}
	}
}

#back-top
{
	bottom: 8px;
	right: 8px;
	background: none;
	border: none;
	font-size: 28px;
	color: black;
	opacity: 0.5;

	& .icon-arrow-up:before
	{
		content: "\f139";
	}
}

@media (max-width: 1400px)
{
	.header .container-nav .mod-menu
	{
		li
		{
			padding: 2px 6px!important;

			a
			{
				font-size: 17px!important;
			}
		}
	}
}

@media (max-width: 1280px)
{
	.header .container-nav
	{
		.mod-menu li
		{
			padding: 0px 6px;

			a, button
			{
				font-size: 16px!important;
			}
		}

		.container-search .social_links .mod-custom
		{
			& > p
			{
				display: none;
			}

			ul
			{

				flex-direction: column;
				justify-content: center;
				gap: 0px;
				font-size: 16px;
			}
		}
	}
}

@media (max-width: 991px)
{
	.header
	{
		.navbar-brand img
		{
			max-width: 110px;
		}

		.container-nav
		{
			flex-direction: row-reverse;
			justify-content: space-between;
			gap: 10px;
			width: calc(100% - 200px);
			margin: 0 30px 0 auto;
			padding: 10px 0;

			.navbar-collapse
			{
				position: absolute;
				top: 44px;
				right: 0px;
				padding: 8px;
				background: #fffe;
				box-shadow: 0 1px 20px #0001;
				z-index: 20;

				ul
				{
					display: flex;
					flex-direction: column;
					gap: 8px;
					margin: 0;

					li
					{
						padding: 0px 6px;

						a
						{
							font-size: 18px!important;
						}
					}
				}
			}

			.container-search
			{
				position: relative;
				top: initial;
				right: initial;

				.moduletable.social_links ul
				{
					flex-direction: revert;
					gap: 20px;
					font-size: 20px;
				}
			}
		}
	}

	.list_categories
	{
		.mod-articlescategories
		{
			flex-direction: column;
			align-items: center;

			& > li
			{
				width: clamp(280px, 40vw, 720px);

				&.active
				{
					flex-direction: column!important;
					gap: 20px!important;
					width: clamp(300px, 60vw, 720px)!important;
					min-width: initial!important;

					& > a
					{
						padding-top: 20px;
					}
				}
			}
		}
	}

	.image-text-left, .image-text-right
	{
		flex-direction: column;

		.image-text-image
		{
			width: 100%;
		}
	}
}

@media (max-width: 700px)
{
	.moduletable.banner
	{
		display: none;

		&.mobile
		{
			display: flex!important;
			min-height: 100vw;

			.mod-custom
			{
				top: 0;
				bottom: initial;
			}
		}
	}

	.copyright_block
	{
		padding: 16px;

		.mod-custom
		{
			grid-template-columns: 1fr;
			grid-template-rows: auto auto auto;
			gap: 16px;
			text-align: center;

			.left, .center, .right
			{
				justify-self: center;
				margin: 0;
			}
		}
	}
}