#branding {
	color: #f8f4dd;
	align-items: center;
	text-align: center;
	position: relative;
	z-index: 1;
	margin-right: -1rem;
	width: calc(100% + 2rem);
}

#branding {
	color: #f8f4dd;
	align-items: center;
	text-align: center;
	position: relative;
	z-index: 1;
}

#branding::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background:
		conic-gradient(from 0deg at calc(500%/6) calc(100%/3), #381d08 0 120deg, #0000 0),
		conic-gradient(from -120deg at calc(100%/6) calc(100%/3), #914b15 0 120deg, #0000 0),
		conic-gradient(from 120deg at calc(100%/3) calc(500%/6), #e17b2b 0 120deg, #0000 0),
		conic-gradient(from 120deg at calc(200%/3) calc(500%/6), #e17b2b 0 120deg, #0000 0),
		conic-gradient(from -180deg at calc(100%/3) 50%, #914b15 60deg, #e17b2b 0 120deg, #0000 0),
		conic-gradient(from 60deg at calc(200%/3) 50%, #e17b2b 60deg, #381d08 0 120deg, #0000 0),
		conic-gradient(from -60deg at 50% calc(100%/3), #e17b2b 120deg, #914b15 0 240deg, #381d08 0);
	background-size: 111px 64px;
	filter: blur(3px);
	clip-path: inset(0 0 1px 0);
	z-index: -1;
}


#branding h1 {
	font-weight: 200;
	font-size: 4rem;
	padding: 3rem;
}

#protection {
	padding: 1rem;
}

#protection h2 {
	color: #171727;
}

#protection h3 {
	color: rgb(71, 71, 120);
}

#protection p {
	color: rgb(92, 92, 156);
}

#protection img {
	visibility: hidden;
	width: 0;
	height: 0;
}

/* Styles spécifiques pour les écrans plus larges */
@media (min-width: 768px) {
	#protection {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 5rem;
		padding-inline: 10rem;
	}

	#protection .container {
		width: 100%;
		max-width: 1400px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	#protection .text-content {
		flex: 1;
	}

	#protection .image-content {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	#protection .image-content img {
		width: 20rem;
		height: 20rem;
		animation: spin 20s linear infinite;
		visibility: visible;
	}

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

		to {
			transform: rotate(360deg);
		}
	}
}

/* Pour mobile */
@media (max-width: 768px) {
	#protection {
		padding-inline: 3rem;
	}
}