@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@200..800&display=swap');


body{
	background: linear-gradient(321deg, #CEBFE9 0%, #FAF8FF 100%);
	background-attachment: fixed;
	min-height: 100vw;
	width: 100%;
	margin: 0 0 0 0;
}

body::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: -1;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.2'/%3E%3C/svg%3E");
}


h1,h2,h3,p,a,ul,li,.credits{
	color: #000000;
}

h1{
	font-size: 56pt;
	margin: 0 0 0.2em 0;
}

h2{
	font-size: 24pt;
	margin: 0 0 0.5em 0;
}

h3{
	margin: 0 0 0.5em 0;
}

strong{
	font-weight: 650;
}

.sous-titre-h1{
	font-size: 18pt;
}

.sous-titre{
	font-size: 14pt;
	font-weight: 260;
}

p,ul,li{
	font-size: 14pt;
	margin: 0 0 1em 0;
}

a{
	transition: 0.05s;
}

a:hover{
	color: #9343c1;
}

ul{
	list-style-type: disclosure-closed;
	padding: 0 0 0 0.9em;
}

hr{
	margin: 3em 0em 3em 0em;
	height: 1px;
	border: none;
	background: linear-gradient(321deg,rgba(0, 0, 0, 1) 0%, rgba(202, 164, 235, 1) 100%);
	border-radius: 10px;
}

.justifier-texte{
	text-align: justify;
}

.centrer-texte{
	text-align: center;
}

.main{
	max-width: 68em;
	margin: 2em auto 2em auto;
	padding: 0 1em 21em 1em;
	font-family: "Assistant", sans-serif;
	font-style: normal;
}

.inner{
	margin: 0 0 2em 0;
}

.grille{
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	margin: 0 0 1em 0;
	img{
		width: calc(100% - 0.6em);
		margin: 0.3em 0.3em 0.3em 0.3em;
		transition: 0.2s;
		border-radius: 5px;
		box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.5);
	}
	img:hover{
		transform: scale(1.05);
	}
}

.grille-artistes{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	
	.profils-carte{
		width: calc(100% - 3em);
		margin: 0 auto 1em auto;
		.profils{
			aspect-ratio: 1/1;
			width: 100%;
			object-fit: cover;
			border-radius: 50%;
			margin: 0 0 1em 0;
		}
		.profil-resize{
			width: 65%;
			margin: 0 auto;
		}
	}
}

.sectionImageTitre{
	display: grid;
	grid-template-columns: 1fr 3fr;
	padding: 0 0 1em 0;
	max-width: 50em;
	margin: 0 auto 1em auto;
	img{
		width: 100%;
		aspect-ratio: 1/1;
		object-fit: cover;
		border-radius: 50%;
	}
	section{
		margin: 0 1.5em 1em 1.5em;
		/* width: calc(100% - 3em); */
		margin: auto 0;
	}
}

.sectionImageParagraphe{
	display: grid;
	grid-template-columns: 1fr 2fr;
	padding: 0 0 1em 0;
	img{
		width: 100%;
		aspect-ratio: 1/1;
		object-fit: cover;
		border-radius: 10px;
	}
	section{
		margin: 0 1.5em 1em 1.5em;
		width: calc(100% - 3em);
	}
}

.sectionParagrapheImage{
	display: grid;
	grid-template-columns: 2fr 1fr;
	padding: 0 0 1em 0;
	img{
		width: 100%;
		aspect-ratio: 1/1;
		object-fit: cover;
		border-radius: 10px;
	}
	section{
		margin: 0 1.5em 1em 1.5em;
		width: calc(100% - 3em);
	}
}


.bouton{
	display: inline-block;
	margin: 0 0.5em 1em 0.5em;
	padding: 0.5em 0.5em 0.5em 0.5em;
	font-size: 14pt;
}

/* Footer */
	footer{
		width: fit-content;
		margin: 0 0 2em 0;
		text-align: center;
		position: fixed;
		background: linear-gradient(344deg,rgba(247, 247, 247, 0.1) 0%, rgba(247, 247, 247, 0.1) 32%, rgba(134, 161, 173, 0.1) 100%);
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 10px;
		box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.5);
		opacity: 70%;
		transition: 0.1s;
		backdrop-filter: blur(20px);
		a{
			svg{
				height: 1.5em;
				margin: 1em 1em 1em 1em;
			}
		}
		
		a:hover{
			svg{
				filter: brightness(0) saturate(100%) invert(34%) sepia(20%) saturate(5504%) hue-rotate(257deg) brightness(85%) contrast(86%);
			}
		}
		
		.newIcons{
			display: inline-flex;
		}
	}
	footer:hover{
		opacity: 100%;
	}

.youtube-div{
	max-width: 50em;
	margin: 0 auto;
	
	.youtube-embed{
		--button-size: 6rem;
		position: relative;
		color: #fff;
		background:#000;

		button{
			all: unset;
			box-sizing: border-box;
			cursor:pointer;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			*{
				pointer-events:none;
			}
		}
		
		.play-icon{
			height: var(--button-size);
			width: var(--button-size);
			position: absolute;
			top: calc(50% - (var(--button-size) / 2));
			left: calc(50% - (var(--button-size) / 2));
		}

		img,iframe{
			aspect-ratio: 16 / 9;
			height: 100%;
			width: 100%;
		}
	}
	
	.consent-banner{
		background: #111;
		color: #fff;
		padding: 20px;
		border-radius: 10px;
		margin-top: 15px;
		text-align: center;
		
		.consent-btn{
			padding: 0.5em 0.5em 0.5em 0.5em;
			margin-top: 10px;
			border: none;
			background: #d90000;
			color: #fff;
			cursor: pointer;
			border-radius: 6px;
			font-size: 16px;
		}

		.consent-btn:hover{
			background: #b70000;
		}
	}
}

.cookies{
    z-index: 10;
	margin: 1em 1em 1em 1em;
}

.cookies button{
		background: rgba(0,0,0,0.8);
		color: #fff;
		border: 1px solid #fff;
		padding: 0.5em 0.8em;
		border-radius: 6px;
		cursor: pointer;
		font-size: 10pt;
}

.cookies button:hover{
	background: #9343c1;
}

.credits{
	p, a{
		font-size: 10pt;
		transition: 0.05s;
	}
}

/* CSS Mobile */
@media screen and (max-width: 736px){
	h1{
		font-size: 34pt;
	}
	
	.sous-titre-h1{
		font-size: 14pt;
	}
	
	.sous-titre{
		font-size: 10pt;
	}
	
	h2{
		font-size: 20pt;
	}
	
	p,ul,li{
		font-size: 12pt;
	}
	
	.main{
		margin: 2em auto 2em auto;
		padding: 0 1em 10em 1em;
	}
	
	.grille{
		grid-template-columns: repeat(4, 1fr);
	}
	
	.grille-artistes{
		grid-template-columns: repeat(2, 1fr);
		.profils-carte{
			width: calc(100% - 1em);
			margin: 0 auto 2em auto;
		}
	}
	
	.sectionParagrapheImage{
		grid-template-columns: 1fr;
		padding: 0 0 1em 0;
	}
	
	.sectionImageParagraphe{
		grid-template-columns: 1fr;
		padding: 0 0 1em 0;
		section:nth-child(2){
			order: -1;
		}
	}
	
	.bouton{
		font-size: 12pt;
	}
	
	footer{
		width: fit-content;
		transform: translateX(-50%);
		opacity: 100%;
	}
}