/* Touches de nature : décors derrière le contenu (voir assets/js/nature.js) */
.ccn-has-nat { position: relative; isolation: isolate; }
.ccn-nat { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ccn-nat-i { position: absolute; will-change: transform; }
.ccn-nat-i img { display: block; width: 100%; height: auto; max-width: none; }
.ccn-nat-i.is-flip img { transform: scaleX(-1); transform-origin: 50% 50%; }
.ccn-nat-i--branche { width: clamp(130px, 14vw, 220px); opacity: .6; }
.ccn-nat-i--branche img { transform-origin: 0 0; animation: ccn-nat-sway 11s ease-in-out infinite alternate; }
.ccn-nat-i--branche.is-flip img { transform-origin: 50% 0; animation-name: ccn-nat-sway-f; }
.ccn-nat-i--feuilles { width: clamp(90px, 9vw, 150px); opacity: .5; }
.ccn-nat-i--herbe { width: clamp(180px, 22vw, 360px); opacity: .75; bottom: -4px; }
.ccn-nat-i.tl { top: -24px; left: -24px; }
.ccn-nat-i.tr { top: -24px; right: -24px; }
.ccn-nat-i.l { top: 12%; left: -40px; }
.ccn-nat-i.r { top: 16%; right: -40px; }
.ccn-nat-i.bl { left: -10px; }
.ccn-nat-i.br { right: -10px; }
@keyframes ccn-nat-sway { from { transform: rotate(-1.4deg); } to { transform: rotate(1.4deg); } }
@keyframes ccn-nat-sway-f { from { transform: scaleX(-1) rotate(-1.4deg); } to { transform: scaleX(-1) rotate(1.4deg); } }
@media (max-width: 767px) {
	.ccn-nat-i--branche { width: 120px; opacity: .6; }
	.ccn-nat-i--feuilles { width: 80px; opacity: .5; }
	.ccn-nat-i--herbe { width: 150px; opacity: .6; }
}
@media (prefers-reduced-motion: reduce) { .ccn-nat-i img { animation: none !important; } }