/* ============================================
   PHELLOGÈNE - FICHIER CSS PRINCIPAL
   ============================================ */

/* Importer les styles de base */
@import url('base.css');

/* Importer les animations */
@import url('animations.css');

/* Importer les sections */
@import url('sections/intro.css');
@import url('sections/perdu.css');
@import url('sections/pensee-brouillee.css');
@import url('sections/dehors.css');
@import url('sections/chemin.css');
@import url('sections/paysage.css');
@import url('sections/retour-chambre.css');
/* ============================================
   MESSAGE MOBILE UNIQUEMENT
   ============================================ */
.mobile-warning {
    display: none;
}

@media screen and (max-width: 1024px) {
    .mobile-warning {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: #f0f0f0;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px;
        text-align: center;
    }

    .mobile-content {
        max-width: 500px;
    }

    .mobile-warning h1 {
        font-family: 'Reenie Beanie', cursive;
        font-size: 3rem;
        margin-bottom: 20px;
        color: #2a2a2a;
    }

    .mobile-warning p {
        font-family: 'Cormorant Garamond', serif;
        font-size: 1.5rem;
        line-height: 1.6;
        color: #333;
    }

    .mobile-icon {
        font-size: 4rem !important;
        margin-top: 30px;
    }

    /* Empêcher le scroll sur le contenu derrière */
    body {
        overflow: hidden;
    }
}