body {
	/* background: transparent url(bg9.jpg) center 200px no-repeat; */
	background: oklch(0.976 0.0082 91.48);
	background-size: contain;

	header.header {
		height: 350px;
		background: #c10082;
		background-size: 400% 400%;
		animation: gradient 30s ease infinite;
		clip-path: ellipse(100% 100% at 50% 0%);
		overflow: hidden;
		display: flex;
		align-items: center;
		padding-top: 0 !important;
		margin-bottom: 4rem;

		.container {
			position: relative;
			text-align: left; /* Alignement à gauche par défaut */
		}

		.instagram-link {
			position: absolute;
			top: 0;
			right: 0;
			display: flex;
			align-items: center;
			gap: 8px;
			color: white;
			text-decoration: none;
			font-size: 0.8rem;
			padding: 8px 12px;
			border-radius: 20px;
			background: rgba(255, 255, 255, 0.1);
			backdrop-filter: blur(10px);
			transition: all 0.3s ease;
			font-family: "Unica One", sans-serif;

			&:hover {
				background: rgba(255, 255, 255, 0.2);
				transform: translateY(-2px);
				color: white;
			}

			svg {
				flex-shrink: 0;
			}
		}

		img {
			height: 125px;
			width: auto;
		}

        h1,
        p {
            text-shadow: 1px 1px 1px #000;
        }

		h1,
		p,
		a {
			font-family: "Yeseva One", serif;
			color: #fff;
			text-wrap: balance;
			margin: 0;
		}

		p {
			font-size: 1.2rem;
		}

		/* Responsive pour sm et plus petit */
		@media (max-width: 576px) {
            img {
                height: 100px;
                width: auto;
            }
			.container {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				height: 100%;
				padding-top: 60px;
				text-align: center; /* Centre le texte sur mobile */
			}

			.instagram-link {
				font-family: "Unica One", sans-serif;
				top: 20px;
				left: 50%;
				right: auto;
				transform: translateX(-50%);
			}
		}
	}

	main {
		article {
			header {
				font-family: "Unica One", sans-serif;
				color: #c10082;
				font-weight: bold;
			}
			p {
				font-family: Merriweather, Georgia, serif;
				line-height: 1.8;
				b {
					font-weight: 900;
				}
				span.blue {
					color: #0099ff;
				}
				span.pink {
					color: #ff3399;
				}
				span.purple {
					color: #6666ff;
				}
				span.green {
					color: #20aba2;
				}
			}

			.hr {
				display: flex;
				justify-content: center;
				margin: 2rem 0;
				align-items: center;
				height: 50px;
				img {
					width: 50px;
					height: auto;
					display: inline-block;
					animation: rotate 60s linear infinite;
				}
			}
		}
	}
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}