.animate-soft-rain {
    animation: soft-rain-fall 1.5s linear infinite;
}

@keyframes soft-rain-fall {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(-30vw, 100vh) rotate(45deg); /* Chute diagonale douce de droite à gauche */
    }
}

.envelope {
	position: relative;
	width: 520px;
	height: calc(320px / 1.5);
	background-color: #A1443D;
	/* Rouge par défaut */
	margin: 6em auto;
	z-index: 0;
	cursor: pointer;
	rotate: 4deg;
}

/* Deuxième enveloppe (bleue) */
.envelope:nth-of-type(2n) {
	background-color: #2A4A96;
	rotate: -2deg;
}

/* Troisième enveloppe (vert turquoise) */
.envelope:nth-of-type(2n + 1) {
	background-color: #246F65;
	rotate: 3deg;
}

/* Cycler les enveloppes rouge, bleu, vert */
.envelope:nth-of-type(3n + 1) {
	background-color: #A1443D;
	/* Rouge */
}

.envelope:nth-of-type(3n + 2) {
	background-color: #2A4A96;
	/* Bleu */
}

.envelope:nth-of-type(3n + 3) {
	background-color: #246F65;
	/* Vert turquoise */
}

/* Triangles */
.envelope__triangle {
	position: absolute;
	margin: auto;
	width: 0;
	height: 0;
}

.envelope__triangle--left {
    border-top: calc(320px / 1.5 - 1px) solid transparent;
    border-bottom: 0 solid transparent;
    border-right: calc(520px - 1px) solid #80322b; /* Ajusté pour correspondre au rouge foncé */
    z-index: 2;
}

.envelope__triangle--right {
    border-top: calc(320px / (1.5 * 2)) solid transparent;
    border-bottom: calc(320px / (1.5 * 2)) solid transparent;
    border-left: calc(520px / 2) solid #93403c; /* Ajusté pour correspondre au rouge foncé */
    z-index: 2;
}

.envelope__triangle--down {
    border-left: calc(520px / 2 + 1px) solid transparent;
    border-right: calc(520px / 2 + 1px) solid transparent;
    border-top: calc(320px / (1.5 * 2) + 1px) solid #691b17; /* Rouge foncé */
    z-index: 2;
    transition: all 0.3s linear;
}


/* Triangles bleus pour la deuxième enveloppe */
.envelope:nth-of-type(2n) .envelope__triangle--left {
	border-right: calc(520px - 1px) solid #021A60;
}

.envelope:nth-of-type(2n) .envelope__triangle--right {
	border-left: calc(520px / 2) solid #022070;
}

.envelope:nth-of-type(2n) .envelope__triangle--down {
	border-top: calc(320px / (1.5 * 2) + 1px) solid #011140;
}

/* Triangles vert turquoise pour la troisième enveloppe */
.envelope:nth-of-type(3n) .envelope__triangle--left {
	border-right: calc(520px - 1px) solid #103E40;
}

.envelope:nth-of-type(3n) .envelope__triangle--right {
	border-left: calc(520px / 2) solid #14504D;
}

.envelope:nth-of-type(3n) .envelope__triangle--down {
	border-top: calc(320px / (1.5 * 2) + 1px) solid #0A1E21;
}

/* Cycler les triangles rouge, bleu, vert */
.envelope:nth-of-type(3n + 1) .envelope__triangle--left {
	border-right: calc(520px - 1px) solid #80322b;
}

.envelope:nth-of-type(3n + 1) .envelope__triangle--right {
	border-left: calc(520px / 2) solid #93403c;
}

.envelope:nth-of-type(3n + 1) .envelope__triangle--down {
	border-top: calc(320px / (1.5 * 2) + 1px) solid #691b17;
}

.envelope:nth-of-type(3n + 2) .envelope__triangle--left {
	border-right: calc(520px - 1px) solid #021A60;
}

.envelope:nth-of-type(3n + 2) .envelope__triangle--right {
	border-left: calc(520px / 2) solid #022070;
}

.envelope:nth-of-type(3n + 2) .envelope__triangle--down {
	border-top: calc(320px / (1.5 * 2) + 1px) solid #011140;
}

.envelope:nth-of-type(3n + 3) .envelope__triangle--left {
	border-right: calc(520px - 1px) solid #103E40;
}

.envelope:nth-of-type(3n + 3) .envelope__triangle--right {
	border-left: calc(520px / 2) solid #14504D;
}

.envelope:nth-of-type(3n + 3) .envelope__triangle--down {
	border-top: calc(320px / (1.5 * 2) + 1px) solid #0A1E21;
}

/* Animation d'ouverture */
.envelope.is-open .envelope__triangle--down {
	transform: translate(0px, calc(-320px / (1.5 * 2))) scale(1, -1);
	pointer-events: none;
	z-index: 1;
}

.envelope__letter {
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	width: 90%;
	height: 50%;
	padding: 1em;
	font-size: 0.8em;
	color: #555;
	background-color: #fff;
	box-shadow: 1px 1px 3px 1px #999;
	z-index: 2;
	transition: all 1s linear;
}

.envelope.is-open .envelope__letter {
	transform: translate(0px, calc(-520px / (1.5 * 2)));
	height: calc(520px / 1.5);
	z-index: 2;
}

/* Animation d'agrandissement pour la modal */
.modal-enter-active,
.modal-leave-active {
	transition: all 0.3s ease-in-out;
}

.modal-enter,
.modal-leave-to {
	opacity: 0;
	transform: scale(0.2);
	/* Début de l'animation plus petit */
}

.modal-enter-to {
	opacity: 1;
	transform: scale(1);
	/* Fin de l'animation à taille normale */
}

.fixed>.bg-white {
	width: 50%;
	/* Fixer la largeur à 50% */
	max-width: 50%;
}

.facteur {
	background-image: url(../images/logo.png);
    position: absolute;
    height: 1024px;
    width: 700px;
    left: -255px;
    top: -450px;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 10;
	transform: rotate(20deg);
    transform-origin: center;
}