@import url(../../css/main.css);

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #cce7f2; /* Fond de la page en bleu */
    overflow: hidden;
    perspective: 1200px;
}

#scene {
    position: relative;
    border: 10px solid white;
    background-image: url(../images/texture-grenier-fond-porte.jpg);
    width: 600px;
    border-image: url(../images/porte-bordure-haut.svg) repeat;    
    border-image-slice: 4 0;    
    border-image-repeat: repeat;
    cursor: url(../images/cle-porte-curseur.png), pointer;
    background-color: white; /* Fond de la scène en blanc (le cadre) */
    padding: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

#scene::before {
    content: '';
    position: absolute;
    top: -10px; left: -20px; right: -20px; bottom: -10px;
    border: 20px solid white;
    border-image-source: url(../images/porte-bordure-gauche-droite.svg); /* Votre nouvelle image pour les côtés */
    border-image-slice: 0 4;
    border-image-repeat: repeat;
    pointer-events: none;
}

#porte {
    display: flex;
    width: 400px;
    height: 600px;
    margin: auto;
    transform-style: preserve-3d;
    transition: transform 2s;
    padding:10px;
    
}

.battant {
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: relative;
    transition: transform 1.5s ease-in-out;
}

.battant img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#invitation {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-2deg);
    color: #3a2d22;
    background-color: #f7d97c;
    padding: 5px 10px; /* Padding en pixels */
    text-align: center;
    transition: opacity 0.5s ease-in-out;
    font-family: 'Courier New', Courier, monospace;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    white-space: nowrap;
}

#invitation h1 {
    margin: 0;
    font-size: 16px; /* Taille de police en pixels */
    font-weight: normal;
}

/* --- Animation d'ouverture --- */

.battant.gauche {
    transform-origin: left;
}

.battant.droite {
    transform-origin: right;
}

#porte.ouverte .battant.gauche {
    transform: rotateY(-110deg);
}

#porte.ouverte .battant.droite {
    transform: rotateY(110deg);
}

#porte.ouverte ~ #invitation {
    opacity: 0;
}