/*
Theme Name: Arts et Sante v1
Version: 1
Text Domain: artsante
*/


/* Fonts
---------------------------------------------------- */


@font-face {
	font-family: Pretendard;
	src: url('fonts/Pretendard-Regular.woff2');
	font-weight: 400;
	font-style: normal;
}


@font-face {
	font-family: Pretendard;
	src: url('fonts/Pretendard-Bold.woff2');
	font-weight: 700;
	font-style: normal;
}

/*@font-face {
	font-family: Reckless;
	src: url('fonts/Reckless/RecklessStandardM-Medium.woff2');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: Reckless;
	src: url('fonts/Reckless/RecklessStandardM-MediumItalic.woff2');
	font-weight: 500;
	font-style: italic;
}

@font-face {
	font-family: Reckless;
	src: url('fonts/Reckless/RecklessStandardM-Regular.woff2');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: Reckless;
	src: url('fonts/Reckless/RecklessStandardM-RegularItalic.woff2');
	font-weight: 400;
	font-style: italic;
}

@font-face {
	font-family: Reckless;
	src: url('fonts/Reckless/RecklessStandardM-Light.woff2');
	font-weight: 300;
	font-style: normal;
}*/


/* General
---------------------------------------------------- */
* {
	box-sizing: border-box;

}

:root {

	font-size: 4.0712vw;

	--yellow: #D7FF45;
	--gris: #EAEDE1;
}


@media (min-width: 900px) {
	:root {
		font-size: 1.1111vw;
	}
}

@media (min-width: 1440px) {
	:root {
	}
}

body {
	position: relative;
	margin: 0;
	font-family: Pretendard, sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.2;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

}

body.menu-open {
	overflow: hidden;
}

figure {
	margin: 0;
}

svg {
	display: block;
}

a {
	color: inherit;
	text-decoration: inherit;
	/*transition: color 300ms;*/
}


h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}

sup {
	line-height: 0;
}

.hidden {
	display: none !important;
}

@media (max-width: 899px) {
	.desktop-only {
		display: none !important;
	}
}

@media (min-width: 900px) {
	.mobile-only {
		display: none !important;
	}
}


/* Form
---------------------------------------------------- */

button {
	background: transparent;
	border: none;
	border-radius: none;
	font-family: inherit;
	font-weight: inherit;
	font-size: inherit;
	margin: 0;
	padding: 0;
	cursor: pointer;
}



/* Header
---------------------------------------------------- */

.site-header {
	display: flex;
	align-items: center;
	height: 3.4375rem;
	padding: 0 1.875rem;
}

.site-header .site-logo {
	flex-grow: 1;

	font-size: 1.6125rem;
	font-weight: bold;
}

.site-header .site-nav {
	font-weight: bold;
}

.site-header .site-nav ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 1.875rem;
}

.site-header .site-nav ul li a {
	display: block;
	padding: 0.5rem 0.6875rem;
	border-radius: 0.1875rem;
	mix-blend-mode: multiply;
}



@media (min-width: 900px) {
	.site-header .site-nav ul li.current-menu-item a,
	.site-header .site-nav ul li a:hover {
		background-color: black;
		color: white;
	}
	.site-header .site-nav .menu-title,
	.site-header .site-nav .close-btn,
	.burger {
		display: none;
	}
}

@media (max-width: 899px) {

	.site-header .site-nav {
		position: fixed;
		top: 0;
		left: 100%;
		width: 100%;
		height: 100%;
		z-index: 10;

		background-color: var(--yellow);

		overflow: auto;

		display: flex;
		flex-direction: column;
		gap: 3rem;

		padding: 0 0 3rem;

		transition: left 180ms;
	}

	body.menu-open .site-header .site-nav {
		left: 0;
	}

	.site-header .site-nav .menu-title {
		text-align: center;
		font-weight: bold;
		margin: 0.8125rem 0;
	}

	.site-header .site-nav ul {
		flex-grow: 1;

		flex-direction: column;
		gap: 0;

		font-size: 1.875rem;
		line-height: 1.1;
	}

	.site-header .site-nav ul li {
		border-bottom: 1px solid black;
	}

	.site-header .site-nav ul li a {
		padding: 0.9688rem 1.875rem;
		border-radius: 0;
	}

	.close-btn {
		align-self: center;
	}

	.close-btn svg {
		display: block;
		width: 3.625rem;
		height: 3.625rem;
	}

	.close-btn svg path {
		fill: black;
	}

	.burger {
		position: fixed;
		bottom: 3rem;
		left: 10.4688rem;
		z-index: 8;
	}

	.burger svg {
		display: block;
		width: 3.625rem;
		height: 3.625rem;
	}



}




/* Home
---------------------------------------------------- */

.main-home {
	display: flex;
}

.main-home .figure-home {
	margin: 0;
	padding: 0;
	flex-grow: 1;
}

.main-home .figure-home img {
	display: block;
	width: 100%;
	height: auto;
}

.main-home .home-agenda {
	padding: 1.5rem 1.875rem;
	background-color: var(--yellow);
	font-size: 0.875rem;
	line-height: 1.2;
}



.agenda-title {
	font-weight: 700;
}

ul.home-agenda-list {
	list-style-type: none;
	padding: 0;

}

.home-agenda-list {
	margin: 0.75rem 0 0;
	border-top: 1px solid black;
}

.home-agenda-item {
	display: flex;
	align-items: flex-start;
	border-bottom: 1px solid black;
	padding: 0.75rem 0;
}

.home-agenda-item .horaire {
	font-weight: 700;
}

.home-agenda-category {
	text-transform: uppercase;
	font-weight: 700;
	font-size: 0.5625rem;
	line-height: 1.2;
}

.home-agenda-item-main {
	flex-grow: 1;
}

.home-agenda-picto {
	margin-top: 2.875rem;
}
.home-agenda-picto svg {
	width: 100%;
	height: auto;
	display: block;
}

@media (min-width: 900px) {
	.main-home .home-agenda {
		width: 30rem;
		flex-shrink: 0;
		padding: 20rem 1.875rem 0;
	}
}

@media (max-width: 899px) {
	.main-home {
		flex-direction: column;
	}

	.main-home .home-agenda {
		order: 2;
	}

	.main-home .figure-home {
		order: 1;
	}
}


/* Page Cours et Ateliers - left column
---------------------------------------------------- */

.main-cours-ateliers {
	background-color: var(--gris);
	display: flex;
	padding: 4.625rem 0 0;
}

.aside-cours-ateliers {
	padding: 0 1.875rem 0;

	font-size: 0.875rem;
	line-height: 1.2;

	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.aside-section-cours-ateliers {
	padding: 1rem;
	background-color: white;
	border-radius: 0.5rem;
}

.aside-section-title {
	text-transform: uppercase;
	font-weight: 700;
}

ul.aside-section-list {
	list-style-type: none;
	padding: 0;
}

.aside-section-list {
	margin: 0.5rem 0 0;
	/*border-top: 1px solid black;*/
}

.aside-section-item {
	padding: 0.5rem 0;
	border-top: 1px solid black;
}

.aside-section-item .horaire,
.aside-section-item .nom {
	font-weight: 700;
}

.aside-section-item .acces {
	/*white-space: break-spaces;*/
	font-size: 0.5625rem;
}
.aside-section-item .acces-title {
	margin: 0.25rem 0 0;
}

@media (min-width: 900px) {
	.aside-cours-ateliers {
		width: 30rem;
		flex-shrink: 0;
	}
}

@media (max-width: 899px) {
	.main-cours-ateliers {
		padding: 1.625rem 0 0;
		flex-direction: column;
	}
}

/* Page Cours et Ateliers - right column
---------------------------------------------------- */

.main-column-cours-atelier {
	display: flex;
	flex-direction: column;
	gap: 1.375rem;
}

.main-column-cours-atelier img {
	width: 100%;
	height: auto;
	display: block;
}

.content-cours-atelier {
	font-size: 0.875rem;
}

.content-cours-atelier p {
	margin-top: 0;
}

@media (min-width: 900px) {
	.content-cours-atelier {
		column-count: 2;
		column-gap: 2rem;
	}
}

@media (max-width: 899px) {
	.content-cours-atelier {
		padding: 0 1.875rem;
	}
}


/* Page Intervenants
---------------------------------------------------- */

body.page-intervenants .site-header {
	background-color: var(--yellow);
}

.main-intervenants {
	display: flex;
	flex-direction: column;
	padding: 4.3125rem 0;
	align-items: center;
	gap: 6.5rem;
}

.intervenants-content {
	max-width: 58rem;
	text-align: center;
	font-size: 1.25rem;
}

.intervenants-content h2 {
	font-weight: bold;
}

@media (max-width: 899px) {
	.intervenants-content {
		padding: 0 1.875rem;
		font-size: 1.125rem;
	}
}


/* Page Intervenants - Grid
---------------------------------------------------- */

.intervenants-grid {
	max-width: 65rem;
	display: flex;
	flex-direction: column;
	gap: 6.5rem;
}

.section-intervenant {
	display: flex;
	gap: 5rem;
}

.section-intervenant-title {
	font-weight: bold;
}

.section-intervenant img {
	display: block;
	width: 22rem;
	height: auto;
}

@media (min-width: 900px) {
	.section-intervenant-left {
		flex-grow: 1;
	}
	.section-intervenant-right {
		flex-shrink: 0;
	}
}

@media (max-width: 899px) {
	.intervenants-grid {
		gap: 3rem;
	}

	.section-intervenant {
		flex-direction: column;
		gap: 3rem;
	}

	.section-intervenant-title {
		padding: 0 1.875rem;
	}

	.section-intervenant-content {
		padding: 0 1.875rem;
	}

	.section-intervenant-left {
		order: 2;
	}

	.section-intervenant-right {
		order: 1;
	}

	.section-intervenant img {
		width: 100%;
	}
}


/* Page Présentation
---------------------------------------------------- */

body.page-presentation .site-header {
	background-color: var(--yellow);
}

.main-presentation {
	display: flex;
	flex-direction: column;
	padding: 3rem 0;
	align-items: center;
	gap: 2rem;
}

.presentation-content {
	max-width: 58rem;
	text-align: center;
	font-size: 1.5rem;
}

.presentation-content h2 {
	font-weight: bold;
}

.presentation-small {
	max-width: 44rem;
	font-size: 1.125rem;
	line-height: 1.4;
}

@media (max-width: 899px) {
	.presentation-content {
		padding: 0 1.875rem;
		font-size: 1.125rem;
	}

	.presentation-small {
		padding: 0 1.875rem;
		font-size: 1rem;
	}
}




/* Page Présentation - Gallery
---------------------------------------------------- */

.gallery {
	width: 100%;
	display: flex;
	flex-wrap:wrap;
	gap: 0.5rem;
	padding: 0 3.8125rem;
}

.gallery-figure {

}

.gallery img {
	height: 28.2rem;
	width: auto;
	display: block;

	flex-grow: 1;
	object-fit: cover;
	object-position: center;
}

@media (max-width: 899px) {
	.gallery {
		padding: 0;
	}
	.gallery img {
		width: 100%;
		height: auto;

		object-fit: fill;
	}
}


/* Page Contact
---------------------------------------------------- */

.main-contact {
	display: flex;
	padding: 4.625rem 0 0;
}

.aside-contact {
	width: 100%;
	padding: 0 1.875rem 0;

	font-size: 0.875rem;
	line-height: 1.2;

	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.aside-contact .aside-section-contact {
	padding: 1rem;
	background-color: var(--yellow);
	border-radius: 0.5rem;


}

.aside-section-contact .aside-section-title {
	border-bottom: 1px solid black;
	padding-bottom: 0.5rem;
}

@media (min-width: 900px) {
	.aside-contact {
		max-width: 30rem;
		flex-shrink: 0;
	}
}


/* Page Soutiens
---------------------------------------------------- */

body.page-soutiens .site-header {
	background-color: var(--yellow);
}

.main-soutiens {
	display: flex;
	flex-direction: column;
	padding: 3rem 0;
	align-items: center;
	gap: 2rem;
}

.soutiens-content {
	max-width: 58rem;
	text-align: center;
	font-size: 1.25rem;
}

.soutiens-content h2 {
	font-weight: bold;
}

.soutiens-gallery {
	gap: 5rem;
	align-items: center;
	justify-content: center;
}

.soutiens-gallery img {
	height: 6.2rem;
	width: auto;
	display: block;
	flex-grow: 0;
	object-fit: fill;
}

@media (max-width: 899px) {
	.soutiens-content {
		padding: 0 1.875rem;
	}

	.soutiens-gallery {
		gap: 2rem;
		padding: 0 1.875rem;
	}

	.soutiens-gallery img {
		height: 5rem;
	}
}


/* Page Soutiens
---------------------------------------------------- */

body.page-presse .site-header {
	background-color: var(--yellow);
}

.main-presse {
	display: flex;
	flex-direction: column;
	padding: 3rem 0;
	align-items: center;
	gap: 2rem;
}

.presse-content {
	max-width: 58rem;
	text-align: center;
	font-size: 1.25rem;
}

.presse-title {
	width: 100%;
	max-width: 65rem;

	font-size: 1.5rem;
	font-weight: bold;
}


ul.articles-list {
	margin: 0;
	padding: 0;
	list-style-type: none;

	width: 100%;
	max-width: 65rem;

	display: flex;
	flex-direction: column;
	gap: 0.625rem;

	font-size: 1.5rem;
}

ul.articles-list li {
	background-color: var(--gris);
	height: 3.125rem;
	display: flex;
}

ul.articles-list li a {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-grow: 1;
}

@media (max-width: 899px) {
	.main-presse {
		padding: 2rem 1.875rem;
	}
}