/* Studio Lintz : ornements graphiques et coups de pinceau. */

/**
 * Décorations flottantes.
 */

/**
 * Section qui contient des décorations.
 */
.ar-deco-section {
	position: relative;
	overflow: hidden;
}

/**
 * Le contenu de la section reste au.
 * dessus des décorations.
 */
.ar-deco-section > *:not(.ar-deco) {
	position: relative;
	z-index: 1;
}

/**
 * Image décorative de base.
 */
.ar-deco {
	position: absolute;
	z-index: 0;
	display: block;
	max-width: none;
	pointer-events: none;
	user-select: none;
}

/**
 * Décorations prévues pour fonds clairs.
 */
.ar-deco-light {
	opacity: 0.78;
}

/**
 * Décorations prévues pour fonds foncés.
 */
.ar-deco-dark {
	opacity: 0.62;
	mix-blend-mode: screen;
}

/**
 * Variante plus discrète.
 */
.ar-deco-soft {
	opacity: 0.38;
}

/**
 * Variante plus visible.
 */
.ar-deco-strong {
	opacity: 0.9;
}

/**
 * Tailles.
 */
.ar-deco-xs {
	width: clamp(90px, 10vw, 150px);
}

.ar-deco-sm {
	width: clamp(120px, 14vw, 220px);
}

.ar-deco-md {
	width: clamp(160px, 18vw, 320px);
}

.ar-deco-lg {
	width: clamp(220px, 26vw, 460px);
}

.ar-deco-xl {
	width: clamp(280px, 34vw, 620px);
}

/**
 * Positions principales.
 */
.ar-deco-top-left {
	top: 2rem;
	left: -4rem;
}

.ar-deco-top-right {
	top: 2rem;
	right: -4rem;
}

.ar-deco-bottom-left {
	bottom: -3rem;
	left: -4rem;
}

.ar-deco-bottom-right {
	right: -4rem;
	bottom: -3rem;
}

.ar-deco-center-left {
	top: 50%;
	left: -4rem;
	transform: translateY(-50%);
}

.ar-deco-center-right {
	top: 50%;
	right: -4rem;
	transform: translateY(-50%);
}

/**
 * Positions plus intérieures.
 */
.ar-deco-inside-top-left {
	top: 2rem;
	left: 2rem;
}

.ar-deco-inside-top-right {
	top: 2rem;
	right: 2rem;
}

.ar-deco-inside-bottom-left {
	bottom: 2rem;
	left: 2rem;
}

.ar-deco-inside-bottom-right {
	right: 2rem;
	bottom: 2rem;
}

/**
 * Rotations.
 */
.ar-rotate-left {
	transform: rotate(-8deg);
}

.ar-rotate-right {
	transform: rotate(8deg);
}

.ar-rotate-left-soft {
	transform: rotate(-4deg);
}

.ar-rotate-right-soft {
	transform: rotate(4deg);
}

/**
 * Cas combinés avec centrage.
 */
.ar-deco-center-left.ar-rotate-left,
.ar-deco-center-left.ar-rotate-left-soft,
.ar-deco-center-left.ar-rotate-right,
.ar-deco-center-left.ar-rotate-right-soft {
	transform: translateY(-50%) rotate(-6deg);
}

.ar-deco-center-right.ar-rotate-left,
.ar-deco-center-right.ar-rotate-left-soft,
.ar-deco-center-right.ar-rotate-right,
.ar-deco-center-right.ar-rotate-right-soft {
	transform: translateY(-50%) rotate(6deg);
}

/**
 * Décoration en bandeau horizontal.
 */
.ar-deco-band-top {
	top: 0;
	left: 50%;
	width: min(860px, 80vw);
	transform: translateX(-50%);
}

.ar-deco-band-bottom {
	bottom: 0;
	left: 50%;
	width: min(860px, 80vw);
	transform: translateX(-50%);
}

/**
 * Décoration derrière un titre.
 */
.ar-deco-title {
	top: 50%;
	left: 50%;
	width: min(520px, 70vw);
	opacity: 0.28;
	transform: translate(-50%, -50%);
}

/**
 * Décoration très en arrière.
 * plan.
 */
.ar-deco-bg {
	opacity: 0.18;
	filter: blur(0.5px);
}

/**
 * Sécurité mobile.
 */
@media (max-width: 768px) {
	.ar-deco {
		opacity: 0.28;
	}

	.ar-deco-light {
		opacity: 0.42;
	}

	.ar-deco-dark {
		opacity: 0.35;
	}

	.ar-deco-xl,
	.ar-deco-lg {
		width: 240px;
	}

	.ar-deco-md {
		width: 190px;
	}

	.ar-deco-top-left,
	.ar-deco-bottom-left,
	.ar-deco-center-left {
		left: -5rem;
	}

	.ar-deco-top-right,
	.ar-deco-bottom-right,
	.ar-deco-center-right {
		right: -5rem;
	}
}