* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body {
    overflow:hidden;
    font-family:'Playfair Display', serif;
    color: #3B0917;
}

/* FULL SCREEN */
.envelope-screen {
    position:fixed;
    width:100vw;
    height:100vh;
    background:#f5f1ea;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:10;
    transition: opacity 1.5s ease;
}

/* ENVELOPPE */
.envelope {
    position:relative;
    width:100%;
    height:100%;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.2));
    background:
            url("https://www.transparenttextures.com/patterns/paper-fibers.png"),
            linear-gradient(145deg, #e5d6c3, #cbb7a3);
}

/* PAPIER TEXTURE */
.texture {
    background:
            url("https://www.transparenttextures.com/patterns/paper-fibers.png"),
            linear-gradient(145deg, #efe6d8, #d8c7b5);
    background-blend-mode: multiply;
}

/* BASE */
.top {
    position:absolute;
    width:100%;
    height:100%;
    background:
            url("https://www.transparenttextures.com/patterns/paper-fibers.png"),
            linear-gradient(145deg, #efe6d8, #d8c7b5);
}

/* TRIANGLES */
.bottom {
    position:absolute;
    width:100%;
    height:100%;
    background:
            url("https://www.transparenttextures.com/patterns/paper-fibers.png"),
            linear-gradient(145deg, #d8c7b5, #bfae98);
    clip-path:polygon(0 100%, 50% 45%, 100% 100%);
}

.left {
    position:absolute;
    width:100%;
    height:100%;
    background:
            url("https://www.transparenttextures.com/patterns/paper-fibers.png"),
            linear-gradient(145deg, #e5d6c3, #cbb7a3);
    clip-path:polygon(0 0, 50% 45%, 0 100%);
}

.right {
    position:absolute;
    width:100%;
    height:100%;
    background:
            url("https://www.transparenttextures.com/patterns/paper-fibers.png"),
            linear-gradient(145deg, #e5d6c3, #cbb7a3);
    clip-path:polygon(100% 0, 50% 45%, 100% 100%);
}

/* RABAT */
.top {
    position:absolute;
    width:100%;
    height:100%;
    background:
            url("https://www.transparenttextures.com/patterns/paper-fibers.png"),
            linear-gradient(145deg, #d2c1ad, #b8a792);
    clip-path:polygon(0 0, 100% 0, 50% 65%);
    transform-origin:top;
    transition:transform 1.3s cubic-bezier(.77,0,.18,1);
}

/* CIRE */
.seal {
    position:absolute;
    top:60%;
    left:50%;
    transform:translate(-50%, -50%);
    display:flex;
    align-items:center;
    justify-content:center;

     img {
      width: 180px;
    }
}

/* OUVERTURE */
.envelope.open .top {
    transform:rotateX(180deg);
}

.envelope.open .seal {
    opacity:0;
    transition:0.5s;
}

/* DISPARITION */
.envelope-screen.fade {
    opacity:0;
}

/* INVITATION */
.invitation {
    position:absolute;
    width:100%;
    height:100%;
    background:
            url("https://www.transparenttextures.com/patterns/paper-fibers.png"),
            linear-gradient(145deg, #efe6d8, #d8c7b5);
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    transition:opacity 1.5s ease;
}

.invitation.show {
    opacity:1;
}

.content {
    display: flex;
    flex-direction: column;
    gap: 40px;
    text-align:center;
    padding:20px;

}

.body {
    justify-content: center;
    align-items: center;
    display: flex;
}

.coupe {
    width: 100%;
}

h1 {
    font-family:'Great Vibes';
    font-size:3em;
    color: #660F28;
}

.date {
    margin:10px 0;
    font-style:italic;
}

.lieu {
    margin-top:10px;
    font-weight:bold;
}

/* RESPONSIVE */
@media(max-width:1024px){
    .seal {
        width:70px;
        height:70px;
        z-index: 2;
    }

    .seal span {
        font-size:24px;
    }

    .top {
        clip-path: polygon(-80% 0, 180% 0, 50% 65%);
        z-index: 1;
    }

    .left {
        clip-path: polygon(0 0, 55% 55%, 0 100%);
    }

    .right {
        clip-path: polygon(100% 0%, 50% 50%, 100% 100%);
    }

    .bottom {
        clip-path: polygon(-80% 100%, 50% 50%, 180% 100%);
        z-index: 1;
    }
}

/* Conteneur du trait */
.separator {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Les lignes de chaque côté */
.separator::before,
.separator::after {
    content: "";
    flex: 1;
    height: 2px;
    margin: 0 20px;
    background: linear-gradient(to right, transparent, #3B0917, transparent);
    border-radius: 2px;
}

/* Image centrale */
.separator img {
    width: 60px;
    height: auto;
    filter: sepia(80%) contrast(90%);
}