/* ================================
PAGE D'ENTRÉE (/) : une boîte centrée, dans le style du reste du site,
avec les enceintes qui tournent autour (js/noeuds.js)
================================ */

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 2rem 1rem;
    overflow-x: hidden;   /* les enceintes qui sortent de l'écran ne créent pas de défilement */
}

.entree {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    width: min(100%, 680px);
    max-width: calc(100vw - 2rem);
    padding: 2rem clamp(1rem, 5vw, 3.5rem) 1.6rem;
    text-align: center;
    background: rgba(50, 8, 50, 0.93);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 10px 10px 0 rgba(241, 187, 187, 0.5);
}

.entree-sous-titre {
    margin: 0;
    font-size: 0.8rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--rose-clair);
    opacity: 0.8;
}

.entree h1 {
    margin: 0;
    font-family: var(--police-titre);
    font-weight: 400;
    font-size: clamp(3rem, 10vw, 6rem);
    letter-spacing: clamp(4px, 2vw, 14px);
    line-height: 1;
    color: var(--rose);
    text-shadow: #000 3px 2px;
}

.entree-porte {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-decoration: none;
}
.entree-porte img {
    display: block;
    width: min(100%, 400px, 52vh);
    aspect-ratio: 1;
    object-fit: cover;
    margin: 0.5rem auto 0;
    opacity: 0.7;
    clip-path: polygon(23% -12%, 0% 120%, 140% 35%);
    transition: opacity 0.3s, transform 0.3s;
}
.entree-porte:hover img { opacity: 1; transform: scale(1.02); }

/* bouton dans le style du menu */
.entree-bouton {
    margin-top: -1rem;
    padding: 0.6rem 2.5rem;
    font-family: var(--police-titre);
    font-size: 1.2rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--blanc);
    text-shadow: #000 2px 1px;
    background: rgba(241, 187, 187, 0.68);
    border: 1px solid var(--rose);
    transition: background 0.15s, transform 0.15s;
}
.entree-porte:hover .entree-bouton { background: var(--violet-fonce); color: var(--rose); transform: translateY(-2px); }

.entree-en { margin: 0.4rem 0 0; font-size: 0.8rem; font-style: italic; opacity: 0.7; }

@media (max-width: 600px) {
    .entree-sous-titre { letter-spacing: 1px; font-size: 0.7rem; }
}

/* fond propre à la page d'entrée (remplace celui de base.css) */
body::before {
    background-image: url("/assets/glitch/glitch.webp");
    background-size: 75%;
}