/* --- index-styles.css --- */

/* 1. COULEUR DE SÉCURITÉ (Comme sur About et Home) */
html {
    background-color: #f4f1ea; /* Le beige qui masque les rebonds sur mobile */
    overflow-x: hidden;
    height: 100%;
}

/* 2. BODY TRANSPARENT & CENTRAGE */
body {
    /* Important : Flexbox pour centrer le logo et le bouton "Entrer" au milieu de l'écran */
    display: flex;
    align-items: center;
    justify-content: center;
    
    min-height: 100vh;
    min-height: 100dvh; /* Support mobile moderne */
    margin: 0;
    
    /* On rend le body transparent pour voir le calque ::before */
    background-color: transparent;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* 3. L'IMAGE DE FOND FIXE (Le calque stable) */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    
    /* Votre image */
    background-image: url('fond-sakuri.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    z-index: -1; /* Derrière tout */
    pointer-events: none;
}

/* 4. LE CONTENEUR CENTRAL */
.container {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    z-index: 1; /* Par-dessus le fond */
}

/* Style spécifique pour le logo de l'index si besoin */
.logo {
    max-width: 350px;
    width: 80vw; /* S'adapte sur mobile */
    height: auto;
}